From e27dc1f7a202253827ca11515ef4b7111953be5f Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Tue, 4 Apr 2023 13:48:02 +0530
Subject: [PATCH] refactor: polishing of admin dashboard teams module (#64)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
---
 .../hoppscotch-sh-admin/src/components.d.ts   |  16 +-
 .../src/components/teams/AddMembers.vue       |  66 ---
 .../src/components/teams/Details.vue          | 483 -----------------
 .../src/components/teams/Invite.vue           | 230 +++-----
 .../src/components/teams/Members.vue          | 507 +++++++++---------
 .../src/components/teams/PendingInvites.vue   |  82 ++-
 .../mutations/AddUserToTeamByAdmin.graphql    |  13 +
 .../ChangeUserRoleInTeamByAdmin.graphql       |  14 +
 .../backend/gql/mutations/CreateTeam.graphql  |   1 -
 .../gql/mutations/RemoveTeamMember.graphql    |   3 -
 .../RemoveUserFromTeamByAdmin.graphql         |   3 +
 .../mutations/UpdateTeamMemberRole.graphql    |  10 -
 .../backend/gql/queries/TeamInfo.graphql      |  51 +-
 .../backend/gql/queries/TeamList.graphql      |   4 +-
 .../src/pages/teams/AddTeam.vue               |  80 ---
 .../src/pages/teams/_id.vue                   | 276 +++++++++-
 .../src/pages/teams/index.vue                 | 342 +++++++-----
 packages/hoppscotch-ui/package.json           |   1 +
 .../src/components/smart/AutoComplete.vue     | 303 +++++------
 pnpm-lock.yaml                                |  59 +-
 20 files changed, 1097 insertions(+), 1447 deletions(-)
 delete mode 100644 packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
 delete mode 100644 packages/hoppscotch-sh-admin/src/components/teams/Details.vue
 create mode 100644 packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/AddUserToTeamByAdmin.graphql
 create mode 100644 packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/ChangeUserRoleInTeamByAdmin.graphql
 delete mode 100644 packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveTeamMember.graphql
 create mode 100644 packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserFromTeamByAdmin.graphql
 delete mode 100644 packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql
 delete mode 100644 packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue

diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
index 4a3626af7..2c4d4ba24 100644
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -17,32 +17,18 @@ declare module '@vue/runtime-core' {
     HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
     HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
     HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
     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']
-    IconLucideUser: typeof import('~icons/lucide/user')['default']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    IconLucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
-    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    IconLucideEdit: typeof import('~icons/lucide/edit')['default']
-    IconLucideFolderTree: typeof import('~icons/lucide/folder-tree')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
-    IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default']
-    IconLucideMenu: typeof import('~icons/lucide/menu')['default']
     IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
-    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
-    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
-    IconLucideUserCog: typeof import('~icons/lucide/user-cog')['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']
     TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
     TeamsMembers: typeof import('./components/teams/Members.vue')['default']
     TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue b/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
deleted file mode 100644
index cc7deb28d..000000000
--- a/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div class="flex justify-between">
-    <h3 class="mt-10 text-2xl justify-start font-medium text-gray-200">
-      Members
-    </h3>
-    <div class="mt-8 ml-2">
-      <button
-        @click="addNewMember"
-        class="px-4 py-2 justify-right text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
-      >
-        Add New
-      </button>
-    </div>
-  </div>
-  <div>
-    <div
-      v-for="(member, i) in members"
-      :key="i"
-      class="mt-3 flex justify-center"
-    >
-      <input
-        type="text"
-        placeholder="Enter email"
-        v-model="member.name"
-        class="bg-primaryDark p-2 border-primaryLight w-90 focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-      />
-      <select
-        v-model="member.role"
-        class="bg-primaryDark ml-0.5 p-2 pr-3 focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-      >
-        <option value="owner">Owner</option>
-        <option value="editor">Editor</option>
-        <option value="viewer">Viewer</option>
-      </select>
-      <div
-        class="bg-primaryDark flex items-center ml-0.5 border-primaryLight px-2 text-red-600 focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-      >
-        <span class="flex" @click="deleteMemberRow(i)">
-          <icon-lucide-trash />
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive } from 'vue';
-
-const members = reactive([
-  {
-    name: '',
-    role: 'owner',
-  },
-]);
-
-const addNewMember = () => {
-  members.push({
-    name: '',
-    role: 'admin',
-  });
-};
-
-const deleteMemberRow = (index: number) => {
-  members.splice(index, 1);
-};
-</script>
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/Details.vue b/packages/hoppscotch-sh-admin/src/components/teams/Details.vue
deleted file mode 100644
index 79f0e3329..000000000
--- a/packages/hoppscotch-sh-admin/src/components/teams/Details.vue
+++ /dev/null
@@ -1,483 +0,0 @@
-<template>
-  <div class="sm:px-6 p-4" v-if="team">
-    <h3 class="text-3xl font-medium text-zinc-800 dark:text-gray-200">
-      Team Details
-    </h3>
-
-    <div class="mt-5">
-      <div class="grid gap-4">
-        <div class="w-full">
-          <div
-            class="p-4 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm flex flex-col gap-1"
-          >
-            <div class="flex mb-6">
-              <icon-lucide-user class="text-emerald-400 text-3xl" />
-
-              <h4
-                class="text-3xl ml-2 font-semibold text-gray-700 dark:text-gray-200"
-              >
-                Team Info
-              </h4>
-            </div>
-            <div class="flex text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Team ID:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
-                {{ team.id }}
-              </div>
-            </div>
-            <div class="flex text-xl items-center">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Team Name:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
-                <div v-if="showRenameInput" class="flex gap-4 items-center">
-                  <input
-                    class="w-full py-1 px-3 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500 border"
-                    type="text"
-                    v-model="teamName"
-                    placeholder="Team Name"
-                    autofocus
-                    v-focus
-                  />
-
-                  <div>
-                    <HoppButtonPrimary
-                      class="py-1"
-                      filled
-                      label="Rename"
-                      @click="renameTeamName()"
-                    />
-                  </div>
-                </div>
-
-                <div v-else class="flex gap-2">
-                  <span>
-                    {{ teamName }}
-                  </span>
-                  <icon-lucide-edit
-                    class="cursor-pointer"
-                    @click="showRenameInput = true"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div class="flex text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Number of members:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
-                {{ team.teamMembers.length }}
-              </div>
-            </div>
-
-            <div class="flex justify-start mt-6">
-              <HoppButtonSecondary
-                class="mr-4"
-                filled
-                label="Delete"
-                @click="team && deleteTeam(team.id)"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="my-6">
-      <div class="flex flex-col mb-6">
-        <div class="flex items-center justify-between flex-1 pt-4 mb-4">
-          <label for="memberList"> Members </label>
-          <div class="flex">
-            <HoppButtonSecondary
-              :icon="IconUserPlus"
-              label="Add Members"
-              filled
-              @click="showInvite = !showInvite"
-            />
-          </div>
-        </div>
-
-        <div class="border rounded border-divider">
-          <div
-            v-if="team?.teamMembers?.length === 0"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-          >
-            <img
-              :src="`/images/states/dark/add_group.svg`"
-              loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-            />
-            <span class="pb-4 text-center">
-              No members in this team. Add members to this team to collaborate
-            </span>
-            <HoppButtonSecondary
-              :icon="IconUserPlus"
-              label="Add Members"
-              @click="
-                () => {
-                  showInvite = !showInvite;
-                }
-              "
-            />
-          </div>
-          <div v-else class="divide-y divide-dividerLight">
-            <div
-              v-for="(member, index) in membersList"
-              :key="`member-${index}`"
-              class="flex divide-x divide-dividerLight"
-            >
-              <input
-                class="flex flex-1 px-4 py-2 bg-transparent"
-                placeholder="Email"
-                :name="'param' + index"
-                :value="member.email"
-                readonly
-              />
-              <span>
-                <tippy
-                  interactive
-                  trigger="click"
-                  theme="popover"
-                  :on-shown="() => tippyActions![index].focus()"
-                >
-                  <span class="select-wrapper">
-                    <input
-                      class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
-                      placeholder="Permissions"
-                      :name="'value' + index"
-                      :value="member.role"
-                      readonly
-                    />
-                  </span>
-                  <template #content="{ hide }">
-                    <div
-                      ref="tippyActions"
-                      class="flex flex-col focus:outline-none"
-                      tabindex="0"
-                      @keyup.escape="hide()"
-                    >
-                      <HoppSmartItem
-                        label="OWNER"
-                        :icon="
-                          member.role === 'OWNER' ? IconCircleDot : IconCircle
-                        "
-                        :active="member.role === 'OWNER'"
-                        @click="
-                          () => {
-                            updateMemberRole(
-                              member.userID,
-                              TeamMemberRole.Owner
-                            );
-                            hide();
-                          }
-                        "
-                      />
-                      <HoppSmartItem
-                        label="EDITOR"
-                        :icon="
-                          member.role === 'EDITOR' ? IconCircleDot : IconCircle
-                        "
-                        :active="member.role === 'EDITOR'"
-                        @click="
-                          () => {
-                            updateMemberRole(
-                              member.userID,
-                              TeamMemberRole.Editor
-                            );
-                            hide();
-                          }
-                        "
-                      />
-                      <HoppSmartItem
-                        label="VIEWER"
-                        :icon="
-                          member.role === 'VIEWER' ? IconCircleDot : IconCircle
-                        "
-                        :active="member.role === 'VIEWER'"
-                        @click="
-                          () => {
-                            updateMemberRole(
-                              member.userID,
-                              TeamMemberRole.Viewer
-                            );
-                            hide();
-                          }
-                        "
-                      />
-                    </div>
-                  </template>
-                </tippy>
-              </span>
-              <div class="flex">
-                <HoppButtonSecondary
-                  id="member"
-                  v-tippy="{ theme: 'tooltip' }"
-                  title="Remove"
-                  :icon="IconUserMinus"
-                  color="red"
-                  :loading="isLoadingIndex === index"
-                  @click="removeExistingTeamMember(member.userID, index)"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div v-if="!fetching && !team" class="flex flex-col items-center">
-          <component :is="IconHelpCircle" class="mb-4 svg-icons" />
-          Something went wrong. Please try again later.
-        </div>
-      </div>
-
-      <HoppButtonPrimary
-        label="Save"
-        :loading="isLoading"
-        outline
-        @click="saveTeam"
-      />
-    </div>
-
-    <TeamsPendingInvites :editingTeamID="team.id" />
-    <HoppSmartConfirmModal
-      :show="confirmDeletion"
-      :title="`Confirm Deletion of ${team.name} team?`"
-      @hide-modal="confirmDeletion = false"
-      @resolve="deleteTeamMutation(deleteTeamUID)"
-    />
-    <TeamsInvite
-      :show="showInvite"
-      :editingTeamID="team.id"
-      @hide-modal="
-        () => {
-          showInvite = false;
-        }
-      "
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import IconCircleDot from '~icons/lucide/circle-dot';
-import IconCircle from '~icons/lucide/circle';
-import IconUserPlus from '~icons/lucide/user-plus';
-import IconUserMinus from '~icons/lucide/user-minus';
-import IconHelpCircle from '~icons/lucide/help-circle';
-import { useClientHandle, useMutation } from '@urql/vue';
-import { computed, onMounted, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useToast } from '../../composables/toast';
-import {
-  RemoveTeamDocument,
-  RenameTeamDocument,
-  TeamInfoDocument,
-  TeamMemberRole,
-  UpdateTeamMemberRoleDocument,
-  RemoveTeamMemberDocument,
-  TeamInfoQuery,
-} from '../../helpers/backend/graphql';
-
-const route = useRoute();
-const router = useRouter();
-const toast = useToast();
-
-const team = ref<TeamInfoQuery['team'] | null>(null);
-const showRenameInput = ref(false);
-const showInvite = ref(false);
-const teamName = ref('');
-
-const { client } = useClientHandle();
-const fetching = ref(true);
-
-const teamDeletion = useMutation(RemoveTeamDocument);
-const teamRename = useMutation(RenameTeamDocument);
-const confirmDeletion = ref(false);
-const deleteTeamUID = ref<string | null>(null);
-
-onMounted(async () => {
-  await getTeamInfo();
-});
-
-const getTeamInfo = async () => {
-  fetching.value = true;
-  const result = await client
-    .query(TeamInfoDocument, { uid: route.params.id.toString() })
-    .toPromise();
-
-  if (result.error) {
-    return toast.error('Unable to Load Team Info..');
-  }
-
-  if (result.data?.team) {
-    team.value = result.data.team;
-    teamName.value = team.value.name;
-  }
-
-  fetching.value = false;
-};
-
-const renameTeamName = async () => {
-  if (!team.value) return;
-
-  if (team.value.name === teamName.value) {
-    showRenameInput.value = false;
-    return;
-  }
-
-  const variables = { uid: team.value.id, name: teamName.value };
-  await teamRename.executeMutation(variables).then((result) => {
-    if (result.error) {
-      toast.error('Renaming team Failed');
-    } else {
-      showRenameInput.value = false;
-      toast.success('Team Renamed Successfully');
-    }
-  });
-};
-
-const deleteTeam = (id: string) => {
-  confirmDeletion.value = true;
-  deleteTeamUID.value = id;
-};
-
-const deleteTeamMutation = async (id: string | null) => {
-  if (!id) {
-    confirmDeletion.value = false;
-    toast.error('User Deletion Failed');
-    return;
-  }
-  const variables = { uid: id };
-  await teamDeletion.executeMutation(variables).then((result) => {
-    if (result.error) {
-      toast.error('User Deletion Failed');
-    } else {
-      toast.success('User Deleted Successfully');
-    }
-  });
-  confirmDeletion.value = false;
-  deleteTeamUID.value = null;
-  router.push('/teams');
-};
-
-const emit = defineEmits<{
-  (e: 'refetch-teams'): void;
-  (e: 'invite-team'): void;
-}>();
-
-// Template refs
-const tippyActions = ref<any | null>(null);
-
-const roleUpdates = ref<
-  {
-    userID: string;
-    role: TeamMemberRole;
-  }[]
->([]);
-
-watch(
-  () => team.value,
-  (teamDetails) => {
-    const members = teamDetails?.teamMembers ?? [];
-
-    // Remove deleted members
-    roleUpdates.value = roleUpdates.value.filter(
-      (update) => members.findIndex((y) => y.user.uid === update.userID) !== -1
-    );
-  }
-);
-
-const updateMemberRole = (userID: string, role: TeamMemberRole) => {
-  const updateIndex = roleUpdates.value.findIndex(
-    (item) => item.userID === userID
-  );
-  if (updateIndex !== -1) {
-    // Role Update exists
-    roleUpdates.value[updateIndex].role = role;
-  } else {
-    // Role Update does not exist
-    roleUpdates.value.push({
-      userID,
-      role,
-    });
-  }
-};
-
-const membersList = computed(() => {
-  if (!team.value) return [];
-  const members = (team.value.teamMembers ?? []).map((member) => {
-    const updatedRole = roleUpdates.value.find(
-      (update) => update.userID === member.user.uid
-    );
-
-    return {
-      userID: member.user.uid,
-      email: member.user.email!,
-      role: updatedRole?.role ?? member.role,
-    };
-  });
-
-  return members;
-});
-
-const isLoadingIndex = ref<null | number>(null);
-
-const removeExistingTeamMember = async (userID: string, index: number) => {
-  if (!team.value) return;
-  isLoadingIndex.value = index;
-  const removeTeamMemberResult = await removeTeamMember(
-    userID,
-    team.value.id
-  )();
-  if (removeTeamMemberResult.error) {
-    toast.error(`Something went wrong`);
-  } else {
-    toast.success(`Member removed successfully`);
-    emit('refetch-teams');
-    getTeamInfo();
-  }
-  isLoadingIndex.value = null;
-};
-
-const isLoading = ref(false);
-
-const saveTeam = async () => {
-  isLoading.value = true;
-  roleUpdates.value.forEach(async (update) => {
-    if (!team.value) return;
-    const updateMemberRoleResult = await updateTeamMemberRole(
-      update.userID,
-      team.value.id,
-      update.role
-    );
-    if (updateMemberRoleResult.error) {
-      toast.error(`Something went wrong`);
-    } else {
-      toast.success(`Roles updated successfully`);
-    }
-    isLoading.value = false;
-  });
-};
-
-const updateTeamMemberRoleMutation = useMutation(UpdateTeamMemberRoleDocument);
-const updateTeamMemberRole = (
-  userUid: string,
-  teamID: string,
-  newRole: TeamMemberRole
-) => {
-  return updateTeamMemberRoleMutation.executeMutation({
-    userUid,
-    teamID,
-    newRole,
-  });
-};
-
-const removeTeamMemberMutation = useMutation(RemoveTeamMemberDocument);
-const removeTeamMember = (userUid: string, teamID: string) => {
-  return () =>
-    removeTeamMemberMutation.executeMutation({
-      userUid,
-      teamID,
-    });
-};
-</script>
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/Invite.vue b/packages/hoppscotch-sh-admin/src/components/teams/Invite.vue
index 9081f637c..7d08ad372 100644
--- a/packages/hoppscotch-sh-admin/src/components/teams/Invite.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Invite.vue
@@ -1,45 +1,7 @@
 <template>
   <HoppSmartModal v-if="show" dialog title="Add Member" @close="hideModal">
     <template #body>
-      <div v-if="sendInvitesResult.length" class="flex flex-col px-4">
-        <div class="flex flex-col items-center justify-center max-w-md">
-          <icon-lucide-users class="w-6 h-6 text-accent" />
-          <h3 class="my-2 text-lg text-center">
-            We have sent you an invite link
-          </h3>
-          <p class="text-center">
-            You can use this link to invite your team members to join your team.
-          </p>
-        </div>
-        <div
-          class="flex flex-col p-4 mt-8 border rounded space-y-6 border-dividerLight"
-        >
-          <div
-            v-for="(invitee, index) in sendInvitesResult"
-            :key="`invitee-${index}`"
-          >
-            <p class="flex items-center">
-              <component
-                :is="
-                  invitee.status === 'error' ? IconAlertTriangle : IconMailCheck
-                "
-                class="mr-4 svg-icons"
-                :class="
-                  invitee.status === 'error' ? 'text-red-500' : 'text-green-500'
-                "
-              />
-              <span class="truncate">{{ invitee.email }}</span>
-            </p>
-            <p v-if="invitee.status === 'error'" class="mt-2 ml-8 text-red-500">
-              {{ getErrorMessage(invitee.error) }}
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        v-else-if="sendingInvites"
-        class="flex items-center justify-center p-4"
-      >
+      <div v-if="addingUserToTeam" class="flex items-center justify-center p-4">
         <HoppSmartSpinner />
       </div>
       <div v-else class="flex flex-col">
@@ -50,21 +12,21 @@
               :icon="IconPlus"
               label="Add new"
               filled
-              @click="addNewInvitee"
+              @click="addNewMember"
             />
           </div>
         </div>
         <div class="border rounded divide-y divide-dividerLight border-divider">
           <div
-            v-for="(invitee, index) in newInvites"
-            :key="`new-invitee-${index}`"
+            v-for="(member, index) in newMembersList"
+            :key="`new-member-${index}`"
             class="flex divide-x divide-dividerLight"
           >
             <input
-              v-model="invitee.key"
+              v-model="member.key"
               class="flex flex-1 px-4 py-2 bg-transparent"
               placeholder="Email"
-              :name="'invitee' + index"
+              :name="'member' + index"
               autofocus
             />
             <span>
@@ -79,7 +41,7 @@
                     class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
                     placeholder="Permissions"
                     :name="'value' + index"
-                    :value="invitee.value"
+                    :value="member.value"
                     readonly
                   />
                 </span>
@@ -93,12 +55,12 @@
                     <HoppSmartItem
                       label="OWNER"
                       :icon="
-                        invitee.value === 'OWNER' ? IconCircleDot : IconCircle
+                        member.value === 'OWNER' ? IconCircleDot : IconCircle
                       "
-                      :active="invitee.value === 'OWNER'"
+                      :active="member.value === 'OWNER'"
                       @click="
                         () => {
-                          updateNewInviteeRole(index, TeamMemberRole.Owner);
+                          updateNewMemberRole(index, TeamMemberRole.Owner);
                           hide();
                         }
                       "
@@ -106,12 +68,12 @@
                     <HoppSmartItem
                       label="EDITOR"
                       :icon="
-                        invitee.value === 'EDITOR' ? IconCircleDot : IconCircle
+                        member.value === 'EDITOR' ? IconCircleDot : IconCircle
                       "
-                      :active="invitee.value === 'EDITOR'"
+                      :active="member.value === 'EDITOR'"
                       @click="
                         () => {
-                          updateNewInviteeRole(index, TeamMemberRole.Editor);
+                          updateNewMemberRole(index, TeamMemberRole.Editor);
                           hide();
                         }
                       "
@@ -119,12 +81,12 @@
                     <HoppSmartItem
                       label="VIEWER"
                       :icon="
-                        invitee.value === 'VIEWER' ? IconCircleDot : IconCircle
+                        member.value === 'VIEWER' ? IconCircleDot : IconCircle
                       "
-                      :active="invitee.value === 'VIEWER'"
+                      :active="member.value === 'VIEWER'"
                       @click="
                         () => {
-                          updateNewInviteeRole(index, TeamMemberRole.Viewer);
+                          updateNewMemberRole(index, TeamMemberRole.Viewer);
                           hide();
                         }
                       "
@@ -140,12 +102,12 @@
                 title="Remove"
                 :icon="IconTrash"
                 color="red"
-                @click="removeNewInvitee(index)"
+                @click="removeNewMember(index)"
               />
             </div>
           </div>
           <div
-            v-if="newInvites.length === 0"
+            v-if="newMembersList.length === 0"
             class="flex flex-col items-center justify-center p-4 text-secondaryLight"
           >
             <img
@@ -154,15 +116,11 @@
               class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             />
             <span class="pb-4 text-center"> No invites </span>
-            <HoppButtonSecondary
-              label="Add new"
-              filled
-              @click="addNewInvitee"
-            />
+            <HoppButtonSecondary label="Add new" filled @click="addNewMember" />
           </div>
         </div>
         <div
-          v-if="newInvites.length"
+          v-if="newMembersList.length"
           class="flex flex-col items-start px-4 py-4 mt-4 border rounded border-dividerLight"
         >
           <span
@@ -217,34 +175,12 @@
     </template>
 
     <template #footer>
-      <p
-        v-if="sendInvitesResult.length"
-        class="flex justify-between flex-1 text-secondaryLight"
-      >
-        <HoppButtonSecondary
-          class="link !p-0"
-          label="Invite more"
-          :icon="IconArrowLeft"
-          @click="
-            () => {
-              sendInvitesResult = [];
-              newInvites = [
-                {
-                  key: '',
-                  value: TeamMemberRole.Viewer,
-                },
-              ];
-            }
-          "
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          label="Add Member"
+          outline
+          @click="addUserasTeamMember"
         />
-        <HoppButtonSecondary
-          class="link !p-0"
-          label="Dismiss"
-          @click="hideModal"
-        />
-      </p>
-      <span v-else class="flex space-x-2">
-        <HoppButtonPrimary label="Invite" outline @click="sendInvites" />
         <HoppButtonSecondary label="Cancel" outline filled @click="hideModal" />
       </span>
     </template>
@@ -257,22 +193,17 @@ import * as A from 'fp-ts/Array';
 import * as O from 'fp-ts/Option';
 import { pipe } from 'fp-ts/function';
 import {
+  AddUserToTeamByAdminDocument,
   TeamMemberRole,
-  CreateTeamInvitationDocument,
 } from '../../helpers/backend/graphql';
-
 import { useToast } from '~/composables/toast';
-
+import { useMutation } from '@urql/vue';
+import { Email, EmailCodec } from '~/helpers/backend/Email';
 import IconTrash from '~icons/lucide/trash';
 import IconPlus from '~icons/lucide/plus';
 import IconHelpCircle from '~icons/lucide/help-circle';
-import IconAlertTriangle from '~icons/lucide/alert-triangle';
-import IconMailCheck from '~icons/lucide/mail-check';
 import IconCircleDot from '~icons/lucide/circle-dot';
 import IconCircle from '~icons/lucide/circle';
-import IconArrowLeft from '~icons/lucide/arrow-left';
-import { useMutation } from '@urql/vue';
-import { Email, EmailCodec } from '~/helpers/backend/Email';
 
 const toast = useToast();
 
@@ -286,97 +217,67 @@ const props = defineProps({
 
 const emit = defineEmits<{
   (e: 'hide-modal'): void;
+  (e: 'member'): void;
 }>();
 
-const t = (key: string) => key;
-
-const newInvites = ref<Array<{ key: string; value: TeamMemberRole }>>([
+const newMembersList = ref<Array<{ key: string; value: TeamMemberRole }>>([
   {
     key: '',
     value: TeamMemberRole.Viewer,
   },
 ]);
 
-const addNewInvitee = () => {
-  newInvites.value.push({
+const addNewMember = () => {
+  newMembersList.value.push({
     key: '',
     value: TeamMemberRole.Viewer,
   });
 };
 
-const updateNewInviteeRole = (index: number, role: TeamMemberRole) => {
-  newInvites.value[index].value = role;
+const updateNewMemberRole = (index: number, role: TeamMemberRole) => {
+  newMembersList.value[index].value = role;
 };
 
-const removeNewInvitee = (id: number) => {
-  newInvites.value.splice(id, 1);
+const removeNewMember = (id: number) => {
+  newMembersList.value.splice(id, 1);
 };
 
-type SendInvitesErrorType =
-  | {
-      email: Email;
-      status: 'error';
-      error: any;
-    }
-  | {
-      email: Email;
-      status: 'success';
-    };
+const addingUserToTeam = ref<boolean>(false);
 
-const sendInvitesResult = ref<Array<SendInvitesErrorType>>([]);
-
-const sendingInvites = ref<boolean>(false);
-
-const sendInvites = async () => {
-  sendingInvites.value = true;
+const addUserasTeamMember = async () => {
+  addingUserToTeam.value = true;
 
   const validationResult = pipe(
-    newInvites.value,
+    newMembersList.value,
     O.fromPredicate(
-      (invites): invites is Array<{ key: Email; value: TeamMemberRole }> =>
+      (
+        memberInvites
+      ): memberInvites is Array<{ key: Email; value: TeamMemberRole }> =>
         pipe(
-          invites,
-          A.every((invitee) => EmailCodec.is(invitee.key))
+          memberInvites,
+          A.every((member) => EmailCodec.is(member.key))
         )
     ),
     O.map(
-      A.map((invitee) =>
-        createTeamInvitation(invitee.key, invitee.value, props.editingTeamID)
+      A.map((member) =>
+        addUserToTeam(member.key, member.value, props.editingTeamID)
       )
     )
   );
 
   if (O.isNone(validationResult)) {
     // Error handling for no validation
-    toast.error(`Invalid email address`);
-    sendingInvites.value = false;
+    toast.error('Invalid User!!');
+    addingUserToTeam.value = false;
     return;
   }
 
   hideModal();
 };
 
-const getErrorMessage = (error: SendInvitesErrorType | any) => {
-  if (error.type === 'network_error') {
-    return t('error.network_error');
-  } else {
-    switch (error.error) {
-      case 'team/invalid_id':
-        return t('team.invalid_id');
-      case 'team/member_not_found':
-        return t('team.member_not_found');
-      case 'team_invite/already_member':
-        return t('team.already_member');
-      case 'team_invite/member_has_invite':
-        return t('team.member_has_invite');
-    }
-  }
-};
-
 const hideModal = () => {
-  sendingInvites.value = false;
-  sendInvitesResult.value = [];
-  newInvites.value = [
+  addingUserToTeam.value = false;
+  newMembersList.value = [
     {
       key: '',
       value: TeamMemberRole.Viewer,
@@ -385,18 +286,29 @@ const hideModal = () => {
   emit('hide-modal');
 };
 
-const teamInvitationMutation = useMutation(CreateTeamInvitationDocument);
-const createTeamInvitation = async (
-  inviteeEmail: Email,
-  inviteeRole: TeamMemberRole,
+const addUserToTeamMutation = useMutation(AddUserToTeamByAdminDocument);
+const addUserToTeam = async (
+  email: string,
+  userRole: TeamMemberRole,
   teamID: string
 ) => {
-  const res = await teamInvitationMutation.executeMutation({
-    inviteeEmail,
-    inviteeRole,
-    teamID,
-  });
+  const variables = { userEmail: email, role: userRole, teamID: teamID };
 
+  const res = await addUserToTeamMutation
+    .executeMutation(variables)
+    .then((result) => {
+      if (result.error) {
+        console.log(result.error);
+        if (result.error.toString() == '[GraphQL] user/not_found') {
+          toast.error('User not found in the infra!!');
+        } else {
+          toast.error('Failed to add user to the team!!');
+        }
+      } else {
+        toast.success('User is now a member of the team!!');
+        emit('member');
+      }
+    });
   return res;
 };
 </script>
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/Members.vue b/packages/hoppscotch-sh-admin/src/components/teams/Members.vue
index 07f1465d8..0c0842748 100644
--- a/packages/hoppscotch-sh-admin/src/components/teams/Members.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Members.vue
@@ -1,229 +1,209 @@
 <template>
-  <div class="flex flex-col">
-    <div class="relative flex">
-      <input
-        id="selectLabelTeamEdit"
-        v-model="name"
-        v-focus
-        class="input floating-input"
-        placeholder=" "
-        type="text"
-        autocomplete="off"
-        @keyup.enter="saveTeam"
-      />
-      <label for="selectLabelTeamEdit">
-        {{ t('action.label') }}
-      </label>
-    </div>
-    <div class="flex items-center justify-between flex-1 pt-4">
-      <label for="memberList" class="p-4">
-        {{ t('team.members') }}
-      </label>
-      <div class="flex">
-        <HoppButtonSecondary
-          :icon="IconUserPlus"
-          :label="t('team.invite')"
-          filled
-          @click="
-            () => {
-              emit('invite-team');
-            }
-          "
-        />
-      </div>
-    </div>
-    <div v-if="teamDetails.loading" class="border rounded border-divider">
-      <div class="flex items-center justify-center p-4">
-        <HoppSmartSpinner />
-      </div>
-    </div>
-    <div class="border rounded border-divider">
-      <div
-        v-if="teamMembers === 0"
-        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-      >
-        <img
-          :src="`/images/states/dark/add_group.svg`"
-          loading="lazy"
-          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-          :alt="`${t('empty.members')}`"
-        />
-        <span class="pb-4 text-center">
-          {{ t('empty.members') }}
-        </span>
-        <HoppButtonSecondary
-          :icon="IconUserPlus"
-          :label="t('team.invite')"
-          @click="
-            () => {
-              emit('invite-team');
-            }
-          "
-        />
-      </div>
-      <div v-else class="divide-y divide-dividerLight">
-        <div
-          v-for="(member, index) in membersList"
-          :key="`member-${index}`"
-          class="flex divide-x divide-dividerLight"
-        >
-          <input
-            class="flex flex-1 px-4 py-2 bg-transparent"
-            :placeholder="`${t('team.email')}`"
-            :name="'param' + index"
-            :value="member.email"
-            readonly
+  <div class="my-6">
+    <h3 class="text-2xl font-bold text-gray-200">Team Members</h3>
+    <div class="flex flex-col mb-6">
+      <div class="flex items-center justify-end flex-1 pt-4 mb-4">
+        <div class="flex">
+          <HoppButtonPrimary
+            :icon="IconUserPlus"
+            label="Add Members"
+            filled
+            @click="showInvite = !showInvite"
           />
-          <span>
-            <tippy
-              interactive
-              trigger="click"
-              theme="popover"
-              :on-shown="() => tippyActions![index].focus()"
-            >
-              <span class="select-wrapper">
-                <input
-                  class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
-                  :placeholder="`${t('team.permissions')}`"
-                  :name="'value' + index"
-                  :value="member.role"
-                  readonly
-                />
-              </span>
-              <template #content="{ hide }">
-                <div
-                  ref="tippyActions"
-                  class="flex flex-col focus:outline-none"
-                  tabindex="0"
-                  @keyup.escape="hide()"
-                >
-                  <HoppSmartItem
-                    label="OWNER"
-                    :icon="member.role === 'OWNER' ? IconCircleDot : IconCircle"
-                    :active="member.role === 'OWNER'"
-                    @click="
-                      () => {
-                        updateMemberRole(member.userID, TeamMemberRole.Owner);
-                        hide();
-                      }
-                    "
-                  />
-                  <HoppSmartItem
-                    label="EDITOR"
-                    :icon="
-                      member.role === 'EDITOR' ? IconCircleDot : IconCircle
-                    "
-                    :active="member.role === 'EDITOR'"
-                    @click="
-                      () => {
-                        updateMemberRole(member.userID, TeamMemberRole.Editor);
-                        hide();
-                      }
-                    "
-                  />
-                  <HoppSmartItem
-                    label="VIEWER"
-                    :icon="
-                      member.role === 'VIEWER' ? IconCircleDot : IconCircle
-                    "
-                    :active="member.role === 'VIEWER'"
-                    @click="
-                      () => {
-                        updateMemberRole(member.userID, TeamMemberRole.Viewer);
-                        hide();
-                      }
-                    "
-                  />
-                </div>
-              </template>
-            </tippy>
+        </div>
+      </div>
+
+      <div class="border rounded border-divider">
+        <div
+          v-if="team?.teamMembers?.length === 0"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+        >
+          <span class="pb-4 text-center">
+            No members in this team. Add members to this team to collaborate
           </span>
-          <div class="flex">
-            <HoppButtonSecondary
-              id="member"
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.remove')"
-              :icon="IconUserMinus"
-              color="red"
-              :loading="isLoadingIndex === index"
-              @click="removeExistingTeamMember(member.userID, index)"
+          <HoppButtonSecondary
+            :icon="IconUserPlus"
+            label="Add Members"
+            @click="
+              () => {
+                showInvite = !showInvite;
+              }
+            "
+          />
+        </div>
+        <div v-else class="divide-y divide-dividerLight">
+          <div
+            v-for="(member, index) in membersList"
+            :key="`member-${index}`"
+            class="flex divide-x divide-dividerLight"
+          >
+            <input
+              class="flex flex-1 px-4 py-2 bg-transparent"
+              placeholder="Email"
+              :name="'param' + index"
+              :value="member.email"
+              readonly
             />
+            <span>
+              <tippy
+                interactive
+                trigger="click"
+                theme="popover"
+                :on-shown="() => tippyActions![index].focus()"
+              >
+                <span class="select-wrapper">
+                  <input
+                    class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
+                    placeholder="Permissions"
+                    :name="'value' + index"
+                    :value="member.role"
+                    readonly
+                  />
+                </span>
+                <template #content="{ hide }">
+                  <div
+                    ref="tippyActions"
+                    class="flex flex-col focus:outline-none"
+                    tabindex="0"
+                    @keyup.escape="hide()"
+                  >
+                    <HoppSmartItem
+                      label="OWNER"
+                      :icon="
+                        member.role === 'OWNER' ? IconCircleDot : IconCircle
+                      "
+                      :active="member.role === 'OWNER'"
+                      @click="
+                        () => {
+                          updateMemberRole(member.userID, TeamMemberRole.Owner);
+                          hide();
+                        }
+                      "
+                    />
+                    <HoppSmartItem
+                      label="EDITOR"
+                      :icon="
+                        member.role === 'EDITOR' ? IconCircleDot : IconCircle
+                      "
+                      :active="member.role === 'EDITOR'"
+                      @click="
+                        () => {
+                          updateMemberRole(
+                            member.userID,
+                            TeamMemberRole.Editor
+                          );
+                          hide();
+                        }
+                      "
+                    />
+                    <HoppSmartItem
+                      label="VIEWER"
+                      :icon="
+                        member.role === 'VIEWER' ? IconCircleDot : IconCircle
+                      "
+                      :active="member.role === 'VIEWER'"
+                      @click="
+                        () => {
+                          updateMemberRole(
+                            member.userID,
+                            TeamMemberRole.Viewer
+                          );
+                          hide();
+                        }
+                      "
+                    />
+                  </div>
+                </template>
+              </tippy>
+            </span>
+            <div class="flex">
+              <HoppButtonSecondary
+                id="member"
+                v-tippy="{ theme: 'tooltip' }"
+                title="Remove"
+                :icon="IconUserMinus"
+                color="red"
+                :loading="isLoadingIndex === index"
+                @click="removeExistingTeamMember(member.userID, index)"
+              />
+            </div>
           </div>
         </div>
       </div>
+      <div v-if="!fetching && !team" class="flex flex-col items-center">
+        <component :is="IconHelpCircle" class="mb-4 svg-icons" />
+        Something went wrong. Please try again later.
+      </div>
     </div>
-    <div
-      v-if="!teamDetails.loading && E.isLeft(teamDetails.data)"
-      class="flex flex-col items-center"
-    >
-      <component :is="IconHelpCircle" class="mb-4 svg-icons" />
-      {{ t('error.something_went_wrong') }}
-    </div>
+
+    <HoppButtonPrimary label="Save" outline @click="saveUpdatedTeam" />
   </div>
-  <HoppButtonPrimary
-    :label="t('action.save')"
-    :loading="isLoading"
-    outline
-    @click="saveTeam"
+  <TeamsInvite
+    :show="showInvite"
+    :editingTeamID="route.params.id.toString()"
+    @member="updateMembers"
+    @hide-modal="
+      () => {
+        showInvite = false;
+      }
+    "
   />
 </template>
 
 <script setup lang="ts">
-import { computed, ref, toRef, watch } from 'vue';
-import * as E from 'fp-ts/Either';
-import {
-  GetTeamDocument,
-  GetTeamQuery,
-  GetTeamQueryVariables,
-  TeamMemberAddedDocument,
-  TeamMemberRemovedDocument,
-  TeamMemberRole,
-  TeamMemberUpdatedDocument,
-  RemoveTeamMemberDocument,
-} from '~/helpers/backend/graphql';
-import {
-  removeTeamMember,
-  updateTeamMemberRole,
-} from '~/helpers/backend/mutations/Team';
-
-import { useToast } from '~/composables/toast';
-
 import IconCircleDot from '~icons/lucide/circle-dot';
 import IconCircle from '~icons/lucide/circle';
 import IconUserPlus from '~icons/lucide/user-plus';
 import IconUserMinus from '~icons/lucide/user-minus';
 import IconHelpCircle from '~icons/lucide/help-circle';
-
-const t = (key: string) => key;
-
-const emit = defineEmits<{
-  (e: 'hide-modal'): void;
-  (e: 'refetch-teams'): void;
-  (e: 'invite-team'): void;
-}>();
-
-// Template refs
-const tippyActions = ref<any | null>(null);
-
-const props = defineProps<{
-  show: boolean;
-  editingTeam: {
-    name: string;
-  };
-  editingTeamID: string;
-  teamMembers: any;
-}>();
+import { useClientHandle, useMutation } from '@urql/vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useToast } from '../../composables/toast';
+import {
+  ChangeUserRoleInTeamByAdminDocument,
+  TeamInfoDocument,
+  TeamMemberRole,
+  RemoveUserFromTeamByAdminDocument,
+  TeamInfoQuery,
+} from '../../helpers/backend/graphql';
+import { HoppButtonPrimary, HoppButtonSecondary } from '@hoppscotch/ui';
 
 const toast = useToast();
 
-const name = toRef(props.editingTeam, 'name');
+// Used to Invoke the Invite Members Modal
+const showInvite = ref(false);
 
-watch(
-  () => props.editingTeam.name,
-  (newName: string) => {
-    name.value = newName;
+// Get Team Details
+const team = ref<TeamInfoQuery['admin']['teamInfo'] | undefined>();
+const fetching = ref(true);
+const route = useRoute();
+const { client } = useClientHandle();
+
+const getTeamInfo = async () => {
+  fetching.value = true;
+  const result = await client
+    .query(TeamInfoDocument, { teamID: route.params.id.toString() })
+    .toPromise();
+
+  if (result.error) {
+    return toast.error('Unable to Load Team Info..');
   }
-);
+  if (result.data?.admin.teamInfo) {
+    team.value = result.data.admin.teamInfo;
+  }
+  fetching.value = false;
+};
+
+onMounted(async () => {
+  await getTeamInfo();
+});
+
+// Update members tab after a change in the members list or member roles
+const updateMembers = () => getTeamInfo();
+
+// Template refs
+const tippyActions = ref<any | null>(null);
 
 const roleUpdates = ref<
   {
@@ -233,24 +213,21 @@ const roleUpdates = ref<
 >([]);
 
 watch(
-  () => teamDetails,
-  () => {
-    if (teamDetails.loading) return;
+  () => team.value,
+  (teamDetails) => {
+    const members = teamDetails?.teamMembers ?? [];
 
-    const data = teamDetails.data;
-
-    if (E.isRight(data)) {
-      const members = data.right.team?.teamMembers ?? [];
-
-      // Remove deleted members
-      roleUpdates.value = roleUpdates.value.filter(
-        (update) =>
-          members.findIndex((y) => y.user.uid === update.userID) !== -1
-      );
-    }
+    // Remove deleted members
+    roleUpdates.value = roleUpdates.value.filter(
+      (update) =>
+        members.findIndex(
+          (y: { user: { uid: string } }) => y.user.uid === update.userID
+        ) !== -1
+    );
   }
 );
 
+// Update the role of the member selected in the UI
 const updateMemberRole = (userID: string, role: TeamMemberRole) => {
   const updateIndex = roleUpdates.value.findIndex(
     (item) => item.userID === userID
@@ -267,8 +244,10 @@ const updateMemberRole = (userID: string, role: TeamMemberRole) => {
   }
 };
 
+// Obtain the list of members in the team
 const membersList = computed(() => {
-  const members = (props.teamMembers ?? []).map((member) => {
+  if (!team.value) return [];
+  const members = (team.value.teamMembers ?? []).map((member) => {
     const updatedRole = roleUpdates.value.find(
       (update) => update.userID === member.user.uid
     );
@@ -283,47 +262,73 @@ const membersList = computed(() => {
   return members;
 });
 
+// Change the role of the selected user in the team
+const changeUserRoleInTeamMutation = useMutation(
+  ChangeUserRoleInTeamByAdminDocument
+);
+const changeUserRoleInTeam = (
+  userUID: string,
+  teamID: string,
+  newRole: TeamMemberRole
+) => {
+  return changeUserRoleInTeamMutation.executeMutation({
+    userUID,
+    teamID,
+    newRole,
+  });
+};
+
+// Save the updates done to the team
+const isLoading = ref(false);
+
+const saveUpdatedTeam = async () => {
+  isLoading.value = true;
+  roleUpdates.value.forEach(async (update) => {
+    if (!team.value) return;
+    const updateMemberRoleResult = await changeUserRoleInTeam(
+      update.userID,
+      team.value.id,
+      update.role
+    );
+    if (updateMemberRoleResult.error) {
+      toast.error('Role updation has failed!!');
+    } else {
+      toast.success('Roles updated successfully!!');
+    }
+    isLoading.value = false;
+  });
+};
+
+// Remove user from the team mutation
+const removeUserFromTeamMutation = useMutation(
+  RemoveUserFromTeamByAdminDocument
+);
+const removeUserFromTeam = (userUid: string, teamID: string) => {
+  return () =>
+    removeUserFromTeamMutation.executeMutation({
+      userUid,
+      teamID,
+    });
+};
+
+// Remove a team member from the team
 const isLoadingIndex = ref<null | number>(null);
 
 const removeExistingTeamMember = async (userID: string, index: number) => {
+  if (!team.value) return;
   isLoadingIndex.value = index;
-  const removeTeamMemberResult = await removeTeamMember(
+  const removeTeamMemberResult = await removeUserFromTeam(
     userID,
-    props.editingTeamID
+    team.value.id
   )();
-  if (E.isLeft(removeTeamMemberResult)) {
-    toast.error(`${t('error.something_went_wrong')}`);
+  if (removeTeamMemberResult.error) {
+    toast.error(`Member couldn't be removed!!`);
   } else {
-    toast.success(`${t('team.member_removed')}`);
-    emit('refetch-teams');
-    teamDetails.execute({ teamID: props.editingTeamID });
+    team.value.teamMembers = team.value.teamMembers?.filter(
+      (member: any) => member.user.uid !== userID
+    );
+    toast.success('Member removed successfully!!');
   }
   isLoadingIndex.value = null;
 };
-
-const isLoading = ref(false);
-
-const saveTeam = async () => {
-  isLoading.value = true;
-  roleUpdates.value.forEach(async (update) => {
-    const updateMemberRoleResult = await updateTeamMemberRole(
-      update.userID,
-      props.editingTeamID,
-      update.role
-    )();
-    if (E.isLeft(updateMemberRoleResult)) {
-      toast.error(`${t('error.something_went_wrong')}`);
-      console.error(updateMemberRoleResult.left.error);
-    }
-  });
-
-  hideModal();
-  toast.success(`${t('team.saved')}`);
-
-  isLoading.value = false;
-};
-
-const hideModal = () => {
-  emit('hide-modal');
-};
 </script>
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue b/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue
index 2c9c9c449..251d86910 100644
--- a/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue
@@ -1,15 +1,14 @@
 <template>
-  <div class="flex items-center justify-between flex-1">
-    <label for="memberList" class="pb-4"> Pending Invites </label>
-  </div>
+  <h3 class="text-2xl font-bold text-gray-200 mb-5">Pending Invites</h3>
+
   <div class="border rounded divide-y divide-dividerLight border-divider">
     <div v-if="fetching" class="flex items-center justify-center p-4">
       <HoppSmartSpinner />
     </div>
     <div v-else>
-      <div v-if="data" class="divide-y divide-dividerLight">
+      <div v-if="team" class="divide-y divide-dividerLight">
         <div
-          v-for="(invitee, index) in data?.team?.teamInvitations"
+          v-for="(invitee, index) in pendingInvites"
           :key="`invitee-${index}`"
           class="flex divide-x divide-dividerLight"
         >
@@ -41,7 +40,7 @@
         </div>
       </div>
       <div
-        v-if="data && data?.team?.teamInvitations.length === 0"
+        v-if="team && pendingInvites?.length === 0"
         class="flex flex-col items-center justify-center p-4 text-secondaryLight"
       >
         <span class="text-center"> No pending invites </span>
@@ -57,43 +56,72 @@
 <script setup lang="ts">
 import IconTrash from '~icons/lucide/trash';
 import IconHelpCircle from '~icons/lucide/help-circle';
-import { useMutation, useQuery } from '@urql/vue';
-import { ref } from 'vue';
+import { useMutation, useClientHandle } from '@urql/vue';
+import { ref, onMounted } from 'vue';
 import {
-  GetPendingInvitesDocument,
   RevokeTeamInvitationDocument,
+  TeamInfoDocument,
+  TeamInfoQuery,
 } from '~/helpers/backend/graphql';
 import { useToast } from '~/composables/toast';
-
-const props = defineProps({
-  editingTeamID: { type: String, default: null },
-});
+import { useRoute } from 'vue-router';
 
 const toast = useToast();
-const isLoadingIndex = ref<null | number>(null);
 
-const { fetching, data, error } = useQuery({
-  query: GetPendingInvitesDocument,
-  variables: {
-    teamID: props.editingTeamID,
-  },
+// Get details of the team
+const fetching = ref(true);
+const error = ref(false);
+const { client } = useClientHandle();
+const route = useRoute();
+const team = ref<TeamInfoQuery['admin']['teamInfo'] | undefined>();
+const pendingInvites = ref<
+  TeamInfoQuery['admin']['teamInfo']['teamInvitations'] | undefined
+>();
+
+const getTeamInfo = async () => {
+  fetching.value = true;
+  const result = await client
+    .query(TeamInfoDocument, { teamID: route.params.id.toString() })
+    .toPromise();
+
+  if (result.error) {
+    error.value = true;
+    return toast.error('Unable to load team details..');
+  }
+
+  if (result.data?.admin.teamInfo) {
+    team.value = result.data.admin.teamInfo;
+    pendingInvites.value = team.value.teamInvitations;
+  }
+  fetching.value = false;
+};
+
+onMounted(async () => {
+  await getTeamInfo();
 });
 
-console.log(data);
+// Remove Invitation
+const isLoadingIndex = ref<null | number>(null);
+
+const revokeInvitationMutation = useMutation(RevokeTeamInvitationDocument);
+const revokeTeamInvitation = (inviteID: string) =>
+  revokeInvitationMutation.executeMutation({ inviteID });
 
 const removeInvitee = async (id: string, index: number) => {
   isLoadingIndex.value = index;
   const result = await revokeTeamInvitation(id);
   if (result.error) {
-    toast.error(`Member could not be removed`);
+    toast.error('Removal of invitee failed!!');
   } else {
-    toast.success(`Member removed successfully`);
+    if (pendingInvites.value) {
+      pendingInvites.value = pendingInvites.value.filter(
+        (invite: { id: string }) => {
+          return invite.id !== id;
+        }
+      );
+      toast.success('Removal of invitee is successfull!!');
+    }
   }
   isLoadingIndex.value = null;
 };
-
-const revokeInvitationMutation = useMutation(RevokeTeamInvitationDocument);
-function revokeTeamInvitation(inviteID: string) {
-  return revokeInvitationMutation.executeMutation({ inviteID });
-}
 </script>
diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/AddUserToTeamByAdmin.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/AddUserToTeamByAdmin.graphql
new file mode 100644
index 000000000..b7d1ce8e8
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/AddUserToTeamByAdmin.graphql
@@ -0,0 +1,13 @@
+mutation AddUserToTeamByAdmin(
+  $userEmail: String!
+  $role: TeamMemberRole!
+  $teamID: ID!
+) {
+  addUserToTeamByAdmin(role: $role, userEmail: $userEmail, teamID: $teamID) {
+    membershipID
+    role
+    user {
+      uid
+    }
+  }
+}
diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/ChangeUserRoleInTeamByAdmin.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/ChangeUserRoleInTeamByAdmin.graphql
new file mode 100644
index 000000000..6fc41e655
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/ChangeUserRoleInTeamByAdmin.graphql
@@ -0,0 +1,14 @@
+mutation ChangeUserRoleInTeamByAdmin(
+  $userUID: ID!
+  $teamID: ID!
+  $newRole: TeamMemberRole!
+) {
+  changeUserRoleInTeamByAdmin(
+    userUID: $userUID
+    teamID: $teamID
+    newRole: $newRole
+  ) {
+    membershipID
+    role
+  }
+}
diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/CreateTeam.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/CreateTeam.graphql
index 82dfa6654..70561f66e 100644
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/CreateTeam.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/CreateTeam.graphql
@@ -12,7 +12,6 @@ mutation CreateTeam($userUid: ID!, $name: String!) {
         photoURL
       }
     }
-    myRole
     ownersCount
     editorsCount
     viewersCount
diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveTeamMember.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveTeamMember.graphql
deleted file mode 100644
index ae09e4acc..000000000
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveTeamMember.graphql
+++ /dev/null
@@ -1,3 +0,0 @@
-mutation RemoveTeamMember($userUid: ID!, $teamID: ID!) {
-  removeTeamMember(userUid: $userUid, teamID: $teamID)
-}
diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserFromTeamByAdmin.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserFromTeamByAdmin.graphql
new file mode 100644
index 000000000..caf44fe29
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserFromTeamByAdmin.graphql
@@ -0,0 +1,3 @@
+mutation RemoveUserFromTeamByAdmin($userUid: ID!, $teamID: ID!) {
+  removeUserFromTeamByAdmin(userUid: $userUid, teamID: $teamID)
+}
diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql
deleted file mode 100644
index b866b254c..000000000
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql
+++ /dev/null
@@ -1,10 +0,0 @@
-mutation UpdateTeamMemberRole(
-  $newRole: TeamMemberRole!
-  $userUid: ID!
-  $teamID: ID!
-) {
-  updateTeamMemberRole(newRole: $newRole, userUid: $userUid, teamID: $teamID) {
-    membershipID
-    role
-  }
-}
diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamInfo.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamInfo.graphql
index 16e90f87b..d30f22b83 100644
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamInfo.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamInfo.graphql
@@ -1,30 +1,31 @@
-query TeamInfo($uid: ID!) {
-  team(teamID: $uid) {
-    id
-    name
-
-    teamMembers {
-      membershipID
-      role
-      user {
-        uid
-        displayName
-        email
-        photoURL
-      }
-    }
-    teamInvitations {
-      id
-      inviteeEmail
-      inviteeRole
-    }
-    teamEnvironments {
+query TeamInfo($teamID: ID!) {
+  admin {
+    teamInfo(teamID: $teamID) {
       id
       name
+
+      teamMembers {
+        membershipID
+        role
+        user {
+          uid
+          displayName
+          email
+          photoURL
+        }
+      }
+      teamInvitations {
+        id
+        inviteeEmail
+        inviteeRole
+      }
+      teamEnvironments {
+        id
+        name
+      }
+      ownersCount
+      editorsCount
+      viewersCount
     }
-    myRole
-    ownersCount
-    editorsCount
-    viewersCount
   }
 }
diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamList.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamList.graphql
index 7fff6fbc9..ae828ff39 100644
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamList.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamList.graphql
@@ -1,6 +1,6 @@
-query TeamList($cursor: ID) {
+query TeamList($cursor: ID, $take: Int) {
   admin {
-    allTeams(cursor: $cursor) {
+    allTeams(cursor: $cursor, take: $take) {
       id
       name
       members {
diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue b/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue
deleted file mode 100644
index 1bc4a3162..000000000
--- a/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Create Team</h3>
-
-  <div>
-    <div>
-      <div class="px-6 rounded-md">
-        <div>
-          <div class="flex mt-4">
-            <div>
-              <label class="text-gray-200 mr-5 text-lg" for="username"
-                >Name:
-              </label>
-              <input
-                class="w-96 p-2 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                type="text"
-                v-model="name"
-                placeholder="Enter Name"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="mt-6"></div>
-
-        <div>
-          <HoppButtonPrimary :loading="loading" label="Save" @click="addTeam" />
-        </div>
-
-        <div class="mt-8"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useMutation } from '@urql/vue';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useReadonlyStream } from '~/composables/stream';
-import { auth } from '~/helpers/auth';
-import { CreateTeamDocument } from '../../helpers/backend/graphql';
-
-const router = useRouter();
-const name = ref('');
-const loading = ref(false);
-
-const addTeamMutation = useMutation(CreateTeamDocument);
-
-const currentUser = useReadonlyStream(
-  auth.getProbableUserStream(),
-  auth.getProbableUser()
-);
-
-const addTeam = async () => {
-  loading.value = true;
-  let payload = {
-    name: name.value.trim(),
-    userUid: '',
-  };
-
-  if (currentUser.value) {
-    payload['userUid'] = currentUser.value.uid;
-  }
-
-  const { data, error } = await addTeamMutation.executeMutation(payload);
-  loading.value = false;
-
-  if (data) {
-    name.value = '';
-    goToTeamDetailsPage(data.createTeamByAdmin.id);
-  }
-
-  if (error) {
-    console.log(error);
-  }
-};
-
-const goToTeamDetailsPage = (teamId: string) => {
-  router.push('/teams/' + teamId);
-};
-</script>
diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/_id.vue b/packages/hoppscotch-sh-admin/src/pages/teams/_id.vue
index 30c34737c..4cc41f0de 100644
--- a/packages/hoppscotch-sh-admin/src/pages/teams/_id.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/_id.vue
@@ -1,3 +1,277 @@
 <template>
-  <TeamsDetails />
+  <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
+  <div v-if="team">
+    <div class="flex">
+      <button
+        class="p-2 mb-2 mr-5 rounded-3xl bg-zinc-800"
+        @click="router.push('/teams')"
+      >
+        <icon-lucide-arrow-left class="text-xl" />
+      </button>
+      <div class="">
+        <h3 class="mx-auto text-3xl font-bold text-gray-200 mt-1">
+          {{ team.name }}
+        </h3>
+      </div>
+    </div>
+    <div v-if="team" class="flex !rounded-none justify-center mb-5 sm:px-6 p-4">
+      <HoppButtonSecondary
+        class="!rounded-none"
+        :class="{ '!bg-primaryDark': showTeamDetails }"
+        filled
+        outline
+        label="Details"
+        @click="switchToTeamDetailsTab"
+      />
+
+      <HoppButtonSecondary
+        class="!rounded-none"
+        :class="{ '!bg-primaryDark': showMembers }"
+        filled
+        outline
+        label="Members"
+        @click="switchToMembersTab"
+      />
+
+      <HoppButtonSecondary
+        class="!rounded-none"
+        :class="{ '!bg-primaryDark': showPendingInvites }"
+        filled
+        outline
+        label="Invites"
+        @click="switchToPendingInvitesTab"
+      />
+    </div>
+
+    <div v-if="team && showTeamDetails">
+      <h3 class="sm:px-6 px-4 text-2xl font-bold text-gray-200">
+        Team Details
+      </h3>
+
+      <div class="px-6 rounded-md mt-5">
+        <div class="grid gap-6">
+          <div v-if="team.id">
+            <label class="text-gray-200" for="username">Team ID</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"
+            >
+              {{ team.id }}
+            </div>
+          </div>
+          <div>
+            <label class="text-gray-200" for="username">Team Name</label>
+
+            <div v-if="!showRenameInput" class="flex">
+              <div
+                class="flex-1 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"
+              >
+                {{ teamName }}
+              </div>
+
+              <HoppButtonPrimary
+                class="cursor-pointer mt-2 ml-2"
+                filled
+                :icon="IconEdit"
+                label="Edit"
+                @click="showRenameInput = true"
+              />
+            </div>
+            <div v-else class="flex">
+              <input
+                class="flex-1 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"
+                type="text"
+                v-model="teamName"
+                placeholder="Team Name"
+                autofocus
+                v-focus
+              />
+              <div>
+                <HoppButtonPrimary
+                  class="cursor-pointer mt-2 ml-2 min-h-11"
+                  :icon="IconSave"
+                  filled
+                  label="Rename"
+                  @click="renameTeamName()"
+                />
+              </div>
+            </div>
+          </div>
+          <div v-if="team.teamMembers.length">
+            <label class="text-gray-200" for="username"
+              >Number of Members</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"
+            >
+              {{ team.teamMembers.length }}
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-start mt-8">
+          <HoppButtonSecondary
+            class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
+            filled
+            label="Delete Team"
+            @click="team && deleteTeam(team.id)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-if="team" class="sm:px-6 px-4">
+    <TeamsMembers v-if="showMembers" />
+    <TeamsPendingInvites v-if="showPendingInvites" :editingTeamID="team.id" />
+    <HoppSmartConfirmModal
+      :show="confirmDeletion"
+      :title="`Confirm Deletion of ${team.name} team?`"
+      @hide-modal="confirmDeletion = false"
+      @resolve="deleteTeamMutation(deleteTeamUID)"
+    />
+  </div>
 </template>
+
+<script setup lang="ts">
+import { useClientHandle, useMutation } from '@urql/vue';
+import { onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useToast } from '../../composables/toast';
+import {
+  RemoveTeamDocument,
+  RenameTeamDocument,
+  TeamInfoDocument,
+  TeamMemberRole,
+  TeamInfoQuery,
+} from '../../helpers/backend/graphql';
+import IconEdit from '~icons/lucide/edit';
+import IconSave from '~icons/lucide/save';
+
+const toast = useToast();
+
+// Switch between team details, members and invites tab
+const showMembers = ref(false);
+const showPendingInvites = ref(false);
+const showTeamDetails = ref(true);
+
+const switchToMembersTab = () => {
+  showMembers.value = true;
+  showTeamDetails.value = false;
+  showPendingInvites.value = false;
+};
+
+const switchToPendingInvitesTab = () => {
+  showTeamDetails.value = false;
+  showMembers.value = false;
+  showPendingInvites.value = true;
+};
+
+const switchToTeamDetailsTab = () => {
+  showTeamDetails.value = true;
+  showMembers.value = false;
+  showPendingInvites.value = false;
+};
+
+// Get the details of the team
+const team = ref<TeamInfoQuery['admin']['teamInfo'] | undefined>();
+const teamName = ref('');
+const route = useRoute();
+const fetching = ref(true);
+const { client } = useClientHandle();
+
+const getTeamInfo = async () => {
+  fetching.value = true;
+  const result = await client
+    .query(TeamInfoDocument, { teamID: route.params.id.toString() })
+    .toPromise();
+  if (result.error) {
+    return toast.error('Unable to load team info..');
+  }
+  if (result.data?.admin.teamInfo) {
+    team.value = result.data.admin.teamInfo;
+    teamName.value = team.value.name;
+  }
+  fetching.value = false;
+};
+
+onMounted(async () => {
+  await getTeamInfo();
+});
+
+// Rename the team name
+const showRenameInput = ref(false);
+const teamRename = useMutation(RenameTeamDocument);
+
+const renameTeamName = async () => {
+  if (!team.value) return;
+
+  if (team.value.name === teamName.value) {
+    showRenameInput.value = false;
+    return;
+  }
+  const variables = { uid: team.value.id, name: teamName.value };
+  await teamRename.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Failed to rename team!!');
+    } else {
+      showRenameInput.value = false;
+      if (team.value) {
+        team.value.name = teamName.value;
+        toast.success('Team renamed successfully!!');
+      }
+    }
+  });
+};
+
+// Delete team from the infra
+const router = useRouter();
+const confirmDeletion = ref(false);
+const teamDeletion = useMutation(RemoveTeamDocument);
+const deleteTeamUID = ref<string | null>(null);
+
+const deleteTeam = (id: string) => {
+  confirmDeletion.value = true;
+  deleteTeamUID.value = id;
+};
+
+const deleteTeamMutation = async (id: string | null) => {
+  if (!id) {
+    confirmDeletion.value = false;
+    toast.error('Team deletion failed!!');
+    return;
+  }
+  const variables = { uid: id };
+  await teamDeletion.executeMutation(variables).then((result) => {
+    if (result.error) {
+      toast.error('Team deletion failed!!');
+    } else {
+      toast.success('Team deleted successfully!!');
+    }
+  });
+  confirmDeletion.value = false;
+  deleteTeamUID.value = null;
+  router.push('/teams');
+};
+
+// Update Roles of Members
+const roleUpdates = ref<
+  {
+    userID: string;
+    role: TeamMemberRole;
+  }[]
+>([]);
+
+watch(
+  () => team.value,
+  (teamDetails) => {
+    const members = teamDetails?.teamMembers ?? [];
+
+    // Remove deleted members
+    roleUpdates.value = roleUpdates.value.filter(
+      (update) =>
+        members.findIndex(
+          (y: { user: { uid: string } }) => y.user.uid === update.userID
+        ) !== -1
+    );
+  }
+);
+</script>
diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
index 09aeabafa..02347c018 100644
--- a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
@@ -1,139 +1,123 @@
 <template>
   <div>
-    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Teams</h3>
+    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Teams</h3>
 
-    <div class="flex flex-col" v-if="!fetching">
+    <div class="flex flex-col">
       <div class="py-2 overflow-x-auto">
         <div class="inline-block min-w-full overflow-hidden align-middle">
           <div class="sm:px-7 p-4">
             <div class="flex w-full items-center mb-7">
-              <button
-                class="inline-flex mr-3 items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-400 border-gray-800 border-2 leading-none py-0"
-              >
-                Last 30 days
-                <icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
-              </button>
-              <button
-                class="inline-flex items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-400 border-gray-800 border-2 leading-none py-0"
-              >
-                Filter by
-                <icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
-              </button>
-              <router-link to="/teams/addteam">
-                <button
-                  class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow border-gray-800 border leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
-                >
-                  Create Team
-                </button>
-              </router-link>
-              <div
-                class="ml-auto text-gray-400 text-xs sm:inline-flex hidden items-center"
-              >
-                <span class="mr-3">Page 2 of 4</span>
-                <button
-                  class="inline-flex mr-2 items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-800 leading-none py-0"
-                >
-                  <icon-lucide-chevron-left class="text-xl" />
-                </button>
-                <button
-                  class="inline-flex items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-800 leading-none py-0"
-                >
-                  <icon-lucide-chevron-right class="text-xl" />
-                </button>
-              </div>
+              <HoppButtonPrimary
+                class="mr-4"
+                label="Create Team"
+                @click="showCreateTeamModal = true"
+              />
             </div>
 
             <div>
-              <table class="w-full text-left">
+              <div
+                v-if="fetching && !error && !(teamList.length >= 1)"
+                class="flex justify-center"
+              >
+                <HoppSmartSpinner />
+              </div>
+              <div v-else-if="error">Unable to Load Teams List..</div>
+
+              <table v-if="teamList.length >= 1" class="w-full text-left">
                 <thead>
-                  <tr class="text-gray-200 border-b border-gray-600 text-sm">
-                    <th class="font-normal px-3 pt-0 pb-3"></th>
-                    <th class="font-normal px-3 pt-0 pb-3">Team Name</th>
-                    <th class="font-normal px-3 pt-0 pb-3">Team ID</th>
-                    <th class="font-normal px-3 pt-0 pb-3 md:table-cell">
-                      Number of Members
-                    </th>
-                    <th class="font-normal px-3 pt-0 pb-3">Action</th>
+                  <tr
+                    class="text-gray-200 border-b border-dividerDark text-sm font-bold"
+                  >
+                    <th class="px-3 pt-0 pb-3">Team ID</th>
+                    <th class="px-3 pt-0 pb-3">Team Name</th>
+                    <th class="px-3 pt-0 pb-3">Number of Members</th>
+                    <th class="px-3 pt-0 pb-3"></th>
                   </tr>
                 </thead>
+
                 <tbody class="text-gray-300">
-                  <!-- <router-link :custom="true" class="" :to="'/team/detail'"> -->
                   <tr
-                    v-for="(team, index) in teamList"
+                    v-for="team in teamList"
                     :key="team.id"
-                    class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl"
+                    class="border-b border-divider hover:bg-zinc-800 hover:cursor-pointer rounded-xl p-3"
                   >
-                    <td>
-                      <label>
-                        <input
-                          type="checkbox"
-                          class="appearance-none bg-gray-600 checked:bg-emerald-600 rounded-md ml-3 w-5 h-5"
-                          name="radio"
-                        />
-                      </label>
+                    <td
+                      @click="goToTeamDetails(team.id)"
+                      class="sm:p-3 py-5 px-1 min-w-30 max-w-50"
+                    >
+                      <div class="flex">
+                        <span class="ml-3 truncate">
+                          {{ team.id }}
+                        </span>
+                      </div>
                     </td>
 
                     <td
-                      class="sm:p-3 py-2 px-1 md:table-cell text-sky-300"
-                      @click="goToTeam(team.id)"
+                      @click="goToTeamDetails(team.id)"
+                      class="sm:p-3 py-5 px-1 min-w-80"
                     >
-                      <span class="hover:underline cursor-pointer">
+                      <span
+                        v-if="team.name"
+                        class="flex items-center ml-4 truncate"
+                      >
                         {{ team.name }}
                       </span>
-                    </td>
-
-                    <td @click="goToTeam(team.id)" class="sm:p-3 py-2 px-1">
-                      <span class="hover:underline cursor-pointer">
-                        {{ team.id }}
+                      <span v-else class="flex items-center ml-4">
+                        (Unnamed team)
                       </span>
                     </td>
 
-                    <td class="sm:p-3 py-2 px-1 justify-center">
-                      {{ team.members?.length }}
+                    <td
+                      @click="goToTeamDetails(team.id)"
+                      class="sm:p-3 py-5 px-1"
+                    >
+                      <span class="ml-7">
+                        {{ team.members?.length }}
+                      </span>
                     </td>
+
                     <td>
-                      <tippy
-                        interactive
-                        trigger="click"
-                        theme="popover"
-                        :on-shown="() => tippyActions![index].focus()"
-                      >
-                        <span class="cursor-pointer">
-                          <icon-lucide-more-horizontal />
-                        </span>
-                        <template #content="{ hide }">
-                          <div
-                            ref="tippyActions"
-                            class="flex flex-col focus:outline-none"
-                            tabindex="0"
-                            @keyup.escape="hide()"
-                          >
-                            <HoppSmartItem
-                              label="Delete"
-                              @click="
-                                () => {
-                                  deleteTeam(team.id);
-                                  hide();
-                                }
-                              "
-                            />
-                          </div>
-                        </template>
-                      </tippy>
+                      <div class="relative">
+                        <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
+                                :icon="IconTrash"
+                                :label="'Delete Team'"
+                                class="!hover:bg-red-600 w-full"
+                                @click="deleteTeam(team.id)"
+                              />
+                            </div>
+                          </template>
+                        </tippy>
+                      </div>
                     </td>
                   </tr>
-                  <!-- </router-link> -->
                 </tbody>
               </table>
-            </div>
-
-            <div v-if="teamList.length >= 20" class="text-center">
-              <button
+              <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="fetchNextTeams"
-                class="mt-5 p-2 rounded-3xl bg-gray-700"
               >
-                <icon-lucide-chevron-down class="text-xl" />
-              </button>
+                <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>
@@ -141,6 +125,58 @@
     </div>
   </div>
 
+  <HoppSmartModal
+    v-if="showCreateTeamModal"
+    dialog
+    title="Create Team"
+    @close="showCreateTeamModal = false"
+  >
+    <template #body>
+      <div>
+        <div>
+          <div class="px-6 rounded-md">
+            <div>
+              <div class="my-4">
+                <div>
+                  <label class="text-gray-200" for="emailAddress">
+                    Enter Team Name
+                  </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"
+                    v-model="teamName"
+                    placeholder="Team Name"
+                  />
+                </div>
+              </div>
+              <div class="my-6">
+                <div>
+                  <label class="text-gray-200" for="emailAddress">
+                    Enter Email Address of Team Owner
+                  </label>
+
+                  <HoppSmartAutoComplete
+                    placeholder="Enter Email"
+                    :source="allUsersEmail"
+                    :spellcheck="true"
+                    styles="
+                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
+              "
+                    class="flex-1 !flex"
+                    @input="(email: string) => getOwnerEmail(email)"
+                  />
+                </div>
+              </div>
+
+              <div class="flex justify-end my-2 pt-3">
+                <HoppButtonPrimary label="Create Team" @click="createTeam" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </HoppSmartModal>
+
   <HoppSmartConfirmModal
     :show="confirmDeletion"
     :title="`Confirm Deletion of the team?`"
@@ -150,56 +186,100 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-
+import { useRoute, useRouter } from 'vue-router';
 import {
+  CreateTeamDocument,
+  MetricsDocument,
   RemoveTeamDocument,
   TeamListDocument,
+  UsersListDocument,
 } from '../../helpers/backend/graphql';
 import { usePagedQuery } from '../../composables/usePagedQuery';
-
-import { onMounted, onBeforeUnmount, ref } from 'vue';
-import { useMutation } from '@urql/vue';
+import { ref, watch, computed } from 'vue';
+import { useMutation, useQuery } from '@urql/vue';
 import { useToast } from '../../composables/toast';
+import { TippyComponent } from 'vue-tippy';
+import IconTrash from '~icons/lucide/trash';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
 
 const toast = useToast();
+// Template refs
+const tippyActions = ref<TippyComponent | null>(null);
 
-const router = useRouter();
+// Get Users List
+const { data } = useQuery({ query: MetricsDocument });
+const usersPerPage = computed(() => data.value?.admin.usersCount || 10000);
 
+const { list: usersList } = usePagedQuery(
+  UsersListDocument,
+  (x) => x.admin.allUsers,
+  (x) => x.uid,
+  usersPerPage.value,
+  { cursor: undefined, take: usersPerPage.value }
+);
+
+const allUsersEmail = computed(() => usersList.value.map((user) => user.email));
+
+// Get Paginated Results of all the teams in the infra
+const teamsPerPage = 20;
 const {
   fetching,
+  error,
   goToNextPage: fetchNextTeams,
   refetch,
   list: teamList,
+  hasNextPage,
 } = usePagedQuery(
   TeamListDocument,
   (x) => x.admin.allTeams,
   (x) => x.id,
-  10,
-  { cursor: undefined, take: 10 }
+  teamsPerPage,
+  { cursor: undefined, take: teamsPerPage }
 );
 
-const goToTeam = (teamId: string) => {
+// Create Team
+const teamName = ref('');
+const ownerEmail = ref('');
+const createTeamMutation = useMutation(CreateTeamDocument);
+const showCreateTeamModal = ref(false);
+const getOwnerEmail = (email: string) => (ownerEmail.value = email);
+
+const createTeam = async () => {
+  const userUid =
+    usersList.value.find((user) => user.email === ownerEmail.value)?.uid || '';
+  const variables = { name: teamName.value.trim(), userUid: userUid };
+  await createTeamMutation.executeMutation(variables).then((result) => {
+    if (result.error) {
+      if (teamName.value.length < 6) {
+        toast.error('Team name should be atleast 6 characters long!!');
+      }
+      if (result.error.toString() == '[GraphQL] user/not_found') {
+        toast.error('User not found!!');
+      } else {
+        toast.error('Failed to create team!!');
+      }
+    } else {
+      toast.success('Team created successfully!!');
+      showCreateTeamModal.value = false;
+      refetch();
+    }
+  });
+};
+
+// Go To Individual Team Details Page
+const router = useRouter();
+const goToTeamDetails = (teamId: string) => {
   router.push('/teams/' + teamId);
 };
 
-// Open the side menu dropdown of only the selected user
-const activeTeamId = ref<null | String>(null);
+// Reload Teams Page when routed back to the teams page
+const route = useRoute();
+watch(
+  () => route.params.id,
+  () => window.location.reload()
+);
 
-// Template refs
-const tippyActions = ref<any | null>(null);
-
-// Hide dropdown when user clicks elsewhere
-const close = (e: any) => {
-  if (!e.target.closest('.dropdown')) {
-    activeTeamId.value = null;
-  }
-};
-
-onMounted(() => document.addEventListener('click', close));
-onBeforeUnmount(() => document.removeEventListener('click', close));
-
-// User Deletion
+// Team Deletion
 const teamDeletion = useMutation(RemoveTeamDocument);
 const confirmDeletion = ref(false);
 const deleteTeamID = ref<string | null>(null);
@@ -212,16 +292,16 @@ const deleteTeam = (id: string) => {
 const deleteTeamMutation = async (id: string | null) => {
   if (!id) {
     confirmDeletion.value = false;
-    toast.error('Team Deletion Failed');
+    toast.error('Team deletion failed!!');
     return;
   }
   const variables = { uid: id };
   await teamDeletion.executeMutation(variables).then((result) => {
     if (result.error) {
-      toast.error('Team Deletion Failed');
+      toast.error('Team deletion failed!!');
     } else {
-      refetch();
-      toast.success('Team Deleted Successfully');
+      teamList.value = teamList.value.filter((team) => team.id !== id);
+      toast.success('Team deleted successfully!!');
     }
   });
   confirmDeletion.value = false;
diff --git a/packages/hoppscotch-ui/package.json b/packages/hoppscotch-ui/package.json
index 4a3c91c89..36c6a920d 100644
--- a/packages/hoppscotch-ui/package.json
+++ b/packages/hoppscotch-ui/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
+    "watch": "vite build --watch",
     "build": "vite build",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
diff --git a/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue b/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue
index d8a8f5149..c11a03dd0 100644
--- a/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue
+++ b/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue
@@ -1,13 +1,9 @@
 <template>
   <div class="autocomplete-wrapper">
-    <input ref="acInput" :value="text" type="text" autocomplete="off" :placeholder="placeholder" :spellcheck="spellcheck"
-      :autocapitalize="autocapitalize" :class="styles" @input.stop="
-        (e) => {
-          $emit('input', e.target.value)
-          updateSuggestions(e)
-        }
-      " @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke"
-      @change="$emit('change', $event)" />
+    <input ref="acInput" v-model="text" type="text" autocomplete="off" :placeholder="placeholder" :spellcheck="spellcheck"
+      :autocapitalize="autocapitalize" :class="styles" @input.stop="onInput" @keyup="updateSuggestions"
+      @click="updateSuggestions" @keydown="handleKeystroke" @change="emit('change', $event)" />
+
     <ul v-if="suggestions.length > 0 && suggestionsVisible" class="suggestions"
       :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
       <li v-for="(suggestion, index) in suggestions" :key="`suggestion-${index}`"
@@ -18,169 +14,162 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { onMounted, ref, computed } from "vue"
 
-export default defineComponent({
-  props: {
-    spellcheck: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
+const acInput = ref<HTMLInputElement>()
 
-    autocapitalize: {
-      type: String,
-      default: "off",
-      required: false,
-    },
-
-    placeholder: {
-      type: String,
-      default: "",
-      required: false,
-    },
-
-    source: {
-      type: Array,
-      required: true,
-    },
-
-    value: {
-      type: String,
-      default: "",
-      required: false,
-    },
-
-    styles: {
-      type: String,
-      default: "",
-    },
-  },
-  emits: ["input", "change"],
-  data() {
-    return {
-      text: this.value,
-      selectionStart: 0,
-      suggestionsOffsetLeft: 0,
-      currentSuggestionIndex: -1,
-      suggestionsVisible: false,
-    }
+const props = defineProps({
+  spellcheck: {
+    type: Boolean,
+    default: true,
+    required: false,
   },
 
-  computed: {
-    /**
-     * Gets the suggestions list to be displayed under the input box.
-     *
-     * @returns {default.props.source|{type, required}}
-     */
-    suggestions() {
-      const input = this.text.substring(0, this.selectionStart)
+  autocapitalize: {
+    type: String,
+    default: "off",
+    required: false,
+  },
 
-      return (
-        this.source
-          .filter(
-            (entry) =>
-              entry.toLowerCase().startsWith(input.toLowerCase()) &&
-              input.toLowerCase() !== entry.toLowerCase()
-          )
-          // Cut off the part that's already been typed.
-          .map((entry) => entry.substring(this.selectionStart))
-          // We only want the top 10 suggestions.
-          .slice(0, 10)
+  placeholder: {
+    type: String,
+    default: "",
+    required: false,
+  },
+
+  source: {
+    type: Array<string>,
+    required: true,
+  },
+
+  value: {
+    type: String,
+    default: "",
+    required: false,
+  },
+
+  styles: {
+    type: String,
+    default: "",
+  },
+})
+
+const emit = defineEmits<{
+  (e: "input", v: string): void
+  (e: "change", v: Event): void
+}>()
+
+const text = ref(props.value)
+const selectionStart = ref(0)
+const suggestionsOffsetLeft = ref(0)
+const currentSuggestionIndex = ref(-1)
+const suggestionsVisible = ref(false)
+
+
+onMounted(() => {
+  updateSuggestions({
+    target: acInput,
+  })
+})
+
+const suggestions = computed(() => {
+  const input = text.value.substring(0, selectionStart.value)
+  return (
+    props.source
+      .filter(
+        (entry) =>
+          entry.toLowerCase().startsWith(input.toLowerCase()) &&
+          input.toLowerCase() !== entry.toLowerCase()
       )
-    },
-  },
+      // Cut off the part that's already been typed.
+      .map((entry) => entry.substring(selectionStart.value))
+      // We only want the top 10 suggestions.
+      .slice(0, 10)
+  )
+})
 
-  watch: {
-    value(newValue) {
-      this.text = newValue
-    },
-  },
 
-  mounted() {
-    this.updateSuggestions({
-      target: this.$refs.acInput,
-    })
-  },
+function updateSuggestions(event: any) {
+  // Hide suggestions if ESC pressed.
+  if (event.code && event.code === "Escape") {
+    event.preventDefault()
+    suggestionsVisible.value = false
+    currentSuggestionIndex.value = -1
+    return
+  }
 
-  methods: {
-    updateSuggestions(event) {
-      // Hide suggestions if ESC pressed.
-      if (event.code && event.code === "Escape") {
-        event.preventDefault()
-        this.suggestionsVisible = false
-        this.currentSuggestionIndex = -1
+  // As suggestions is a reactive property, this implicitly
+  // causes suggestions to update.
+  selectionStart.value = acInput.value?.selectionStart ?? -1
+  suggestionsOffsetLeft.value = 12 * selectionStart.value
+  suggestionsVisible.value = true
+}
+
+const onInput = (e: Event) => {
+  emit('input', (e.target as HTMLInputElement).value)
+  updateSuggestions(e)
+}
+
+function forceSuggestion(str: string) {
+  const input = text.value.substring(0, selectionStart.value)
+  text.value = input + str
+
+  selectionStart.value = text.value.length
+  suggestionsVisible.value = true
+  currentSuggestionIndex.value = -1
+
+  emit("input", text.value)
+}
+
+function handleKeystroke(event: any) {
+  switch (event.code) {
+    case "Enter":
+      event.preventDefault()
+      if (currentSuggestionIndex.value > -1)
+        forceSuggestion(
+          suggestions.value.find(
+            (_item, index) => index === currentSuggestionIndex.value
+          )!
+        )
+      break
+
+    case "ArrowUp":
+      event.preventDefault()
+      currentSuggestionIndex.value =
+        currentSuggestionIndex.value - 1 >= 0
+          ? currentSuggestionIndex.value - 1
+          : 0
+      break
+
+    case "ArrowDown":
+      event.preventDefault()
+      currentSuggestionIndex.value =
+        currentSuggestionIndex.value < suggestions.value.length - 1
+          ? currentSuggestionIndex.value + 1
+          : suggestions.value.length - 1
+      break
+
+    case "Tab": {
+      const activeSuggestion =
+        suggestions.value[
+        currentSuggestionIndex.value >= 0 ? currentSuggestionIndex.value : 0
+        ]
+
+      if (!activeSuggestion) {
         return
       }
 
-      // As suggestions is a reactive property, this implicitly
-      // causes suggestions to update.
-      this.selectionStart = this.$refs.acInput.selectionStart
-      this.suggestionsOffsetLeft = 12 * this.selectionStart
-      this.suggestionsVisible = true
-    },
-
-    forceSuggestion(text) {
-      const input = this.text.substring(0, this.selectionStart)
-      this.text = input + text
-
-      this.selectionStart = this.text.length
-      this.suggestionsVisible = true
-      this.currentSuggestionIndex = -1
-
-      this.$emit("input", this.text)
-    },
-
-    handleKeystroke(event) {
-      switch (event.code) {
-        case "Enter":
-          event.preventDefault()
-          if (this.currentSuggestionIndex > -1)
-            this.forceSuggestion(
-              this.suggestions.find(
-                (_item, index) => index === this.currentSuggestionIndex
-              )
-            )
-          break
-
-        case "ArrowUp":
-          event.preventDefault()
-          this.currentSuggestionIndex =
-            this.currentSuggestionIndex - 1 >= 0
-              ? this.currentSuggestionIndex - 1
-              : 0
-          break
-
-        case "ArrowDown":
-          event.preventDefault()
-          this.currentSuggestionIndex =
-            this.currentSuggestionIndex < this.suggestions.length - 1
-              ? this.currentSuggestionIndex + 1
-              : this.suggestions.length - 1
-          break
-
-        case "Tab": {
-          const activeSuggestion =
-            this.suggestions[
-            this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
-            ]
-
-          if (!activeSuggestion) {
-            return
-          }
-
-          event.preventDefault()
-          const input = this.text.substring(0, this.selectionStart)
-          this.text = input + activeSuggestion
-          break
-        }
-      }
-    },
-  },
-})
+      event.preventDefault()
+      const input = text.value.substring(0, selectionStart.value)
+      text.value = input + activeSuggestion
+      break
+    }
+  }
+}
 </script>
 
+
 <style lang="scss" scoped>
 .autocomplete-wrapper {
   @apply relative;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f6f7bef3..7a1f26c4c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9164,6 +9164,14 @@ packages:
     dependencies:
       acorn: 8.8.0
 
+  /acorn-jsx@5.3.2(acorn@8.8.2):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.8.2
+    dev: true
+
   /acorn-loose@6.1.0:
     resolution: {integrity: sha512-FHhXoiF0Uch3IqsrnPpWwCtiv5PYvipTpT1k9lDMgQVVYc9iDuSl5zdJV358aI8twfHCYMFBRVYvAVki9wC/ng==}
     engines: {node: '>=0.4.0'}
@@ -9207,7 +9215,7 @@ packages:
     hasBin: true
 
   /after@0.8.2:
-    resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=}
+    resolution: {integrity: sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==}
     dev: false
 
   /agent-base@6.0.2:
@@ -9819,7 +9827,7 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
   /base64-arraybuffer@0.1.4:
-    resolution: {integrity: sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=}
+    resolution: {integrity: sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==}
     engines: {node: '>= 0.6.0'}
     dev: false
 
@@ -10465,14 +10473,14 @@ packages:
     dev: true
 
   /component-bind@1.0.0:
-    resolution: {integrity: sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=}
+    resolution: {integrity: sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==}
     dev: false
 
   /component-emitter@1.3.0:
     resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
 
   /component-inherit@0.0.3:
-    resolution: {integrity: sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=}
+    resolution: {integrity: sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==}
     dev: false
 
   /concat-map@0.0.1:
@@ -12475,8 +12483,8 @@ packages:
     resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.8.0
-      acorn-jsx: 5.3.2(acorn@8.8.0)
+      acorn: 8.8.2
+      acorn-jsx: 5.3.2(acorn@8.8.2)
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -13718,7 +13726,7 @@ packages:
     dev: false
 
   /has-cors@1.1.0:
-    resolution: {integrity: sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=}
+    resolution: {integrity: sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==}
     dev: false
 
   /has-flag@3.0.0:
@@ -14111,7 +14119,7 @@ packages:
     engines: {node: '>=8'}
 
   /indexof@0.0.1:
-    resolution: {integrity: sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=}
+    resolution: {integrity: sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==}
     dev: false
 
   /inflight@1.0.6:
@@ -15433,7 +15441,7 @@ packages:
       jest-util: 27.5.1
       natural-compare: 1.4.0
       pretty-format: 27.5.1
-      semver: 7.3.7
+      semver: 7.3.8
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -17013,15 +17021,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  /mlly@1.1.0:
-    resolution: {integrity: sha512-cwzBrBfwGC1gYJyfcy8TcZU1f+dbH/T+TuOhtYP2wLv/Fb51/uV7HJQfBPtEupZ2ORLRU1EKFS/QfS3eo9+kBQ==}
-    dependencies:
-      acorn: 8.8.2
-      pathe: 1.1.0
-      pkg-types: 1.0.1
-      ufo: 1.0.1
-    dev: true
-
   /mlly@1.2.0:
     resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==}
     dependencies:
@@ -17832,14 +17831,6 @@ packages:
       find-up: 4.1.0
     dev: true
 
-  /pkg-types@1.0.1:
-    resolution: {integrity: sha512-jHv9HB+Ho7dj6ItwppRDDl0iZRYBD0jsakHXtFgoLr+cHSF6xC+QL54sJmWxyGxOLYSHm0afhXhXcQDQqH9z8g==}
-    dependencies:
-      jsonc-parser: 3.2.0
-      mlly: 1.1.0
-      pathe: 1.1.0
-    dev: true
-
   /pkg-types@1.0.2:
     resolution: {integrity: sha512-hM58GKXOcj8WTqUXnsQyJYXdeAPbythQgEF3nTcEo+nkD49chjQ9IKm/QJy9xf6JakXptz86h7ecP2024rrLaQ==}
     dependencies:
@@ -19822,7 +19813,7 @@ packages:
     dev: true
 
   /to-array@0.1.4:
-    resolution: {integrity: sha1-F+bBH3PdTz10zaek/zI46a2b+JA=}
+    resolution: {integrity: sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==}
     dev: false
 
   /to-fast-properties@2.0.0:
@@ -20334,10 +20325,6 @@ packages:
     resolution: {integrity: sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==}
     dev: true
 
-  /ufo@1.0.1:
-    resolution: {integrity: sha512-boAm74ubXHY7KJQZLlXrtMz52qFvpsbOxDcZOnw/Wf+LS4Mmyu7JxmzD4tDLtUQtmZECypJ0FrCz4QIe6dvKRA==}
-    dev: true
-
   /ufo@1.1.1:
     resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==}
     dev: true
@@ -20543,7 +20530,7 @@ packages:
       webpack:
         optional: true
     dependencies:
-      acorn: 8.8.0
+      acorn: 8.8.2
       chokidar: 3.5.3
       esbuild: 0.15.15
       rollup: 2.79.1
@@ -20569,7 +20556,7 @@ packages:
       webpack:
         optional: true
     dependencies:
-      acorn: 8.8.0
+      acorn: 8.8.2
       chokidar: 3.5.3
       esbuild: 0.15.15
       rollup: 2.79.1
@@ -20742,7 +20729,7 @@ packages:
     hasBin: true
     dependencies:
       debug: 4.3.4(supports-color@9.2.2)
-      mlly: 1.1.0
+      mlly: 1.2.0
       pathe: 0.2.0
       source-map: 0.6.1
       source-map-support: 0.5.21
@@ -20764,7 +20751,7 @@ packages:
     dependencies:
       cac: 6.7.14
       debug: 4.3.4(supports-color@9.2.2)
-      mlly: 1.1.0
+      mlly: 1.2.0
       pathe: 1.1.0
       picocolors: 1.0.0
       vite: 3.2.4(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)
@@ -22417,7 +22404,7 @@ packages:
     dev: false
 
   /yeast@0.1.2:
-    resolution: {integrity: sha1-AI4G2AlDIMNy28L47XagymyKxBk=}
+    resolution: {integrity: sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==}
     dev: false
 
   /yn@3.1.1: