From 885c0dc50092d76ca085f63f44aba296cde71da9 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Wed, 29 Mar 2023 23:49:34 +0530
Subject: [PATCH] fix: sh-admin dashboard bugs and UI polish (#56)

---
 .../public/images/youre_lost.svg              |  76 +++++
 .../hoppscotch-sh-admin/src/components.d.ts   |   9 +-
 .../src/components/app/Header.vue             |  82 +++--
 .../src/components/app/Sidebar.vue            | 158 ++++++---
 .../src/components/dashboard/MetricsCard.vue  |  27 ++
 .../src/components/users/InviteModal.vue      |  71 ++++
 .../src/components/users/Table.vue            | 170 ++++++++++
 .../src/composables/usePagedQuery.ts          |   2 +-
 .../src/layouts/default.vue                   |   2 +-
 packages/hoppscotch-sh-admin/src/pages/_.vue  |  56 ++++
 .../src/pages/dashboard.vue                   | 101 ++----
 .../src/pages/users/_id.vue                   | 203 ++++++------
 .../src/pages/users/index.vue                 | 311 ++++--------------
 .../src/pages/users/invited.vue               | 138 ++++----
 14 files changed, 815 insertions(+), 591 deletions(-)
 create mode 100644 packages/hoppscotch-sh-admin/public/images/youre_lost.svg
 create mode 100644 packages/hoppscotch-sh-admin/src/components/dashboard/MetricsCard.vue
 create mode 100644 packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue
 create mode 100644 packages/hoppscotch-sh-admin/src/components/users/Table.vue
 create mode 100644 packages/hoppscotch-sh-admin/src/pages/_.vue

diff --git a/packages/hoppscotch-sh-admin/public/images/youre_lost.svg b/packages/hoppscotch-sh-admin/public/images/youre_lost.svg
new file mode 100644
index 00000000..ea33353f
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/public/images/youre_lost.svg
@@ -0,0 +1,76 @@
+<svg width="148" height="163" viewBox="0 0 148 163" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.1607 15.3833C25.4726 23.8793 7.48238 55.6443 15.9784 86.3324C24.4744 117.02 56.2394 135.011 86.9275 126.515C117.616 118.019 135.606 86.2537 127.11 55.5656C118.614 24.8776 86.8488 6.88731 56.1607 15.3833Z" fill="#1f1f1f" stroke="#525252" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M91.7717 32.1479L92.8659 31.5956C92.9238 31.5796 93.0236 31.4896 92.9916 31.3737L92.9026 30.1513C92.9124 29.9615 92.9961 29.8136 93.1699 29.7655C93.3436 29.7174 93.5495 29.7851 93.5976 29.9588L94.1499 31.053C94.166 31.111 94.2559 31.2108 94.3718 31.1787L95.5943 31.0897C95.784 31.0995 95.9319 31.1833 95.98 31.357C96.0282 31.5308 95.9604 31.7366 95.7867 31.7847L94.6925 32.337C94.6345 32.3531 94.5347 32.4431 94.5668 32.5589L94.6558 33.7814C94.646 33.9712 94.5623 34.1191 94.3885 34.1672C94.2147 34.2153 94.0089 34.1475 93.9608 33.9738L93.4085 32.8796C93.3924 32.8217 93.3024 32.7219 93.1866 32.7539L91.9641 32.843C91.7743 32.8331 91.6264 32.7494 91.5783 32.5756C91.5463 32.4598 91.614 32.254 91.7717 32.1479Z" fill="#1f1f1f"/>
+<path d="M39.2363 38.4401L40.2794 37.9135C40.3347 37.8982 40.4298 37.8124 40.3992 37.702L40.3144 36.5366C40.3237 36.3556 40.4036 36.2146 40.5692 36.1688C40.7349 36.1229 40.9311 36.1875 40.9769 36.3531L41.5035 37.3963C41.5188 37.4515 41.6046 37.5466 41.715 37.516L42.8804 37.4312C43.0614 37.4405 43.2024 37.5204 43.2482 37.686C43.2941 37.8517 43.2295 38.0479 43.0639 38.0938L42.0207 38.6203C41.9655 38.6356 41.8704 38.7214 41.9009 38.8318L41.9858 39.9973C41.9765 40.1782 41.8966 40.3192 41.731 40.3651C41.5653 40.4109 41.3691 40.3463 41.3232 40.1807L40.7967 39.1376C40.7814 39.0823 40.6956 38.9872 40.5852 39.0178L39.4197 39.1026C39.2388 39.0933 39.0978 39.0134 39.0519 38.8478C39.0061 38.6821 39.0707 38.4859 39.2363 38.4401Z" fill="#1f1f1f"/>
+<path d="M76.6054 49.8626L77.448 49.4373C77.4926 49.425 77.5694 49.3557 77.5447 49.2665L77.4762 48.3252C77.4837 48.1791 77.5482 48.0652 77.682 48.0282C77.8158 47.9911 77.9743 48.0433 78.0113 48.1771L78.4366 49.0196C78.449 49.0642 78.5183 49.141 78.6074 49.1163L79.5487 49.0478C79.6949 49.0553 79.8087 49.1198 79.8458 49.2536C79.8828 49.3874 79.8307 49.5459 79.6969 49.5829L78.8544 50.0082C78.8098 50.0206 78.7329 50.0899 78.7576 50.1791L78.8262 51.1203C78.8186 51.2665 78.7541 51.3804 78.6203 51.4174C78.4865 51.4544 78.3281 51.4023 78.291 51.2685L77.8657 50.426C77.8534 50.3814 77.7841 50.3045 77.6949 50.3292L76.7536 50.3978C76.6075 50.3902 76.4936 50.3257 76.4565 50.1919C76.3873 50.1151 76.484 49.9443 76.6054 49.8626Z" fill="#1f1f1f"/>
+<path d="M43.4125 109.199L44.9251 108.436C45.0051 108.414 45.1431 108.289 45.0988 108.129L44.9757 106.439C44.9893 106.177 45.1051 105.972 45.3453 105.906C45.5855 105.839 45.87 105.933 45.9365 106.173L46.7 107.686C46.7222 107.766 46.8466 107.904 47.0067 107.86L48.6967 107.736C48.959 107.75 49.1635 107.866 49.23 108.106C49.2965 108.346 49.2028 108.631 48.9627 108.697L47.45 109.461C47.37 109.483 47.232 109.607 47.2763 109.767L47.3994 111.457C47.3858 111.72 47.27 111.924 47.0299 111.991C46.7897 112.057 46.5051 111.964 46.4387 111.723L45.6751 110.211C45.6529 110.131 45.5285 109.993 45.3684 110.037L43.6785 110.16C43.4161 110.147 43.2116 110.031 43.1451 109.791C43.0787 109.55 43.1944 109.346 43.4125 109.199Z" fill="#1f1f1f"/>
+<path d="M120.156 69.1737L120.948 67.985C120.998 67.9355 121.047 67.7869 120.948 67.6878L120.156 66.4991C120.057 66.301 120.057 66.1029 120.205 65.9543C120.354 65.8057 120.601 65.7562 120.75 65.9048L121.939 66.6973C121.988 66.7468 122.137 66.7963 122.236 66.6973L123.425 65.9048C123.623 65.8057 123.821 65.8057 123.969 65.9543C124.118 66.1029 124.168 66.3506 124.019 66.4991L123.227 67.6878C123.177 67.7374 123.127 67.886 123.227 67.985L124.019 69.1737C124.118 69.3718 124.118 69.5699 123.969 69.7185C123.821 69.8671 123.573 69.9167 123.425 69.7681L122.236 68.9756C122.186 68.9261 122.038 68.8765 121.939 68.9756L120.75 69.7681C120.552 69.8671 120.354 69.8671 120.205 69.7185C120.057 69.57 120.007 69.3223 120.156 69.1737Z" fill="#1f1f1f"/>
+<path d="M43.5537 60.6946L44.5678 58.6607C44.6361 58.5727 44.6847 58.3283 44.5086 58.1917L43.0212 56.4733C42.8254 56.1803 42.786 55.8676 42.9909 55.6035C43.1958 55.3394 43.5768 55.2119 43.8409 55.4169L45.8749 56.431C45.9629 56.4993 46.2073 56.5479 46.3439 56.3718L48.0623 54.8844C48.3553 54.6886 48.6679 54.6492 48.932 54.8541C49.1961 55.059 49.3236 55.44 49.1187 55.7041L48.1046 57.7381C48.0363 57.8261 47.9877 58.0705 48.1638 58.2071L49.6512 59.9255C49.847 60.2184 49.8864 60.5311 49.6815 60.7952C49.4765 61.0594 49.0956 61.1868 48.8314 60.9819L46.7975 59.9678C46.7095 59.8995 46.4651 59.8509 46.3285 60.0269L44.6101 61.5144C44.3171 61.7102 44.0044 61.7496 43.7403 61.5447C43.4762 61.3397 43.3488 60.9587 43.5537 60.6946Z" fill="#1f1f1f"/>
+<path d="M63.753 120.774L65.1738 120.056C65.249 120.036 65.3785 119.919 65.3369 119.768L65.2213 118.181C65.2341 117.935 65.3428 117.743 65.5684 117.68C65.794 117.618 66.0613 117.706 66.1237 117.931L66.8409 119.352C66.8617 119.427 66.9786 119.557 67.129 119.515L68.7163 119.4C68.9627 119.412 69.1547 119.521 69.2172 119.747C69.2796 119.972 69.1917 120.239 68.9661 120.302L67.5454 121.019C67.4702 121.04 67.3406 121.157 67.3822 121.307L67.4978 122.894C67.4851 123.141 67.3763 123.333 67.1507 123.395C66.9251 123.458 66.6579 123.37 66.5954 123.144L65.8782 121.724C65.8574 121.648 65.7406 121.519 65.5902 121.56L64.0029 121.676C63.7564 121.663 63.5644 121.554 63.5019 121.329C63.4395 121.103 63.5274 120.836 63.753 120.774Z" fill="#1f1f1f"/>
+<path d="M36.4421 84.4297L37.4304 82.6771C37.4948 82.6024 37.5488 82.3885 37.3992 82.2598L36.1616 80.6734C36.0017 80.4056 35.9809 80.1274 36.174 79.9031C36.3671 79.6788 36.7097 79.5833 36.934 79.7764L38.6865 80.7647C38.7613 80.829 38.9752 80.883 39.1039 80.7335L40.6902 79.4958C40.9581 79.3359 41.2363 79.3152 41.4606 79.5082C41.6848 79.7013 41.7804 80.0439 41.5873 80.2682L40.599 82.0208C40.5346 82.0955 40.4807 82.3094 40.6302 82.4381L41.8678 84.0244C42.0277 84.2923 42.0485 84.5705 41.8554 84.7948C41.6623 85.0191 41.3197 85.1146 41.0955 84.9215L39.3429 83.9332C39.2681 83.8689 39.0543 83.8149 38.9255 83.9644L37.3392 85.2021C37.0714 85.362 36.7931 85.3828 36.5689 85.1897C36.3446 84.9966 36.2491 84.654 36.4421 84.4297Z" fill="#1f1f1f"/>
+<path d="M61.2319 29.7607L63.0868 28.8648C63.2644 28.8157 63.304 28.6135 63.2794 28.5247L63.0938 26.4732C63.1088 26.1823 63.3014 25.8422 63.5678 25.7684C63.8341 25.6947 64.1496 25.7985 64.3367 26.1291L65.2326 27.984C65.2818 28.1615 65.4839 28.2012 65.5727 28.1766L67.6242 27.991C67.9152 28.006 68.2552 28.1986 68.329 28.465C68.4027 28.7313 68.2989 29.0468 67.9684 29.2339L66.1135 30.1298C65.9359 30.179 65.8963 30.3811 65.9208 30.4699L66.1065 32.5214C66.0914 32.8124 65.8988 33.1524 65.6325 33.2262C65.3661 33.2999 65.0506 33.1961 64.8635 32.8655L63.9676 31.0106C63.9185 30.8331 63.7163 30.7935 63.6275 30.818L61.576 31.0037C61.2851 30.9886 60.945 30.796 60.8713 30.5296C60.7729 30.1745 60.8768 29.859 61.2319 29.7607Z" fill="#1f1f1f"/>
+<path d="M104.567 49.7554L105.499 49.3054C105.588 49.2807 105.608 49.1792 105.596 49.1346L105.503 48.1041C105.51 47.9579 105.607 47.7871 105.741 47.7501C105.875 47.713 106.033 47.7652 106.127 47.9312L106.577 48.8629C106.602 48.9521 106.703 48.972 106.748 48.9597L107.778 48.8665C107.924 48.874 108.095 48.9708 108.132 49.1045C108.169 49.2383 108.117 49.3968 107.951 49.4908L107.019 49.9408C106.93 49.9655 106.91 50.067 106.923 50.1116L107.016 51.1421C107.008 51.2882 106.912 51.459 106.778 51.4961C106.644 51.5331 106.486 51.481 106.392 51.3149L105.942 50.3832C105.917 50.294 105.815 50.2741 105.771 50.2865L104.74 50.3797C104.594 50.3722 104.423 50.2754 104.386 50.1416C104.349 50.0078 104.446 49.837 104.567 49.7554Z" fill="#1f1f1f"/>
+<path d="M96.2883 107.626L98.3879 106.612C98.5889 106.557 98.6338 106.328 98.606 106.227L98.3959 103.905C98.4129 103.576 98.6309 103.191 98.9324 103.107C99.2339 103.024 99.591 103.141 99.8028 103.516L100.817 105.615C100.872 105.816 101.101 105.861 101.202 105.833L103.524 105.623C103.853 105.64 104.238 105.858 104.322 106.16C104.405 106.461 104.288 106.818 103.913 107.03L101.814 108.044C101.613 108.1 101.568 108.328 101.596 108.429L101.806 110.751C101.789 111.08 101.571 111.465 101.269 111.549C100.968 111.632 100.611 111.515 100.399 111.141L99.385 109.041C99.3293 108.84 99.1005 108.795 99 108.823L96.6778 109.033C96.3485 109.016 95.9636 108.798 95.8801 108.497C95.7967 108.195 95.9142 107.838 96.2883 107.626Z" fill="#1f1f1f"/>
+<path d="M106.127 86.1344L107.636 85.4056C107.781 85.3656 107.813 85.2012 107.793 85.129L107.642 83.4601C107.654 83.2234 107.811 82.9468 108.028 82.8868C108.244 82.8268 108.501 82.9112 108.653 83.1801L109.382 84.6891C109.422 84.8335 109.586 84.8658 109.659 84.8458L111.328 84.6948C111.564 84.707 111.841 84.8637 111.901 85.0804C111.961 85.297 111.876 85.5537 111.608 85.7059L110.099 86.4347C109.954 86.4747 109.922 86.6391 109.942 86.7114L110.093 88.3803C110.081 88.6169 109.924 88.8936 109.707 88.9536C109.491 89.0136 109.234 88.9291 109.082 88.6602L108.353 87.1512C108.313 87.0068 108.149 86.9746 108.076 86.9946L106.407 87.1456C106.171 87.1333 105.894 86.9766 105.834 86.76C105.774 86.5433 105.931 86.2666 106.127 86.1344Z" fill="#1f1f1f"/>
+<path d="M22.194 64.0334L24.4316 63.8309C24.6253 63.7773 24.7758 63.9442 24.8026 64.041L25.7797 66.0642C25.957 66.3279 26.3279 66.538 26.6184 66.4575C26.9089 66.3771 27.1458 66.103 27.1354 65.6888L26.933 63.4512C26.8794 63.2575 27.0462 63.1071 27.143 63.0803L29.1662 62.1031C29.4299 61.9259 29.64 61.5549 29.5596 61.2644C29.4791 60.9739 29.205 60.737 28.7909 60.7474L26.5532 60.9499C26.3596 61.0035 26.2091 60.8366 26.1823 60.7398L25.2052 58.7166C25.0279 58.4529 24.657 58.2428 24.3665 58.3233C24.0759 58.4037 23.8391 58.6778 23.8495 59.092L24.0519 61.3296C24.1055 61.5233 23.9387 61.6737 23.8418 61.7005L21.8187 62.6777C21.555 62.8549 21.3449 63.2259 21.4253 63.5164C21.5326 63.9037 21.9035 64.1138 22.194 64.0334Z" fill="#1f1f1f"/>
+<path d="M10.2315 108.566L13.3953 108.28C13.6692 108.204 13.8819 108.44 13.9198 108.577L15.3014 111.438C15.552 111.811 16.0765 112.108 16.4872 111.994C16.898 111.88 17.2329 111.493 17.2182 110.907L16.932 107.743C16.8562 107.469 17.0921 107.257 17.229 107.219L20.0896 105.837C20.4624 105.587 20.7595 105.062 20.6458 104.651C20.532 104.241 20.1445 103.906 19.5589 103.92L16.3951 104.207C16.1212 104.282 15.9085 104.046 15.8706 103.91L14.489 101.049C14.2384 100.676 13.7139 100.379 13.3032 100.493C12.8924 100.606 12.5575 100.994 12.5722 101.58L12.8584 104.743C12.9342 105.017 12.6983 105.23 12.5614 105.268L9.7008 106.65C9.32795 106.9 9.03093 107.425 9.14465 107.835C9.29627 108.383 9.82073 108.68 10.2315 108.566Z" fill="#1f1f1f"/>
+<path d="M15.485 28.2522L18.4022 27.9883C18.6546 27.9184 18.8508 28.1359 18.8857 28.2622L20.1596 30.8997C20.3907 31.2435 20.8743 31.5173 21.253 31.4125C21.6317 31.3076 21.9406 30.9503 21.927 30.4104L21.6631 27.4932C21.5932 27.2408 21.8107 27.0446 21.9369 27.0097L24.5745 25.7358C24.9183 25.5047 25.1921 25.0211 25.0873 24.6424C24.9824 24.2637 24.6251 23.9548 24.0852 23.9684L21.168 24.2323C20.9155 24.3022 20.7194 24.0847 20.6845 23.9585L19.4106 21.3209C19.1795 20.9772 18.6959 20.7033 18.3172 20.8081C17.9385 20.913 17.6296 21.2703 17.6432 21.8102L17.9071 24.7274C17.977 24.9799 17.7595 25.176 17.6333 25.2109L14.9957 26.4848C14.6519 26.7159 14.3781 27.1995 14.4829 27.5782C14.6227 28.0832 15.1063 28.3571 15.485 28.2522Z" fill="#1f1f1f"/>
+<path d="M131.048 82.8904L135.025 84.3075C135.397 84.3686 135.522 84.7717 135.492 84.958L135.565 89.1786C135.66 89.768 136.127 90.4186 136.686 90.5102C137.245 90.6018 137.865 90.3208 138.173 89.6062L139.59 85.6299C139.651 85.2573 140.055 85.1321 140.241 85.1627L144.462 85.0895C145.051 84.9948 145.701 84.5275 145.793 83.9687C145.885 83.4098 145.604 82.7898 144.889 82.4813L140.913 81.0642C140.54 81.0031 140.415 80.6 140.446 80.4137L140.372 76.1931C140.278 75.6037 139.81 74.9532 139.252 74.8615C138.693 74.7699 138.073 75.0509 137.764 75.7655L136.347 79.7418C136.286 80.1144 135.883 80.2396 135.697 80.209L131.476 80.2823C130.887 80.3769 130.236 80.8442 130.144 81.4031C130.022 82.1483 130.489 82.7988 131.048 82.8904Z" fill="#1f1f1f"/>
+<path d="M47.654 42.7536C47.2846 42.8559 47.068 43.2383 47.1703 43.6077C47.2726 43.9771 47.655 44.1937 48.0244 44.0914C48.3939 43.9892 48.6104 43.6068 48.5082 43.2373C48.4059 42.8679 48.0235 42.6513 47.654 42.7536Z" fill="#1f1f1f"/>
+<path d="M71.5437 60.1943C71.1743 60.2965 70.9577 60.6789 71.06 61.0484C71.1622 61.4178 71.5446 61.6344 71.9141 61.5321C72.2835 61.4298 72.5001 61.0474 72.3978 60.678C72.2955 60.3086 71.9131 60.092 71.5437 60.1943Z" fill="#1f1f1f"/>
+<path d="M87.0624 32.0586C86.8667 32.3882 86.9753 32.8141 87.3049 33.0098C87.6345 33.2054 88.0603 33.0969 88.256 32.7672C88.4517 32.4376 88.3431 32.0118 88.0135 31.8161C87.6839 31.6204 87.2581 31.729 87.0624 32.0586Z" fill="#1f1f1f"/>
+<path d="M64.6673 18.7561C64.4717 19.0857 64.5802 19.5116 64.9099 19.7073C65.2395 19.9029 65.6653 19.7944 65.861 19.4648C66.0567 19.1351 65.9481 18.7093 65.6185 18.5136C65.2889 18.3179 64.863 18.4265 64.6673 18.7561Z" fill="#1f1f1f"/>
+<path d="M24.7157 49.313C24.52 49.6426 24.6286 50.0685 24.9582 50.2641C25.2878 50.4598 25.7137 50.3513 25.9094 50.0216C26.105 49.692 25.9965 49.2662 25.6668 49.0705C25.3372 48.8748 24.9114 48.9834 24.7157 49.313Z" fill="#1f1f1f"/>
+<path d="M27.6244 76.6072C27.4287 76.9368 27.5373 77.3627 27.8669 77.5583C28.1965 77.754 28.6224 77.6454 28.818 77.3158C29.0137 76.9862 28.9052 76.5604 28.5755 76.3647C28.2459 76.169 27.8201 76.2776 27.6244 76.6072Z" fill="#1f1f1f"/>
+<path d="M35.1957 103.887C35 104.217 35.1086 104.642 35.4382 104.838C35.7678 105.034 36.1936 104.925 36.3893 104.596C36.585 104.266 36.4764 103.84 36.1468 103.644C35.8172 103.449 35.3914 103.557 35.1957 103.887Z" fill="#1f1f1f"/>
+<path d="M53.5052 117.827C53.3096 118.157 53.4181 118.583 53.7478 118.779C54.0774 118.974 54.5032 118.866 54.6989 118.536C54.8946 118.206 54.786 117.781 54.4564 117.585C54.1268 117.389 53.7009 117.498 53.5052 117.827Z" fill="#1f1f1f"/>
+<path d="M86.9999 118.051C86.8042 118.381 86.9128 118.807 87.2424 119.002C87.572 119.198 87.9978 119.089 88.1935 118.76C88.3892 118.43 88.2806 118.004 87.951 117.809C87.6214 117.613 87.1956 117.721 86.9999 118.051Z" fill="#1f1f1f"/>
+<path d="M110.305 97.2576C110.109 97.5872 110.217 98.013 110.547 98.2087C110.877 98.4044 111.303 98.2958 111.498 97.9662C111.694 97.6366 111.585 97.2108 111.256 97.0151C110.926 96.8194 110.5 96.928 110.305 97.2576Z" fill="#1f1f1f"/>
+<path d="M122.725 74.7053C122.53 75.035 122.638 75.4608 122.968 75.6565C123.298 75.8522 123.723 75.7436 123.919 75.414C124.115 75.0843 124.006 74.6585 123.677 74.4628C123.347 74.2671 122.921 74.3757 122.725 74.7053Z" fill="#1f1f1f"/>
+<path d="M108.7 40.0772C108.504 40.4068 108.613 40.8326 108.943 41.0283C109.272 41.224 109.698 41.1154 109.894 40.7858C110.089 40.4562 109.981 40.0303 109.651 39.8346C109.322 39.639 108.896 39.7475 108.7 40.0772Z" fill="#1f1f1f"/>
+<path d="M106.348 78.3655L112.645 73.4041L110.728 70.8971L104.431 75.8585L106.348 78.3655Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M146.37 58.2505L134.023 42.0017L104.475 65.4607L116.823 81.7095L146.37 58.2505Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M124.767 75.0697L112.405 58.7385" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M131.697 69.8236L119.335 53.4924" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M138.628 64.5775L126.266 48.2463" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M138.32 48.4403L108.206 71.2356" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M143.052 54.6918L112.938 77.4871" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M113.433 102.184C111.233 103.85 108.107 103.414 106.438 101.209L103.672 97.5551C103.535 97.3739 103.572 97.1089 103.752 96.972L111.075 91.4293C111.256 91.2924 111.521 91.3294 111.658 91.5106L114.424 95.1646C116.062 97.3919 115.603 100.542 113.433 102.184Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M90.6043 86.1563L84.3071 91.1177L86.2238 93.6246L92.521 88.6632L90.6043 86.1563Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M62.943 122.491L50.5952 106.242L80.1426 82.7835L92.4905 99.0323L62.943 122.491Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M83.7494 106.361L71.3877 90.0295" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M76.8183 111.607L64.4565 95.2756" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M69.8881 116.853L57.5264 100.522" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M54.5472 112.295L84.2392 88.6205" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M59.2791 118.546L88.9711 94.8715" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M96.117 64.6554L81.9844 75.353L101.414 101.022L101.437 101.052C101.437 101.052 101.437 101.052 101.46 101.082C102.267 102.086 106.048 100.507 109.936 97.5641C113.823 94.6217 116.34 91.4342 115.623 90.3618C115.623 90.3618 115.623 90.3618 115.6 90.3316L115.577 90.3014L96.1472 64.6326L96.117 64.6554Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M103.089 73.8662L108.484 80.9931L108.507 81.0233L108.529 81.0535C109.276 82.1031 106.73 85.3134 102.842 88.2558C98.9552 91.1983 95.2041 92.7551 94.3666 91.7739L94.3438 91.7437L94.3209 91.7135L88.9263 84.5867C89.7336 85.5906 93.5148 84.011 97.402 81.0686C101.289 78.1262 103.813 74.8856 103.089 73.8662Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M97.3668 52.3623C100.626 56.6245 97.1992 64.8705 89.702 70.7763C82.2047 76.6822 73.4525 78.0302 70.1932 73.768C70.1735 73.7421 70.1537 73.7163 70.1339 73.6905C70.1142 73.6646 70.0747 73.613 70.0549 73.5871C69.0398 71.8619 74.1021 65.8873 81.4728 60.0811C88.8436 54.275 95.8219 50.8061 97.1969 52.2064C97.2166 52.2323 97.2562 52.2839 97.2759 52.3098C97.3075 52.2848 97.3273 52.3107 97.3668 52.3623Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M96.7129 52.14L96.7323 52.1651C97.089 52.69 96.7938 53.7221 95.9555 55.0165C94.2672 57.6545 90.4412 61.5148 85.5679 65.3075C80.6946 69.1002 75.9845 71.8831 73.0478 72.8446C71.5892 73.3378 70.5185 73.3686 70.0998 72.892L70.0804 72.867C70.061 72.842 70.0416 72.8169 70.0222 72.7919C69.0259 71.1198 73.9931 65.3282 81.2254 59.6995C88.4578 54.0709 95.3054 50.7077 96.6548 52.0649C96.6742 52.09 96.6935 52.115 96.7129 52.14Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M95.9967 55.2585L96.0159 55.2833C94.3369 57.8956 90.5319 61.7185 85.6852 65.4745C80.8386 69.2304 76.1543 71.9864 73.2336 72.9386L73.2143 72.9139C73.195 72.8891 73.1757 72.8643 73.1757 72.8643C72.3274 71.4555 76.5804 66.4909 82.7545 61.7062C88.9594 56.8977 94.8011 54.0394 95.9581 55.2089C95.9581 55.2089 95.9774 55.2337 95.9967 55.2585Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M84.8829 61.2183C84.9771 61.4173 84.3981 62.1113 83.5747 62.7728C82.7169 63.4618 81.9237 63.8702 81.7737 63.6702L77.0693 56.0049L78.6818 54.7096L84.84 61.1612L84.8829 61.2183Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M78.2283 55.6796C79.2373 54.8746 79.5446 53.5456 78.9146 52.7111C78.2846 51.8766 76.956 51.8526 75.947 52.6576C74.9381 53.4625 74.6308 54.7915 75.2608 55.626C75.8907 56.4605 77.2194 56.4845 78.2283 55.6796Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M36.2208 32.2775C35.9844 33.8534 34.9601 36.9262 33.148 37.399C33.0692 37.399 32.9904 37.399 32.9116 37.4778C31.1782 37.7141 29.2084 36.5323 27.9477 35.6656C27.3174 35.1928 26.6871 34.6413 26.1355 34.0897C25.8992 33.8534 25.584 33.5382 25.3476 33.3018C23.5354 31.332 22.1172 28.8895 21.2505 26.2894C21.0929 25.7379 20.9353 25.1863 21.0141 24.6348C21.0141 24.4772 21.0929 24.3984 21.0929 24.3196C21.2505 23.9257 21.5657 23.5317 22.0384 23.4529C22.4324 23.3741 22.7475 23.5317 23.1415 23.6105C23.5354 23.7681 23.8506 23.9257 24.2446 24.1621C23.3779 23.1378 23.1415 21.4044 23.1415 20.1437C23.1415 20.0649 23.1415 19.9073 23.2203 19.9073C23.2991 19.8285 23.5354 19.9073 23.6142 19.9861C24.8749 20.9316 24.8749 22.665 25.4264 24.0833C25.4264 23.059 25.5052 22.0347 25.5052 21.0104C25.5052 20.3013 25.584 19.4346 26.1355 18.9618C26.2143 18.8831 26.2931 18.8831 26.3719 18.8831C26.5295 18.8831 26.6083 19.0406 26.6871 19.1194C27.6326 20.774 27.081 22.8226 27.2386 24.7136C27.3174 25.4227 27.3962 26.1318 27.5538 26.841C27.6326 27.1561 27.7902 27.8652 27.9477 28.5744C28.1053 28.8895 28.2629 29.2047 28.4993 29.5199C28.5781 29.6774 28.7357 29.835 28.8932 29.9138C29.1296 30.1502 29.4448 30.3866 29.7599 30.6229C30.3903 30.9381 31.0206 31.1745 31.7297 31.332C32.9904 31.5684 34.251 31.5684 35.5117 31.6472C35.7481 31.6472 35.9844 31.726 36.142 31.8836C36.2208 32.0412 36.2208 32.12 36.2208 32.2775Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52.7667 58.3572C51.1121 58.3572 49.3787 57.8056 48.118 57.0177C45.6755 55.4419 44.1785 53.0781 42.7603 50.9508L45.5179 49.1386C46.7786 51.0296 48.0393 53.0781 49.8515 54.1812C51.2697 55.1267 53.5546 55.4419 54.8153 54.3388C56.3911 52.9206 55.9972 50.2417 55.3668 48.2719C54.5789 45.8294 53.0819 43.702 51.2697 42.3626L53.2395 39.7625C55.682 41.5746 57.573 44.2535 58.5185 47.3264C59.8579 51.5023 59.3852 54.8116 57.0214 56.8601C55.8396 57.8844 54.2638 58.3572 52.7667 58.3572Z" fill="#737373"/>
+<path d="M56.155 32.1987C56.2338 33.3806 55.8399 34.5625 55.3671 35.7443C53.5549 40.4718 51.6639 45.1992 49.4578 49.7691C48.985 50.6358 48.5911 51.5813 48.1183 52.448C47.488 53.7087 46.7001 55.1269 45.2819 55.4421C44.1 55.6785 42.9969 55.1269 41.9726 54.5754C41.6575 54.4178 41.3423 54.1814 41.1847 53.8663C41.0271 53.5511 41.1059 53.1571 41.1847 52.842C42.1302 48.1145 43.9424 43.7022 45.7546 39.2111C46.6213 37.005 47.5668 34.72 48.2759 32.4351C48.8275 30.8593 49.2214 28.8107 51.27 28.6531C53.161 28.5743 55.9975 30.0714 56.155 32.1987Z" fill="#737373"/>
+<path d="M34.1721 46.3021C34.1721 46.4596 34.1721 46.5384 34.1721 46.696C34.0933 47.7203 33.8569 48.6658 33.3054 49.5325C32.6751 50.478 31.7296 51.2659 30.6265 51.5023C30.3901 51.5811 30.1538 51.5811 29.9174 51.5811C28.8931 51.6599 27.8688 51.3447 26.9233 50.9507C25.7415 50.478 24.5596 49.9264 23.2201 49.8477C22.511 49.7689 21.8019 49.8477 21.0928 50.0052C20.6988 50.084 20.3837 50.2416 19.9897 50.3204C19.5957 50.478 19.2018 50.6356 18.8078 50.7932C17.4684 51.4235 16.1289 52.2902 14.7895 52.8417C13.6864 53.3145 12.347 53.5508 11.4015 52.8417C10.9287 52.5266 10.6924 51.975 10.456 51.5023C9.11653 48.981 7.93466 46.4596 6.7528 43.8595C6.67401 43.7807 6.59521 43.6232 6.59521 43.4656C6.59521 43.0716 7.06796 42.7565 7.38313 42.5989C7.46192 42.5201 7.54071 42.5201 7.6195 42.4413C8.4862 42.0473 9.27411 41.7322 10.2196 41.5746C11.2439 41.4958 12.347 41.6534 13.0561 42.3625C13.5288 42.8352 13.844 43.3868 14.1592 44.0171C14.4743 44.7262 14.8683 45.4354 15.1834 46.1445C16.1289 45.3566 17.0744 44.5687 18.0987 43.8595C18.4139 43.6232 18.729 43.4656 19.0442 43.308C19.5957 42.9928 20.2261 42.6777 20.8564 42.5201C21.8807 42.1261 22.9838 41.9685 24.0868 41.8898C24.6384 41.811 25.1899 41.7322 25.7415 41.811C26.3718 41.811 27.0021 41.9685 27.5536 42.0473C29.0507 42.3625 30.6265 42.6777 32.1235 42.9928L30.4689 42.8353C31.8084 43.1504 33.3842 43.6232 33.9357 44.8838C34.1721 45.2778 34.1721 45.8293 34.1721 46.3021Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.3416 42.5203C27.7901 44.6476 28.2628 46.9326 29.6023 48.7448C29.6811 48.8236 29.7599 48.9811 29.9175 48.9024C29.9962 48.9024 29.9962 48.8236 30.075 48.7448C30.3114 48.1932 30.3902 47.5629 30.469 47.0114C30.6266 45.6719 31.0993 43.5446 30.6266 42.2051C30.075 40.9445 28.578 41.496 28.3416 42.5203Z" fill="#737373"/>
+<path d="M38.1115 27.3921C37.4812 28.2588 36.6933 28.9679 35.9842 29.7558C31.8082 34.2469 29.8385 40.4714 28.6566 46.5383C28.3414 48.1141 28.1839 49.8475 29.1294 51.0294C29.6021 51.5809 30.2324 51.9749 30.8628 52.2901C31.887 52.8416 32.8325 53.3931 33.8568 53.9447C35.0387 54.575 36.2993 55.2841 37.6388 55.3629C39.2146 55.4417 40.7904 54.6538 41.9723 53.5507C43.1542 52.4476 43.9421 51.0294 44.73 49.6112C46.6998 45.9868 48.512 42.2836 50.0878 38.5016C50.5605 37.3985 51.0333 36.2167 51.1909 35.0348C51.4272 33.3014 51.0333 31.568 50.7181 29.9134C50.6393 29.5194 50.5605 29.0467 50.2454 28.7315C49.8514 28.3376 49.2211 28.3376 48.7483 28.4164C45.2815 28.5739 41.7359 28.8891 38.4267 28.1012C37.7176 27.9436 36.9297 27.7072 36.5357 27.0769" fill="#1f1f1f"/>
+<path d="M38.1115 27.3921C37.4812 28.2588 36.6933 28.9679 35.9842 29.7558C31.8082 34.2469 29.8385 40.4714 28.6566 46.5383C28.3414 48.1141 28.1839 49.8475 29.1294 51.0294C29.6021 51.5809 30.2324 51.9749 30.8628 52.2901C31.887 52.8416 32.8325 53.3931 33.8568 53.9447C35.0387 54.575 36.2993 55.2841 37.6388 55.3629C39.2146 55.4417 40.7904 54.6538 41.9723 53.5507C43.1542 52.4476 43.9421 51.0294 44.73 49.6112C46.6998 45.9868 48.512 42.2836 50.0878 38.5016C50.5605 37.3985 51.0333 36.2167 51.1909 35.0348C51.4272 33.3014 51.0333 31.568 50.7181 29.9134C50.6393 29.5194 50.5605 29.0467 50.2454 28.7315C49.8514 28.3376 49.2211 28.3376 48.7483 28.4164C45.2815 28.5739 41.7359 28.8891 38.4267 28.1012C37.7176 27.9436 36.9297 27.7072 36.5357 27.0769" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.0927 50.084C20.6987 50.1628 20.3836 50.3203 19.9896 50.3991C19.9108 49.2961 19.7532 48.0354 19.4381 46.8535C19.1229 45.8292 18.729 44.8838 18.0986 43.9383C18.4138 43.7019 18.729 43.5443 19.0441 43.3867C19.6745 44.411 20.1472 45.4353 20.4624 46.5384C20.7775 47.7202 21.0139 48.9809 21.0927 50.084Z" fill="#737373"/>
+<path d="M31.8082 48.5083C31.493 49.2962 31.6506 48.2719 31.5718 49.2174C31.5718 50.0841 31.8081 50.9508 32.2809 51.7387C33.2264 53.0782 34.881 53.8661 36.4568 54.4176C37.8751 54.8904 39.3721 55.1267 40.7903 54.4176C42.5237 53.5509 43.8632 51.5023 43.7056 49.5326C43.548 46.9325 40.4752 45.593 38.1902 45.3566C35.3537 45.0415 33.9355 46.0658 31.7294 47.7204V48.5083H31.8082Z" fill="#737373"/>
+<path d="M53.7908 23.5314C53.7908 23.6102 53.712 23.7677 53.712 23.8465C53.3181 25.5799 52.8453 27.2346 52.6877 29.0467C52.6089 29.8347 52.7665 31.2529 51.9786 31.8044C51.3483 32.1984 50.2452 31.962 49.5361 31.962C47.3299 31.8044 45.2026 31.4105 42.9176 31.4105C42.7601 31.4105 42.6025 31.4105 42.3661 31.4105C41.5782 31.3317 40.8691 31.0165 40.2387 30.6226C39.372 30.2286 38.5841 29.7559 37.7174 29.4407C37.0083 29.2043 36.2204 29.0467 35.8264 28.4164C35.3537 27.7861 35.3537 26.9982 35.2749 26.2891C35.0385 23.9253 35.1173 21.404 35.7477 19.1191C36.1416 17.7008 36.9295 16.2826 38.1114 15.2583C40.7115 12.8946 44.8874 12.4218 48.1179 13.9976C50.4816 15.1795 52.5302 17.2281 53.4757 19.7494C53.8696 20.8525 54.0272 22.1919 53.7908 23.5314Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M53.7909 23.5315C53.7909 23.6103 53.7121 23.7679 53.7121 23.8466C53.3182 25.5801 52.8454 27.2347 52.6878 29.0469C52.6091 29.8348 52.7666 31.253 51.9787 31.8046C51.3484 32.1985 50.2453 31.9621 49.5362 31.9621C47.33 31.8046 45.2027 31.4106 42.9177 31.4106C42.7602 31.4106 42.6026 31.4106 42.3662 31.4106C43.3117 31.0166 44.336 31.0166 45.3603 30.8591C48.5907 30.3075 51.4272 28.0226 52.6878 25.0285C53.0818 24.083 53.3182 23.0587 53.397 22.0345C53.4758 21.2465 53.4758 20.4586 53.3182 19.7495C53.8697 20.8526 54.0273 22.192 53.7909 23.5315Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.6996 30.0716C45.8329 30.8595 44.8086 31.4111 43.7055 31.4111C41.8146 31.4111 39.8448 31.0171 38.1114 30.1504C37.5598 29.8353 37.0871 29.5201 36.6143 29.2049C36.378 28.9686 36.0628 28.7322 35.9052 28.4958C35.3537 27.8655 35.0385 27.1564 34.8809 26.2897C34.4082 24.4775 34.7234 22.2713 35.3537 20.5379C36.0628 18.7257 37.1659 18.0166 39.0569 17.9378C40.9479 17.7802 43.154 18.4105 44.9662 19.2772C45.045 19.356 45.1238 19.356 45.2026 19.4348C45.9905 19.8288 46.6996 20.3015 47.2511 20.8531C49.93 23.2956 49.2209 27.7079 46.6996 30.0716Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42.5238 50.8722C42.5238 50.951 42.5238 50.951 42.5238 51.0298C42.5238 51.4238 42.445 51.7389 42.2874 52.0541C41.7359 53.5511 40.1601 54.4966 38.5843 54.9694C37.0084 55.4421 35.3538 55.5209 33.8568 55.9936C32.5961 56.3876 31.3355 56.9391 30.39 57.8058C30.1536 58.0422 29.9172 58.1998 29.7597 58.4362C29.7597 58.515 29.6809 58.515 29.6809 58.5938C27.9475 60.7211 27.4747 63.794 25.4261 65.685C25.2686 65.8425 25.111 65.9213 24.9534 66.0001C24.7958 66.0001 24.6382 65.9213 24.4807 65.9213C21.5654 64.6607 18.8865 63.0848 16.2076 61.4302C15.8136 61.1939 15.3409 60.8787 15.1045 60.4847C14.9469 60.1696 14.9469 59.8544 15.1045 59.5392C15.4985 58.3574 17.2319 56.9391 18.0198 56.624C18.8865 56.3088 19.9108 56.3876 20.7775 56.7028C21.6442 57.0179 22.5109 57.5695 23.22 58.121C23.3776 57.0179 23.6927 55.8361 24.1655 54.8118C24.3231 54.4966 24.4807 54.1815 24.6382 53.8663C24.7958 53.5511 25.0322 53.3147 25.1898 52.9996C25.6625 52.2905 26.2929 51.6601 26.9232 51.1086C27.7899 50.3207 28.7354 49.6116 29.6809 48.9812C31.0991 48.0357 32.5961 47.169 34.172 46.7751C34.4083 46.6963 34.6447 46.6963 34.8811 46.6175C36.4569 46.3023 38.1903 46.5387 39.6873 47.169C40.554 47.4842 41.342 48.0357 41.8935 48.7449C42.2874 49.2964 42.5238 50.0843 42.5238 50.8722Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.3112 57.8055C30.0749 58.0419 29.8385 58.1995 29.6809 58.4359C29.6809 58.5146 29.6021 58.5146 29.6021 58.5934C28.6566 57.4116 27.5535 56.4661 26.2929 55.757C25.7414 55.4418 25.111 55.2054 24.4807 54.969C24.4019 54.8902 24.2443 54.8902 24.1655 54.8115C24.3231 54.4963 24.4807 54.1811 24.6383 53.866C24.7171 53.866 24.7959 53.9448 24.8746 53.9448C25.505 54.1811 26.2141 54.4175 26.8444 54.8115C28.1051 55.5206 29.3657 56.5449 30.3112 57.8055Z" fill="#737373"/>
+<path d="M66.2398 37.2411C66.2398 37.3199 66.2398 37.4775 66.161 37.5563C65.9247 38.423 65.058 38.8958 64.1913 39.0533C63.9549 39.1321 63.6397 39.1321 63.4033 39.1321C62.773 39.2109 62.2215 39.2109 61.5911 39.3685C60.9608 39.5261 60.3305 39.92 59.7002 40.2352C59.0698 40.5504 58.3607 40.7867 57.7304 40.9443C57.3364 41.0231 56.9425 41.1019 56.5485 41.1807C54.8151 41.4171 53.0817 41.2595 51.4271 40.708C50.4028 40.3928 49.6149 39.5261 49.1422 38.423C48.433 36.6896 48.5906 34.4835 50.2452 33.4592C52.3726 32.1197 53.712 34.0107 55.4454 34.7986C55.7606 34.9562 56.0758 35.035 56.3909 35.1138C56.7849 35.1926 57.1788 35.1926 57.5728 35.1926C58.4395 35.1138 59.3062 34.8774 60.0941 34.4835C61.5124 33.7743 62.773 32.6713 64.0337 31.647C64.27 31.4894 64.5064 31.253 64.8216 31.3318C65.1367 31.4106 65.2943 31.8046 65.2943 32.1985V32.2773C65.2155 32.5925 65.058 32.9076 64.9792 33.2228C64.8216 34.641 66.3974 35.9017 66.2398 37.2411Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M65.6102 40.6295L59.7796 11.9495C59.7008 11.6343 59.9372 11.398 60.1736 11.3192C60.4887 11.2404 60.7251 11.4767 60.8039 11.7131L66.6344 40.3931C66.7132 40.7082 66.4769 40.9446 66.2405 41.0234C66.0041 41.1022 65.6889 40.8658 65.6102 40.6295Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M66.1616 37.5562C65.9253 38.4229 65.0586 38.8956 64.1919 39.0532C63.9555 39.132 63.6403 39.132 63.404 39.132C63.404 39.0532 63.3252 38.9744 63.3252 38.8956C63.1676 38.5805 63.2464 38.1865 63.5615 37.9501C63.3252 37.8713 63.0888 37.7925 63.01 37.5562C62.8524 37.1622 63.01 36.6895 63.404 36.5319L63.6403 36.4531C63.5615 36.4531 63.4828 36.4531 63.4828 36.4531C63.1676 36.4531 62.9312 36.2955 62.7736 35.9803C62.6161 35.5864 62.7736 35.1924 63.0888 34.9561C62.9312 34.8773 62.6948 34.7197 62.6161 34.5621C62.4585 34.1682 62.6161 33.6954 63.01 33.5378L65.5313 32.356C65.4525 32.6711 65.2949 32.9863 65.2162 33.3014C64.8222 34.7197 66.6344 36.0591 66.1616 37.5562Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M67.4216 36.7685C67.3428 36.5321 67.1064 36.3745 66.8701 36.3745L67.1064 36.2958C67.5004 36.1382 67.658 35.6654 67.5004 35.2715C67.3428 34.9563 66.9488 34.7987 66.6337 34.8775L66.7913 34.7987C67.1852 34.6411 67.3428 34.1684 67.1852 33.7744C67.1064 33.5381 66.9489 33.4593 66.7125 33.3805C67.0276 33.1441 67.1852 32.7502 67.0276 32.3562C66.8701 31.9622 66.3973 31.8047 66.0034 31.9622L63.3245 33.2229C62.9305 33.3805 62.7729 33.8532 62.9305 34.2472C63.0093 34.4836 63.1669 34.5623 63.4032 34.6411C63.0881 34.8775 62.9305 35.2715 63.0881 35.6654C63.2457 35.9806 63.6396 36.1382 63.9548 36.0594L63.7184 36.1382C63.3245 36.2958 63.1669 36.7685 63.3245 37.1625C63.4032 37.3988 63.6396 37.5564 63.876 37.5564C63.5608 37.7928 63.482 38.1867 63.6396 38.5019C63.7972 38.8959 64.2699 39.0534 64.6639 38.8959L67.0276 37.7928C67.4216 37.6352 67.5792 37.2412 67.4216 36.7685Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.4" d="M43.7846 22.4287C43.4695 22.9014 42.8391 23.059 42.3664 22.8226C42.2088 22.7438 41.9724 22.665 41.8149 22.5862C39.6087 21.7195 37.245 22.2711 36.6146 23.9257C36.4571 24.3196 35.9055 24.2408 35.9055 23.8469C35.8267 23.2954 35.9055 22.665 36.1419 22.1135C36.9298 19.9861 39.5299 19.0406 41.9724 19.9861C42.6028 20.2225 43.1543 20.6165 43.6271 21.0104C44.021 21.4044 44.021 21.9559 43.7846 22.4287Z" fill="#737373"/>
+<path opacity="0.4" d="M36.2208 34.4835C37.7966 35.2714 41.0271 36.2956 42.9968 36.4532C43.3908 36.532 43.5484 36.8472 43.4696 37.2411C42.1301 40.3928 41.0271 43.5444 40.6331 44.7263C40.5543 45.0415 40.2392 45.199 40.0028 45.1203C38.5845 44.7263 34.645 43.6232 33.0692 42.9929C32.754 42.9141 32.6752 42.5989 32.754 42.2838C34.0935 38.9745 35.0389 36.0593 35.4329 34.7986C35.5905 34.4835 35.9844 34.3259 36.2208 34.4835Z" fill="#737373"/>
+<path d="M57.8097 40.8655C57.4158 40.9443 57.0218 41.0231 56.6278 41.1019C55.9975 40.1564 55.6036 38.8957 55.6824 37.6351C55.7611 36.926 55.9975 35.9017 56.4703 35.1138C56.8642 35.1926 57.2582 35.1926 57.6521 35.1926C57.1794 35.9017 56.7854 36.926 56.7066 37.7139C56.6278 38.8957 57.1006 40.1564 57.8097 40.8655Z" fill="#737373"/>
+<path d="M29.8384 30.6228C28.4202 31.5683 27.1595 32.7501 26.0565 34.0896C25.8201 33.8532 25.5049 33.538 25.2686 33.3017C26.2928 32.041 27.5535 30.9379 28.8929 29.9924L29.8384 30.6228Z" fill="#737373"/>
+<path d="M81.0531 22.2708C73.6468 19.8283 70.5739 29.1257 63.01 25.1861L60.3311 12.1068C68.5253 15.5736 71.677 7.69449 78.3742 9.19152L81.0531 22.2708Z" fill="#1f1f1f" stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
index 8f7e04f7..bb9353b8 100644
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -13,18 +13,15 @@ declare module '@vue/runtime-core' {
     AppModal: typeof import('./components/app/Modal.vue')['default']
     AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
     AppToast: typeof import('./components/app/Toast.vue')['default']
+    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
     HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
     HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
     HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
     HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
-    IconLucideMenu: typeof import('~icons/lucide/menu')['default']
-    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
-    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
-    IconLucideUsers: typeof import('~icons/lucide/users')['default']
     ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
     TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
     TeamsDetails: typeof import('./components/teams/Details.vue')['default']
@@ -32,6 +29,8 @@ declare module '@vue/runtime-core' {
     TeamsMembers: typeof import('./components/teams/Members.vue')['default']
     TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
     Tippy: typeof import('vue-tippy')['Tippy']
+    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
+    UsersTable: typeof import('./components/users/Table.vue')['default']
   }
 
 }
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Header.vue b/packages/hoppscotch-sh-admin/src/components/app/Header.vue
index 53a3c721..8e1c9113 100644
--- a/packages/hoppscotch-sh-admin/src/components/app/Header.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Header.vue
@@ -1,31 +1,32 @@
 <template>
   <header
-    class="flex items-center justify-between border-b border-gray-600 px-6 py-4 bg-neutral-900 shadow-lg"
+    class="flex items-center justify-between border-b border-divider px-6 py-4 bg-primary shadow-lg"
   >
     <div class="flex items-center">
-      <button
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        title="Open navigation"
+        :icon="IconMenu"
+        class="transform !md:hidden mr-2"
         @click="isOpen = true"
-        class="text-gray-200 focus:outline-none md:hidden mr-2"
-      >
-        <icon-lucide-menu class="text-gray-300 w-6" />
-      </button>
-
-      <div class="mr-3 mt-2 xs:hidden md:block">
-        <button @click="expandSidebar">
-          <icon-lucide-sidebar-open
-            v-if="isExpanded"
-            class="text-gray-300 w-6"
-          />
-          <icon-lucide-sidebar-close v-else class="text-gray-300 w-6" />
-        </button>
-      </div>
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="isExpanded ? 'Collapse sidebar' : 'Expand sidebar'"
+        :icon="isExpanded ? IconSidebarClose : IconSidebarOpen"
+        class="transform"
+        @click="expandSidebar"
+      />
     </div>
 
     <div class="flex items-center">
       <div v-if="currentUser" class="relative">
-        <button
-          @click="dropdownOpen = !dropdownOpen"
-          class="relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none"
+        <tippy
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+          :on-shown="() => tippyActions!.focus()"
         >
           <ProfilePicture
             v-if="currentUser.photoURL"
@@ -42,29 +43,19 @@
             :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
             :initial="currentUser.displayName ?? currentUser.email"
           />
-        </button>
-
-        <div
-          v-show="dropdownOpen"
-          @click="dropdownOpen = false"
-          class="fixed inset-0 z-10 w-full h-full"
-        ></div>
-
-        <transition
-          enter-active-class="transition duration-150 ease-out transform"
-          enter-from-class="scale-95 opacity-0"
-          enter-to-class="scale-100 opacity-100"
-          leave-active-class="transition duration-150 ease-in transform"
-          leave-from-class="scale-100 opacity-100"
-          leave-to-class="scale-95 opacity-0"
-        >
-          <div
-            v-show="dropdownOpen"
-            class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-800 rounded-md shadow-xl"
-          >
-            <AppLogout ref="logout" />
-          </div>
-        </transition>
+          <template #content="{ hide }">
+            <div
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
+              tabindex="0"
+              @keyup.escape="hide()"
+            >
+              <div>
+                <AppLogout ref="logout" @click="hide()" />
+              </div>
+            </div>
+          </template>
+        </tippy>
       </div>
     </div>
   </header>
@@ -72,9 +63,13 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { TippyComponent } from 'vue-tippy';
 import { useReadonlyStream } from '~/composables/stream';
 import { useSidebar } from '~/composables/useSidebar';
 import { auth } from '~/helpers/auth';
+import IconMenu from '~icons/lucide/menu';
+import IconSidebarOpen from '~icons/lucide/sidebar-open';
+import IconSidebarClose from '~icons/lucide/sidebar-close';
 
 const { isOpen, isExpanded } = useSidebar();
 
@@ -87,5 +82,6 @@ const expandSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };
 
-const dropdownOpen = ref(false);
+// Template refs
+const tippyActions = ref<TippyComponent | null>(null);
 </script>
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
index 06db5f52..6797e62c 100644
--- a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
@@ -4,7 +4,7 @@
     <div
       :class="isOpen ? 'block' : 'hidden'"
       @click="isOpen = false"
-      class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"
+      class="fixed inset-0 z-20 transition-opacity bg-primary opacity-50 lg:hidden"
     ></div>
     <!-- End Backdrop -->
 
@@ -12,60 +12,45 @@
       :class="isOpen ? '' : '!-translate-x-full ease-in'"
       class="sidebar-container transform !md:translate-x-0 ease-out"
     >
-      <div :class="isExpanded ? 'w-64' : 'w-full'">
-        <div class="flex items-center justify-start mt-6 ml-6">
+      <div :class="isExpanded ? 'w-xs' : 'w-full'">
+        <div class="flex items-center justify-start px-4 my-4">
           <div class="flex items-center">
             <HoppSmartLink class="flex items-center space-x-4" to="/dashboard">
               <img src="/cover.jpg" alt="hoppscotch-logo" class="h-7" />
 
-              <span
-                v-if="isExpanded"
-                class="mx-2 text-xl font-semibold text-gray-200"
-                >Hoppscotch</span
+              <span v-if="isExpanded" class="font-semibold text-accentContrast"
+                >HOPPSCOTCH</span
               >
             </HoppSmartLink>
           </div>
         </div>
 
-        <nav class="mt-10">
-          <router-link
-            class="flex items-center px-6 py-4 duration-200 border-l-4"
-            :class="[route.name === '/dashboard' ? activeClass : inactiveClass]"
-            to="/dashboard"
+        <nav class="my-5">
+          <HoppSmartLink
+            v-for="(navigation, index) in primaryNavigations"
+            :key="`navigation-${index}`"
+            v-tippy="{
+              theme: 'tooltip',
+              placement: 'right',
+              content: !isExpanded ? navigation.label : null,
+            }"
+            :to="navigation.to"
+            tabindex="0"
+            :exact="navigation.exact"
+            class="nav-link"
+            :class="
+              !isExpanded
+                ? 'flex items-center justify-center'
+                : 'flex items-center'
+            "
           >
-            <icon-lucide-layout-dashboard
-              class="text-xl"
-              :class="route.name === '/dashboard' ? 'white' : 'gray'"
-            />
-
-            <span v-if="isExpanded" class="mx-4 font-semibold">Dashboard</span>
-          </router-link>
-
-          <router-link
-            class="flex items-center px-6 py-4 duration-200 border-l-4 rounded-sm"
-            :class="[route.name === 'User' ? activeClass : inactiveClass]"
-            to="/users"
-          >
-            <icon-lucide-user
-              class="text-xl"
-              :class="route.path === '/users' ? 'white' : 'gray'"
-            />
-
-            <span v-if="isExpanded" class="mx-4 font-semibold">Users</span>
-          </router-link>
-
-          <router-link
-            class="flex items-center px-6 py-4 duration-200 border-l-4 rounded-sm"
-            :class="[route.name === '/teams' ? activeClass : inactiveClass]"
-            to="/teams"
-          >
-            <icon-lucide-users
-              class="text-xl"
-              :class="route.name === '/teams' ? 'white' : 'gray'"
-            />
-
-            <span v-if="isExpanded" class="mx-4 font-semibold">Teams</span>
-          </router-link>
+            <div v-if="navigation.icon">
+              <component :is="navigation.icon" class="svg-icons" />
+            </div>
+            <span v-if="isExpanded" class="nav-title">
+              {{ navigation.label }}
+            </span>
+          </HoppSmartLink>
         </nav>
       </div>
     </div>
@@ -75,23 +60,88 @@
 <script setup lang="ts">
 import { HoppSmartLink } from '@hoppscotch/ui';
 import { useSidebar } from '../../composables/useSidebar';
-import { useRoute } from 'vue-router';
+import IconDashboard from '~icons/lucide/layout-dashboard';
+import IconUser from '~icons/lucide/user';
+import IconUsers from '~icons/lucide/users';
 
 const { isOpen, isExpanded } = useSidebar();
 
-const route = useRoute();
-
-const activeClass =
-  'bg-gray-600 bg-opacity-25 text-gray-100 border-gray-100 border-emerald-600';
-const inactiveClass =
-  'border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100';
+const primaryNavigations = [
+  {
+    label: 'Dashboard',
+    icon: IconDashboard,
+    to: '/dashboard',
+    exact: true,
+  },
+  {
+    label: 'Users',
+    icon: IconUser,
+    to: '/users',
+    exact: false,
+  },
+  {
+    label: 'Teams',
+    icon: IconUsers,
+    to: '/teams',
+    exact: false,
+  },
+];
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .sidebar-container {
   @apply fixed md:static md:translate-x-0 md:inset-0 inset-y-0 left-0 z-30;
   @apply transition duration-300;
+  @apply flex overflow-y-auto bg-primary border-r border-divider;
+}
 
-  @apply flex overflow-y-auto bg-neutral-900 border-r border-gray-600;
+.nav-link {
+  @apply relative;
+  @apply p-4;
+  @apply flex flex-1;
+  @apply items-center;
+  @apply space-x-4;
+  @apply hover: (bg-primaryDark text-secondaryDark);
+  @apply focus-visible: text-secondaryDark;
+  @apply after:absolute;
+  @apply after:inset-x-0;
+  @apply after:md: inset-x-auto;
+  @apply after:md: inset-y-0;
+  @apply after:bottom-0;
+  @apply after:md: bottom-auto;
+  @apply after:md: left-0;
+  @apply after:z-2;
+  @apply after:h-0.5;
+  @apply after:md: h-full;
+  @apply after:w-full;
+  @apply after:md: w-0.5;
+  @apply after:content-DEFAULT;
+  @apply focus: after: bg-divider;
+
+  .svg-icons {
+    @apply opacity-75;
+  }
+
+  &.router-link-active {
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover: text-secondaryDark;
+    @apply after:bg-accent;
+
+    .svg-icons {
+      @apply opacity-100;
+    }
+  }
+
+  &.exact-active-link {
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover: text-secondaryDark;
+    @apply after:bg-accent;
+
+    .svg-icons {
+      @apply opacity-100;
+    }
+  }
 }
 </style>
diff --git a/packages/hoppscotch-sh-admin/src/components/dashboard/MetricsCard.vue b/packages/hoppscotch-sh-admin/src/components/dashboard/MetricsCard.vue
new file mode 100644
index 00000000..a93b4b36
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/components/dashboard/MetricsCard.vue
@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="flex items-center sm:px-15 px-8 justify-center !sm:justify-start py-6 bg-primaryLight rounded-md shadow-sm h-50 space-x-6"
+  >
+    <component :is="icon" class="text-5xl" :class="color" />
+
+    <div class="space-y-2">
+      <h4 class="text-4xl font-semibold text-accentContrast">
+        {{ count }}
+      </h4>
+      <div class="text-gray-400 font-bold">
+        {{ label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { Component } from 'vue';
+
+defineProps<{
+  count: number;
+  label: string;
+  icon: Component;
+  color: string;
+}>();
+</script>
diff --git a/packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue b/packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue
new file mode 100644
index 00000000..412074a5
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue
@@ -0,0 +1,71 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    title="Invite User"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col">
+        <input
+          id="inviteUserEmail"
+          v-model="email"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="sendInvite"
+        />
+        <label for="inviteUserEmail">Email Address</label>
+      </div>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          label="Send Invite"
+          :loading="loadingState"
+          @click="sendInvite"
+        />
+        <HoppButtonSecondary label="Cancel" outline filled @click="hideModal" />
+      </span>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useToast } from '~/composables/toast';
+
+const toast = useToast();
+
+withDefaults(
+  defineProps<{
+    show: boolean;
+    loadingState: boolean;
+  }>(),
+  {
+    show: false,
+    loadingState: false,
+  }
+);
+
+const emit = defineEmits<{
+  (event: 'hide-modal'): void;
+  (event: 'send-invite', email: string): void;
+}>();
+
+const email = ref('');
+
+const sendInvite = () => {
+  if (email.value.trim() === '') {
+    toast.error('Please enter a valid email address');
+    return;
+  }
+  emit('send-invite', email.value);
+};
+
+const hideModal = () => {
+  emit('hide-modal');
+};
+</script>
diff --git a/packages/hoppscotch-sh-admin/src/components/users/Table.vue b/packages/hoppscotch-sh-admin/src/components/users/Table.vue
new file mode 100644
index 00000000..14ccb63c
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/components/users/Table.vue
@@ -0,0 +1,170 @@
+<template>
+  <table class="w-full">
+    <thead>
+      <tr class="text-secondary border-b border-dividerDark text-sm text-left">
+        <th class="px-3 pb-3">User ID</th>
+        <th class="px-3 pb-3">Name</th>
+        <th class="px-3 pb-3">Email</th>
+        <th class="px-3 pb-3">Date</th>
+        <th class="px-3 pb-3"></th>
+      </tr>
+    </thead>
+
+    <tbody class="divide-y divide-divider">
+      <tr
+        v-for="user in usersList"
+        :key="user.uid"
+        class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+      >
+        <td
+          @click="$emit('goToUserDetails', user.uid)"
+          class="py-2 px-3 max-w-30"
+        >
+          <div class="flex">
+            <span class="truncate">
+              {{ user.uid }}
+            </span>
+          </div>
+        </td>
+
+        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+          <div v-if="user.displayName" class="flex items-center space-x-3">
+            <span>
+              {{ user.displayName }}
+            </span>
+            <span
+              v-if="user.isAdmin"
+              class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+            >
+              Admin
+            </span>
+          </div>
+          <div v-else class="flex items-center space-x-3">
+            <span> (Unnamed user) </span>
+            <span
+              v-if="user.isAdmin"
+              class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+            >
+              Admin
+            </span>
+          </div>
+        </td>
+
+        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+          <span>
+            {{ user.email }}
+          </span>
+        </td>
+
+        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+          <div class="flex items-center">
+            <div class="flex flex-col">
+              {{ getCreatedDate(user.createdOn) }}
+              <div class="text-gray-400 text-tiny">
+                {{ getCreatedTime(user.createdOn) }}
+              </div>
+            </div>
+          </div>
+        </td>
+
+        <td>
+          <div class="relative">
+            <span>
+              <tippy
+                interactive
+                trigger="click"
+                theme="popover"
+                :on-shown="() => tippyActions!.focus()"
+              >
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :icon="IconMoreHorizontal"
+                />
+                <template #content="{ hide }">
+                  <div
+                    ref="tippyActions"
+                    class="flex flex-col focus:outline-none"
+                    tabindex="0"
+                    @keyup.escape="hide()"
+                  >
+                    <HoppSmartItem
+                      v-if="!user.isAdmin"
+                      :icon="IconUserCheck"
+                      :label="'Make Admin'"
+                      class="!hover:bg-emerald-600"
+                      @click="
+                        () => {
+                          $emit('makeUserAdmin', user.uid);
+                          hide();
+                        }
+                      "
+                    />
+                    <HoppSmartItem
+                      v-else
+                      :icon="IconUserMinus"
+                      :label="'Remove Admin Status'"
+                      class="!hover:bg-emerald-600"
+                      @click="
+                        () => {
+                          $emit('makeAdminToUser', user.uid);
+                          hide();
+                        }
+                      "
+                    />
+                    <HoppSmartItem
+                      v-if="!user.isAdmin"
+                      :icon="IconTrash"
+                      :label="'Delete User'"
+                      class="!hover:bg-red-600"
+                      @click="
+                        () => {
+                          $emit('deleteUser', user.uid);
+                          hide();
+                        }
+                      "
+                    />
+                  </div>
+                </template>
+              </tippy>
+            </span>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts" setup>
+import { format } from 'date-fns';
+import { ref } from 'vue';
+import IconTrash from '~icons/lucide/trash';
+import IconUserMinus from '~icons/lucide/user-minus';
+import IconUserCheck from '~icons/lucide/user-check';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
+import { UsersListQuery } from '~/helpers/backend/graphql';
+import { TippyComponent } from 'vue-tippy';
+
+defineProps<{
+  usersList: UsersListQuery['admin']['allUsers'];
+}>();
+
+defineEmits<{
+  (event: 'goToUserDetails', uid: string): void;
+  (event: 'makeUserAdmin', uid: string): void;
+  (event: 'makeAdminToUser', uid: string): void;
+  (event: 'deleteUser', uid: string): void;
+}>();
+
+// Get Proper Date Formats
+const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
+const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
+
+// Template refs
+const tippyActions = ref<TippyComponent | null>(null);
+</script>
+
+<style scoped>
+.tippy-box[data-theme~='popover'] .tippy-content {
+  padding: 0;
+}
+</style>
diff --git a/packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts b/packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts
index 689abede..8e742a4b 100644
--- a/packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts
+++ b/packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts
@@ -17,7 +17,7 @@ export function usePagedQuery<
   const { client } = useClientHandle();
   const fetching = ref(true);
   const error = ref(false);
-  const list = ref<any[]>([]);
+  const list = ref<ListItem[]>([]);
   const currentPage = ref(0);
   const hasNextPage = ref(true);
 
diff --git a/packages/hoppscotch-sh-admin/src/layouts/default.vue b/packages/hoppscotch-sh-admin/src/layouts/default.vue
index 80f6dbbf..f0c414d1 100644
--- a/packages/hoppscotch-sh-admin/src/layouts/default.vue
+++ b/packages/hoppscotch-sh-admin/src/layouts/default.vue
@@ -6,7 +6,7 @@
       <AppHeader />
 
       <main class="flex-1 overflow-x-hidden overflow-y-auto bg-primary">
-        <div class="container mx-auto px-6 py-8">
+        <div class="px-8 py-6">
           <router-view />
         </div>
       </main>
diff --git a/packages/hoppscotch-sh-admin/src/pages/_.vue b/packages/hoppscotch-sh-admin/src/pages/_.vue
new file mode 100644
index 00000000..7a4ce25e
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/pages/_.vue
@@ -0,0 +1,56 @@
+<!-- The Catch-All Page -->
+<!-- Reserved for Critical Errors and 404 ONLY -->
+<template>
+  <div
+    class="flex flex-col items-center justify-center"
+    :class="{ 'min-h-screen': statusCode !== 404 }"
+  >
+    <img
+      :src="`/images/youre_lost.svg`"
+      loading="lazy"
+      class="inline-flex flex-col object-contain object-center mb-2 h-46 w-46"
+      :alt="message"
+    />
+    <h1 class="mb-2 text-4xl heading">
+      {{ statusCode }}
+    </h1>
+    <p class="mb-4 text-secondaryLight">{{ message }}</p>
+    <p class="mt-4 space-x-2">
+      <HoppButtonSecondary to="/" :icon="IconHome" filled label="Home" />
+      <HoppButtonSecondary
+        :icon="IconRefreshCW"
+        label="Reload"
+        filled
+        @click="reloadApplication"
+      />
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconRefreshCW from '~icons/lucide/refresh-cw';
+import IconHome from '~icons/lucide/home';
+import { PropType, computed } from 'vue';
+
+export type ErrorPageData = {
+  message: string;
+  statusCode: number;
+};
+
+const props = defineProps({
+  error: {
+    type: Object as PropType<ErrorPageData | null>,
+    default: null,
+  },
+});
+
+const statusCode = computed(() => props.error?.statusCode ?? 404);
+
+const message = computed(
+  () => props.error?.message ?? 'The page you are looking for does not exist.'
+);
+
+const reloadApplication = () => {
+  window.location.reload();
+};
+</script>
diff --git a/packages/hoppscotch-sh-admin/src/pages/dashboard.vue b/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
index af9bbba7..bf00db75 100644
--- a/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
@@ -1,77 +1,40 @@
 <template>
-  <div class="sm:px-6 p-4">
-    <h3 class="text-3xl font-bold text-gray-200 mb-6">Dashboard</h3>
-
+  <div class="flex flex-col">
     <div v-if="fetching" class="flex justify-center">
       <HoppSmartSpinner />
     </div>
-    <div v-else-if="error">
+
+    <div v-else-if="error || !metrics">
       <p class="text-xl">No Metrics Found..</p>
     </div>
 
-    <div v-else class="mt-4">
-      <div class="grid lg:grid-cols-2 gap-6">
-        <div class="w-full">
-          <div
-            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
-          >
-            <icon-lucide-user-cog class="text-5xl text-emerald-500" />
-
-            <div class="mx-10">
-              <h4 class="text-4xl font-semibold text-gray-200">
-                {{ metrics?.usersCount }}
-              </h4>
-              <div class="text-gray-400 font-bold text-xl">Total Users</div>
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full">
-          <div
-            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
-          >
-            <icon-lucide-users class="text-5xl text-pink-400" />
-
-            <div class="mx-10">
-              <h4 class="text-4xl font-semibold text-gray-200">
-                {{ metrics?.teamsCount }}
-              </h4>
-              <div class="text-gray-400 font-bold text-xl">Total Teams</div>
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full">
-          <div
-            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
-          >
-            <icon-lucide-line-chart class="text-5xl text-cyan-400" />
-
-            <div class="mx-10">
-              <h4 class="text-4xl font-semibold text-gray-200">
-                {{ metrics?.teamRequestsCount }}
-              </h4>
-              <div class="text-gray-400 font-bold text-xl">Total Requests</div>
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full">
-          <div
-            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
-          >
-            <icon-lucide-folder-tree class="text-5xl text-orange-400" />
-
-            <div class="mx-10">
-              <h4 class="text-4xl font-semibold text-gray-200">
-                {{ metrics?.teamCollectionsCount }}
-              </h4>
-              <div class="text-gray-400 font-bold text-xl">
-                Total Collections
-              </div>
-            </div>
-          </div>
-        </div>
+    <div v-else>
+      <h1 class="text-lg font-bold text-secondaryDark">Dashboard</h1>
+      <div class="py-10 grid lg:grid-cols-2 gap-6">
+        <DashboardMetricsCard
+          :count="metrics.usersCount"
+          label="Total Users"
+          :icon="UserIcon"
+          color="text-green-400"
+        />
+        <DashboardMetricsCard
+          :count="metrics.teamsCount"
+          label="Total Teams"
+          :icon="UsersIcon"
+          color="text-pink-400"
+        />
+        <DashboardMetricsCard
+          :count="metrics.teamRequestsCount"
+          label="Total Requests"
+          :icon="LineChartIcon"
+          color="text-cyan-400"
+        />
+        <DashboardMetricsCard
+          :count="metrics.teamCollectionsCount"
+          label="Total Collections"
+          :icon="FolderTreeIcon"
+          color="text-orange-400"
+        />
       </div>
     </div>
   </div>
@@ -81,6 +44,10 @@
 import { computed } from 'vue';
 import { useQuery } from '@urql/vue';
 import { MetricsDocument } from '../helpers/backend/graphql';
+import UserIcon from '~icons/lucide/user';
+import UsersIcon from '~icons/lucide/users';
+import LineChartIcon from '~icons/lucide/line-chart';
+import FolderTreeIcon from '~icons/lucide/folder-tree';
 
 // Get Metrics Data
 const { fetching, error, data } = useQuery({ query: MetricsDocument });
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/_id.vue b/packages/hoppscotch-sh-admin/src/pages/users/_id.vue
index 9d8e7c73..001d5df5 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/_id.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/_id.vue
@@ -1,120 +1,113 @@
 <template>
   <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
-  <div v-else>
-    <div class="ml-3">
+  <div v-else class="flex flex-col space-y-4">
+    <div>
       <button
-        class="p-2 mb-2 rounded-3xl bg-zinc-800"
+        class="p-2 mb-2 rounded-3xl bg-divider"
         @click="router.push('/users')"
       >
         <icon-lucide-arrow-left class="text-xl" />
       </button>
     </div>
-    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">User Details</h3>
 
-    <div>
-      <div>
-        <div class="px-6 rounded-md">
-          <div class="grid gap-6 mt-4">
-            <div v-if="user.photoURL" class="relative h-20 w-20">
-              <img class="object-cover rounded-3xl mb-3" :src="user.photoURL" />
-              <span
-                v-if="user.isAdmin"
-                class="absolute bottom-0 ml-17 rounded-xl p-1 bg-emerald-800 border-1 border-emerald-400 text-xs text-emerald-400 px-2"
-              >
-                Admin
-              </span>
-            </div>
+    <div class="rounded-md">
+      <div class="grid gap-6 mt-4">
+        <div v-if="user.photoURL" class="relative h-20 w-20">
+          <img class="object-cover rounded-3xl mb-3" :src="user.photoURL" />
+          <span
+            v-if="user.isAdmin"
+            class="absolute left-17 bottom-0 text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+          >
+            Admin
+          </span>
+        </div>
 
-            <div
-              v-else
-              class="bg-primaryDark w-17 p-3 rounded-2xl mb-3 relative"
-            >
-              <icon-lucide-user class="text-4xl" />
-              <span
-                v-if="user.isAdmin"
-                class="absolute bottom-0 ml-11 rounded-xl p-1 bg-emerald-800 border-1 border-emerald-400 text-xs text-emerald-400 px-2"
-              >
-                Admin
-              </span>
-            </div>
+        <div v-else class="bg-primaryDark w-17 p-3 rounded-2xl mb-3 relative">
+          <icon-lucide-user class="text-4xl" />
+          <span
+            v-if="user.isAdmin"
+            class="absolute left-15 bottom-0 text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+          >
+            Admin
+          </span>
+        </div>
 
-            <div v-if="user.uid">
-              <label class="text-gray-200" for="username">UID</label>
-              <div
-                class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-              >
-                {{ user.uid }}
-              </div>
-            </div>
-            <div>
-              <label class="text-gray-200" for="username">Name</label>
-              <div
-                class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-              >
-                <span v-if="user.displayName">
-                  {{ user.displayName }}
-                </span>
-                <span v-else> (Unnamed user) </span>
-              </div>
-            </div>
-            <div v-if="user.email">
-              <label class="text-gray-200" for="username">Email</label>
-              <div
-                class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-              >
-                {{ user.email }}
-              </div>
-            </div>
-            <div v-if="user.createdOn">
-              <label class="text-gray-200" for="username">Created On</label>
-              <div
-                class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-              >
-                {{ getCreatedDateAndTime(user.createdOn) }}
-              </div>
-            </div>
-          </div>
-
-          <div class="flex justify-start mt-8">
-            <span v-if="!user.isAdmin">
-              <HoppButtonPrimary
-                class="mr-4"
-                filled
-                outline
-                label="Make Admin"
-                @click="makeUserAdmin(user.uid)"
-              />
-            </span>
-            <span v-else>
-              <HoppButtonPrimary
-                class="mr-4"
-                filled
-                outline
-                label="Remove Admin Privilege"
-                @click="makeAdminToUser(user.uid)"
-              />
-            </span>
-            <HoppButtonSecondary
-              v-if="!user.isAdmin"
-              class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
-              filled
-              outline
-              label="Delete"
-              @click="deleteUser(user.uid)"
-            />
-
-            <HoppButtonSecondary
-              v-if="user.isAdmin"
-              class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
-              filled
-              outline
-              label="Delete"
-              @click="
-                toast.error('Remove admin privilege to delete the user!!')
-              "
-            />
+        <div v-if="user.uid">
+          <label class="text-secondaryDark" for="username">UID</label>
+          <div
+            class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+          >
+            {{ user.uid }}
           </div>
         </div>
+        <div>
+          <label class="text-secondaryDark" for="username">Name</label>
+          <div
+            class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+          >
+            <span v-if="user.displayName">
+              {{ user.displayName }}
+            </span>
+            <span v-else> (Unnamed user) </span>
+          </div>
+        </div>
+        <div v-if="user.email">
+          <label class="text-secondaryDark" for="username">Email</label>
+          <div
+            class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+          >
+            {{ user.email }}
+          </div>
+        </div>
+        <div v-if="user.createdOn">
+          <label class="text-secondaryDark" for="username">Created On</label>
+          <div
+            class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+          >
+            {{ getCreatedDateAndTime(user.createdOn) }}
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-start mt-8">
+        <span v-if="!user.isAdmin">
+          <HoppButtonPrimary
+            class="mr-4"
+            filled
+            outline
+            label="Make Admin"
+            @click="makeUserAdmin(user.uid)"
+          />
+        </span>
+        <span v-else>
+          <HoppButtonPrimary
+            class="mr-4"
+            filled
+            outline
+            :icon="IconUserMinus"
+            label="Remove Admin Privilege"
+            @click="makeAdminToUser(user.uid)"
+          />
+        </span>
+        <HoppButtonSecondary
+          v-if="!user.isAdmin"
+          class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
+          filled
+          outline
+          label="Delete"
+          :icon="IconTrash"
+          @click="deleteUser(user.uid)"
+        />
+
+        <HoppButtonSecondary
+          v-if="user.isAdmin"
+          class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
+          filled
+          outline
+          :icon="IconTrash"
+          label="Delete"
+          @click="toast.error('Remove admin privilege to delete the user!!')"
+        />
       </div>
     </div>
     <HoppSmartConfirmModal
@@ -151,6 +144,8 @@ import { useClientHandle } from '@urql/vue';
 import { format } from 'date-fns';
 import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '../../composables/toast';
+import IconTrash from '~icons/lucide/trash';
+import IconUserMinus from '~icons/lucide/user-minus';
 
 const toast = useToast();
 
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
index 107b5bf9..2b0eb128 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -1,215 +1,62 @@
 <template>
-  <div>
-    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Users</h3>
-
+  <div class="flex flex-col">
     <!-- Table View for All Users -->
     <div class="flex flex-col">
-      <div class="pt-2 my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
-        <div class="inline-block min-w-full overflow-hidden align-middle">
-          <div class="sm:px-7 px-4 pt-4 pb-1">
-            <div class="flex w-full items-center mb-7">
-              <HoppButtonPrimary
-                class="mr-4"
-                label="Invite a User"
-                @click="showInviteUserModal = true"
-              />
+      <h1 class="text-lg font-bold text-secondaryDark">Users</h1>
+      <div class="flex items-center space-x-4 py-10">
+        <HoppButtonPrimary
+          label="Invite a user"
+          @click="showInviteUserModal = true"
+          :icon="IconAddUser"
+        />
 
-              <HoppButtonSecondary
-                filled
-                outline
-                label="Invited Users"
-                :to="'/users/invited'"
-              />
-            </div>
-            <div>
-              <div
-                v-if="fetching && !error && !(usersList.length >= 1)"
-                class="flex justify-center"
-              >
-                <HoppSmartSpinner />
-              </div>
-              <div v-else-if="error">Unable to Load Users List..</div>
+        <div class="flex">
+          <HoppButtonSecondary
+            outline
+            filled
+            label="Invited users"
+            :to="'/users/invited'"
+          />
+        </div>
+      </div>
+      <div class="overflow-x-auto">
+        <div
+          v-if="fetching && !error && usersList.length === 0"
+          class="flex justify-center"
+        >
+          <HoppSmartSpinner />
+        </div>
+        <div v-else-if="error">Unable to Load Users List..</div>
 
-              <table
-                v-if="usersList.length >= 1"
-                class="w-full text-left min-h-32"
-              >
-                <thead>
-                  <tr
-                    class="text-gray-200 border-b border-gray-600 text-sm font-bold"
-                  >
-                    <th class="px-3 pt-0 pb-3">User ID</th>
-                    <th class="px-3 pt-0 pb-3">Name</th>
-                    <th class="px-3 pt-0 pb-3">Email</th>
-                    <th class="px-3 pt-0 pb-3">Date</th>
-                    <th class="px-3 pt-0 pb-3"></th>
-                  </tr>
-                </thead>
+        <UsersTable
+          v-else-if="usersList.length >= 1"
+          :usersList="usersList"
+          :fetching="fetching"
+          :error="error"
+          @goToUserDetails="goToUserDetails"
+          @makeUserAdmin="makeUserAdmin"
+          @makeAdminToUser="makeAdminToUser"
+          @deleteUser="deleteUser"
+        />
 
-                <tbody class="text-gray-300">
-                  <tr
-                    v-for="user in usersList"
-                    :key="user.uid"
-                    class="border-b border-gray-600 hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
-                  >
-                    <td
-                      @click="goToUserDetails(user)"
-                      class="sm:p-3 py-2 px-1 max-w-30"
-                    >
-                      <div class="flex">
-                        <span class="ml-3 truncate">
-                          {{ user.uid }}
-                        </span>
-                      </div>
-                    </td>
+        <div v-else class="flex justify-center">No Users Found</div>
 
-                    <td
-                      @click="goToUserDetails(user)"
-                      class="sm:p-3 py-2 px-1 0"
-                    >
-                      <div
-                        v-if="user.displayName"
-                        class="flex items-center ml-2"
-                      >
-                        {{ user.displayName }}
-                        <span
-                          v-if="user.isAdmin"
-                          class="rounded-xl p-1 bg-emerald-300 bg-opacity-15 border-1 border-emerald-400 text-xs text-emerald-400 px-2 ml-2"
-                        >
-                          Admin
-                        </span>
-                      </div>
-                      <div v-else class="flex items-center">
-                        <span class="ml-2"> (Unnamed user) </span>
-                        <span
-                          v-if="user.isAdmin"
-                          class="rounded-xl p-1 bg-emerald-300 bg-opacity-15 border-1 border-emerald-400 text-xs text-emerald-400 px-2 ml-2"
-                        >
-                          Admin
-                        </span>
-                      </div>
-                    </td>
-
-                    <td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
-                      <span class="ml-2">
-                        {{ user.email }}
-                      </span>
-                    </td>
-
-                    <td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center ml-2">
-                        <div class="flex flex-col">
-                          {{ getCreatedDate(user.createdOn) }}
-                          <div class="text-gray-400 text-xs">
-                            {{ getCreatedTime(user.createdOn) }}
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-
-                    <td>
-                      <div class="relative">
-                        <button
-                          @click.stop="toggleDropdown(user.uid)"
-                          class="w-8 h-8 dropdown inline-flex items-center justify-end text-gray-400"
-                        >
-                          <icon-lucide-more-horizontal />
-                        </button>
-
-                        <transition
-                          enter-active-class="transition duration-150 ease-out transform"
-                          enter-from-class="scale-95 opacity-0"
-                          enter-to-class="scale-100 opacity-100"
-                          leave-active-class="transition duration-150 ease-in transform"
-                          leave-from-class="scale-100 opacity-100"
-                          leave-to-class="scale-95 opacity-0"
-                        >
-                          <div
-                            v-show="activeUserId && activeUserId == user.uid"
-                            class="absolute right-0 z-20 bg-zinc-800 rounded-md shadow-xl"
-                          >
-                            <HoppSmartItem
-                              v-if="!user.isAdmin"
-                              :icon="IconUserCheck"
-                              :label="'Make Admin'"
-                              class="!hover:bg-emerald-600 w-full"
-                              @click="makeUserAdmin(user.uid)"
-                            />
-                            <HoppSmartItem
-                              v-else
-                              :icon="IconUserMinus"
-                              :label="'Remove Admin Status'"
-                              class="!hover:bg-emerald-600 w-full"
-                              @click="makeAdminToUser(user.uid)"
-                            />
-                            <HoppSmartItem
-                              v-if="!user.isAdmin"
-                              :icon="IconTrash"
-                              :label="'Delete User'"
-                              class="!hover:bg-red-600 w-full"
-                              @click="deleteUser(user.uid)"
-                            />
-                          </div>
-                        </transition>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-
-              <div
-                v-if="hasNextPage"
-                class="flex justify-center mt-5 p-2 font-semibold rounded-3xl bg-zinc-800 hover:bg-zinc-700 mx-auto w-32 text-light-500"
-                @click="fetchNextUsers"
-              >
-                <span>Show more </span>
-                <icon-lucide-chevron-down class="ml-2 text-lg" />
-              </div>
-              <div v-else class="mb-12 p-2"></div>
-            </div>
-          </div>
+        <div
+          v-if="hasNextPage && usersList.length >= usersPerPage"
+          class="flex justify-center my-5 px-3 py-2 cursor-pointer font-semibold rounded-3xl bg-dividerDark hover:bg-divider transition mx-auto w-38 text-secondaryDark"
+          @click="fetchNextUsers"
+        >
+          <span>Show more </span>
+          <icon-lucide-chevron-down class="ml-2 text-lg" />
         </div>
       </div>
     </div>
 
-    <!-- Send Invite Modal -->
-    <HoppSmartModal
-      v-if="showInviteUserModal"
-      dialog
-      title="Invite User"
-      @close="showInviteUserModal = false"
-    >
-      <template #body>
-        <div>
-          <div>
-            <div class="px-6 rounded-md">
-              <div>
-                <div class="my-4">
-                  <div>
-                    <label class="text-gray-200" for="emailAddress">
-                      Email Address
-                    </label>
-                    <input
-                      class="w-full p-3 mt-3 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                      type="email"
-                      v-model="email"
-                      placeholder="Enter Email Address"
-                    />
-                  </div>
-                </div>
-                <div class="flex justify-end my-2 pt-3">
-                  <HoppButtonPrimary
-                    label="Send Invite"
-                    @click="sendInvite()"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-    </HoppSmartModal>
-
+    <UsersInviteModal
+      :show="showInviteUserModal"
+      @hide-modal="showInviteUserModal = false"
+      @send-invite="sendInvite"
+    />
     <HoppSmartConfirmModal
       :show="confirmDeletion"
       :title="`Confirm user deletion?`"
@@ -232,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
   InviteNewUserDocument,
@@ -242,19 +89,13 @@ import {
   UsersListDocument,
 } from '../../helpers/backend/graphql';
 import { usePagedQuery } from '../../composables/usePagedQuery';
-import { format } from 'date-fns';
 import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '../../composables/toast';
-import IconTrash from '~icons/lucide/trash';
-import IconUserMinus from '~icons/lucide/user-minus';
-import IconUserCheck from '~icons/lucide/user-check';
+import { HoppButtonSecondary } from '@hoppscotch/ui';
+import IconAddUser from '~icons/lucide/user-plus';
 
 const toast = useToast();
 
-// Get Proper Date Formats
-const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
-const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
-
 // Get Paginated Results of all the users in the infra
 const usersPerPage = 20;
 const {
@@ -272,17 +113,20 @@ const {
 );
 
 // Send Invitation through Email
-const email = ref('');
 const sendInvitation = useMutation(InviteNewUserDocument);
 const showInviteUserModal = ref(false);
 
-const sendInvite = async () => {
-  const variables = { inviteeEmail: email.value.trim() };
+const sendInvite = async (email: string) => {
+  if (!email.trim()) {
+    toast.error('Please enter a valid email address');
+    return;
+  }
+  const variables = { inviteeEmail: email.trim() };
   await sendInvitation.executeMutation(variables).then((result) => {
     if (result.error) {
-      toast.error('Failed to send invitation!!');
+      toast.error('Failed to send invitation');
     } else {
-      toast.success('Email invitation sent successfully!!');
+      toast.success('Email invitation sent successfully');
       showInviteUserModal.value = false;
     }
   });
@@ -291,32 +135,10 @@ const sendInvite = async () => {
 // Go to Individual User Details Page
 const route = useRoute();
 const router = useRouter();
-const goToUserDetails = (user: any) => {
-  router.push('/users/' + user.uid);
+const goToUserDetails = (uid: string) => {
+  router.push('/users/' + uid);
 };
 
-// Open the side menu dropdown of only the selected user
-const activeUserId = ref<null | String>(null);
-
-function toggleDropdown(uid: String) {
-  if (activeUserId.value && activeUserId.value == uid) {
-    activeUserId.value = null;
-  } else {
-    activeUserId.value = uid;
-  }
-}
-
-// Hide dropdown when user clicks elsewhere
-const close = (e: any) => {
-  if (!e.target.closest('.dropdown')) {
-    activeUserId.value = null;
-  }
-};
-
-onMounted(() => document.addEventListener('click', close));
-onBeforeUnmount(() => document.removeEventListener('click', close));
-
-// Reload Users Page when routed back to the users page
 watch(
   () => route.params.id,
   () => window.location.reload()
@@ -327,11 +149,6 @@ const userDeletion = useMutation(RemoveUserByAdminDocument);
 const confirmDeletion = ref(false);
 const deleteUserUID = ref<string | null>(null);
 
-const deleteUser = (id: string) => {
-  confirmDeletion.value = true;
-  deleteUserUID.value = id;
-};
-
 const deleteUserMutation = async (id: string | null) => {
   if (!id) {
     confirmDeletion.value = false;
@@ -345,7 +162,6 @@ const deleteUserMutation = async (id: string | null) => {
     } else {
       toast.success('User deleted successfully!!');
       usersList.value = usersList.value.filter((user) => user.uid !== id);
-      toggleDropdown(id);
     }
   });
   confirmDeletion.value = false;
@@ -396,6 +212,11 @@ const makeAdminToUser = (id: string) => {
   adminToUserUID.value = id;
 };
 
+const deleteUser = (id: string) => {
+  confirmDeletion.value = true;
+  deleteUserUID.value = id;
+};
+
 const makeAdminToUserMutation = async (id: string | null) => {
   if (!id) {
     confirmAdminToUser.value = false;
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
index 3c87a6f7..3f00d378 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
@@ -1,81 +1,77 @@
 <template>
-  <div>
-    <div class="ml-3">
-      <button
-        class="p-2 mb-2 rounded-3xl bg-zinc-800"
-        @click="router.push('/users')"
-      >
+  <div class="flex flex-col">
+    <div class="flex">
+      <button class="p-2 rounded-3xl bg-divider" @click="router.push('/users')">
         <icon-lucide-arrow-left class="text-xl" />
       </button>
     </div>
-    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200 mb-2">
-      Invited Users
-    </h3>
+
+    <h3 class="text-lg font-bold text-accentContrast py-6">Invited Users</h3>
 
     <div class="flex flex-col">
-      <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
-        <div class="inline-block min-w-full overflow-hidden align-middle">
-          <div class="sm:px-7 p-4">
-            <div>
-              <div v-if="fetching" class="flex justify-center">
-                <HoppSmartSpinner />
-              </div>
-              <div v-else-if="error">
-                <p class="text-xl">No Invited Users Found..</p>
-              </div>
-
-              <table v-else class="w-full text-left">
-                <thead>
-                  <tr
-                    class="text-gray-200 border-b border-gray-600 text-sm font-bold"
-                  >
-                    <th class="px-3 pt-0 pb-3">Admin ID</th>
-                    <th class="px-3 pt-0 pb-3">Admin Email</th>
-                    <th class="px-3 pt-0 pb-3">Invitee Email</th>
-                    <th class="px-3 pt-0 pb-3">Invited On</th>
-                  </tr>
-                </thead>
-                <tbody
-                  v-for="user in invitedUsers"
-                  id="user.id"
-                  class="text-gray-300"
-                >
-                  <tr
-                    class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
-                  >
-                    <td class="sm:p-3 py-2 px-3 max-w-30 ml-2">
-                      <div>
-                        <span class="truncate">
-                          {{ user?.adminUid }}
-                        </span>
-                      </div>
-                    </td>
-                    <td class="sm:p-3 py-2 px-1">
-                      <span class="flex items-center ml-2">
-                        {{ user?.adminEmail }}
-                      </span>
-                    </td>
-                    <td class="sm:p-3 py-2 px-1 ml-4">
-                      <span class="ml-2">
-                        {{ user?.inviteeEmail }}
-                      </span>
-                    </td>
-
-                    <td class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center ml-2">
-                        <div class="flex flex-col">
-                          {{ getCreatedDate(user?.invitedOn) }}
-                          <div class="text-gray-400 text-xs">
-                            {{ getCreatedTime(user?.invitedOn) }}
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+      <div class="py-2 overflow-x-auto">
+        <div>
+          <div v-if="fetching" class="flex justify-center">
+            <HoppSmartSpinner />
           </div>
+          <div v-else-if="error || invitedUsers === undefined">
+            <p class="text-xl">No invited users found..</p>
+          </div>
+
+          <table v-else class="w-full text-left">
+            <thead>
+              <tr
+                class="text-secondary border-b border-dividerDark text-sm text-left"
+              >
+                <th class="px-3 pb-3">Admin ID</th>
+                <th class="px-3 pb-3">Admin Email</th>
+                <th class="px-3 pb-3">Invitee Email</th>
+                <th class="px-3 pb-3">Invited On</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-divider">
+              <tr
+                v-if="invitedUsers.length === 0"
+                class="text-secondaryDark py-4"
+              >
+                <div class="py-6 px-3">No invited users found..</div>
+              </tr>
+              <tr
+                v-else
+                v-for="(user, index) in invitedUsers"
+                :key="index"
+                class="text-secondaryDark hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
+              >
+                <td class="py-2 px-3 max-w-30">
+                  <div>
+                    <span class="truncate">
+                      {{ user?.adminUid }}
+                    </span>
+                  </div>
+                </td>
+                <td class="py-2 px-3">
+                  <span class="flex items-center">
+                    {{ user?.adminEmail }}
+                  </span>
+                </td>
+                <td class="py-2 px-3">
+                  <span>
+                    {{ user?.inviteeEmail }}
+                  </span>
+                </td>
+                <td class="py-2 px-3">
+                  <div class="flex items-center">
+                    <div class="flex flex-col">
+                      {{ getCreatedDate(user?.invitedOn) }}
+                      <div class="text-gray-400 text-xs">
+                        {{ getCreatedTime(user?.invitedOn) }}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>