feat: introducing team (HBE-86) (#36)

2023-03-21 16:35:01 +06:00
parent 2244fb0523
commit 8b1d8e6a90
30 changed files with 1733 additions and 439 deletions
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -1,165 +0,0 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
-export {}
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
-    AppAnnouncement: typeof import('./components/app/Announcement.vue')['default']
-    AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default']
-    AppFooter: typeof import('./components/app/Footer.vue')['default']
-    AppFuse: typeof import('./components/app/Fuse.vue')['default']
-    AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
-    AppHeader: typeof import('./components/app/Header.vue')['default']
-    AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
-    AppLogo: typeof import('./components/app/Logo.vue')['default']
-    AppNavigation: typeof import('./components/app/Navigation.vue')['default']
-    AppOptions: typeof import('./components/app/Options.vue')['default']
-    AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
-    AppPowerSearch: typeof import('./components/app/PowerSearch.vue')['default']
-    AppPowerSearchEntry: typeof import('./components/app/PowerSearchEntry.vue')['default']
-    AppShare: typeof import('./components/app/Share.vue')['default']
-    AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
-    AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
-    AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
-    AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
-    AppSupport: typeof import('./components/app/Support.vue')['default']
-    Collections: typeof import('./components/collections/index.vue')['default']
-    CollectionsAdd: typeof import('./components/collections/Add.vue')['default']
-    CollectionsAddFolder: typeof import('./components/collections/AddFolder.vue')['default']
-    CollectionsAddRequest: typeof import('./components/collections/AddRequest.vue')['default']
-    CollectionsCollection: typeof import('./components/collections/Collection.vue')['default']
-    CollectionsEdit: typeof import('./components/collections/Edit.vue')['default']
-    CollectionsEditFolder: typeof import('./components/collections/EditFolder.vue')['default']
-    CollectionsEditRequest: typeof import('./components/collections/EditRequest.vue')['default']
-    CollectionsGraphql: typeof import('./components/collections/graphql/index.vue')['default']
-    CollectionsGraphqlAdd: typeof import('./components/collections/graphql/Add.vue')['default']
-    CollectionsGraphqlAddFolder: typeof import('./components/collections/graphql/AddFolder.vue')['default']
-    CollectionsGraphqlAddRequest: typeof import('./components/collections/graphql/AddRequest.vue')['default']
-    CollectionsGraphqlCollection: typeof import('./components/collections/graphql/Collection.vue')['default']
-    CollectionsGraphqlEdit: typeof import('./components/collections/graphql/Edit.vue')['default']
-    CollectionsGraphqlEditFolder: typeof import('./components/collections/graphql/EditFolder.vue')['default']
-    CollectionsGraphqlEditRequest: typeof import('./components/collections/graphql/EditRequest.vue')['default']
-    CollectionsGraphqlFolder: typeof import('./components/collections/graphql/Folder.vue')['default']
-    CollectionsGraphqlImportExport: typeof import('./components/collections/graphql/ImportExport.vue')['default']
-    CollectionsGraphqlRequest: typeof import('./components/collections/graphql/Request.vue')['default']
-    CollectionsImportExport: typeof import('./components/collections/ImportExport.vue')['default']
-    CollectionsMyCollections: typeof import('./components/collections/MyCollections.vue')['default']
-    CollectionsRequest: typeof import('./components/collections/Request.vue')['default']
-    CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
-    CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
-    Environments: typeof import('./components/environments/index.vue')['default']
-    EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
-    EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
-    EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
-    EnvironmentsMyEnvironment: typeof import('./components/environments/my/Environment.vue')['default']
-    EnvironmentsTeams: typeof import('./components/environments/teams/index.vue')['default']
-    EnvironmentsTeamsDetails: typeof import('./components/environments/teams/Details.vue')['default']
-    EnvironmentsTeamsEnvironment: typeof import('./components/environments/teams/Environment.vue')['default']
-    FirebaseLogin: typeof import('./components/firebase/Login.vue')['default']
-    FirebaseLogout: typeof import('./components/firebase/Logout.vue')['default']
-    GraphqlAuthorization: typeof import('./components/graphql/Authorization.vue')['default']
-    GraphqlField: typeof import('./components/graphql/Field.vue')['default']
-    GraphqlRequest: typeof import('./components/graphql/Request.vue')['default']
-    GraphqlRequestOptions: typeof import('./components/graphql/RequestOptions.vue')['default']
-    GraphqlResponse: typeof import('./components/graphql/Response.vue')['default']
-    GraphqlSidebar: typeof import('./components/graphql/Sidebar.vue')['default']
-    GraphqlType: typeof import('./components/graphql/Type.vue')['default']
-    GraphqlTypeLink: typeof import('./components/graphql/TypeLink.vue')['default']
-    History: typeof import('./components/history/index.vue')['default']
-    HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
-    HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
-    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
-    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
-    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
-    HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
-    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
-    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
-    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
-    HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
-    HttpBody: typeof import('./components/http/Body.vue')['default']
-    HttpBodyParameters: typeof import('./components/http/BodyParameters.vue')['default']
-    HttpCodegenModal: typeof import('./components/http/CodegenModal.vue')['default']
-    HttpHeaders: typeof import('./components/http/Headers.vue')['default']
-    HttpImportCurl: typeof import('./components/http/ImportCurl.vue')['default']
-    HttpOAuth2Authorization: typeof import('./components/http/OAuth2Authorization.vue')['default']
-    HttpParameters: typeof import('./components/http/Parameters.vue')['default']
-    HttpPreRequestScript: typeof import('./components/http/PreRequestScript.vue')['default']
-    HttpRawBody: typeof import('./components/http/RawBody.vue')['default']
-    HttpReqChangeConfirmModal: typeof import('./components/http/ReqChangeConfirmModal.vue')['default']
-    HttpRequest: typeof import('./components/http/Request.vue')['default']
-    HttpRequestOptions: typeof import('./components/http/RequestOptions.vue')['default']
-    HttpResponse: typeof import('./components/http/Response.vue')['default']
-    HttpResponseMeta: typeof import('./components/http/ResponseMeta.vue')['default']
-    HttpSidebar: typeof import('./components/http/Sidebar.vue')['default']
-    HttpTestResult: typeof import('./components/http/TestResult.vue')['default']
-    HttpTestResultEntry: typeof import('./components/http/TestResultEntry.vue')['default']
-    HttpTestResultEnv: typeof import('./components/http/TestResultEnv.vue')['default']
-    HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
-    HttpTests: typeof import('./components/http/Tests.vue')['default']
-    HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
-    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideInfo: typeof import('~icons/lucide/info')['default']
-    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
-    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideSearch: typeof import('~icons/lucide/search')['default']
-    IconLucideUser: typeof import('~icons/lucide/user')['default']
-    IconLucideUsers: typeof import('~icons/lucide/users')['default']
-    LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
-    LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
-    LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
-    LensesRenderersImageLensRenderer: typeof import('./components/lenses/renderers/ImageLensRenderer.vue')['default']
-    LensesRenderersJSONLensRenderer: typeof import('./components/lenses/renderers/JSONLensRenderer.vue')['default']
-    LensesRenderersPDFLensRenderer: typeof import('./components/lenses/renderers/PDFLensRenderer.vue')['default']
-    LensesRenderersRawLensRenderer: typeof import('./components/lenses/renderers/RawLensRenderer.vue')['default']
-    LensesRenderersXMLLensRenderer: typeof import('./components/lenses/renderers/XMLLensRenderer.vue')['default']
-    LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default']
-    ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
-    ProfileShortcode: typeof import('./components/profile/Shortcode.vue')['default']
-    ProfileShortcodes: typeof import('./components/profile/Shortcodes.vue')['default']
-    ProfileUserDelete: typeof import('./components/profile/UserDelete.vue')['default']
-    RealtimeCommunication: typeof import('./components/realtime/Communication.vue')['default']
-    RealtimeConnectionConfig: typeof import('./components/realtime/ConnectionConfig.vue')['default']
-    RealtimeLog: typeof import('./components/realtime/Log.vue')['default']
-    RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default']
-    RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
-    SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
-    SmartChangeLanguage: typeof import('./components/smart/ChangeLanguage.vue')['default']
-    SmartColorModePicker: typeof import('./components/smart/ColorModePicker.vue')['default']
-    SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
-    SmartFontSizePicker: typeof import('./components/smart/FontSizePicker.vue')['default']
-    SmartTree: typeof import('./components/smart/Tree.vue')['default']
-    SmartTreeBranch: typeof import('./components/smart/TreeBranch.vue')['default']
-    TabPrimary: typeof import('./components/tab/Primary.vue')['default']
-    TabSecondary: typeof import('./components/tab/Secondary.vue')['default']
-    Teams: typeof import('./components/teams/index.vue')['default']
-    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
-    TeamsEdit: typeof import('./components/teams/Edit.vue')['default']
-    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
-    TeamsMemberStack: typeof import('./components/teams/MemberStack.vue')['default']
-    TeamsModal: typeof import('./components/teams/Modal.vue')['default']
-    TeamsTeam: typeof import('./components/teams/Team.vue')['default']
-    Tippy: typeof import('vue-tippy')['Tippy']
-    WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
-    WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
-  }
-
-}
--- a/packages/hoppscotch-sh-admin/package.json
+++ b/packages/hoppscotch-sh-admin/package.json
@@ -25,13 +25,16 @@
    "express-graphql": "^0.12.0",
    "fp-ts": "^2.13.1",
    "graphql": "^16.6.0",
+    "io-ts": "^2.2.16",
    "lodash-es": "^4.17.21",
    "rxjs": "^7.8.0",
    "ts-node-dev": "^2.0.0",
    "unplugin-icons": "^0.14.9",
    "unplugin-vue-components": "^0.21.0",
    "vue": "^3.2.6",
-    "vue-router": "4"
+    "vue-router": "4",
+    "tippy.js": "^6.3.7",
+    "vue-tippy": "6.0.0-alpha.58"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "3.0.0",
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -18,36 +18,24 @@ declare module '@vue/runtime-core' {
    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['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']
-    IconLucideBell: typeof import('~icons/lucide/bell')['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']
-    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']
-    IconLucideSettings: typeof import('~icons/lucide/settings')['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']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
    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']
+    Tippy: typeof import('vue-tippy')['Tippy']
  }

 }
--- a/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
@@ -41,17 +41,6 @@
      </div>
    </div>
  </div>
-
-  <div class="flex justify-center sm:justify-end mt-8">
-    <router-link to="/users">
-      <button
-        @click="submitTeam"
-        class="px-4 py-2 text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
-      >
-        Save
-      </button>
-    </router-link>
-  </div>
 </template>

 <script setup lang="ts">
@@ -74,8 +63,4 @@ const addNewMember = () => {
 const deleteMemberRow = (index: number) => {
  members.splice(index, 1);
 };
-
-const submitTeam = () => {
-  console.log('members', members);
-};
 </script>
--- a/packages/hoppscotch-sh-admin/src/components/teams/Details.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Details.vue
@@ -0,0 +1,483 @@
+<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>
--- a/packages/hoppscotch-sh-admin/src/components/teams/Invite.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Invite.vue
@@ -0,0 +1,402 @@
+<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"
+      >
+        <HoppSmartSpinner />
+      </div>
+      <div v-else class="flex flex-col">
+        <div class="flex items-center justify-between flex-1 pt-4">
+          <label for="memberList" class="p-4"> Add members </label>
+          <div class="flex">
+            <HoppButtonSecondary
+              :icon="IconPlus"
+              label="Add new"
+              filled
+              @click="addNewInvitee"
+            />
+          </div>
+        </div>
+        <div class="border rounded divide-y divide-dividerLight border-divider">
+          <div
+            v-for="(invitee, index) in newInvites"
+            :key="`new-invitee-${index}`"
+            class="flex divide-x divide-dividerLight"
+          >
+            <input
+              v-model="invitee.key"
+              class="flex flex-1 px-4 py-2 bg-transparent"
+              placeholder="Email"
+              :name="'invitee' + index"
+              autofocus
+            />
+            <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="invitee.value"
+                    readonly
+                  />
+                </span>
+                <template #content="{ hide }">
+                  <div
+                    ref="tippyActions"
+                    class="flex flex-col focus:outline-none"
+                    tabindex="0"
+                    @keyup.escape="hide()"
+                  >
+                    <HoppSmartItem
+                      label="OWNER"
+                      :icon="
+                        invitee.value === 'OWNER' ? IconCircleDot : IconCircle
+                      "
+                      :active="invitee.value === 'OWNER'"
+                      @click="
+                        () => {
+                          updateNewInviteeRole(index, TeamMemberRole.Owner);
+                          hide();
+                        }
+                      "
+                    />
+                    <HoppSmartItem
+                      label="EDITOR"
+                      :icon="
+                        invitee.value === 'EDITOR' ? IconCircleDot : IconCircle
+                      "
+                      :active="invitee.value === 'EDITOR'"
+                      @click="
+                        () => {
+                          updateNewInviteeRole(index, TeamMemberRole.Editor);
+                          hide();
+                        }
+                      "
+                    />
+                    <HoppSmartItem
+                      label="VIEWER"
+                      :icon="
+                        invitee.value === 'VIEWER' ? IconCircleDot : IconCircle
+                      "
+                      :active="invitee.value === 'VIEWER'"
+                      @click="
+                        () => {
+                          updateNewInviteeRole(index, TeamMemberRole.Viewer);
+                          hide();
+                        }
+                      "
+                    />
+                  </div>
+                </template>
+              </tippy>
+            </span>
+            <div class="flex">
+              <HoppButtonSecondary
+                id="member"
+                v-tippy="{ theme: 'tooltip' }"
+                title="Remove"
+                :icon="IconTrash"
+                color="red"
+                @click="removeNewInvitee(index)"
+              />
+            </div>
+          </div>
+          <div
+            v-if="newInvites.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 mb-4"
+            />
+            <span class="pb-4 text-center"> No invites </span>
+            <HoppButtonSecondary
+              label="Add new"
+              filled
+              @click="addNewInvitee"
+            />
+          </div>
+        </div>
+        <div
+          v-if="newInvites.length"
+          class="flex flex-col items-start px-4 py-4 mt-4 border rounded border-dividerLight"
+        >
+          <span
+            class="flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full bg-primaryDark border-divider"
+          >
+            <component
+              :is="IconHelpCircle"
+              class="mr-2 text-secondaryLight svg-icons"
+            />
+            Roles
+          </span>
+          <p>
+            <span class="text-secondaryLight">
+              Roles are used to control access to the shared collections.
+            </span>
+          </p>
+          <ul class="mt-4 space-y-4">
+            <li class="flex">
+              <span
+                class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
+              >
+                Owner
+              </span>
+              <span class="flex flex-1">
+                Owners can add, edit, and delete requests, collections and team
+                members.
+              </span>
+            </li>
+            <li class="flex">
+              <span
+                class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
+              >
+                Editor
+              </span>
+              <span class="flex flex-1">
+                Editors can add, edit, and delete requests.
+              </span>
+            </li>
+            <li class="flex">
+              <span
+                class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
+              >
+                Viewer
+              </span>
+              <span class="flex flex-1">
+                Viewers can only view and use requests.
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </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,
+                },
+              ];
+            }
+          "
+        />
+        <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>
+  </HoppSmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import * as A from 'fp-ts/Array';
+import * as O from 'fp-ts/Option';
+import { pipe } from 'fp-ts/function';
+import {
+  TeamMemberRole,
+  CreateTeamInvitationDocument,
+} from '../../helpers/backend/graphql';
+
+import { useToast } from '~/composables/toast';
+
+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();
+
+// Template refs
+const tippyActions = ref<any | null>(null);
+
+const props = defineProps({
+  show: Boolean,
+  editingTeamID: { type: String, default: null },
+});
+
+const emit = defineEmits<{
+  (e: 'hide-modal'): void;
+}>();
+
+const t = (key: string) => key;
+
+const newInvites = ref<Array<{ key: string; value: TeamMemberRole }>>([
+  {
+    key: '',
+    value: TeamMemberRole.Viewer,
+  },
+]);
+
+const addNewInvitee = () => {
+  newInvites.value.push({
+    key: '',
+    value: TeamMemberRole.Viewer,
+  });
+};
+
+const updateNewInviteeRole = (index: number, role: TeamMemberRole) => {
+  newInvites.value[index].value = role;
+};
+
+const removeNewInvitee = (id: number) => {
+  newInvites.value.splice(id, 1);
+};
+
+type SendInvitesErrorType =
+  | {
+      email: Email;
+      status: 'error';
+      error: any;
+    }
+  | {
+      email: Email;
+      status: 'success';
+    };
+
+const sendInvitesResult = ref<Array<SendInvitesErrorType>>([]);
+
+const sendingInvites = ref<boolean>(false);
+
+const sendInvites = async () => {
+  sendingInvites.value = true;
+
+  const validationResult = pipe(
+    newInvites.value,
+    O.fromPredicate(
+      (invites): invites is Array<{ key: Email; value: TeamMemberRole }> =>
+        pipe(
+          invites,
+          A.every((invitee) => EmailCodec.is(invitee.key))
+        )
+    ),
+    O.map(
+      A.map((invitee) =>
+        createTeamInvitation(invitee.key, invitee.value, props.editingTeamID)
+      )
+    )
+  );
+
+  if (O.isNone(validationResult)) {
+    // Error handling for no validation
+    toast.error(`Invalid email address`);
+    sendingInvites.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 = [
+    {
+      key: '',
+      value: TeamMemberRole.Viewer,
+    },
+  ];
+  emit('hide-modal');
+};
+
+const teamInvitationMutation = useMutation(CreateTeamInvitationDocument);
+const createTeamInvitation = async (
+  inviteeEmail: Email,
+  inviteeRole: TeamMemberRole,
+  teamID: string
+) => {
+  const res = await teamInvitationMutation.executeMutation({
+    inviteeEmail,
+    inviteeRole,
+    teamID,
+  });
+
+  return res;
+};
+</script>
--- a/packages/hoppscotch-sh-admin/src/components/teams/Members.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Members.vue
@@ -0,0 +1,329 @@
+<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
+          />
+          <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>
+          </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)"
+            />
+          </div>
+        </div>
+      </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>
+  </div>
+  <HoppButtonPrimary
+    :label="t('action.save')"
+    :loading="isLoading"
+    outline
+    @click="saveTeam"
+  />
+</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;
+}>();
+
+const toast = useToast();
+
+const name = toRef(props.editingTeam, 'name');
+
+watch(
+  () => props.editingTeam.name,
+  (newName: string) => {
+    name.value = newName;
+  }
+);
+
+const roleUpdates = ref<
+  {
+    userID: string;
+    role: TeamMemberRole;
+  }[]
+>([]);
+
+watch(
+  () => teamDetails,
+  () => {
+    if (teamDetails.loading) return;
+
+    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
+      );
+    }
+  }
+);
+
+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(() => {
+  const members = (props.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) => {
+  isLoadingIndex.value = index;
+  const removeTeamMemberResult = await removeTeamMember(
+    userID,
+    props.editingTeamID
+  )();
+  if (E.isLeft(removeTeamMemberResult)) {
+    toast.error(`${t('error.something_went_wrong')}`);
+  } else {
+    toast.success(`${t('team.member_removed')}`);
+    emit('refetch-teams');
+    teamDetails.execute({ teamID: props.editingTeamID });
+  }
+  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>
--- a/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="flex items-center justify-between flex-1">
+    <label for="memberList" class="pb-4"> Pending Invites </label>
+  </div>
+  <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-for="(invitee, index) in data?.team?.teamInvitations"
+          :key="`invitee-${index}`"
+          class="flex divide-x divide-dividerLight"
+        >
+          <input
+            v-if="invitee"
+            class="flex flex-1 px-4 py-2 bg-transparent text-secondaryLight"
+            placeholder="Email"
+            :name="'param' + index"
+            :value="invitee.inviteeEmail"
+            readonly
+          />
+          <input
+            class="flex flex-1 px-4 py-2 bg-transparent text-secondaryLight"
+            placeholder="Permissions"
+            :name="'value' + index"
+            :value="invitee.inviteeRole"
+            readonly
+          />
+          <div class="flex">
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              title="Remove"
+              :icon="IconTrash"
+              color="red"
+              :loading="isLoadingIndex === index"
+              @click="removeInvitee(invitee.id, index)"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="data && data?.team?.teamInvitations.length === 0"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      >
+        <span class="text-center"> No pending invites </span>
+      </div>
+      <div v-if="!fetching && error" class="flex flex-col items-center p-4">
+        <component :is="IconHelpCircle" class="mb-4 svg-icons" />
+        Something went wrong. Please try again later.
+      </div>
+    </div>
+  </div>
+</template>
+
+<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 {
+  GetPendingInvitesDocument,
+  RevokeTeamInvitationDocument,
+} from '~/helpers/backend/graphql';
+import { useToast } from '~/composables/toast';
+
+const props = defineProps({
+  editingTeamID: { type: String, default: null },
+});
+
+const toast = useToast();
+const isLoadingIndex = ref<null | number>(null);
+
+const { fetching, data, error } = useQuery({
+  query: GetPendingInvitesDocument,
+  variables: {
+    teamID: props.editingTeamID,
+  },
+});
+
+console.log(data);
+
+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`);
+  } else {
+    toast.success(`Member removed successfully`);
+  }
+  isLoadingIndex.value = null;
+};
+
+const revokeInvitationMutation = useMutation(RevokeTeamInvitationDocument);
+function revokeTeamInvitation(inviteID: string) {
+  return revokeInvitationMutation.executeMutation({ inviteID });
+}
+</script>
--- a/packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts
+++ b/packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts
@@ -23,17 +23,18 @@ export function usePagedQuery<
  const fetchNextPage = async () => {
    fetching.value = true;
    try {
-      const result = await client.query(query, {
-        ...variables,
-        cursor: list.value.length > 0
-          ? getCursor(list.value.at(-1))
-          : undefined
-      }).toPromise();
+      const result = await client
+        .query(query, {
+          ...variables,
+          cursor:
+            list.value.length > 0 ? getCursor(list.value.at(-1)) : undefined,
+        })
+        .toPromise();

      const resultList = getList(result.data!);

      if (resultList.length < 20) {
-        hasNextPage.value = false
+        hasNextPage.value = false;
      }

      list.value.push(...resultList);
@@ -42,22 +43,30 @@ export function usePagedQuery<
      error.value = true;
    }
    fetching.value = false;
-  }
+  };

  onMounted(async () => {
-    await fetchNextPage()
+    await fetchNextPage();
  });

  const goToNextPage = async () => {
    if (hasNextPage.value) {
-      await fetchNextPage()
+      await fetchNextPage();
    }
  };

+  const refetch = async () => {
+    currentPage.value = 0;
+    hasNextPage.value = true;
+    list.value = [];
+    await fetchNextPage();
+  };
+
  return {
    fetching,
    error,
    goToNextPage,
+    refetch,
    list,
    hasNextPage,
  };
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/Email.ts
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/Email.ts
@@ -0,0 +1,16 @@
+import * as t from "io-ts"
+
+const emailRegex =
+  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+
+interface EmailBrand {
+  readonly Email: unique symbol
+}
+
+export const EmailCodec = t.brand(
+  t.string,
+  (x): x is t.Branded<string, EmailBrand> => emailRegex.test(x),
+  "Email"
+)
+
+export type Email = t.TypeOf<typeof EmailCodec>
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/AcceptTeamInvitation.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/AcceptTeamInvitation.graphql
@@ -0,0 +1,12 @@
+mutation AcceptTeamInvitation($inviteID: ID!) {
+  acceptTeamInvitation(inviteID: $inviteID) {
+    membershipID
+    role
+    user {
+      uid
+      displayName
+      photoURL
+      email
+    }
+  }
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/CreateTeam.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/CreateTeam.graphql
@@ -0,0 +1,20 @@
+mutation CreateTeam($userUid: String!, $name: String!) {
+  createTeamByAdmin(userUid: $userUid, name: $name) {
+    id
+    name
+    members {
+      membershipID
+      role
+      user {
+        uid
+        displayName
+        email
+        photoURL
+      }
+    }
+    myRole
+    ownersCount
+    editorsCount
+    viewersCount
+  }
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/CreateTeamInvitation.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/CreateTeamInvitation.graphql
@@ -0,0 +1,9 @@
+mutation CreateTeamInvitation($inviteeEmail: String!, $inviteeRole: TeamMemberRole!, $teamID: ID!) {
+  createTeamInvitation(inviteeRole: $inviteeRole, inviteeEmail: $inviteeEmail, teamID: $teamID) {
+    id
+    teamID
+    creatorUid
+    inviteeEmail
+    inviteeRole
+  }
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveTeam.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveTeam.graphql
@@ -0,0 +1,3 @@
+mutation RemoveTeam($uid: ID!) {
+  deleteTeamByAdmin(teamID: $uid)
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveTeamMember.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveTeamMember.graphql
@@ -0,0 +1,3 @@
+mutation RemoveTeamMember($userUid: ID!, $teamID: ID!) {
+  removeTeamMember(userUid: $userUid, teamID: $teamID)
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RenameTeam.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RenameTeam.graphql
@@ -0,0 +1,6 @@
+mutation RenameTeam($uid: ID!, $name: String!) {
+  renameTeamByAdmin(teamID: $uid, newName: $name) {
+    id
+    name
+  }
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RevokeTeamInvitation.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RevokeTeamInvitation.graphql
@@ -0,0 +1,3 @@
+mutation RevokeTeamInvitation($inviteID: ID!) {
+  revokeTeamInvitation(inviteID: $inviteID)
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/TeamInvitationAdded.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/TeamInvitationAdded.graphql
@@ -0,0 +1,5 @@
+subscription TeamInvitationAdded($teamID: ID!) {
+  teamInvitationAdded(teamID: $teamID) {
+    id
+  }
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/TeamInvitationRemoved.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/TeamInvitationRemoved.graphql
@@ -0,0 +1,3 @@
+subscription TeamInvitationRemoved($teamID: ID!) {
+  teamInvitationRemoved(teamID: $teamID)
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql
@@ -0,0 +1,10 @@
+mutation UpdateTeamMemberRole(
+  $newRole: TeamMemberRole!
+  $userUid: ID!
+  $teamID: ID!
+) {
+  updateTeamMemberRole(newRole: $newRole, userUid: $userUid, teamID: $teamID) {
+    membershipID
+    role
+  }
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamInfo.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamInfo.graphql
@@ -0,0 +1,30 @@
+query TeamInfo($uid: ID!) {
+  team(teamID: $uid) {
+    id
+    name
+
+    teamMembers {
+      membershipID
+      role
+      user {
+        uid
+        displayName
+        email
+        photoURL
+      }
+    }
+    teamInvitations {
+      id
+      inviteeEmail
+      inviteeRole
+    }
+    teamEnvironments {
+      id
+      name
+    }
+    myRole
+    ownersCount
+    editorsCount
+    viewersCount
+  }
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamList.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamList.graphql
@@ -0,0 +1,11 @@
+query TeamList($cursor: ID) {
+  admin {
+    allTeams(cursor: $cursor) {
+      id
+      name
+      members {
+        membershipID
+      }
+    }
+  }
+}
--- a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/pendingInvites.graphql
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/pendingInvites.graphql
@@ -0,0 +1,10 @@
+query GetPendingInvites($teamID: ID!) {
+  team(teamID: $teamID) {
+    id
+    teamInvitations {
+      inviteeRole
+      inviteeEmail
+      id
+    }
+  }
+}
--- a/packages/hoppscotch-sh-admin/src/modules/tippy.ts
+++ b/packages/hoppscotch-sh-admin/src/modules/tippy.ts
@@ -0,0 +1,32 @@
+import { HoppModule } from '.';
+import VueTippy, { roundArrow, setDefaultProps } from 'vue-tippy';
+
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/animations/scale-subtle.css';
+import 'tippy.js/dist/border.css';
+import 'tippy.js/dist/svg-arrow.css';
+
+export default <HoppModule>{
+  onVueAppInit(app) {
+    app.use(VueTippy);
+
+    setDefaultProps({
+      animation: 'scale-subtle',
+      appendTo: document.body,
+      allowHTML: false,
+      animateFill: false,
+      arrow: roundArrow + roundArrow,
+      popperOptions: {
+        // https://popper.js.org/docs/v2/utils/detect-overflow/
+        modifiers: [
+          {
+            name: 'preventOverflow',
+            options: {
+              rootBoundary: 'document',
+            },
+          },
+        ],
+      },
+    });
+  },
+};
--- a/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue
@@ -4,8 +4,8 @@
  <div>
    <div>
      <div class="px-6 rounded-md">
-        <form>
-          <div class="flex mt-4 ml-10">
+        <div>
+          <div class="flex mt-4">
            <div>
              <label class="text-gray-200 mr-5 text-lg" for="username"
                >Name:
@@ -13,15 +13,16 @@
              <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>
-        </form>
+        </div>
        <div class="mt-6"></div>

-        <div class="mx-10">
-          <TeamsAddMembers />
+        <div>
+          <HoppButtonPrimary :loading="loading" label="Save" @click="addTeam" />
        </div>

        <div class="mt-8"></div>
@@ -30,4 +31,50 @@
  </div>
 </template>

-<script setup lang="ts"></script>
+<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.createATeamByAdmin.id);
+  }
+
+  if (error) {
+    console.log(error);
+  }
+};
+
+const goToTeamDetailsPage = (teamId: string) => {
+  router.push('/teams/' + teamId);
+};
+</script>
--- a/packages/hoppscotch-sh-admin/src/pages/teams/_id.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/_id.vue
@@ -0,0 +1,3 @@
+<template>
+  <TeamsDetails />
+</template>
--- a/packages/hoppscotch-sh-admin/src/pages/teams/details.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/details.vue
@@ -1,120 +0,0 @@
-<template>
-  <div class="sm:px-6 p-4">
-    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Team Details</h3>
-
-    <div class="mt-5">
-      <div class="flex flex-wrap justify-center mx-6">
-        <div class="w-full px-4 sm:w-1/2 xl:w-1/3">
-          <div class="h-80 px-6 py-6 bg-zinc-800 rounded-md shadow-sm">
-            <div class="flex ml-3 mt-2">
-              <icon-lucide-user class="text-emerald-400 text-3xl" />
-
-              <h4 class="text-3xl ml-2 font-semibold text-gray-200">
-                Team Info
-              </h4>
-            </div>
-            <div class="flex mt-5 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-400">Team ID:</h4>
-              <div class="text-gray-200 ml-2">
-                {{ team.id }}
-              </div>
-            </div>
-            <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-400">Team Name:</h4>
-              <div class="text-gray-200 ml-2">
-                {{ team.name }}
-              </div>
-            </div>
-
-            <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-400">Creation Date:</h4>
-              <div class="text-gray-200 ml-2">
-                {{ team.date }}
-              </div>
-            </div>
-
-            <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-400">Number of members:</h4>
-              <div class="text-gray-200 ml-2">
-                {{ team.members }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full px-4 sm:w-1/2 xl:w-1/3">
-          <div class="h-80 px-5 py-6 bg-zinc-800 rounded-md shadow-sm">
-            <div class="flex ml-3 mt-2">
-              <icon-lucide-line-chart class="text-yellow-300 text-3xl" />
-
-              <h4 class="text-3xl ml-2 font-semibold text-gray-200">Stats</h4>
-            </div>
-
-            <div class="flex mt-5 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-400">
-                Number of Collections:
-              </h4>
-              <div class="text-gray-200 ml-2">
-                {{ stats.collections }}
-              </div>
-            </div>
-
-            <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-400">Number of Requests:</h4>
-              <div class="text-gray-200 ml-2">
-                {{ stats.requests }}
-              </div>
-            </div>
-
-            <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-400">
-                Number of Environments:
-              </h4>
-              <div class="text-gray-200 ml-2">
-                {{ stats.environments }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-6"></div>
-
-    <div class="mx-10">
-      <TeamsAddMembers />
-    </div>
-
-    <div class="mt-8"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive } from 'vue';
-
-interface Team {
-  id: string;
-  name: string;
-  date: string;
-  members: number;
-}
-
-const team = reactive<Team>({
-  id: 'absd123',
-  name: 'SelfHosters',
-  date: '30-01-2023',
-  members: 20,
-});
-
-interface Stats {
-  collections: number;
-  requests: number;
-  environments: number;
-}
-
-const stats = reactive<Stats>({
-  collections: 10,
-  requests: 20,
-  environments: 30,
-});
-</script>
--- a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
@@ -2,11 +2,11 @@
  <div>
    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Teams</h3>

-    <div class="flex flex-col">
-      <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
+    <div class="flex flex-col" v-if="!fetching">
+      <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 v-if="showOptions" class="flex w-full items-center mb-7">
+            <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"
              >
@@ -42,27 +42,26 @@
                </button>
              </div>
            </div>
+
            <div>
              <table 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 ID</th>
                    <th class="font-normal px-3 pt-0 pb-3">Team Name</th>
-                    <th class="font-normal px-3 pt-0 pb-3 hidden md:table-cell">
-                      Members
+                    <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">Status</th> -->
-                    <th class="font-normal px-3 pt-0 pb-3">Date</th>
+                    <th class="font-normal px-3 pt-0 pb-3">Action</th>
                  </tr>
                </thead>
                <tbody class="text-gray-300">
                  <!-- <router-link :custom="true" class="" :to="'/team/detail'"> -->
                  <tr
-                    v-for="team in teams"
-                    id="team.id"
-                    class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
-                    @click="goToTeam"
+                    v-for="(team, index) in teamList"
+                    :key="team.id"
+                    class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl"
                  >
                    <td>
                      <label>
@@ -73,91 +72,159 @@
                        />
                      </label>
                    </td>
-                    <td class="sm:p-3 py-2 px-1">
-                      <div class="flex">
-                        <span class="ml-3">
-                          {{ team.id }}
-                        </span>
-                      </div>
-                    </td>

                    <td
                      class="sm:p-3 py-2 px-1 md:table-cell hidden text-sky-300"
+                      @click="goToTeam(team.id)"
                    >
-                      {{ team.name }}
+                      <span class="hover:underline cursor-pointer">
+                        {{ 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>
+                    </td>
+
                    <td class="sm:p-3 py-2 px-1 justify-center">
-                      {{ team.members }}
-                    </td>
-                    <td class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center">
-                        <div class="sm:flex hidden flex-col">
-                          {{ team.date }}
-                          <div class="text-gray-400 text-xs">11:16 AM</div>
-                        </div>
-                      </div>
+                      {{ team.members?.length }}
                    </td>
                    <td>
-                      <button
-                        class="w-8 h-8 inline-flex items-center justify-right text-gray-400"
+                      <tippy
+                        interactive
+                        trigger="click"
+                        theme="popover"
+                        :on-shown="() => tippyActions![index].focus()"
                      >
-                        <icon-lucide-more-horizontal />
-                      </button>
+                        <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>
                    </td>
                  </tr>
                  <!-- </router-link> -->
                </tbody>
              </table>
            </div>
+
+            <div v-if="teamList.length >= 20" class="text-center">
+              <button
+                @click="fetchNextTeams"
+                class="mt-5 p-2 rounded-3xl bg-gray-700"
+              >
+                <icon-lucide-chevron-down class="text-xl" />
+              </button>
+            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
+
+  <HoppSmartConfirmModal
+    :show="confirmDeletion"
+    :title="`Confirm Deletion of the team?`"
+    @hide-modal="confirmDeletion = false"
+    @resolve="deleteTeamMutation(deleteTeamID)"
+  />
 </template>

 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import { defineProps } from 'vue';

-defineProps({
-  showOptions: {
-    type: Boolean,
-    default: true,
-  },
-});
+import {
+  RemoveTeamDocument,
+  TeamListDocument,
+} from '../../helpers/backend/graphql';
+import { usePagedQuery } from '../../composables/usePagedQuery';

-interface Team {
-  id: string;
-  name: string;
-  members: number;
-  date: string;
-}
+import { onMounted, onBeforeUnmount, ref } from 'vue';
+import { useMutation } from '@urql/vue';
+import { useToast } from '../../composables/toast';

-const teams: Array<Team> = [
-  {
-    id: '123e4',
-    name: 'HoppMain',
-    members: 100,
-    date: '15-01-2023',
-  },
-  {
-    id: '12vbe',
-    name: 'Hopp',
-    members: 10,
-    date: '19-05-2023',
-  },
-  {
-    id: 'bg1d2',
-    name: 'Kratos',
-    members: 59,
-    date: '15-03-2023',
-  },
-];
+const toast = useToast();

 const router = useRouter();

-const goToTeam = () => {
-  router.push('/teams/details');
+const {
+  fetching,
+  goToNextPage: fetchNextTeams,
+  refetch,
+  list: teamList,
+} = usePagedQuery(
+  TeamListDocument,
+  (x) => x.admin.allTeams,
+  (x) => x.id,
+  { cursor: undefined }
+);
+
+const goToTeam = (teamId: string) => {
+  router.push('/teams/' + teamId);
+};
+
+// Open the side menu dropdown of only the selected user
+const activeTeamId = ref<null | String>(null);
+
+// 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
+const teamDeletion = useMutation(RemoveTeamDocument);
+const confirmDeletion = ref(false);
+const deleteTeamID = ref<string | null>(null);
+
+const deleteTeam = (id: string) => {
+  confirmDeletion.value = true;
+  deleteTeamID.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 {
+      refetch();
+      toast.success('Team Deleted Successfully');
+    }
+  });
+  confirmDeletion.value = false;
+  deleteTeamID.value = null;
+  router.push('/teams');
 };
 </script>
--- a/packages/hoppscotch-sh-admin/vite.config.ts
+++ b/packages/hoppscotch-sh-admin/vite.config.ts
@@ -48,6 +48,12 @@ export default defineConfig({
          else return undefined;
        },
      ],
+      types: [
+        {
+          from: 'vue-tippy',
+          names: ['Tippy'],
+        },
+      ],
    }),
    Icons({
      compiler: 'vue3',