refactor: asterik length same as real text length

refactor: update secret toggle icon
fix: adjusted tests to work with the secret flag
2023-09-21 13:19:57 +05:30 · 2023-09-21 13:18:50 +05:30 · 2023-09-19 12:37:31 +05:30 · 2023-09-19 12:37:31 +05:30 · 2023-09-19 12:37:28 +05:30 · 2023-09-19 12:37:13 +05:30
336 changed files with 8152 additions and 12197 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -5,5 +5,5 @@
  "features": {
    "ghcr.io/NicoVIII/devcontainer-features/pnpm:1": {}
  },
-  "postCreateCommand": "cp .env.example .env && pnpm i"
+  "postCreateCommand": "mv .env.example .env && pnpm i"
 }
--- a/.github/workflows/release-push-docker.yml
+++ b/.github/workflows/release-push-docker.yml
@@ -18,9 +18,6 @@ jobs:
      - name: Setup QEMU
        uses: docker/setup-qemu-action@v3

-      - name: Setup Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
--- a/.github/workflows/ui.yml
+++ b/.github/workflows/ui.yml
@@ -36,7 +36,7 @@ jobs:

      # Deploy the ui site with netlify-cli
      - name: Deploy to Netlify (ui)
-        run: npx netlify-cli@15.11.0 deploy --dir=packages/hoppscotch-ui/.histoire/dist --prod
+        run: npx netlify-cli deploy --dir=packages/hoppscotch-ui/.histoire/dist --prod
        env:
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_UI_SITE_ID }}
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,14 @@
+{
+  "recommendations": [
+    "antfu.iconify",
+    "vue.volar",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "csstools.postcss",
+    "folke.vscode-monorepo-workspace"
+  ],
+  "unwantedRecommendations": [
+    "octref.vetur"
+  ]
+}
--- a/aio_run.mjs
+++ b/aio_run.mjs
@@ -50,7 +50,7 @@ execSync(`npx import-meta-env -x build.env -e build.env -p "/site/**/*"`)
 fs.rmSync("build.env")

 const caddyProcess = runChildProcessWithPrefix("caddy", ["run", "--config", "/etc/caddy/Caddyfile", "--adapter", "caddyfile"], "App/Admin Dashboard Caddy")
-const backendProcess = runChildProcessWithPrefix("pnpm", ["run", "start:migrate:prod"], "Backend Server")
+const backendProcess = runChildProcessWithPrefix("pnpm", ["run", "start:prod"], "Backend Server")

 caddyProcess.on("exit", (code) => {
  console.log(`Exiting process because Caddy Server exited with code ${code}`)
--- a/package.json
+++ b/package.json
@@ -22,14 +22,16 @@
  "workspaces": [
    "./packages/*"
  ],
+  "dependencies": {
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.8"
+  },
  "devDependencies": {
    "@commitlint/cli": "^16.2.3",
    "@commitlint/config-conventional": "^16.2.1",
-    "@types/node": "17.0.27",
+    "@types/node": "^17.0.24",
    "cross-env": "^7.0.3",
-    "http-server": "^14.1.1",
-    "husky": "^7.0.4",
-    "lint-staged": "12.4.0"
+    "http-server": "^14.1.1"
  },
  "pnpm": {
    "packageExtensions": {
--- a/packages/codemirror-lang-graphql/package.json
+++ b/packages/codemirror-lang-graphql/package.json
@@ -17,16 +17,16 @@
  "types": "dist/index.d.ts",
  "sideEffects": false,
  "dependencies": {
-    "@codemirror/language": "^6.9.2",
-    "@lezer/highlight": "1.1.4",
-    "@lezer/lr": "^1.3.13"
+    "@codemirror/language": "^6.9.0",
+    "@lezer/highlight": "^1.1.6",
+    "@lezer/lr": "^1.3.10"
  },
  "devDependencies": {
-    "@lezer/generator": "^1.5.1",
+    "@lezer/generator": "^1.5.0",
    "mocha": "^9.2.2",
-    "rollup": "^3.29.3",
-    "rollup-plugin-dts": "^6.0.2",
-    "rollup-plugin-ts": "^3.4.5",
-    "typescript": "^5.2.2"
+    "rollup": "^2.70.2",
+    "rollup-plugin-dts": "^4.2.1",
+    "rollup-plugin-ts": "^2.0.7",
+    "typescript": "^4.6.3"
  }
 }
--- a/packages/hoppscotch-backend/Dockerfile
+++ b/packages/hoppscotch-backend/Dockerfile
@@ -23,7 +23,7 @@ FROM builder AS dev

 ENV PRODUCTION="false"

-CMD ["pnpm", "run", "start:migrate:dev"]
+CMD ["pnpm", "run", "start:dev"]

 EXPOSE 3170

@@ -32,7 +32,7 @@ FROM builder AS prod

 ENV PRODUCTION="true"

-CMD ["pnpm", "run", "start:migrate:prod"]
+CMD ["pnpm", "run", "start:prod"]

 EXPOSE 3170

--- a/packages/hoppscotch-backend/package.json
+++ b/packages/hoppscotch-backend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hoppscotch-backend",
-  "version": "2023.8.3",
+  "version": "2023.8.1",
  "description": "",
  "author": "",
  "private": true,
@@ -14,9 +14,6 @@
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
-    "start:migrate:dev": "prisma migrate deploy && npm run start:dev",
-    "start:migrate:debug": "prisma migrate deploy && npm run start:debug",
-    "start:migrate:prod": "prisma migrate deploy && npm run start:prod",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "postinstall": "prisma generate && pnpm run generate-gql-sdl",
@@ -27,17 +24,18 @@
    "do-test": "pnpm run test"
  },
  "dependencies": {
-    "@apollo/server": "^4.9.4",
-    "@nestjs-modules/mailer": "^1.9.1",
-    "@nestjs/apollo": "^12.0.9",
-    "@nestjs/common": "^10.2.6",
-    "@nestjs/core": "^10.2.6",
-    "@nestjs/graphql": "^12.0.9",
-    "@nestjs/jwt": "^10.1.1",
-    "@nestjs/passport": "^10.0.2",
-    "@nestjs/platform-express": "^10.2.6",
-    "@nestjs/throttler": "^5.0.0",
+    "@nestjs-modules/mailer": "^1.8.1",
+    "@nestjs/apollo": "^10.1.6",
+    "@nestjs/common": "^9.2.1",
+    "@nestjs/core": "^9.2.1",
+    "@nestjs/graphql": "^10.1.6",
+    "@nestjs/jwt": "^10.0.1",
+    "@nestjs/passport": "^9.0.0",
+    "@nestjs/platform-express": "^9.2.1",
+    "@nestjs/throttler": "^4.0.0",
    "@prisma/client": "^4.16.2",
+    "apollo-server-express": "^3.11.1",
+    "apollo-server-plugin-base": "^3.7.1",
    "argon2": "^0.30.3",
    "bcrypt": "^5.1.0",
    "cookie": "^0.5.0",
@@ -45,9 +43,9 @@
    "express": "^4.17.1",
    "express-session": "^1.17.3",
    "fp-ts": "^2.13.1",
-    "graphql": "^16.8.1",
+    "graphql": "^15.5.0",
    "graphql-query-complexity": "^0.12.0",
-    "graphql-redis-subscriptions": "^2.6.0",
+    "graphql-redis-subscriptions": "^2.5.0",
    "graphql-subscriptions": "^2.0.0",
    "handlebars": "^4.7.7",
    "io-ts": "^2.2.16",
@@ -65,9 +63,9 @@
    "rxjs": "^7.6.0"
  },
  "devDependencies": {
-    "@nestjs/cli": "^10.1.18",
-    "@nestjs/schematics": "^10.0.2",
-    "@nestjs/testing": "^10.2.6",
+    "@nestjs/cli": "^9.1.5",
+    "@nestjs/schematics": "^9.0.3",
+    "@nestjs/testing": "^9.2.1",
    "@relmify/jest-fp-ts": "^2.0.2",
    "@types/argon2": "^0.15.0",
    "@types/bcrypt": "^5.0.0",
--- a/packages/hoppscotch-backend/prisma/migrations/20231106120154_embeds_addition/migration.sql
+++ b/packages/hoppscotch-backend/prisma/migrations/20231106120154_embeds_addition/migration.sql
@@ -1,15 +0,0 @@
-/*
-  Warnings:
-
-  - A unique constraint covering the columns `[id]` on the table `Shortcode` will be added. If there are existing duplicate values, this will fail.
-
-*/
-- AlterTable
-ALTER TABLE "Shortcode" ADD COLUMN     "embedProperties" JSONB,
-ADD COLUMN     "updatedOn" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
-
-- CreateIndex
-CREATE UNIQUE INDEX "Shortcode_id_key" ON "Shortcode"("id");
-
-- AddForeignKey
-ALTER TABLE "Shortcode" ADD CONSTRAINT "Shortcode_creatorUid_fkey" FOREIGN KEY ("creatorUid") REFERENCES "User"("uid") ON DELETE SET NULL ON UPDATE CASCADE;
--- a/packages/hoppscotch-backend/prisma/schema.prisma
+++ b/packages/hoppscotch-backend/prisma/schema.prisma
@@ -68,13 +68,11 @@ model TeamRequest {
 }

 model Shortcode {
-  id              String   @id @unique
-  request         Json
-  embedProperties Json?
-  creatorUid      String?
-  User            User?    @relation(fields: [creatorUid], references: [uid])
-  createdOn       DateTime @default(now())
-  updatedOn       DateTime @updatedAt @default(now())
+  id         String   @id
+  request    Json
+  creatorUid String?
+  createdOn  DateTime @default(now())
+
  @@unique(fields: [id, creatorUid], name: "creator_uid_shortcode_unique")
 }

@@ -104,7 +102,6 @@ model User {
  currentGQLSession  Json?
  createdOn          DateTime            @default(now()) @db.Timestamp(3)
  invitedUsers       InvitedUsers[]
-  shortcodes         Shortcode[]
 }

 model Account {
--- a/packages/hoppscotch-backend/src/admin/admin.model.ts
+++ b/packages/hoppscotch-backend/src/admin/admin.model.ts
@@ -1,9 +1,4 @@
-import { ObjectType, OmitType } from '@nestjs/graphql';
-import { User } from 'src/user/user.model';
+import { ObjectType } from '@nestjs/graphql';

@ObjectType()
-export class Admin extends OmitType(User, [
-  'isAdmin',
-  'currentRESTSession',
-  'currentGQLSession',
-]) {}
+export class Admin {}
--- a/packages/hoppscotch-backend/src/admin/admin.module.ts
+++ b/packages/hoppscotch-backend/src/admin/admin.module.ts
@@ -10,8 +10,6 @@ import { TeamInvitationModule } from '../team-invitation/team-invitation.module'
 import { TeamEnvironmentsModule } from '../team-environments/team-environments.module';
 import { TeamCollectionModule } from '../team-collection/team-collection.module';
 import { TeamRequestModule } from '../team-request/team-request.module';
-import { InfraResolver } from './infra.resolver';
-import { ShortcodeModule } from 'src/shortcode/shortcode.module';

@Module({
  imports: [
@@ -24,9 +22,8 @@ import { ShortcodeModule } from 'src/shortcode/shortcode.module';
    TeamEnvironmentsModule,
    TeamCollectionModule,
    TeamRequestModule,
-    ShortcodeModule,
  ],
-  providers: [InfraResolver, AdminResolver, AdminService],
+  providers: [AdminResolver, AdminService],
  exports: [AdminService],
 })
 export class AdminModule {}
--- a/packages/hoppscotch-backend/src/admin/admin.resolver.ts
+++ b/packages/hoppscotch-backend/src/admin/admin.resolver.ts
@@ -21,15 +21,15 @@ import { InvitedUser } from './invited-user.model';
 import { GqlUser } from '../decorators/gql-user.decorator';
 import { PubSubService } from '../pubsub/pubsub.service';
 import { Team, TeamMember } from '../team/team.model';
+import { User } from '../user/user.model';
+import { TeamInvitation } from '../team-invitation/team-invitation.model';
+import { PaginationArgs } from '../types/input-types.args';
 import {
  AddUserToTeamArgs,
  ChangeUserRoleInTeamArgs,
 } from './input-types.args';
 import { GqlThrottlerGuard } from 'src/guards/gql-throttler.guard';
 import { SkipThrottle } from '@nestjs/throttler';
-import { User } from 'src/user/user.model';
-import { PaginationArgs } from 'src/types/input-types.args';
-import { TeamInvitation } from 'src/team-invitation/team-invitation.model';

@UseGuards(GqlThrottlerGuard)
@Resolver(() => Admin)
@@ -51,7 +51,6 @@ export class AdminResolver {

  @ResolveField(() => [User], {
    description: 'Returns a list of all admin users in infra',
-    deprecationReason: 'Use `infra` query instead',
  })
  @UseGuards(GqlAuthGuard, GqlAdminGuard)
  async admins() {
@@ -60,7 +59,6 @@ export class AdminResolver {
  }
  @ResolveField(() => User, {
    description: 'Returns a user info by UID',
-    deprecationReason: 'Use `infra` query instead',
  })
  @UseGuards(GqlAuthGuard, GqlAdminGuard)
  async userInfo(
@@ -78,7 +76,6 @@ export class AdminResolver {

  @ResolveField(() => [User], {
    description: 'Returns a list of all the users in infra',
-    deprecationReason: 'Use `infra` query instead',
  })
  @UseGuards(GqlAuthGuard, GqlAdminGuard)
  async allUsers(
@@ -91,7 +88,6 @@ export class AdminResolver {

  @ResolveField(() => [InvitedUser], {
    description: 'Returns a list of all the invited users',
-    deprecationReason: 'Use `infra` query instead',
  })
  async invitedUsers(@Parent() admin: Admin): Promise<InvitedUser[]> {
    const users = await this.adminService.fetchInvitedUsers();
@@ -100,7 +96,6 @@ export class AdminResolver {

  @ResolveField(() => [Team], {
    description: 'Returns a list of all the teams in the infra',
-    deprecationReason: 'Use `infra` query instead',
  })
  async allTeams(
    @Parent() admin: Admin,
@@ -111,7 +106,6 @@ export class AdminResolver {
  }
  @ResolveField(() => Team, {
    description: 'Returns a team info by ID when requested by Admin',
-    deprecationReason: 'Use `infra` query instead',
  })
  async teamInfo(
    @Parent() admin: Admin,
@@ -129,7 +123,6 @@ export class AdminResolver {

  @ResolveField(() => Number, {
    description: 'Return count of all the members in a team',
-    deprecationReason: 'Use `infra` query instead',
  })
  async membersCountInTeam(
    @Parent() admin: Admin,
@@ -147,7 +140,6 @@ export class AdminResolver {

  @ResolveField(() => Number, {
    description: 'Return count of all the stored collections in a team',
-    deprecationReason: 'Use `infra` query instead',
  })
  async collectionCountInTeam(
    @Parent() admin: Admin,
@@ -163,7 +155,6 @@ export class AdminResolver {
  }
  @ResolveField(() => Number, {
    description: 'Return count of all the stored requests in a team',
-    deprecationReason: 'Use `infra` query instead',
  })
  async requestCountInTeam(
    @Parent() admin: Admin,
@@ -180,7 +171,6 @@ export class AdminResolver {

  @ResolveField(() => Number, {
    description: 'Return count of all the stored environments in a team',
-    deprecationReason: 'Use `infra` query instead',
  })
  async environmentCountInTeam(
    @Parent() admin: Admin,
@@ -197,7 +187,6 @@ export class AdminResolver {

  @ResolveField(() => [TeamInvitation], {
    description: 'Return all the pending invitations in a team',
-    deprecationReason: 'Use `infra` query instead',
  })
  async pendingInvitationCountInTeam(
    @Parent() admin: Admin,
@@ -216,7 +205,6 @@ export class AdminResolver {

  @ResolveField(() => Number, {
    description: 'Return total number of Users in organization',
-    deprecationReason: 'Use `infra` query instead',
  })
  async usersCount() {
    return this.adminService.getUsersCount();
@@ -224,7 +212,6 @@ export class AdminResolver {

  @ResolveField(() => Number, {
    description: 'Return total number of Teams in organization',
-    deprecationReason: 'Use `infra` query instead',
  })
  async teamsCount() {
    return this.adminService.getTeamsCount();
@@ -232,7 +219,6 @@ export class AdminResolver {

  @ResolveField(() => Number, {
    description: 'Return total number of Team Collections in organization',
-    deprecationReason: 'Use `infra` query instead',
  })
  async teamCollectionsCount() {
    return this.adminService.getTeamCollectionsCount();
@@ -240,7 +226,6 @@ export class AdminResolver {

  @ResolveField(() => Number, {
    description: 'Return total number of Team Requests in organization',
-    deprecationReason: 'Use `infra` query instead',
  })
  async teamRequestsCount() {
    return this.adminService.getTeamRequestsCount();
@@ -443,23 +428,6 @@ export class AdminResolver {
    return true;
  }

-  @Mutation(() => Boolean, {
-    description: 'Revoke Shortcode by ID',
-  })
-  @UseGuards(GqlAuthGuard, GqlAdminGuard)
-  async revokeShortcodeByAdmin(
-    @Args({
-      name: 'code',
-      description: 'The shortcode to delete',
-      type: () => ID,
-    })
-    code: string,
-  ): Promise<boolean> {
-    const res = await this.adminService.deleteShortcode(code);
-    if (E.isLeft(res)) throwErr(res.left);
-    return true;
-  }
-
  /* Subscriptions */

  @Subscription(() => InvitedUser, {
--- a/packages/hoppscotch-backend/src/admin/admin.service.spec.ts
+++ b/packages/hoppscotch-backend/src/admin/admin.service.spec.ts
@@ -15,7 +15,6 @@ import {
  INVALID_EMAIL,
  USER_ALREADY_INVITED,
 } from '../errors';
-import { ShortcodeService } from 'src/shortcode/shortcode.service';

 const mockPrisma = mockDeep<PrismaService>();
 const mockPubSub = mockDeep<PubSubService>();
@@ -26,7 +25,6 @@ const mockTeamRequestService = mockDeep<TeamRequestService>();
 const mockTeamInvitationService = mockDeep<TeamInvitationService>();
 const mockTeamCollectionService = mockDeep<TeamCollectionService>();
 const mockMailerService = mockDeep<MailerService>();
-const mockShortcodeService = mockDeep<ShortcodeService>();

 const adminService = new AdminService(
  mockUserService,
@@ -38,7 +36,6 @@ const adminService = new AdminService(
  mockPubSub as any,
  mockPrisma as any,
  mockMailerService,
-  mockShortcodeService,
 );

 const invitedUsers: InvitedUsers[] = [
--- a/packages/hoppscotch-backend/src/admin/admin.service.ts
+++ b/packages/hoppscotch-backend/src/admin/admin.service.ts
@@ -24,7 +24,6 @@ import { TeamRequestService } from '../team-request/team-request.service';
 import { TeamEnvironmentsService } from '../team-environments/team-environments.service';
 import { TeamInvitationService } from '../team-invitation/team-invitation.service';
 import { TeamMemberRole } from '../team/team.model';
-import { ShortcodeService } from 'src/shortcode/shortcode.service';

@Injectable()
 export class AdminService {
@@ -38,7 +37,6 @@ export class AdminService {
    private readonly pubsub: PubSubService,
    private readonly prisma: PrismaService,
    private readonly mailerService: MailerService,
-    private readonly shortcodeService: ShortcodeService,
  ) {}

  /**
@@ -76,7 +74,7 @@ export class AdminService {

    try {
      await this.mailerService.sendUserInvitationEmail(inviteeEmail, {
-        template: 'user-invitation',
+        template: 'code-your-own',
        variables: {
          inviteeEmail: inviteeEmail,
          magicLink: `${process.env.VITE_BASE_URL}`,
@@ -434,35 +432,4 @@ export class AdminService {

    return E.right(teamInvite.right);
  }
-
-  /**
-   * Fetch all created ShortCodes
-   *
-   * @param args Pagination arguments
-   * @param userEmail User email
-   * @returns ShortcodeWithUserEmail
-   */
-  async fetchAllShortcodes(
-    cursorID: string,
-    take: number,
-    userEmail: string = null,
-  ) {
-    return this.shortcodeService.fetchAllShortcodes(
-      { cursor: cursorID, take },
-      userEmail,
-    );
-  }
-
-  /**
-   * Delete a Shortcode
-   *
-   * @param shortcodeID ID of Shortcode being deleted
-   * @returns Boolean on successful deletion
-   */
-  async deleteShortcode(shortcodeID: string) {
-    const result = await this.shortcodeService.deleteShortcode(shortcodeID);
-
-    if (E.isLeft(result)) return E.left(result.left);
-    return E.right(result.right);
-  }
 }
--- a/packages/hoppscotch-backend/src/admin/infra.model.ts
+++ b/packages/hoppscotch-backend/src/admin/infra.model.ts
@@ -1,10 +0,0 @@
-import { Field, ObjectType } from '@nestjs/graphql';
-import { Admin } from './admin.model';
-
-@ObjectType()
-export class Infra {
-  @Field(() => Admin, {
-    description: 'Admin who executed the action',
-  })
-  executedBy: Admin;
-}
--- a/packages/hoppscotch-backend/src/admin/infra.resolver.ts
+++ b/packages/hoppscotch-backend/src/admin/infra.resolver.ts
@@ -1,225 +0,0 @@
-import { UseGuards } from '@nestjs/common';
-import { Args, ID, Query, ResolveField, Resolver } from '@nestjs/graphql';
-import { GqlThrottlerGuard } from 'src/guards/gql-throttler.guard';
-import { Infra } from './infra.model';
-import { AdminService } from './admin.service';
-import { GqlAuthGuard } from 'src/guards/gql-auth.guard';
-import { GqlAdminGuard } from './guards/gql-admin.guard';
-import { User } from 'src/user/user.model';
-import { AuthUser } from 'src/types/AuthUser';
-import { throwErr } from 'src/utils';
-import * as E from 'fp-ts/Either';
-import { Admin } from './admin.model';
-import { PaginationArgs } from 'src/types/input-types.args';
-import { InvitedUser } from './invited-user.model';
-import { Team } from 'src/team/team.model';
-import { TeamInvitation } from 'src/team-invitation/team-invitation.model';
-import { GqlAdmin } from './decorators/gql-admin.decorator';
-import { ShortcodeWithUserEmail } from 'src/shortcode/shortcode.model';
-
-@UseGuards(GqlThrottlerGuard)
-@Resolver(() => Infra)
-export class InfraResolver {
-  constructor(private adminService: AdminService) {}
-
-  @Query(() => Infra, {
-    description: 'Fetch details of the Infrastructure',
-  })
-  @UseGuards(GqlAuthGuard, GqlAdminGuard)
-  infra(@GqlAdmin() admin: Admin) {
-    const infra: Infra = { executedBy: admin };
-    return infra;
-  }
-
-  @ResolveField(() => [User], {
-    description: 'Returns a list of all admin users in infra',
-  })
-  @UseGuards(GqlAuthGuard, GqlAdminGuard)
-  async admins() {
-    const admins = await this.adminService.fetchAdmins();
-    return admins;
-  }
-
-  @ResolveField(() => User, {
-    description: 'Returns a user info by UID',
-  })
-  @UseGuards(GqlAuthGuard, GqlAdminGuard)
-  async userInfo(
-    @Args({
-      name: 'userUid',
-      type: () => ID,
-      description: 'The user UID',
-    })
-    userUid: string,
-  ): Promise<AuthUser> {
-    const user = await this.adminService.fetchUserInfo(userUid);
-    if (E.isLeft(user)) throwErr(user.left);
-    return user.right;
-  }
-
-  @ResolveField(() => [User], {
-    description: 'Returns a list of all the users in infra',
-  })
-  @UseGuards(GqlAuthGuard, GqlAdminGuard)
-  async allUsers(@Args() args: PaginationArgs): Promise<AuthUser[]> {
-    const users = await this.adminService.fetchUsers(args.cursor, args.take);
-    return users;
-  }
-
-  @ResolveField(() => [InvitedUser], {
-    description: 'Returns a list of all the invited users',
-  })
-  async invitedUsers(): Promise<InvitedUser[]> {
-    const users = await this.adminService.fetchInvitedUsers();
-    return users;
-  }
-
-  @ResolveField(() => [Team], {
-    description: 'Returns a list of all the teams in the infra',
-  })
-  async allTeams(@Args() args: PaginationArgs): Promise<Team[]> {
-    const teams = await this.adminService.fetchAllTeams(args.cursor, args.take);
-    return teams;
-  }
-
-  @ResolveField(() => Team, {
-    description: 'Returns a team info by ID when requested by Admin',
-  })
-  async teamInfo(
-    @Args({
-      name: 'teamID',
-      type: () => ID,
-      description: 'Team ID for which info to fetch',
-    })
-    teamID: string,
-  ): Promise<Team> {
-    const team = await this.adminService.getTeamInfo(teamID);
-    if (E.isLeft(team)) throwErr(team.left);
-    return team.right;
-  }
-
-  @ResolveField(() => Number, {
-    description: 'Return count of all the members in a team',
-  })
-  async membersCountInTeam(
-    @Args({
-      name: 'teamID',
-      type: () => ID,
-      description: 'Team ID for which team members to fetch',
-      nullable: false,
-    })
-    teamID: string,
-  ): Promise<number> {
-    const teamMembersCount = await this.adminService.membersCountInTeam(teamID);
-    return teamMembersCount;
-  }
-
-  @ResolveField(() => Number, {
-    description: 'Return count of all the stored collections in a team',
-  })
-  async collectionCountInTeam(
-    @Args({
-      name: 'teamID',
-      type: () => ID,
-      description: 'Team ID for which team members to fetch',
-    })
-    teamID: string,
-  ): Promise<number> {
-    const teamCollCount = await this.adminService.collectionCountInTeam(teamID);
-    return teamCollCount;
-  }
-
-  @ResolveField(() => Number, {
-    description: 'Return count of all the stored requests in a team',
-  })
-  async requestCountInTeam(
-    @Args({
-      name: 'teamID',
-      type: () => ID,
-      description: 'Team ID for which team members to fetch',
-    })
-    teamID: string,
-  ): Promise<number> {
-    const teamReqCount = await this.adminService.requestCountInTeam(teamID);
-    return teamReqCount;
-  }
-
-  @ResolveField(() => Number, {
-    description: 'Return count of all the stored environments in a team',
-  })
-  async environmentCountInTeam(
-    @Args({
-      name: 'teamID',
-      type: () => ID,
-      description: 'Team ID for which team members to fetch',
-    })
-    teamID: string,
-  ): Promise<number> {
-    const envsCount = await this.adminService.environmentCountInTeam(teamID);
-    return envsCount;
-  }
-
-  @ResolveField(() => [TeamInvitation], {
-    description: 'Return all the pending invitations in a team',
-  })
-  async pendingInvitationCountInTeam(
-    @Args({
-      name: 'teamID',
-      type: () => ID,
-      description: 'Team ID for which team members to fetch',
-    })
-    teamID: string,
-  ) {
-    const invitations = await this.adminService.pendingInvitationCountInTeam(
-      teamID,
-    );
-    return invitations;
-  }
-
-  @ResolveField(() => Number, {
-    description: 'Return total number of Users in organization',
-  })
-  async usersCount() {
-    return this.adminService.getUsersCount();
-  }
-
-  @ResolveField(() => Number, {
-    description: 'Return total number of Teams in organization',
-  })
-  async teamsCount() {
-    return this.adminService.getTeamsCount();
-  }
-
-  @ResolveField(() => Number, {
-    description: 'Return total number of Team Collections in organization',
-  })
-  async teamCollectionsCount() {
-    return this.adminService.getTeamCollectionsCount();
-  }
-
-  @ResolveField(() => Number, {
-    description: 'Return total number of Team Requests in organization',
-  })
-  async teamRequestsCount() {
-    return this.adminService.getTeamRequestsCount();
-  }
-
-  @ResolveField(() => [ShortcodeWithUserEmail], {
-    description: 'Returns a list of all the shortcodes in the infra',
-  })
-  async allShortcodes(
-    @Args() args: PaginationArgs,
-    @Args({
-      name: 'userEmail',
-      nullable: true,
-      description: 'Users email to filter shortcodes by',
-    })
-    userEmail: string,
-  ) {
-    return await this.adminService.fetchAllShortcodes(
-      args.cursor,
-      args.take,
-      userEmail,
-    );
-  }
-}
--- a/packages/hoppscotch-backend/src/app.module.ts
+++ b/packages/hoppscotch-backend/src/app.module.ts
@@ -27,7 +27,12 @@ import { AppController } from './app.controller';
      buildSchemaOptions: {
        numberScalarMode: 'integer',
      },
+      cors: {
+        origin: process.env.WHITELISTED_ORIGINS.split(','),
+        credentials: true,
+      },
      playground: process.env.PRODUCTION !== 'true',
+      debug: process.env.PRODUCTION !== 'true',
      autoSchemaFile: true,
      installSubscriptionHandlers: true,
      subscriptions: {
@@ -57,12 +62,10 @@ import { AppController } from './app.controller';
      }),
      driver: ApolloDriver,
    }),
-    ThrottlerModule.forRoot([
-      {
-        ttl: +process.env.RATE_LIMIT_TTL,
-        limit: +process.env.RATE_LIMIT_MAX,
-      },
-    ]),
+    ThrottlerModule.forRoot({
+      ttl: +process.env.RATE_LIMIT_TTL,
+      limit: +process.env.RATE_LIMIT_MAX,
+    }),
    UserModule,
    AuthModule,
    AdminModule,
--- a/packages/hoppscotch-backend/src/auth/auth.service.ts
+++ b/packages/hoppscotch-backend/src/auth/auth.service.ts
@@ -229,7 +229,7 @@ export class AuthService {
    }

    await this.mailerService.sendEmail(email, {
-      template: 'user-invitation',
+      template: 'code-your-own',
      variables: {
        inviteeEmail: email,
        magicLink: `${url}/enter?token=${generatedTokens.token}`,
--- a/packages/hoppscotch-backend/src/errors.ts
+++ b/packages/hoppscotch-backend/src/errors.ts
@@ -318,6 +318,18 @@ export const TEAM_INVITATION_NOT_FOUND =
 */
 export const SHORTCODE_NOT_FOUND = 'shortcode/not_found' as const;

+/**
+ * Invalid ShortCode format
+ * (ShortcodeService)
+ */
+export const SHORTCODE_INVALID_JSON = 'shortcode/invalid_json' as const;
+
+/**
+ * ShortCode already exists in DB
+ * (ShortcodeService)
+ */
+export const SHORTCODE_ALREADY_EXISTS = 'shortcode/already_exists' as const;
+
 /**
 * Invalid or non-existent TEAM ENVIRONMENT ID
 * (TeamEnvironmentsService)
@@ -609,24 +621,3 @@ export const MAILER_SMTP_URL_UNDEFINED = 'mailer/smtp_url_undefined' as const;
 */
 export const MAILER_FROM_ADDRESS_UNDEFINED =
  'mailer/from_address_undefined' as const;
-
-/**
- * SharedRequest invalid request JSON format
- * (ShortcodeService)
- */
-export const SHORTCODE_INVALID_REQUEST_JSON =
-  'shortcode/request_invalid_format' as const;
-
-/**
- * SharedRequest invalid properties JSON format
- * (ShortcodeService)
- */
-export const SHORTCODE_INVALID_PROPERTIES_JSON =
-  'shortcode/properties_invalid_format' as const;
-
-/**
- * SharedRequest invalid properties not found
- * (ShortcodeService)
- */
-export const SHORTCODE_PROPERTIES_NOT_FOUND =
-  'shortcode/properties_not_found' as const;
--- a/packages/hoppscotch-backend/src/gql-schema.ts
+++ b/packages/hoppscotch-backend/src/gql-schema.ts
@@ -27,7 +27,6 @@ import { UserRequestUserCollectionResolver } from './user-request/resolvers/user
 import { UserEnvsUserResolver } from './user-environment/user.resolver';
 import { UserHistoryUserResolver } from './user-history/user.resolver';
 import { UserSettingsUserResolver } from './user-settings/user.resolver';
-import { InfraResolver } from './admin/infra.resolver';

 /**
 * All the resolvers present in the application.
@@ -35,7 +34,6 @@ import { InfraResolver } from './admin/infra.resolver';
 * NOTE: This needs to be KEPT UP-TO-DATE to keep the schema accurate
 */
 const RESOLVERS = [
-  InfraResolver,
  AdminResolver,
  ShortcodeResolver,
  TeamResolver,
@@ -95,7 +93,9 @@ export async function emitGQLSchemaFile() {
      numberScalarMode: 'integer',
    });

-    const schemaString = printSchema(schema);
+    const schemaString = printSchema(schema, {
+      commentDescriptions: true,
+    });

    logger.log(`Writing schema to GQL_SCHEMA_EMIT_LOCATION (${destination})`);

--- a/packages/hoppscotch-backend/src/guards/throttler-behind-proxy.guard.ts
+++ b/packages/hoppscotch-backend/src/guards/throttler-behind-proxy.guard.ts
@@ -3,7 +3,8 @@ import { Injectable } from '@nestjs/common';

@Injectable()
 export class ThrottlerBehindProxyGuard extends ThrottlerGuard {
-  protected async getTracker(req: Record<string, any>): Promise<string> {
+  protected getTracker(req: Record<string, any>): string {
    return req.ips.length ? req.ips[0] : req.ip; // individualize IP extraction to meet your own needs
+    // learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-For#directives
  }
 }
--- a/packages/hoppscotch-backend/src/mailer/MailDescriptions.ts
+++ b/packages/hoppscotch-backend/src/mailer/MailDescriptions.ts
@@ -8,7 +8,7 @@ export type MailDescription = {
 };

 export type UserMagicLinkMailDescription = {
-  template: 'user-invitation';
+  template: 'code-your-own';
  variables: {
    inviteeEmail: string;
    magicLink: string;
@@ -16,7 +16,7 @@ export type UserMagicLinkMailDescription = {
 };

 export type AdminUserInvitationMailDescription = {
-  template: 'user-invitation';
+  template: 'code-your-own';
  variables: {
    inviteeEmail: string;
    magicLink: string;
--- a/packages/hoppscotch-backend/src/mailer/mailer.service.ts
+++ b/packages/hoppscotch-backend/src/mailer/mailer.service.ts
@@ -27,7 +27,7 @@ export class MailerService {
      case 'team-invitation':
        return `${mailDesc.variables.invitee} invited you to join ${mailDesc.variables.invite_team_name} in Hoppscotch`;

-      case 'user-invitation':
+      case 'code-your-own':
        return 'Sign in to Hoppscotch';
    }
  }
--- a/packages/hoppscotch-backend/src/mailer/templates/user-invitation.hbs
+++ b/packages/hoppscotch-backend/src/mailer/templates/user-invitation.hbs
--- a/packages/hoppscotch-backend/src/mailer/templates/team-invitation.hbs
+++ b/packages/hoppscotch-backend/src/mailer/templates/team-invitation.hbs
@@ -14,7 +14,7 @@
  -->
    <style type="text/css" rel="stylesheet" media="all">
    /* Base ------------------------------ */
-
+    
    @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap");
    body {
      width: 100% !important;
@@ -22,19 +22,19 @@
      margin: 0;
      -webkit-text-size-adjust: none;
    }
-
+    
    a {
      color: #3869D4;
    }
-
+    
    a img {
      border: none;
    }
-
+    
    td {
      word-break: break-word;
    }
-
+    
    .preheader {
      display: none !important;
      visibility: hidden;
@@ -47,13 +47,13 @@
      overflow: hidden;
    }
    /* Type ------------------------------ */
-
+    
    body,
    td,
    th {
      font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
    }
-
+    
    h1 {
      margin-top: 0;
      color: #333333;
@@ -61,7 +61,7 @@
      font-weight: bold;
      text-align: left;
    }
-
+    
    h2 {
      margin-top: 0;
      color: #333333;
@@ -69,7 +69,7 @@
      font-weight: bold;
      text-align: left;
    }
-
+    
    h3 {
      margin-top: 0;
      color: #333333;
@@ -77,12 +77,12 @@
      font-weight: bold;
      text-align: left;
    }
-
+    
    td,
    th {
      font-size: 16px;
    }
-
+    
    p,
    ul,
    ol,
@@ -91,25 +91,25 @@
      font-size: 16px;
      line-height: 1.625;
    }
-
+    
    p.sub {
      font-size: 13px;
    }
    /* Utilities ------------------------------ */
-
+    
    .align-right {
      text-align: right;
    }
-
+    
    .align-left {
      text-align: left;
    }
-
+    
    .align-center {
      text-align: center;
    }
    /* Buttons ------------------------------ */
-
+    
    .button {
      background-color: #3869D4;
      border-top: 10px solid #3869D4;
@@ -124,7 +124,7 @@
      -webkit-text-size-adjust: none;
      box-sizing: border-box;
    }
-
+    
    .button--green {
      background-color: #22BC66;
      border-top: 10px solid #22BC66;
@@ -132,7 +132,7 @@
      border-bottom: 10px solid #22BC66;
      border-left: 18px solid #22BC66;
    }
-
+    
    .button--red {
      background-color: #FF6136;
      border-top: 10px solid #FF6136;
@@ -140,7 +140,7 @@
      border-bottom: 10px solid #FF6136;
      border-left: 18px solid #FF6136;
    }
-
+    
    @media only screen and (max-width: 500px) {
      .button {
        width: 100% !important;
@@ -148,21 +148,21 @@
      }
    }
    /* Attribute list ------------------------------ */
-
+    
    .attributes {
      margin: 0 0 21px;
    }
-
+    
    .attributes_content {
      background-color: #F4F4F7;
      padding: 16px;
    }
-
+    
    .attributes_item {
      padding: 0;
    }
    /* Related Items ------------------------------ */
-
+    
    .related {
      width: 100%;
      margin: 0;
@@ -171,31 +171,31 @@
      -premailer-cellpadding: 0;
      -premailer-cellspacing: 0;
    }
-
+    
    .related_item {
      padding: 10px 0;
      color: #CBCCCF;
      font-size: 15px;
      line-height: 18px;
    }
-
+    
    .related_item-title {
      display: block;
      margin: .5em 0 0;
    }
-
+    
    .related_item-thumb {
      display: block;
      padding-bottom: 10px;
    }
-
+    
    .related_heading {
      border-top: 1px solid #CBCCCF;
      text-align: center;
      padding: 25px 0 10px;
    }
    /* Discount Code ------------------------------ */
-
+    
    .discount {
      width: 100%;
      margin: 0;
@@ -206,33 +206,33 @@
      background-color: #F4F4F7;
      border: 2px dashed #CBCCCF;
    }
-
+    
    .discount_heading {
      text-align: center;
    }
-
+    
    .discount_body {
      text-align: center;
      font-size: 15px;
    }
    /* Social Icons ------------------------------ */
-
+    
    .social {
      width: auto;
    }
-
+    
    .social td {
      padding: 0;
      width: auto;
    }
-
+    
    .social_icon {
      height: 20px;
      margin: 0 8px 10px 8px;
      padding: 0;
    }
    /* Data table ------------------------------ */
-
+    
    .purchase {
      width: 100%;
      margin: 0;
@@ -241,7 +241,7 @@
      -premailer-cellpadding: 0;
      -premailer-cellspacing: 0;
    }
-
+    
    .purchase_content {
      width: 100%;
      margin: 0;
@@ -250,50 +250,50 @@
      -premailer-cellpadding: 0;
      -premailer-cellspacing: 0;
    }
-
+    
    .purchase_item {
      padding: 10px 0;
      color: #51545E;
      font-size: 15px;
      line-height: 18px;
    }
-
+    
    .purchase_heading {
      padding-bottom: 8px;
      border-bottom: 1px solid #EAEAEC;
    }
-
+    
    .purchase_heading p {
      margin: 0;
      color: #85878E;
      font-size: 12px;
    }
-
+    
    .purchase_footer {
      padding-top: 15px;
      border-top: 1px solid #EAEAEC;
    }
-
+    
    .purchase_total {
      margin: 0;
      text-align: right;
      font-weight: bold;
      color: #333333;
    }
-
+    
    .purchase_total--label {
      padding: 0 15px 0 0;
    }
-
+    
    body {
      background-color: #F2F4F6;
      color: #51545E;
    }
-
+    
    p {
      color: #51545E;
    }
-
+    
    .email-wrapper {
      width: 100%;
      margin: 0;
@@ -303,7 +303,7 @@
      -premailer-cellspacing: 0;
      background-color: #F2F4F6;
    }
-
+    
    .email-content {
      width: 100%;
      margin: 0;
@@ -313,16 +313,16 @@
      -premailer-cellspacing: 0;
    }
    /* Masthead ----------------------- */
-
+    
    .email-masthead {
      padding: 25px 0;
      text-align: center;
    }
-
+    
    .email-masthead_logo {
      width: 94px;
    }
-
+    
    .email-masthead_name {
      font-size: 16px;
      font-weight: bold;
@@ -331,7 +331,7 @@
      text-shadow: 0 1px 0 white;
    }
    /* Body ------------------------------ */
-
+    
    .email-body {
      width: 100%;
      margin: 0;
@@ -340,7 +340,7 @@
      -premailer-cellpadding: 0;
      -premailer-cellspacing: 0;
    }
-
+    
    .email-body_inner {
      width: 570px;
      margin: 0 auto;
@@ -350,7 +350,7 @@
      -premailer-cellspacing: 0;
      background-color: #FFFFFF;
    }
-
+    
    .email-footer {
      width: 570px;
      margin: 0 auto;
@@ -360,11 +360,11 @@
      -premailer-cellspacing: 0;
      text-align: center;
    }
-
+    
    .email-footer p {
      color: #A8AAAF;
    }
-
+    
    .body-action {
      width: 100%;
      margin: 30px auto;
@@ -374,25 +374,25 @@
      -premailer-cellspacing: 0;
      text-align: center;
    }
-
+    
    .body-sub {
      margin-top: 25px;
      padding-top: 25px;
      border-top: 1px solid #EAEAEC;
    }
-
+    
    .content-cell {
      padding: 45px;
    }
    /*Media Queries ------------------------------ */
-
+    
    @media only screen and (max-width: 600px) {
      .email-body_inner,
      .email-footer {
        width: 100% !important;
      }
    }
-
+    
    @media (prefers-color-scheme: dark) {
      body,
      .email-body,
--- a/packages/hoppscotch-backend/src/plugins/GQLComplexityPlugin.ts
+++ b/packages/hoppscotch-backend/src/plugins/GQLComplexityPlugin.ts
@@ -1,9 +1,8 @@
 import { GraphQLSchemaHost } from '@nestjs/graphql';
 import {
  ApolloServerPlugin,
-  BaseContext,
  GraphQLRequestListener,
-} from '@apollo/server';
+} from 'apollo-server-plugin-base';
 import { Plugin } from '@nestjs/apollo';
 import { GraphQLError } from 'graphql';
 import {
@@ -18,7 +17,7 @@ const COMPLEXITY_LIMIT = 50;
 export class GQLComplexityPlugin implements ApolloServerPlugin {
  constructor(private gqlSchemaHost: GraphQLSchemaHost) {}

-  async requestDidStart(): Promise<GraphQLRequestListener<BaseContext>> {
+  async requestDidStart(): Promise<GraphQLRequestListener> {
    const { schema } = this.gqlSchemaHost;

    return {
--- a/packages/hoppscotch-backend/src/pubsub/topicsDefs.ts
+++ b/packages/hoppscotch-backend/src/pubsub/topicsDefs.ts
@@ -69,7 +69,5 @@ export type TopicDef = {
  [topic: `team_req/${string}/req_deleted`]: string;
  [topic: `team/${string}/invite_added`]: TeamInvitation;
  [topic: `team/${string}/invite_removed`]: string;
-  [
-    topic: `shortcode/${string}/${'created' | 'revoked' | 'updated'}`
-  ]: Shortcode;
+  [topic: `shortcode/${string}/${'created' | 'revoked'}`]: Shortcode;
 };
--- a/packages/hoppscotch-backend/src/shortcode/shortcode.model.ts
+++ b/packages/hoppscotch-backend/src/shortcode/shortcode.model.ts
@@ -1,10 +1,9 @@
 import { Field, ID, ObjectType } from '@nestjs/graphql';
-import { User } from 'src/user/user.model';

@ObjectType()
 export class Shortcode {
  @Field(() => ID, {
-    description: 'The 12 digit alphanumeric code',
+    description: 'The shortcode. 12 digit alphanumeric.',
  })
  id: string;

@@ -13,57 +12,8 @@ export class Shortcode {
  })
  request: string;

-  @Field({
-    description: 'JSON string representing the properties for an embed',
-    nullable: true,
-  })
-  properties: string;
-
  @Field({
    description: 'Timestamp of when the Shortcode was created',
  })
  createdOn: Date;
 }
-
-@ObjectType()
-export class ShortcodeCreator {
-  @Field({
-    description: 'Uid of user who created the shortcode',
-  })
-  uid: string;
-
-  @Field({
-    description: 'Email of user who created the shortcode',
-  })
-  email: string;
-}
-
-@ObjectType()
-export class ShortcodeWithUserEmail {
-  @Field(() => ID, {
-    description: 'The 12 digit alphanumeric code',
-  })
-  id: string;
-
-  @Field({
-    description: 'JSON string representing the request data',
-  })
-  request: string;
-
-  @Field({
-    description: 'JSON string representing the properties for an embed',
-    nullable: true,
-  })
-  properties: string;
-
-  @Field({
-    description: 'Timestamp of when the Shortcode was created',
-  })
-  createdOn: Date;
-
-  @Field({
-    description: 'Details of user who created the shortcode',
-    nullable: true,
-  })
-  creator: ShortcodeCreator;
-}
--- a/packages/hoppscotch-backend/src/shortcode/shortcode.module.ts
+++ b/packages/hoppscotch-backend/src/shortcode/shortcode.module.ts
@@ -1,4 +1,5 @@
 import { Module } from '@nestjs/common';
+import { JwtModule } from '@nestjs/jwt';
 import { PrismaModule } from 'src/prisma/prisma.module';
 import { PubSubModule } from 'src/pubsub/pubsub.module';
 import { UserModule } from 'src/user/user.module';
@@ -6,7 +7,14 @@ import { ShortcodeResolver } from './shortcode.resolver';
 import { ShortcodeService } from './shortcode.service';

@Module({
-  imports: [PrismaModule, UserModule, PubSubModule],
+  imports: [
+    PrismaModule,
+    UserModule,
+    PubSubModule,
+    JwtModule.register({
+      secret: process.env.JWT_SECRET,
+    }),
+  ],
  providers: [ShortcodeService, ShortcodeResolver],
  exports: [ShortcodeService],
 })
--- a/packages/hoppscotch-backend/src/shortcode/shortcode.resolver.ts
+++ b/packages/hoppscotch-backend/src/shortcode/shortcode.resolver.ts
@@ -1,5 +1,6 @@
 import {
  Args,
+  Context,
  ID,
  Mutation,
  Query,
@@ -8,25 +9,28 @@ import {
 } from '@nestjs/graphql';
 import * as E from 'fp-ts/Either';
 import { UseGuards } from '@nestjs/common';
-import { Shortcode, ShortcodeWithUserEmail } from './shortcode.model';
+import { Shortcode } from './shortcode.model';
 import { ShortcodeService } from './shortcode.service';
+import { UserService } from 'src/user/user.service';
 import { throwErr } from 'src/utils';
 import { GqlUser } from 'src/decorators/gql-user.decorator';
 import { GqlAuthGuard } from 'src/guards/gql-auth.guard';
 import { User } from 'src/user/user.model';
 import { PubSubService } from 'src/pubsub/pubsub.service';
 import { AuthUser } from '../types/AuthUser';
+import { JwtService } from '@nestjs/jwt';
 import { PaginationArgs } from 'src/types/input-types.args';
 import { GqlThrottlerGuard } from 'src/guards/gql-throttler.guard';
 import { SkipThrottle } from '@nestjs/throttler';
-import { GqlAdminGuard } from 'src/admin/guards/gql-admin.guard';

@UseGuards(GqlThrottlerGuard)
@Resolver(() => Shortcode)
 export class ShortcodeResolver {
  constructor(
    private readonly shortcodeService: ShortcodeService,
+    private readonly userService: UserService,
    private readonly pubsub: PubSubService,
+    private jwtService: JwtService,
  ) {}

  /* Queries */
@@ -60,53 +64,20 @@ export class ShortcodeResolver {
  @Mutation(() => Shortcode, {
    description: 'Create a shortcode for the given request.',
  })
-  @UseGuards(GqlAuthGuard)
  async createShortcode(
-    @GqlUser() user: AuthUser,
    @Args({
      name: 'request',
      description: 'JSON string of the request object',
    })
    request: string,
-    @Args({
-      name: 'properties',
-      description: 'JSON string of the properties of the embed',
-      nullable: true,
-    })
-    properties: string,
+    @Context() ctx: any,
  ) {
+    const decodedAccessToken = this.jwtService.verify(
+      ctx.req.cookies['access_token'],
+    );
    const result = await this.shortcodeService.createShortcode(
      request,
-      properties,
-      user,
-    );
-
-    if (E.isLeft(result)) throwErr(result.left);
-    return result.right;
-  }
-
-  @Mutation(() => Shortcode, {
-    description: 'Update a user generated Shortcode',
-  })
-  @UseGuards(GqlAuthGuard)
-  async updateEmbedProperties(
-    @GqlUser() user: AuthUser,
-    @Args({
-      name: 'code',
-      type: () => ID,
-      description: 'The Shortcode to update',
-    })
-    code: string,
-    @Args({
-      name: 'properties',
-      description: 'JSON string of the properties of the embed',
-    })
-    properties: string,
-  ) {
-    const result = await this.shortcodeService.updateEmbedProperties(
-      code,
-      user.uid,
-      properties,
+      decodedAccessToken?.sub,
    );

    if (E.isLeft(result)) throwErr(result.left);
@@ -122,7 +93,7 @@ export class ShortcodeResolver {
    @Args({
      name: 'code',
      type: () => ID,
-      description: 'The shortcode to remove',
+      description: 'The shortcode to resolve',
    })
    code: string,
  ) {
@@ -143,16 +114,6 @@ export class ShortcodeResolver {
    return this.pubsub.asyncIterator(`shortcode/${user.uid}/created`);
  }

-  @Subscription(() => Shortcode, {
-    description: 'Listen for Shortcode updates',
-    resolve: (value) => value,
-  })
-  @SkipThrottle()
-  @UseGuards(GqlAuthGuard)
-  myShortcodesUpdated(@GqlUser() user: AuthUser) {
-    return this.pubsub.asyncIterator(`shortcode/${user.uid}/updated`);
-  }
-
  @Subscription(() => Shortcode, {
    description: 'Listen for shortcode deletion',
    resolve: (value) => value,
--- a/packages/hoppscotch-backend/src/shortcode/shortcode.service.spec.ts
+++ b/packages/hoppscotch-backend/src/shortcode/shortcode.service.spec.ts
@@ -1,16 +1,13 @@
 import { mockDeep, mockReset } from 'jest-mock-extended';
 import { PrismaService } from '../prisma/prisma.service';
 import {
-  INVALID_EMAIL,
-  SHORTCODE_INVALID_PROPERTIES_JSON,
-  SHORTCODE_INVALID_REQUEST_JSON,
+  SHORTCODE_ALREADY_EXISTS,
+  SHORTCODE_INVALID_JSON,
  SHORTCODE_NOT_FOUND,
-  SHORTCODE_PROPERTIES_NOT_FOUND,
 } from 'src/errors';
-import { Shortcode, ShortcodeWithUserEmail } from './shortcode.model';
+import { Shortcode } from './shortcode.model';
 import { ShortcodeService } from './shortcode.service';
 import { UserService } from 'src/user/user.service';
-import { AuthUser } from 'src/types/AuthUser';

 const mockPrisma = mockDeep<PrismaService>();

@@ -25,7 +22,7 @@ const mockFB = {
    doc: mockDocFunc,
  },
 };
-const mockUserService = new UserService(mockPrisma as any, mockPubSub as any);
+const mockUserService = new UserService(mockFB as any, mockPubSub as any);

 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -41,34 +38,18 @@ beforeEach(() => {
 });
 const createdOn = new Date();

-const user: AuthUser = {
-  uid: '123344',
-  email: 'dwight@dundermifflin.com',
-  displayName: 'Dwight Schrute',
-  photoURL: 'https://en.wikipedia.org/wiki/Dwight_Schrute',
-  isAdmin: false,
-  refreshToken: 'hbfvdkhjbvkdvdfjvbnkhjb',
-  createdOn: createdOn,
-  currentGQLSession: {},
-  currentRESTSession: {},
-};
-
-const mockEmbed = {
+const shortCodeWithOutUser = {
  id: '123',
  request: '{}',
-  embedProperties: '{}',
  createdOn: createdOn,
-  creatorUid: user.uid,
-  updatedOn: createdOn,
+  creatorUid: null,
 };

-const mockShortcode = {
+const shortCodeWithUser = {
  id: '123',
  request: '{}',
-  embedProperties: null,
  createdOn: createdOn,
-  creatorUid: user.uid,
-  updatedOn: createdOn,
+  creatorUid: 'user_uid_1',
 };

 const shortcodes = [
@@ -77,67 +58,33 @@ const shortcodes = [
    request: {
      hello: 'there',
    },
-    embedProperties: {
-      foo: 'bar',
-    },
-    creatorUid: user.uid,
+    creatorUid: 'testuser',
    createdOn: new Date(),
-    updatedOn: createdOn,
  },
  {
    id: 'blablabla1',
    request: {
      hello: 'there',
    },
-    embedProperties: {
-      foo: 'bar',
-    },
-    creatorUid: user.uid,
+    creatorUid: 'testuser',
    createdOn: new Date(),
-    updatedOn: createdOn,
-  },
-];
-
-const shortcodesWithUserEmail = [
-  {
-    id: 'blablabla',
-    request: {
-      hello: 'there',
-    },
-    embedProperties: {
-      foo: 'bar',
-    },
-    creatorUid: user.uid,
-    createdOn: new Date(),
-    updatedOn: createdOn,
-    User: user,
-  },
-  {
-    id: 'blablabla1',
-    request: {
-      hello: 'there',
-    },
-    embedProperties: {
-      foo: 'bar',
-    },
-    creatorUid: user.uid,
-    createdOn: new Date(),
-    updatedOn: createdOn,
-    User: user,
  },
 ];

 describe('ShortcodeService', () => {
  describe('getShortCode', () => {
-    test('should return a valid Shortcode with valid Shortcode ID', async () => {
-      mockPrisma.shortcode.findFirstOrThrow.mockResolvedValueOnce(mockEmbed);
+    test('should return a valid shortcode with valid shortcode ID', async () => {
+      mockPrisma.shortcode.findFirstOrThrow.mockResolvedValueOnce(
+        shortCodeWithOutUser,
+      );

-      const result = await shortcodeService.getShortCode(mockEmbed.id);
+      const result = await shortcodeService.getShortCode(
+        shortCodeWithOutUser.id,
+      );
      expect(result).toEqualRight(<Shortcode>{
-        id: mockEmbed.id,
-        createdOn: mockEmbed.createdOn,
-        request: JSON.stringify(mockEmbed.request),
-        properties: JSON.stringify(mockEmbed.embedProperties),
+        id: shortCodeWithOutUser.id,
+        createdOn: shortCodeWithOutUser.createdOn,
+        request: JSON.stringify(shortCodeWithOutUser.request),
      });
    });

@@ -152,10 +99,10 @@ describe('ShortcodeService', () => {
  });

  describe('fetchUserShortCodes', () => {
-    test('should return list of Shortcode with valid inputs and no cursor', async () => {
+    test('should return list of shortcodes with valid inputs and no cursor', async () => {
      mockPrisma.shortcode.findMany.mockResolvedValueOnce(shortcodes);

-      const result = await shortcodeService.fetchUserShortCodes(user.uid, {
+      const result = await shortcodeService.fetchUserShortCodes('testuser', {
        cursor: null,
        take: 10,
      });
@@ -163,22 +110,20 @@ describe('ShortcodeService', () => {
        {
          id: shortcodes[0].id,
          request: JSON.stringify(shortcodes[0].request),
-          properties: JSON.stringify(shortcodes[0].embedProperties),
          createdOn: shortcodes[0].createdOn,
        },
        {
          id: shortcodes[1].id,
          request: JSON.stringify(shortcodes[1].request),
-          properties: JSON.stringify(shortcodes[1].embedProperties),
          createdOn: shortcodes[1].createdOn,
        },
      ]);
    });

-    test('should return list of Shortcode with valid inputs and cursor', async () => {
+    test('should return list of shortcodes with valid inputs and cursor', async () => {
      mockPrisma.shortcode.findMany.mockResolvedValue([shortcodes[1]]);

-      const result = await shortcodeService.fetchUserShortCodes(user.uid, {
+      const result = await shortcodeService.fetchUserShortCodes('testuser', {
        cursor: 'blablabla',
        take: 10,
      });
@@ -186,7 +131,6 @@ describe('ShortcodeService', () => {
        {
          id: shortcodes[1].id,
          request: JSON.stringify(shortcodes[1].request),
-          properties: JSON.stringify(shortcodes[1].embedProperties),
          createdOn: shortcodes[1].createdOn,
        },
      ]);
@@ -195,7 +139,7 @@ describe('ShortcodeService', () => {
    test('should return an empty array for an invalid cursor', async () => {
      mockPrisma.shortcode.findMany.mockResolvedValue([]);

-      const result = await shortcodeService.fetchUserShortCodes(user.uid, {
+      const result = await shortcodeService.fetchUserShortCodes('testuser', {
        cursor: 'invalidcursor',
        take: 10,
      });
@@ -227,111 +171,77 @@ describe('ShortcodeService', () => {
  });

  describe('createShortcode', () => {
-    test('should throw SHORTCODE_INVALID_REQUEST_JSON error if incoming request data is invalid', async () => {
+    test('should throw SHORTCODE_INVALID_JSON error if incoming request data is invalid', async () => {
      const result = await shortcodeService.createShortcode(
        'invalidRequest',
-        null,
-        user,
+        'user_uid_1',
      );
-      expect(result).toEqualLeft(SHORTCODE_INVALID_REQUEST_JSON);
+      expect(result).toEqualLeft(SHORTCODE_INVALID_JSON);
    });

-    test('should throw SHORTCODE_INVALID_PROPERTIES_JSON error if incoming properties data is invalid', async () => {
-      const result = await shortcodeService.createShortcode(
-        '{}',
-        'invalid_data',
-        user,
-      );
-      expect(result).toEqualLeft(SHORTCODE_INVALID_PROPERTIES_JSON);
-    });
-
-    test('should successfully create a new Embed with valid user uid', async () => {
-      // generateUniqueShortCodeID --> getShortcode
+    test('should successfully create a new shortcode with valid user uid', async () => {
+      // generateUniqueShortCodeID --> getShortCode
      mockPrisma.shortcode.findFirstOrThrow.mockRejectedValueOnce(
        'NotFoundError',
      );
-      mockPrisma.shortcode.create.mockResolvedValueOnce(mockEmbed);
+      mockPrisma.shortcode.create.mockResolvedValueOnce(shortCodeWithUser);

-      const result = await shortcodeService.createShortcode('{}', '{}', user);
-      expect(result).toEqualRight(<Shortcode>{
-        id: mockEmbed.id,
-        createdOn: mockEmbed.createdOn,
-        request: JSON.stringify(mockEmbed.request),
-        properties: JSON.stringify(mockEmbed.embedProperties),
+      const result = await shortcodeService.createShortcode('{}', 'user_uid_1');
+      expect(result).toEqualRight({
+        id: shortCodeWithUser.id,
+        createdOn: shortCodeWithUser.createdOn,
+        request: JSON.stringify(shortCodeWithUser.request),
      });
    });

-    test('should successfully create a new ShortCode with valid user uid', async () => {
-      // generateUniqueShortCodeID --> getShortcode
+    test('should successfully create a new shortcode with null user uid', async () => {
+      // generateUniqueShortCodeID --> getShortCode
      mockPrisma.shortcode.findFirstOrThrow.mockRejectedValueOnce(
        'NotFoundError',
      );
-      mockPrisma.shortcode.create.mockResolvedValueOnce(mockShortcode);
+      mockPrisma.shortcode.create.mockResolvedValueOnce(shortCodeWithUser);

-      const result = await shortcodeService.createShortcode('{}', null, user);
-      expect(result).toEqualRight(<Shortcode>{
-        id: mockShortcode.id,
-        createdOn: mockShortcode.createdOn,
-        request: JSON.stringify(mockShortcode.request),
-        properties: mockShortcode.embedProperties,
+      const result = await shortcodeService.createShortcode('{}', null);
+      expect(result).toEqualRight({
+        id: shortCodeWithUser.id,
+        createdOn: shortCodeWithUser.createdOn,
+        request: JSON.stringify(shortCodeWithOutUser.request),
      });
    });

-    test('should send pubsub message to `shortcode/{uid}/created` on successful creation of a Shortcode', async () => {
-      // generateUniqueShortCodeID --> getShortcode
+    test('should send pubsub message to `shortcode/{uid}/created` on successful creation of shortcode', async () => {
+      // generateUniqueShortCodeID --> getShortCode
      mockPrisma.shortcode.findFirstOrThrow.mockRejectedValueOnce(
        'NotFoundError',
      );
-      mockPrisma.shortcode.create.mockResolvedValueOnce(mockShortcode);
-
-      const result = await shortcodeService.createShortcode('{}', null, user);
+      mockPrisma.shortcode.create.mockResolvedValueOnce(shortCodeWithUser);

+      const result = await shortcodeService.createShortcode('{}', 'user_uid_1');
      expect(mockPubSub.publish).toHaveBeenCalledWith(
-        `shortcode/${mockShortcode.creatorUid}/created`,
-        <Shortcode>{
-          id: mockShortcode.id,
-          createdOn: mockShortcode.createdOn,
-          request: JSON.stringify(mockShortcode.request),
-          properties: mockShortcode.embedProperties,
-        },
-      );
-    });
-
-    test('should send pubsub message to `shortcode/{uid}/created` on successful creation of an Embed', async () => {
-      // generateUniqueShortCodeID --> getShortcode
-      mockPrisma.shortcode.findFirstOrThrow.mockRejectedValueOnce(
-        'NotFoundError',
-      );
-      mockPrisma.shortcode.create.mockResolvedValueOnce(mockEmbed);
-
-      const result = await shortcodeService.createShortcode('{}', '{}', user);
-
-      expect(mockPubSub.publish).toHaveBeenCalledWith(
-        `shortcode/${mockEmbed.creatorUid}/created`,
-        <Shortcode>{
-          id: mockEmbed.id,
-          createdOn: mockEmbed.createdOn,
-          request: JSON.stringify(mockEmbed.request),
-          properties: JSON.stringify(mockEmbed.embedProperties),
+        `shortcode/${shortCodeWithUser.creatorUid}/created`,
+        {
+          id: shortCodeWithUser.id,
+          createdOn: shortCodeWithUser.createdOn,
+          request: JSON.stringify(shortCodeWithUser.request),
        },
      );
    });
  });

  describe('revokeShortCode', () => {
-    test('should return true on successful deletion of Shortcode with valid inputs', async () => {
-      mockPrisma.shortcode.delete.mockResolvedValueOnce(mockEmbed);
+    test('should return true on successful deletion of shortcode with valid inputs', async () => {
+      mockPrisma.shortcode.delete.mockResolvedValueOnce(shortCodeWithUser);

      const result = await shortcodeService.revokeShortCode(
-        mockEmbed.id,
-        mockEmbed.creatorUid,
+        shortCodeWithUser.id,
+        shortCodeWithUser.creatorUid,
      );

      expect(mockPrisma.shortcode.delete).toHaveBeenCalledWith({
        where: {
          creator_uid_shortcode_unique: {
-            creatorUid: mockEmbed.creatorUid,
-            id: mockEmbed.id,
+            creatorUid: shortCodeWithUser.creatorUid,
+            id: shortCodeWithUser.id,
          },
        },
      });
@@ -339,53 +249,52 @@ describe('ShortcodeService', () => {
      expect(result).toEqualRight(true);
    });

-    test('should return SHORTCODE_NOT_FOUND error when Shortcode is invalid and user uid is valid', async () => {
+    test('should return SHORTCODE_NOT_FOUND error when shortcode is invalid and user uid is valid', async () => {
      mockPrisma.shortcode.delete.mockRejectedValue('RecordNotFound');
      expect(
        shortcodeService.revokeShortCode('invalid', 'testuser'),
      ).resolves.toEqualLeft(SHORTCODE_NOT_FOUND);
    });

-    test('should return SHORTCODE_NOT_FOUND error when Shortcode is valid and user uid is invalid', async () => {
+    test('should return SHORTCODE_NOT_FOUND error when shortcode is valid and user uid is invalid', async () => {
      mockPrisma.shortcode.delete.mockRejectedValue('RecordNotFound');
      expect(
        shortcodeService.revokeShortCode('blablablabla', 'invalidUser'),
      ).resolves.toEqualLeft(SHORTCODE_NOT_FOUND);
    });

-    test('should return SHORTCODE_NOT_FOUND error when both Shortcode and user uid are invalid', async () => {
+    test('should return SHORTCODE_NOT_FOUND error when both shortcode and user uid are invalid', async () => {
      mockPrisma.shortcode.delete.mockRejectedValue('RecordNotFound');
      expect(
        shortcodeService.revokeShortCode('invalid', 'invalid'),
      ).resolves.toEqualLeft(SHORTCODE_NOT_FOUND);
    });

-    test('should send pubsub message to `shortcode/{uid}/revoked` on successful deletion of Shortcode', async () => {
-      mockPrisma.shortcode.delete.mockResolvedValueOnce(mockEmbed);
+    test('should send pubsub message to `shortcode/{uid}/revoked` on successful deletion of shortcode', async () => {
+      mockPrisma.shortcode.delete.mockResolvedValueOnce(shortCodeWithUser);

      const result = await shortcodeService.revokeShortCode(
-        mockEmbed.id,
-        mockEmbed.creatorUid,
+        shortCodeWithUser.id,
+        shortCodeWithUser.creatorUid,
      );

      expect(mockPubSub.publish).toHaveBeenCalledWith(
-        `shortcode/${mockEmbed.creatorUid}/revoked`,
+        `shortcode/${shortCodeWithUser.creatorUid}/revoked`,
        {
-          id: mockEmbed.id,
-          createdOn: mockEmbed.createdOn,
-          request: JSON.stringify(mockEmbed.request),
-          properties: JSON.stringify(mockEmbed.embedProperties),
+          id: shortCodeWithUser.id,
+          createdOn: shortCodeWithUser.createdOn,
+          request: JSON.stringify(shortCodeWithUser.request),
        },
      );
    });
  });

  describe('deleteUserShortCodes', () => {
-    test('should successfully delete all users Shortcodes with valid user uid', async () => {
+    test('should successfully delete all users shortcodes with valid user uid', async () => {
      mockPrisma.shortcode.deleteMany.mockResolvedValueOnce({ count: 1 });

      const result = await shortcodeService.deleteUserShortCodes(
-        mockEmbed.creatorUid,
+        shortCodeWithUser.creatorUid,
      );
      expect(result).toEqual(1);
    });
@@ -394,176 +303,9 @@ describe('ShortcodeService', () => {
      mockPrisma.shortcode.deleteMany.mockResolvedValueOnce({ count: 0 });

      const result = await shortcodeService.deleteUserShortCodes(
-        mockEmbed.creatorUid,
+        shortCodeWithUser.creatorUid,
      );
      expect(result).toEqual(0);
    });
  });
-
-  describe('updateShortcode', () => {
-    test('should return SHORTCODE_PROPERTIES_NOT_FOUND error when updatedProps in invalid', async () => {
-      const result = await shortcodeService.updateEmbedProperties(
-        mockEmbed.id,
-        user.uid,
-        '',
-      );
-      expect(result).toEqualLeft(SHORTCODE_PROPERTIES_NOT_FOUND);
-    });
-
-    test('should return SHORTCODE_PROPERTIES_NOT_FOUND error when updatedProps in invalid JSON format', async () => {
-      const result = await shortcodeService.updateEmbedProperties(
-        mockEmbed.id,
-        user.uid,
-        '{kk',
-      );
-      expect(result).toEqualLeft(SHORTCODE_INVALID_PROPERTIES_JSON);
-    });
-
-    test('should return SHORTCODE_NOT_FOUND error when Shortcode ID is invalid', async () => {
-      mockPrisma.shortcode.update.mockRejectedValue('RecordNotFound');
-      const result = await shortcodeService.updateEmbedProperties(
-        'invalidID',
-        user.uid,
-        '{}',
-      );
-      expect(result).toEqualLeft(SHORTCODE_NOT_FOUND);
-    });
-
-    test('should successfully update a Shortcodes with valid inputs', async () => {
-      mockPrisma.shortcode.update.mockResolvedValueOnce({
-        ...mockEmbed,
-        embedProperties: '{"foo":"bar"}',
-      });
-
-      const result = await shortcodeService.updateEmbedProperties(
-        mockEmbed.id,
-        user.uid,
-        '{"foo":"bar"}',
-      );
-      expect(result).toEqualRight({
-        id: mockEmbed.id,
-        createdOn: mockEmbed.createdOn,
-        request: JSON.stringify(mockEmbed.request),
-        properties: JSON.stringify('{"foo":"bar"}'),
-      });
-    });
-
-    test('should send pubsub message to `shortcode/{uid}/updated` on successful Update of Shortcode', async () => {
-      mockPrisma.shortcode.update.mockResolvedValueOnce({
-        ...mockEmbed,
-        embedProperties: '{"foo":"bar"}',
-      });
-
-      const result = await shortcodeService.updateEmbedProperties(
-        mockEmbed.id,
-        user.uid,
-        '{"foo":"bar"}',
-      );
-
-      expect(mockPubSub.publish).toHaveBeenCalledWith(
-        `shortcode/${mockEmbed.creatorUid}/updated`,
-        {
-          id: mockEmbed.id,
-          createdOn: mockEmbed.createdOn,
-          request: JSON.stringify(mockEmbed.request),
-          properties: JSON.stringify('{"foo":"bar"}'),
-        },
-      );
-    });
-  });
-
-  describe('deleteShortcode', () => {
-    test('should return true on successful deletion of Shortcode with valid inputs', async () => {
-      mockPrisma.shortcode.delete.mockResolvedValueOnce(mockEmbed);
-
-      const result = await shortcodeService.deleteShortcode(mockEmbed.id);
-      expect(result).toEqualRight(true);
-    });
-
-    test('should return SHORTCODE_NOT_FOUND error when Shortcode is invalid', async () => {
-      mockPrisma.shortcode.delete.mockRejectedValue('RecordNotFound');
-
-      expect(shortcodeService.deleteShortcode('invalid')).resolves.toEqualLeft(
-        SHORTCODE_NOT_FOUND,
-      );
-    });
-  });
-
-  describe('fetchAllShortcodes', () => {
-    test('should return list of Shortcodes with valid inputs and no cursor', async () => {
-      mockPrisma.shortcode.findMany.mockResolvedValueOnce(
-        shortcodesWithUserEmail,
-      );
-
-      const result = await shortcodeService.fetchAllShortcodes(
-        {
-          cursor: null,
-          take: 10,
-        },
-        user.email,
-      );
-      expect(result).toEqual(<ShortcodeWithUserEmail[]>[
-        {
-          id: shortcodes[0].id,
-          request: JSON.stringify(shortcodes[0].request),
-          properties: JSON.stringify(shortcodes[0].embedProperties),
-          createdOn: shortcodes[0].createdOn,
-          creator: {
-            uid: user.uid,
-            email: user.email,
-          },
-        },
-        {
-          id: shortcodes[1].id,
-          request: JSON.stringify(shortcodes[1].request),
-          properties: JSON.stringify(shortcodes[1].embedProperties),
-          createdOn: shortcodes[1].createdOn,
-          creator: {
-            uid: user.uid,
-            email: user.email,
-          },
-        },
-      ]);
-    });
-
-    test('should return list of Shortcode with valid inputs and cursor', async () => {
-      mockPrisma.shortcode.findMany.mockResolvedValue([
-        shortcodesWithUserEmail[1],
-      ]);
-
-      const result = await shortcodeService.fetchAllShortcodes(
-        {
-          cursor: 'blablabla',
-          take: 10,
-        },
-        user.email,
-      );
-      expect(result).toEqual(<ShortcodeWithUserEmail[]>[
-        {
-          id: shortcodes[1].id,
-          request: JSON.stringify(shortcodes[1].request),
-          properties: JSON.stringify(shortcodes[1].embedProperties),
-          createdOn: shortcodes[1].createdOn,
-          creator: {
-            uid: user.uid,
-            email: user.email,
-          },
-        },
-      ]);
-    });
-
-    test('should return an empty array for an invalid cursor', async () => {
-      mockPrisma.shortcode.findMany.mockResolvedValue([]);
-
-      const result = await shortcodeService.fetchAllShortcodes(
-        {
-          cursor: 'invalidcursor',
-          take: 10,
-        },
-        user.email,
-      );
-
-      expect(result).toHaveLength(0);
-    });
-  });
 });
--- a/packages/hoppscotch-backend/src/shortcode/shortcode.service.ts
+++ b/packages/hoppscotch-backend/src/shortcode/shortcode.service.ts
@@ -1,16 +1,12 @@
 import { Injectable, OnModuleInit } from '@nestjs/common';
 import * as T from 'fp-ts/Task';
+import * as O from 'fp-ts/Option';
 import * as TO from 'fp-ts/TaskOption';
 import * as E from 'fp-ts/Either';
 import { PrismaService } from 'src/prisma/prisma.service';
-import {
-  SHORTCODE_INVALID_PROPERTIES_JSON,
-  SHORTCODE_INVALID_REQUEST_JSON,
-  SHORTCODE_NOT_FOUND,
-  SHORTCODE_PROPERTIES_NOT_FOUND,
-} from 'src/errors';
+import { SHORTCODE_INVALID_JSON, SHORTCODE_NOT_FOUND } from 'src/errors';
 import { UserDataHandler } from 'src/user/user.data.handler';
-import { Shortcode, ShortcodeWithUserEmail } from './shortcode.model';
+import { Shortcode } from './shortcode.model';
 import { Shortcode as DBShortCode } from '@prisma/client';
 import { PubSubService } from 'src/pubsub/pubsub.service';
 import { UserService } from 'src/user/user.service';
@@ -50,14 +46,10 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
   * @param shortcodeInfo Prisma Shortcode type
   * @returns GQL Shortcode
   */
-  private cast(shortcodeInfo: DBShortCode): Shortcode {
+  private returnShortCode(shortcodeInfo: DBShortCode): Shortcode {
    return <Shortcode>{
      id: shortcodeInfo.id,
      request: JSON.stringify(shortcodeInfo.request),
-      properties:
-        shortcodeInfo.embedProperties != null
-          ? JSON.stringify(shortcodeInfo.embedProperties)
-          : null,
      createdOn: shortcodeInfo.createdOn,
    };
  }
@@ -102,7 +94,7 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
      const shortcodeInfo = await this.prisma.shortcode.findFirstOrThrow({
        where: { id: shortcode },
      });
-      return E.right(this.cast(shortcodeInfo));
+      return E.right(this.returnShortCode(shortcodeInfo));
    } catch (error) {
      return E.left(SHORTCODE_NOT_FOUND);
    }
@@ -112,22 +104,14 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
   * Create a new ShortCode
   *
   * @param request JSON string of request details
-   * @param userInfo user UI
-   * @param properties JSON string of embed properties, if present
+   * @param userUID user UID, if present
   * @returns Either of ShortCode or error
   */
-  async createShortcode(
-    request: string,
-    properties: string | null = null,
-    userInfo: AuthUser,
-  ) {
-    const requestData = stringToJson(request);
-    if (E.isLeft(requestData) || !requestData.right)
-      return E.left(SHORTCODE_INVALID_REQUEST_JSON);
+  async createShortcode(request: string, userUID: string | null) {
+    const shortcodeData = stringToJson(request);
+    if (E.isLeft(shortcodeData)) return E.left(SHORTCODE_INVALID_JSON);

-    const parsedProperties = stringToJson(properties);
-    if (E.isLeft(parsedProperties))
-      return E.left(SHORTCODE_INVALID_PROPERTIES_JSON);
+    const user = await this.userService.findUserById(userUID);

    const generatedShortCode = await this.generateUniqueShortCodeID();
    if (E.isLeft(generatedShortCode)) return E.left(generatedShortCode.left);
@@ -135,9 +119,8 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
    const createdShortCode = await this.prisma.shortcode.create({
      data: {
        id: generatedShortCode.right,
-        request: requestData.right,
-        embedProperties: parsedProperties.right ?? undefined,
-        creatorUid: userInfo.uid,
+        request: shortcodeData.right,
+        creatorUid: O.isNone(user) ? null : user.value.uid,
      },
    });

@@ -145,11 +128,11 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
    if (createdShortCode.creatorUid) {
      this.pubsub.publish(
        `shortcode/${createdShortCode.creatorUid}/created`,
-        this.cast(createdShortCode),
+        this.returnShortCode(createdShortCode),
      );
    }

-    return E.right(this.cast(createdShortCode));
+    return E.right(this.returnShortCode(createdShortCode));
  }

  /**
@@ -173,14 +156,14 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
    });

    const fetchedShortCodes: Shortcode[] = shortCodes.map((code) =>
-      this.cast(code),
+      this.returnShortCode(code),
    );

    return fetchedShortCodes;
  }

  /**
-   * Delete a ShortCode created by User of uid
+   * Delete a ShortCode
   *
   * @param shortcode ShortCode
   * @param uid User Uid
@@ -199,7 +182,7 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {

      this.pubsub.publish(
        `shortcode/${deletedShortCodes.creatorUid}/revoked`,
-        this.cast(deletedShortCodes),
+        this.returnShortCode(deletedShortCodes),
      );

      return E.right(true);
@@ -222,118 +205,4 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {

    return deletedShortCodes.count;
  }
-
-  /**
-   * Delete a Shortcode
-   *
-   * @param shortcodeID ID of Shortcode being deleted
-   * @returns Boolean on successful deletion
-   */
-  async deleteShortcode(shortcodeID: string) {
-    try {
-      await this.prisma.shortcode.delete({
-        where: {
-          id: shortcodeID,
-        },
-      });
-
-      return E.right(true);
-    } catch (error) {
-      return E.left(SHORTCODE_NOT_FOUND);
-    }
-  }
-
-  /**
-   * Update a created Shortcode
-   * @param shortcodeID Shortcode ID
-   * @param uid User Uid
-   * @returns Updated Shortcode
-   */
-  async updateEmbedProperties(
-    shortcodeID: string,
-    uid: string,
-    updatedProps: string,
-  ) {
-    if (!updatedProps) return E.left(SHORTCODE_PROPERTIES_NOT_FOUND);
-
-    const parsedProperties = stringToJson(updatedProps);
-    if (E.isLeft(parsedProperties) || !parsedProperties.right)
-      return E.left(SHORTCODE_INVALID_PROPERTIES_JSON);
-
-    try {
-      const updatedShortcode = await this.prisma.shortcode.update({
-        where: {
-          creator_uid_shortcode_unique: {
-            creatorUid: uid,
-            id: shortcodeID,
-          },
-        },
-        data: {
-          embedProperties: parsedProperties.right,
-        },
-      });
-
-      this.pubsub.publish(
-        `shortcode/${updatedShortcode.creatorUid}/updated`,
-        this.cast(updatedShortcode),
-      );
-
-      return E.right(this.cast(updatedShortcode));
-    } catch (error) {
-      return E.left(SHORTCODE_NOT_FOUND);
-    }
-  }
-
-  /**
-   * Fetch all created ShortCodes
-   *
-   * @param args Pagination arguments
-   * @param userEmail User email
-   * @returns ShortcodeWithUserEmail
-   */
-  async fetchAllShortcodes(
-    args: PaginationArgs,
-    userEmail: string | null = null,
-  ) {
-    const shortCodes = await this.prisma.shortcode.findMany({
-      where: userEmail
-        ? {
-            User: {
-              email: userEmail,
-            },
-          }
-        : undefined,
-      orderBy: {
-        createdOn: 'desc',
-      },
-      skip: args.cursor ? 1 : 0,
-      take: args.take,
-      cursor: args.cursor ? { id: args.cursor } : undefined,
-      include: {
-        User: true,
-      },
-    });
-
-    const fetchedShortCodes: ShortcodeWithUserEmail[] = shortCodes.map(
-      (code) => {
-        return <ShortcodeWithUserEmail>{
-          id: code.id,
-          request: JSON.stringify(code.request),
-          properties:
-            code.embedProperties != null
-              ? JSON.stringify(code.embedProperties)
-              : null,
-          createdOn: code.createdOn,
-          creator: code.User
-            ? {
-                uid: code.User.uid,
-                email: code.User.email,
-              }
-            : null,
-        };
-      },
-    );
-
-    return fetchedShortCodes;
-  }
 }
--- a/packages/hoppscotch-backend/src/team-collection/team-collection.service.spec.ts
+++ b/packages/hoppscotch-backend/src/team-collection/team-collection.service.spec.ts
@@ -1,5 +1,5 @@
 import { Team, TeamCollection as DBTeamCollection } from '@prisma/client';
-import { mockDeep, mockReset } from 'jest-mock-extended';
+import { mock, mockDeep, mockReset } from 'jest-mock-extended';
 import {
  TEAM_COLL_DEST_SAME,
  TEAM_COLL_INVALID_JSON,
@@ -17,6 +17,9 @@ import { PrismaService } from 'src/prisma/prisma.service';
 import { PubSubService } from 'src/pubsub/pubsub.service';
 import { AuthUser } from 'src/types/AuthUser';
 import { TeamCollectionService } from './team-collection.service';
+import { TeamCollection } from './team-collection.model';
+import { TeamCollectionModule } from './team-collection.module';
+import * as E from 'fp-ts/Either';

 const mockPrisma = mockDeep<PrismaService>();
 const mockPubSub = mockDeep<PubSubService>();
--- a/packages/hoppscotch-backend/src/team-environments/team-environments.service.spec.ts
+++ b/packages/hoppscotch-backend/src/team-environments/team-environments.service.spec.ts
@@ -301,7 +301,7 @@ describe('TeamEnvironmentsService', () => {

  describe('createDuplicateEnvironment', () => {
    test('should successfully duplicate an existing team environment', async () => {
-      mockPrisma.teamEnvironment.findFirstOrThrow.mockResolvedValueOnce(
+      mockPrisma.teamEnvironment.findFirst.mockResolvedValueOnce(
        teamEnvironment,
      );

@@ -322,9 +322,7 @@ describe('TeamEnvironmentsService', () => {
    });

    test('should throw TEAM_ENVIRONMMENT_NOT_FOUND if provided id is invalid', async () => {
-      mockPrisma.teamEnvironment.findFirstOrThrow.mockRejectedValue(
-        'NotFoundError',
-      );
+      mockPrisma.teamEnvironment.findFirst.mockRejectedValue('NotFoundError');

      const result = await teamEnvironmentsService.createDuplicateEnvironment(
        teamEnvironment.id,
@@ -334,7 +332,7 @@ describe('TeamEnvironmentsService', () => {
    });

    test('should send pubsub message to "team_environment/<teamID>/created" if team environment is updated successfully', async () => {
-      mockPrisma.teamEnvironment.findFirstOrThrow.mockResolvedValueOnce(
+      mockPrisma.teamEnvironment.findFirst.mockResolvedValueOnce(
        teamEnvironment,
      );

--- a/packages/hoppscotch-backend/src/team-environments/team-environments.service.ts
+++ b/packages/hoppscotch-backend/src/team-environments/team-environments.service.ts
@@ -183,10 +183,11 @@ export class TeamEnvironmentsService {
   */
  async createDuplicateEnvironment(id: string) {
    try {
-      const environment = await this.prisma.teamEnvironment.findFirstOrThrow({
+      const environment = await this.prisma.teamEnvironment.findFirst({
        where: {
          id: id,
        },
+        rejectOnNotFound: true,
      });

      const result = await this.prisma.teamEnvironment.create({
--- a/packages/hoppscotch-backend/src/user-history/user-history.service.spec.ts
+++ b/packages/hoppscotch-backend/src/user-history/user-history.service.spec.ts
@@ -142,15 +142,13 @@ describe('UserHistoryService', () => {
  });
  describe('createUserHistory', () => {
    test('Should resolve right and create a REST request to users history and return a `UserHistory` object', async () => {
-      const executedOn = new Date();
-
      mockPrisma.userHistory.create.mockResolvedValueOnce({
        userUid: 'abc',
        id: '1',
        request: [{}],
        responseMetadata: [{}],
        reqType: ReqType.REST,
-        executedOn,
+        executedOn: new Date(),
        isStarred: false,
      });

@@ -160,7 +158,7 @@ describe('UserHistoryService', () => {
        request: JSON.stringify([{}]),
        responseMetadata: JSON.stringify([{}]),
        reqType: ReqType.REST,
-        executedOn,
+        executedOn: new Date(),
        isStarred: false,
      };

@@ -174,15 +172,13 @@ describe('UserHistoryService', () => {
      ).toEqualRight(userHistory);
    });
    test('Should resolve right and create a GQL request to users history and return a `UserHistory` object', async () => {
-      const executedOn = new Date();
-
      mockPrisma.userHistory.create.mockResolvedValueOnce({
        userUid: 'abc',
        id: '1',
        request: [{}],
        responseMetadata: [{}],
        reqType: ReqType.GQL,
-        executedOn,
+        executedOn: new Date(),
        isStarred: false,
      });

@@ -192,7 +188,7 @@ describe('UserHistoryService', () => {
        request: JSON.stringify([{}]),
        responseMetadata: JSON.stringify([{}]),
        reqType: ReqType.GQL,
-        executedOn,
+        executedOn: new Date(),
        isStarred: false,
      };

@@ -216,15 +212,13 @@ describe('UserHistoryService', () => {
      ).toEqualLeft(USER_HISTORY_INVALID_REQ_TYPE);
    });
    test('Should create a GQL request to users history and publish a created subscription', async () => {
-      const executedOn = new Date();
-
      mockPrisma.userHistory.create.mockResolvedValueOnce({
        userUid: 'abc',
        id: '1',
        request: [{}],
        responseMetadata: [{}],
        reqType: ReqType.GQL,
-        executedOn,
+        executedOn: new Date(),
        isStarred: false,
      });

@@ -234,7 +228,7 @@ describe('UserHistoryService', () => {
        request: JSON.stringify([{}]),
        responseMetadata: JSON.stringify([{}]),
        reqType: ReqType.GQL,
-        executedOn,
+        executedOn: new Date(),
        isStarred: false,
      };

@@ -251,15 +245,13 @@ describe('UserHistoryService', () => {
      );
    });
    test('Should create a REST request to users history and publish a created subscription', async () => {
-      const executedOn = new Date();
-
      mockPrisma.userHistory.create.mockResolvedValueOnce({
        userUid: 'abc',
        id: '1',
        request: [{}],
        responseMetadata: [{}],
        reqType: ReqType.REST,
-        executedOn,
+        executedOn: new Date(),
        isStarred: false,
      });

@@ -269,7 +261,7 @@ describe('UserHistoryService', () => {
        request: JSON.stringify([{}]),
        responseMetadata: JSON.stringify([{}]),
        reqType: ReqType.REST,
-        executedOn,
+        executedOn: new Date(),
        isStarred: false,
      };

@@ -331,15 +323,13 @@ describe('UserHistoryService', () => {
      ).toEqualLeft(USER_HISTORY_NOT_FOUND);
    });
    test('Should star/unstar a request in the history and publish a updated subscription', async () => {
-      const executedOn = new Date();
-
      mockPrisma.userHistory.findFirst.mockResolvedValueOnce({
        userUid: 'abc',
        id: '1',
        request: [{}],
        responseMetadata: [{}],
        reqType: ReqType.REST,
-        executedOn,
+        executedOn: new Date(),
        isStarred: false,
      });

@@ -349,7 +339,7 @@ describe('UserHistoryService', () => {
        request: [{}],
        responseMetadata: [{}],
        reqType: ReqType.REST,
-        executedOn,
+        executedOn: new Date(),
        isStarred: true,
      });

@@ -359,7 +349,7 @@ describe('UserHistoryService', () => {
        request: JSON.stringify([{}]),
        responseMetadata: JSON.stringify([{}]),
        reqType: ReqType.REST,
-        executedOn,
+        executedOn: new Date(),
        isStarred: true,
      };

--- a/packages/hoppscotch-cli/package.json
+++ b/packages/hoppscotch-cli/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@hoppscotch/cli",
-  "version": "0.4.0",
+  "version": "0.3.2",
  "description": "A CLI to run Hoppscotch test scripts in CI environments.",
  "homepage": "https://hoppscotch.io",
  "main": "dist/index.js",
@@ -10,9 +10,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "engines": {
-    "node": ">=18"
-  },
  "scripts": {
    "build": "pnpm exec tsup",
    "dev": "pnpm exec tsup --watch",
@@ -41,24 +38,26 @@
  "devDependencies": {
    "@hoppscotch/data": "workspace:^",
    "@hoppscotch/js-sandbox": "workspace:^",
-    "@relmify/jest-fp-ts": "^2.1.1",
-    "@swc/core": "^1.3.92",
-    "@types/jest": "^29.5.5",
-    "@types/lodash": "^4.14.199",
-    "@types/qs": "^6.9.8",
+    "@relmify/jest-fp-ts": "^2.0.2",
+    "@swc/core": "^1.2.181",
+    "@types/axios": "^0.14.0",
+    "@types/chalk": "^2.2.0",
+    "@types/commander": "^2.12.2",
+    "@types/jest": "^27.4.1",
+    "@types/lodash": "^4.14.181",
+    "@types/qs": "^6.9.7",
    "axios": "^0.21.4",
-    "chalk": "^4.1.2",
-    "commander": "^11.0.0",
+    "chalk": "^4.1.1",
+    "commander": "^8.0.0",
    "esm": "^3.2.25",
-    "fp-ts": "^2.16.1",
-    "io-ts": "^2.2.20",
-    "jest": "^29.7.0",
+    "fp-ts": "^2.12.1",
+    "io-ts": "^2.2.16",
+    "jest": "^27.5.1",
    "lodash": "^4.17.21",
-    "prettier": "^3.0.3",
-    "qs": "^6.11.2",
-    "ts-jest": "^29.1.1",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.2",
-    "zod": "^3.22.4"
+    "prettier": "^2.8.4",
+    "qs": "^6.10.3",
+    "ts-jest": "^27.1.4",
+    "tsup": "^5.12.7",
+    "typescript": "^4.6.4"
  }
 }
--- a/packages/hoppscotch-cli/src/commands/test.ts
+++ b/packages/hoppscotch-cli/src/commands/test.ts
@@ -14,9 +14,10 @@ import { isHoppCLIError } from "../utils/checks";
 export const test = (path: string, options: TestCmdOptions) => async () => {
  try {
    const delay = options.delay ? parseDelayOption(options.delay) : 0
-    const envs = options.env ? await parseEnvsData(options.env) : <HoppEnvs>{ global: [], selected: [] }
+    const envName = options.envName
+    const envs = options.env ? await parseEnvsData(options.env, envName) : <HoppEnvs>{ global: [], selected: [] }
    const collections = await parseCollectionData(path)
-
+    
    const report = await collectionsRunner({collections, envs, delay})
    const hasSucceeded = collectionsRunnerResult(report)
    collectionsRunnerExit(hasSucceeded)
--- a/packages/hoppscotch-cli/src/handlers/error.ts
+++ b/packages/hoppscotch-cli/src/handlers/error.ts
@@ -48,14 +48,12 @@ export const handleError = <T extends HoppErrorCode>(error: HoppError<T>) => {
      ERROR_MSG = `Unavailable command: ${error.command}`;
      break;
    case "MALFORMED_ENV_FILE":
-      ERROR_MSG = `The environment file is not of the correct format.`;
-      break;
-    case "BULK_ENV_FILE":
-      ERROR_MSG = `CLI doesn't support bulk environments export.`;
-      break;
    case "MALFORMED_COLLECTION":
      ERROR_MSG = `${error.path}\n${parseErrorData(error.data)}`;
      break;
+    case "ENVIRONMENT_NAME_NOT_FOUND":
+      ERROR_MSG = `\n${parseErrorData(error.data)}`;
+      break;
    case "NO_FILE_PATH":
      ERROR_MSG = `Please provide a hoppscotch-collection file path.`;
      break;
@@ -87,4 +85,4 @@ export const handleError = <T extends HoppErrorCode>(error: HoppError<T>) => {
  if (!S.isEmpty(ERROR_MSG)) {
    console.error(ERROR_CODE, ERROR_MSG);
  }
-};
+};
--- a/packages/hoppscotch-cli/src/index.ts
+++ b/packages/hoppscotch-cli/src/index.ts
@@ -50,6 +50,7 @@ program
    "path to a hoppscotch collection.json file for CI testing"
  )
  .option("-e, --env <file_path>", "path to an environment variables json file")
+  .option("-eN, --envName <environment_name>","Specific Name of the environment")
  .option(
    "-d, --delay <delay_in_ms>",
    "delay in milliseconds(ms) between consecutive requests within a collection"
--- a/packages/hoppscotch-cli/src/interfaces/request.ts
+++ b/packages/hoppscotch-cli/src/interfaces/request.ts
@@ -33,4 +33,5 @@ export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
  effectiveFinalHeaders: { key: string; value: string; active: boolean }[];
  effectiveFinalParams: { key: string; value: string; active: boolean }[];
  effectiveFinalBody: FormData | string | null;
+  effectiveFinalMaskedURL: string;
 }
--- a/packages/hoppscotch-cli/src/options/test/env.ts
+++ b/packages/hoppscotch-cli/src/options/test/env.ts
@@ -1,45 +1,50 @@
 import { error } from "../../types/errors";
-import {
-  HoppEnvs,
-  HoppEnvPair,
-  HoppEnvKeyPairObject,
-  HoppEnvExportObject,
-  HoppBulkEnvExportObject,
-} from "../../types/request";
+import { HoppEnvs, HoppEnvPair } from "../../types/request";
 import { readJsonFile } from "../../utils/mutators";
+
 /**
 * Parses env json file for given path and validates the parsed env json object.
 * @param path Path of env.json file to be parsed.
+ * @param envName Name of the environment that should be used. If undefined first environment is used.
 * @returns For successful parsing we get HoppEnvs object.
 */
-export async function parseEnvsData(path: string) {
-  const contents = await readJsonFile(path);
-  const envPairs: Array<HoppEnvPair> = [];
-  const HoppEnvKeyPairResult = HoppEnvKeyPairObject.safeParse(contents);
-  const HoppEnvExportObjectResult = HoppEnvExportObject.safeParse(contents);
-  const HoppBulkEnvExportObjectResult =
-    HoppBulkEnvExportObject.safeParse(contents);
-
-  // CLI doesnt support bulk environments export.
-  // Hence we check for this case and throw an error if it matches the format.
-  if (HoppBulkEnvExportObjectResult.success) {
-    throw error({ code: "BULK_ENV_FILE", path, data: error });
+export async function parseEnvsData(path: string, envName: string | undefined) {
+  const contents = await readJsonFile(path)
+  if(!(contents && typeof contents === "object" && Array.isArray(contents))) {
+    throw error({ code: "MALFORMED_ENV_FILE", path, data: null })
  }

-  //  Checks if the environment file is of the correct format.
-  // If it doesnt match either of them, we throw an error.
-  if (!(HoppEnvKeyPairResult.success || HoppEnvExportObjectResult.success)) {
-    throw error({ code: "MALFORMED_ENV_FILE", path, data: error });
-  }
+  const envPairs: Array<HoppEnvPair> = []

-  if (HoppEnvKeyPairResult.success) {
-    for (const [key, value] of Object.entries(HoppEnvKeyPairResult.data)) {
-      envPairs.push({ key, value });
+  const contentEntries = Object.entries(contents)
+  let environmentFound = false;
+
+  for(const [key, obj] of contentEntries) {
+    if(!(typeof obj === "object" && "name" in obj && "variables" in obj)) {
+      throw error({ code: "MALFORMED_ENV_FILE", path, data: { value: obj } })
    }
-  } else if (HoppEnvExportObjectResult.success) {
-    const { key, value } = HoppEnvExportObjectResult.data.variables[0];
-    envPairs.push({ key, value });
+    if(envName && envName !== obj.name) {
+      continue
+    }
+    environmentFound = true;
+    for(const variable of obj.variables) {
+      if(
+        !(
+          typeof variable === "object" &&
+          "key" in variable &&
+          "value" in variable &&
+          "secret" in variable
+        )
+      ) {
+        throw error({ code: "MALFORMED_ENV_FILE", path, data: { value: variable } });
+      }
+      const { key, value, secret } = variable;
+      envPairs.push({ key: key, value: value, secret: secret });
+    }
+    break
  }
-
-  return <HoppEnvs>{ global: [], selected: envPairs };
+  if(envName && !environmentFound) {
+    throw error({ code: "ENVIRONMENT_NAME_NOT_FOUND", data: envName });
+  }
+  return <HoppEnvs>{ global: [], selected: envPairs }
 }
--- a/packages/hoppscotch-cli/src/types/commands.ts
+++ b/packages/hoppscotch-cli/src/types/commands.ts
@@ -1,6 +1,7 @@
 export type TestCmdOptions = {
  env: string | undefined;
  delay: string | undefined;
+  envName: string | undefined;
 };

 export type HOPP_ENV_FILE_EXT = "json";
--- a/packages/hoppscotch-cli/src/types/errors.ts
+++ b/packages/hoppscotch-cli/src/types/errors.ts
@@ -15,6 +15,7 @@ type HoppErrors = {
  FILE_NOT_FOUND: HoppErrorPath;
  UNKNOWN_COMMAND: HoppErrorCmd;
  MALFORMED_COLLECTION: HoppErrorPath & HoppErrorData;
+  ENVIRONMENT_NAME_NOT_FOUND: HoppErrorData;
  NO_FILE_PATH: {};
  PRE_REQUEST_SCRIPT_ERROR: HoppErrorData;
  PARSING_ERROR: HoppErrorData;
@@ -24,7 +25,6 @@ type HoppErrors = {
  REQUEST_ERROR: HoppErrorData;
  INVALID_ARGUMENT: HoppErrorData;
  MALFORMED_ENV_FILE: HoppErrorPath & HoppErrorData;
-  BULK_ENV_FILE: HoppErrorPath & HoppErrorData;
  INVALID_FILE_TYPE: HoppErrorData;
 };

--- a/packages/hoppscotch-cli/src/types/request.ts
+++ b/packages/hoppscotch-cli/src/types/request.ts
@@ -1,30 +1,13 @@
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
 import { TestReport } from "../interfaces/response";
 import { HoppCLIError } from "./errors";
-import { z } from "zod";

 export type FormDataEntry = {
  key: string;
  value: string | Blob;
 };

-export type HoppEnvPair = { key: string; value: string };
-
-export const HoppEnvKeyPairObject = z.record(z.string(), z.string());
-
-// Shape of the single environment export object that is exported from the app.
-export const HoppEnvExportObject = z.object({
-  name: z.string(),
-  variables: z.array(
-    z.object({
-      key: z.string(),
-      value: z.string(),
-    })
-  ),
-});
-
-// Shape of the bulk environment export object that is exported from the app.
-export const HoppBulkEnvExportObject = z.array(HoppEnvExportObject);
+export type HoppEnvPair = { key: string; value: string; secret: boolean };

 export type HoppEnvs = {
  global: HoppEnvPair[];
--- a/packages/hoppscotch-cli/src/utils/display.ts
+++ b/packages/hoppscotch-cli/src/utils/display.ts
@@ -1,7 +1,7 @@
 import { bold } from "chalk";
 import { groupEnd, group, log } from "console";
 import { handleError } from "../handlers/error";
-import { RequestConfig } from "../interfaces/request";
+import { Method } from "axios";
 import { RequestRunnerResponse, TestReport } from "../interfaces/response";
 import { HoppCLIError } from "../types/errors";
 import {
@@ -172,11 +172,12 @@ export const printFailedTestsReport = (
 export const printRequestRunner = {
  /**
   * Request-runner starting message.
-   * @param requestConfig Provides request's method and url.
+   * @param requestMethod Provides request's method
+   * @param maskedURL Provides the URL with secrets masked with asterisks
   */
-  start: (requestConfig: RequestConfig) => {
-    const METHOD = BG_INFO(` ${requestConfig.method} `);
-    const ENDPOINT = requestConfig.url;
+  start: (requestMethod: Method | undefined, maskedURL: string) => {
+    const METHOD = BG_INFO(` ${requestMethod} `);
+    const ENDPOINT = maskedURL;

    process.stdout.write(`${METHOD} ${ENDPOINT}`);
  },
--- a/packages/hoppscotch-cli/src/utils/pre-request.ts
+++ b/packages/hoppscotch-cli/src/utils/pre-request.ts
@@ -50,9 +50,9 @@ export const preRequestScriptRunner = (
      isHoppCLIError(reason)
        ? reason
        : error({
-            code: "PRE_REQUEST_SCRIPT_ERROR",
-            data: reason,
-          })
+          code: "PRE_REQUEST_SCRIPT_ERROR",
+          data: reason,
+        })
    )
  );

@@ -151,6 +151,12 @@ export function getEffectiveRESTRequest(
    request.endpoint,
    envVariables
  );
+
+  const maskedEnvVariables = setAllEnvironmentValuesToAsterisk(envVariables)
+  const _effectiveFinalMaskedURL = parseTemplateStringE(
+    request.endpoint,
+    maskedEnvVariables)
+
  if (E.isLeft(_effectiveFinalURL)) {
    return E.left(
      error({
@@ -160,6 +166,7 @@ export function getEffectiveRESTRequest(
    );
  }
  const effectiveFinalURL = _effectiveFinalURL.right;
+  const effectiveFinalMaskedURL = E.isLeft(_effectiveFinalMaskedURL) ? request.endpoint : _effectiveFinalMaskedURL.right;

  return E.right({
    ...request,
@@ -167,6 +174,7 @@ export function getEffectiveRESTRequest(
    effectiveFinalHeaders,
    effectiveFinalParams,
    effectiveFinalBody,
+    effectiveFinalMaskedURL,
  });
 }

@@ -242,15 +250,15 @@ function getFinalBodyFromRequest(
      arrayFlatMap((x) =>
        x.isFile
          ? x.value.map((v) => ({
-              key: parseTemplateString(x.key, envVariables),
-              value: v as string | Blob,
-            }))
+            key: parseTemplateString(x.key, envVariables),
+            value: v as string | Blob,
+          }))
          : [
-              {
-                key: parseTemplateString(x.key, envVariables),
-                value: parseTemplateString(x.value, envVariables),
-              },
-            ]
+            {
+              key: parseTemplateString(x.key, envVariables),
+              value: parseTemplateString(x.value, envVariables),
+            },
+          ]
      ),
      toFormData,
      E.right
@@ -287,3 +295,22 @@ export const getPreRequestMetrics = (
      hasPreReqErrors ? { failed: 1, passed: 0 } : { failed: 0, passed: 1 },
    (scripts) => <PreRequestMetrics>{ scripts, duration }
  );
+
+/**
+ * Mask all environment values with asterisks
+ * @param variables Environment variable array
+ * @returns Environment variable array with masked values
+ */
+const setAllEnvironmentValuesToAsterisk = (
+  variables: Environment["variables"]
+): Environment["variables"] => {
+  const envVariables: Environment["variables"] = [];
+  for (const variable of variables) {
+    let value = variable.value
+    if (variable.secret) {
+      value = "******"
+    }
+    envVariables.push({ key: variable.key, secret: variable.secret, value: value })
+  }
+  return envVariables
+}
--- a/packages/hoppscotch-cli/src/utils/request.ts
+++ b/packages/hoppscotch-cli/src/utils/request.ts
@@ -220,6 +220,7 @@ export const processRequest =
      effectiveFinalHeaders: [],
      effectiveFinalParams: [],
      effectiveFinalURL: "",
+      effectiveFinalMaskedURL:"",
    };

    // Executing pre-request-script
@@ -237,8 +238,8 @@ export const processRequest =

    // Creating request-config for request-runner.
    const requestConfig = createRequest(effectiveRequest);
-
-    printRequestRunner.start(requestConfig);
+    
+    printRequestRunner.start(requestConfig.method, effectiveRequest.effectiveFinalMaskedURL);

    // Default value for request-runner's response.
    let _requestRunnerRes: RequestRunnerResponse = {
--- a/packages/hoppscotch-common/.prettierrc.js
+++ b/packages/hoppscotch-common/.prettierrc.js
@@ -4,6 +4,5 @@ module.exports = {
  singleQuote: false,
  printWidth: 80,
  useTabs: false,
-  tabWidth: 2,
-  plugins: ["prettier-plugin-tailwindcss"],
+  tabWidth: 2
 }
--- a/packages/hoppscotch-common/assets/scss/styles.scss
+++ b/packages/hoppscotch-common/assets/scss/styles.scss
@@ -1,25 +1,7 @@
-/*
-* Write hoppscotch-common related custom styles in this file.
-* If styles are sharable across all package then write into hoppscotch-ui/assets/scss/styles.scss file.
-*/
-
 * {
-  backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-
-  &::before {
-    backface-visibility: hidden;
-    -moz-backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-  }
-
-  &::after {
-    backface-visibility: hidden;
-    -moz-backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-  }
-
+  @apply backface-hidden;
+  @apply before:backface-hidden;
+  @apply after:backface-hidden;
  @apply selection:bg-accentDark;
  @apply selection:text-accentContrast;
  @apply overscroll-none;
@@ -29,25 +11,17 @@
  @apply antialiased;
  accent-color: var(--accent-color);
  font-variant-ligatures: common-ligatures;
-
-  // Colors
-  --info-color: #ec4899;
-  --success-color: #10b981;
-  --blue-color: #3b82f6;
-  --warning-color: #f59e0b;
-  --cl-error-color: #ef4444;
-  --sv-error-color: #dc2626;
 }

 ::-webkit-scrollbar-track {
  @apply bg-transparent;
-  @apply border-b-0 border-l border-r-0 border-t-0 border-solid border-dividerLight;
+  @apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0;
 }

 ::-webkit-scrollbar-thumb {
  @apply bg-divider bg-clip-content;
  @apply rounded-full;
-  @apply border-4 border-solid border-transparent;
+  @apply border-solid border-transparent border-4;
  @apply hover:bg-dividerDark;
  @apply hover:bg-clip-content;
 }
@@ -80,7 +54,7 @@ html {

 body {
  @apply bg-primary;
-  @apply text-body text-secondary;
+  @apply text-secondary text-body;
  @apply font-medium;
  @apply select-none;
  @apply overflow-x-hidden;
@@ -150,8 +124,8 @@ a {

  &.link {
    @apply items-center;
-    @apply px-1 py-0.5;
-    @apply -mx-1 -my-0.5;
+    @apply py-0.5 px-1;
+    @apply -my-0.5 -mx-1;
    @apply text-accent;
    @apply rounded;
    @apply hover:text-accentDark;
@@ -163,7 +137,7 @@ a {

 .cm-tooltip {
  .tippy-box {
-    @apply shadow-none #{!important};
+    @apply shadow-none;
    @apply fixed;
    @apply inline-flex;
    @apply -mt-8;
@@ -180,7 +154,7 @@ a {
    @apply flex;
    @apply text-tiny text-primary;
    @apply font-semibold;
-    @apply px-2 py-1;
+    @apply py-1 px-2;
    @apply truncate;
    @apply leading-normal;
    @apply items-center;
@@ -188,7 +162,7 @@ a {
    kbd {
      @apply hidden;
      @apply font-sans;
-      background-color: rgba(107, 114, 128, 0.45);
+      @apply bg-gray-500/45;
      @apply text-primaryLight;
      @apply rounded-sm;
      @apply px-1;
@@ -196,12 +170,6 @@ a {
      @apply truncate;
      @apply sm:inline-flex;
    }
-
-    .env-icon {
-      @apply transition;
-      @apply inline-flex;
-      @apply items-center;
-    }
  }

  .tippy-svg-arrow {
@@ -227,7 +195,7 @@ a {
    @apply max-h-[45vh];
    @apply items-stretch;
    @apply overflow-y-auto;
-    @apply text-body text-secondary;
+    @apply text-secondary text-body;
    @apply p-2;
    @apply leading-normal;
    @apply focus:outline-none;
@@ -266,7 +234,7 @@ hr {

 .heading {
  @apply font-bold;
-  @apply text-lg text-secondaryDark;
+  @apply text-secondaryDark text-lg;
  @apply tracking-tight;
 }

@@ -275,7 +243,7 @@ hr {
 .textarea {
  @apply flex;
  @apply w-full;
-  @apply px-4 py-2;
+  @apply py-2 px-4;
  @apply bg-transparent;
  @apply rounded;
  @apply text-secondaryDark;
@@ -316,7 +284,7 @@ button {
  @apply transform;
  @apply origin-top-left;
  @apply scale-75;
-  @apply -translate-y-4 translate-x-1;
+  @apply translate-x-1 -translate-y-4;
 }

 .floating-input:focus-within ~ label {
@@ -325,7 +293,7 @@ button {

 .floating-input ~ .end-actions {
  @apply absolute;
-  @apply right-[.05rem];
+  @apply right-0.2;
  @apply inset-y-0;
  @apply flex;
  @apply items-center;
@@ -367,23 +335,23 @@ pre.ace_editor {
 }

 .info-response {
-  color: var(--info-color);
+  @apply text-pink-500;
 }

 .success-response {
-  color: var(--success-color);
+  @apply text-green-500;
 }

 .redir-response {
-  color: var(--warning-color);
+  @apply text-yellow-500;
 }

 .cl-error-response {
-  color: var(--cl-error-color);
+  @apply text-red-500;
 }

 .sv-error-response {
-  color: var(--sv-error-color);
+  @apply text-red-600;
 }

 .missing-data-response {
@@ -398,7 +366,7 @@ pre.ace_editor {
      @apply px-4 py-2;
      @apply bg-tooltip;
      @apply border-secondaryDark;
-      @apply text-body text-primary;
+      @apply text-primary text-body;
      @apply justify-between;
      @apply shadow-lg;
      @apply font-semibold;
@@ -426,7 +394,7 @@ pre.ace_editor {
        @apply before:opacity-10;
        @apply before:inset-0;
        @apply before:transition;
-        @apply before:content-[''];
+        @apply before:content-DEFAULT;
        @apply hover:no-underline;
        @apply hover:before:opacity-20;
      }
@@ -460,7 +428,7 @@ pre.ace_editor {
  @apply before:opacity-0;
  @apply before:z-20;
  @apply before:transition;
-  @apply before:content-[''];
+  @apply before:content-DEFAULT;
  @apply hover:before:opacity-100;
 }

@@ -533,6 +501,22 @@ pre.ace_editor {
  }
 }

+.cm-panel.cm-search [name="close"] {
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply min-h-5;
+  @apply min-w-5;
+  @apply bg-primaryDark #{!important};
+  @apply sticky #{!important};
+  @apply right-0 #{!important};
+  @apply ml-auto #{!important};
+  @apply my-auto #{!important};
+  @apply rounded #{!important};
+  @apply outline #{!important};
+  @apply outline-divider #{!important};
+}
+
 .shortcut-key {
  @apply inline-flex;
  @apply font-sans;
--- a/packages/hoppscotch-common/assets/scss/tailwind.scss
+++ b/packages/hoppscotch-common/assets/scss/tailwind.scss
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
--- a/packages/hoppscotch-common/assets/scss/themes.scss
+++ b/packages/hoppscotch-common/assets/scss/themes.scss
@@ -0,0 +1,274 @@
+@mixin base-theme {
+  --font-sans: "Inter Variable", sans-serif;
+  --font-icon: "Material Symbols Rounded Variable";
+  --font-mono: "Roboto Mono Variable", monospace;
+  --font-size-body: 0.75rem;
+  --font-size-tiny: 0.688rem;
+  --line-height-body: 1rem;
+  --upper-primary-sticky-fold: 4.125rem;
+  --upper-secondary-sticky-fold: 6.188rem;
+  --upper-tertiary-sticky-fold: 8.25rem;
+  --upper-fourth-sticky-fold: 10.2rem;
+  --upper-mobile-primary-sticky-fold: 6.625rem;
+  --upper-mobile-secondary-sticky-fold: 8.688rem;
+  --upper-mobile-sticky-fold: 10.75rem;
+  --upper-mobile-tertiary-sticky-fold: 8.25rem;
+  --lower-primary-sticky-fold: 3rem;
+  --lower-secondary-sticky-fold: 5.063rem;
+  --lower-tertiary-sticky-fold: 7.125rem;
+  --lower-fourth-sticky-fold: 9.188rem;
+  --sidebar-primary-sticky-fold: 2rem;
+}
+
+@mixin dark-theme {
+  --primary-color: theme("colors.dark.800");
+  --primary-light-color: theme("colors.dark.600");
+  --primary-dark-color: theme("colors.neutral.800");
+  --primary-contrast-color: theme("colors.neutral.900");
+
+  --secondary-color: theme("colors.neutral.400");
+  --secondary-light-color: theme("colors.neutral.500");
+  --secondary-dark-color: theme("colors.neutral.50");
+
+  --divider-color: theme("colors.neutral.800");
+  --divider-light-color: theme("colors.dark.500");
+  --divider-dark-color: theme("colors.dark.300");
+
+  --error-color: theme("colors.stone.800");
+  --tooltip-color: theme("colors.neutral.100");
+  --popover-color: theme("colors.dark.700");
+  --editor-theme: "merbivore_soft";
+}
+
+@mixin light-theme {
+  --primary-color: theme("colors.white");
+  --primary-light-color: theme("colors.gray.50");
+  --primary-dark-color: theme("colors.gray.100");
+  --primary-contrast-color: theme("colors.light.50");
+
+  --secondary-color: theme("colors.gray.500");
+  --secondary-light-color: theme("colors.gray.400");
+  --secondary-dark-color: theme("colors.gray.900");
+
+  --divider-color: theme("colors.gray.100");
+  --divider-light-color: theme("colors.gray.100");
+  --divider-dark-color: theme("colors.gray.300");
+
+  --error-color: theme("colors.yellow.100");
+  --tooltip-color: theme("colors.neutral.800");
+  --popover-color: theme("colors.white");
+  --editor-theme: "textmate";
+}
+
+@mixin black-theme {
+  --primary-color: theme("colors.dark.900");
+  --primary-light-color: theme("colors.neutral.900");
+  --primary-dark-color: theme("colors.dark.800");
+  --primary-contrast-color: theme("colors.dark.900");
+
+  --secondary-color: theme("colors.neutral.400");
+  --secondary-light-color: theme("colors.neutral.500");
+  --secondary-dark-color: theme("colors.neutral.100");
+
+  --divider-color: theme("colors.dark.600");
+  --divider-light-color: theme("colors.dark.800");
+  --divider-dark-color: theme("colors.dark.200");
+
+  --error-color: theme("colors.stone.900");
+  --tooltip-color: theme("colors.neutral.100");
+  --popover-color: theme("colors.dark.900");
+  --editor-theme: "twilight";
+}
+
+@mixin dark-editor-theme {
+  --editor-type-color: theme("colors.purple.400");
+  --editor-name-color: theme("colors.blue.400");
+  --editor-operator-color: theme("colors.indigo.400");
+  --editor-invalid-color: theme("colors.red.400");
+  --editor-separator-color: theme("colors.gray.400");
+  --editor-meta-color: theme("colors.gray.400");
+  --editor-variable-color: theme("colors.green.400");
+  --editor-link-color: theme("colors.cyan.400");
+  --editor-process-color: theme("colors.fuchsia.400");
+  --editor-constant-color: theme("colors.violet.400");
+  --editor-keyword-color: theme("colors.pink.400");
+}
+
+@mixin light-editor-theme {
+  --editor-type-color: theme("colors.purple.600");
+  --editor-name-color: theme("colors.red.600");
+  --editor-operator-color: theme("colors.indigo.600");
+  --editor-invalid-color: theme("colors.red.600");
+  --editor-separator-color: theme("colors.gray.600");
+  --editor-meta-color: theme("colors.gray.600");
+  --editor-variable-color: theme("colors.green.600");
+  --editor-link-color: theme("colors.cyan.600");
+  --editor-process-color: theme("colors.blue.600");
+  --editor-constant-color: theme("colors.fuchsia.600");
+  --editor-keyword-color: theme("colors.pink.600");
+}
+
+@mixin black-editor-theme {
+  --editor-type-color: theme("colors.purple.400");
+  --editor-name-color: theme("colors.fuchsia.400");
+  --editor-operator-color: theme("colors.indigo.400");
+  --editor-invalid-color: theme("colors.red.400");
+  --editor-separator-color: theme("colors.gray.400");
+  --editor-meta-color: theme("colors.gray.400");
+  --editor-variable-color: theme("colors.green.400");
+  --editor-link-color: theme("colors.cyan.400");
+  --editor-process-color: theme("colors.violet.400");
+  --editor-constant-color: theme("colors.blue.400");
+  --editor-keyword-color: theme("colors.pink.400");
+}
+
+@mixin green-theme {
+  --accent-color: theme("colors.green.500");
+  --accent-light-color: theme("colors.green.400");
+  --accent-dark-color: theme("colors.green.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.green.200");
+  --gradient-via-color: theme("colors.green.400");
+  --gradient-to-color: theme("colors.green.600");
+}
+
+@mixin teal-theme {
+  --accent-color: theme("colors.teal.500");
+  --accent-light-color: theme("colors.teal.400");
+  --accent-dark-color: theme("colors.teal.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.teal.200");
+  --gradient-via-color: theme("colors.teal.400");
+  --gradient-to-color: theme("colors.teal.600");
+}
+
+@mixin blue-theme {
+  --accent-color: theme("colors.blue.500");
+  --accent-light-color: theme("colors.blue.400");
+  --accent-dark-color: theme("colors.blue.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.blue.200");
+  --gradient-via-color: theme("colors.blue.400");
+  --gradient-to-color: theme("colors.blue.600");
+}
+
+@mixin indigo-theme {
+  --accent-color: theme("colors.indigo.500");
+  --accent-light-color: theme("colors.indigo.400");
+  --accent-dark-color: theme("colors.indigo.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.indigo.200");
+  --gradient-via-color: theme("colors.indigo.400");
+  --gradient-to-color: theme("colors.indigo.600");
+}
+
+@mixin purple-theme {
+  --accent-color: theme("colors.purple.500");
+  --accent-light-color: theme("colors.purple.400");
+  --accent-dark-color: theme("colors.purple.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.purple.200");
+  --gradient-via-color: theme("colors.purple.400");
+  --gradient-to-color: theme("colors.purple.600");
+}
+
+@mixin yellow-theme {
+  --accent-color: theme("colors.yellow.500");
+  --accent-light-color: theme("colors.yellow.400");
+  --accent-dark-color: theme("colors.yellow.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.yellow.200");
+  --gradient-via-color: theme("colors.yellow.400");
+  --gradient-to-color: theme("colors.yellow.600");
+}
+
+@mixin orange-theme {
+  --accent-color: theme("colors.orange.500");
+  --accent-light-color: theme("colors.orange.400");
+  --accent-dark-color: theme("colors.orange.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.orange.200");
+  --gradient-via-color: theme("colors.orange.400");
+  --gradient-to-color: theme("colors.orange.600");
+}
+
+@mixin red-theme {
+  --accent-color: theme("colors.red.500");
+  --accent-light-color: theme("colors.red.400");
+  --accent-dark-color: theme("colors.red.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.red.200");
+  --gradient-via-color: theme("colors.red.400");
+  --gradient-to-color: theme("colors.red.600");
+}
+
+@mixin pink-theme {
+  --accent-color: theme("colors.pink.500");
+  --accent-light-color: theme("colors.pink.400");
+  --accent-dark-color: theme("colors.pink.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.pink.200");
+  --gradient-via-color: theme("colors.pink.400");
+  --gradient-to-color: theme("colors.pink.600");
+}
+
+:root {
+  @include base-theme;
+  @include dark-theme;
+  @include dark-editor-theme;
+  @include green-theme;
+}
+
+:root.light {
+  @include light-theme;
+  @include light-editor-theme;
+  color-scheme: light;
+}
+
+:root.dark {
+  @include dark-theme;
+  @include dark-editor-theme;
+  color-scheme: dark;
+}
+
+:root.black {
+  @include black-theme;
+  @include black-editor-theme;
+  color-scheme: dark;
+}
+
+:root[data-accent="blue"] {
+  @include blue-theme;
+}
+
+:root[data-accent="green"] {
+  @include green-theme;
+}
+
+:root[data-accent="teal"] {
+  @include teal-theme;
+}
+
+:root[data-accent="indigo"] {
+  @include indigo-theme;
+}
+
+:root[data-accent="purple"] {
+  @include purple-theme;
+}
+
+:root[data-accent="orange"] {
+  @include orange-theme;
+}
+
+:root[data-accent="pink"] {
+  @include pink-theme;
+}
+
+:root[data-accent="red"] {
+  @include red-theme;
+}
+
+:root[data-accent="yellow"] {
+  @include yellow-theme;
+}
--- a/packages/hoppscotch-common/assets/themes/accent-themes.scss
+++ b/packages/hoppscotch-common/assets/themes/accent-themes.scss
@@ -1,89 +0,0 @@
-@mixin green-theme {
-  --accent-color: #10b981;
-  --accent-light-color: #34d399;
-  --accent-dark-color: #059669;
-  --accent-contrast-color: #fff;
-  --gradient-from-color: #a7f3d0;
-  --gradient-via-color: #34d399;
-  --gradient-to-color: #059669;
-}
-
-@mixin teal-theme {
-  --accent-color: #14b8a6;
-  --accent-light-color: #2dd4bf;
-  --accent-dark-color: #0d9488;
-  --accent-contrast-color: #fff;
-  --gradient-from-color: #99f6e4;
-  --gradient-via-color: #2dd4bf;
-  --gradient-to-color: #0d9488;
-}
-
-@mixin blue-theme {
-  --accent-color: #3b82f6;
-  --accent-light-color: #60a5fa;
-  --accent-dark-color: #2563eb;
-  --accent-contrast-color: #fff;
-  --gradient-from-color: #bfdbfe;
-  --gradient-via-color: #60a5fa;
-  --gradient-to-color: #2563eb;
-}
-
-@mixin indigo-theme {
-  --accent-color: #6366f1;
-  --accent-light-color: #818cf8;
-  --accent-dark-color: #4f46e5;
-  --accent-contrast-color: #fff;
-  --gradient-from-color: #c7d2fe;
-  --gradient-via-color: #818cf8;
-  --gradient-to-color: #4f46e5;
-}
-
-@mixin purple-theme {
-  --accent-color: #8b5cf6;
-  --accent-light-color: #a78bfa;
-  --accent-dark-color: #7c3aed;
-  --accent-contrast-color: #fff;
-  --gradient-from-color: #ddd6fe;
-  --gradient-via-color: #a78bfa;
-  --gradient-to-color: #7c3aed;
-}
-
-@mixin yellow-theme {
-  --accent-color: #f59e0b;
-  --accent-light-color: #fbbf24;
-  --accent-dark-color: #d97706;
-  --accent-contrast-color: #fff;
-  --gradient-from-color: #fde68a;
-  --gradient-via-color: #fbbf24;
-  --gradient-to-color: #d97706;
-}
-
-@mixin orange-theme {
-  --accent-color: #f97316;
-  --accent-light-color: #fb923c;
-  --accent-dark-color: #ea580c;
-  --accent-contrast-color: #fff;
-  --gradient-from-color: #fed7aa;
-  --gradient-via-color: #fb923c;
-  --gradient-to-color: #ea580c;
-}
-
-@mixin red-theme {
-  --accent-color: #ef4444;
-  --accent-light-color: #f87171;
-  --accent-dark-color: #dc2626;
-  --accent-contrast-color: #fff;
-  --gradient-from-color: #fecaca;
-  --gradient-via-color: #f87171;
-  --gradient-to-color: #dc2626;
-}
-
-@mixin pink-theme {
-  --accent-color: #ec4899;
-  --accent-light-color: #f472b6;
-  --accent-dark-color: #db2777;
-  --accent-contrast-color: #fff;
-  --gradient-from-color: #fbcfe8;
-  --gradient-via-color: #f472b6;
-  --gradient-to-color: #db2777;
-}
--- a/packages/hoppscotch-common/assets/themes/base-themes.scss
+++ b/packages/hoppscotch-common/assets/themes/base-themes.scss
@@ -1,81 +0,0 @@
-@mixin base-theme {
-  --font-sans: "Inter Variable", sans-serif;
-  --font-icon: "Material Symbols Rounded Variable";
-  --font-mono: "Roboto Mono Variable", monospace;
-  --font-size-body: 0.75rem;
-  --font-size-tiny: 0.688rem;
-  --line-height-body: 1rem;
-  --upper-primary-sticky-fold: 4.125rem;
-  --upper-secondary-sticky-fold: 6.188rem;
-  --upper-tertiary-sticky-fold: 8.25rem;
-  --upper-fourth-sticky-fold: 10.2rem;
-  --upper-mobile-primary-sticky-fold: 6.625rem;
-  --upper-mobile-secondary-sticky-fold: 8.688rem;
-  --upper-mobile-sticky-fold: 10.75rem;
-  --upper-mobile-tertiary-sticky-fold: 8.25rem;
-  --lower-primary-sticky-fold: 3rem;
-  --lower-secondary-sticky-fold: 5.063rem;
-  --lower-tertiary-sticky-fold: 7.125rem;
-  --lower-fourth-sticky-fold: 9.188rem;
-  --sidebar-primary-sticky-fold: 2rem;
-}
-
-@mixin dark-theme {
-  --primary-color: #181818;
-  --primary-light-color: #1c1c1e;
-  --primary-dark-color: #262626;
-  --primary-contrast-color: #171717;
-
-  --secondary-color: #a3a3a3;
-  --secondary-light-color: #737373;
-  --secondary-dark-color: #fafafa;
-
-  --divider-color: #262626;
-  --divider-light-color: #1f1f1f;
-  --divider-dark-color: #2d2d2d;
-
-  --error-color: #292524;
-  --tooltip-color: #f5f5f5;
-  --popover-color: #1b1b1b;
-  --editor-theme: "merbivore_soft";
-}
-
-@mixin light-theme {
-  --primary-color: #ffffff;
-  --primary-light-color: #f9fafb;
-  --primary-dark-color: #f3f4f6;
-  --primary-contrast-color: #fdfdfd;
-
-  --secondary-color: #6b7280;
-  --secondary-light-color: #9ca3af;
-  --secondary-dark-color: #111827;
-
-  --divider-color: #f3f4f6;
-  --divider-light-color: #f3f4f6;
-  --divider-dark-color: #d1d5db;
-
-  --error-color: #fef3c7;
-  --tooltip-color: #262626;
-  --popover-color: #ffffff;
-  --editor-theme: "textmate";
-}
-
-@mixin black-theme {
-  --primary-color: #0f0f0f;
-  --primary-light-color: #171717;
-  --primary-dark-color: #181818;
-  --primary-contrast-color: #0f0f0f;
-
-  --secondary-color: #a3a3a3;
-  --secondary-light-color: #737373;
-  --secondary-dark-color: #f5f5f5;
-
-  --divider-color: #1c1c1e;
-  --divider-light-color: #181818;
-  --divider-dark-color: #323232;
-
-  --error-color: #1c1917;
-  --tooltip-color: #f5f5f5;
-  --popover-color: #0f0f0f;
-  --editor-theme: "twilight";
-}
--- a/packages/hoppscotch-common/assets/themes/editor-themes.scss
+++ b/packages/hoppscotch-common/assets/themes/editor-themes.scss
@@ -1,41 +0,0 @@
-@mixin dark-editor-theme {
-  --editor-type-color: #a78bfa;
-  --editor-name-color: #60a5fa;
-  --editor-operator-color: #818cf8;
-  --editor-invalid-color: #f87171;
-  --editor-separator-color: #9ca3af;
-  --editor-meta-color: #9ca3af;
-  --editor-variable-color: #34d399;
-  --editor-link-color: #22d3ee;
-  --editor-process-color: #e879f9;
-  --editor-constant-color: #a78bfa;
-  --editor-keyword-color: #f472b6;
-}
-
-@mixin light-editor-theme {
-  --editor-type-color: #7c3aed;
-  --editor-name-color: #dc2626;
-  --editor-operator-color: #4f46e5;
-  --editor-invalid-color: #dc2626;
-  --editor-separator-color: #4b5563;
-  --editor-meta-color: #4b5563;
-  --editor-variable-color: #059669;
-  --editor-link-color: #0891b2;
-  --editor-process-color: #2563eb;
-  --editor-constant-color: #c026d3;
-  --editor-keyword-color: #db2777;
-}
-
-@mixin black-editor-theme {
-  --editor-type-color: #a78bfa;
-  --editor-name-color: #e879f9;
-  --editor-operator-color: #818cf8;
-  --editor-invalid-color: #f87171;
-  --editor-separator-color: #9ca3af;
-  --editor-meta-color: #9ca3af;
-  --editor-variable-color: #34d399;
-  --editor-link-color: #22d3ee;
-  --editor-process-color: #a78bfa;
-  --editor-constant-color: #60a5fa;
-  --editor-keyword-color: #f472b6;
-}
--- a/packages/hoppscotch-common/assets/themes/themes.scss
+++ b/packages/hoppscotch-common/assets/themes/themes.scss
@@ -1,64 +0,0 @@
-@import "./base-themes.scss";
-@import "./editor-themes.scss";
-@import "./accent-themes.scss";
-
-:root {
-  @include base-theme;
-  @include dark-theme;
-  @include green-theme;
-  @include dark-editor-theme;
-}
-
-:root.light {
-  @include light-theme;
-  @include light-editor-theme;
-  color-scheme: light;
-}
-
-:root.dark {
-  @include dark-theme;
-  @include dark-editor-theme;
-  color-scheme: dark;
-}
-
-:root.black {
-  @include black-theme;
-  @include black-editor-theme;
-  color-scheme: dark;
-}
-
-:root[data-accent="blue"] {
-  @include blue-theme;
-}
-
-:root[data-accent="green"] {
-  @include green-theme;
-}
-
-:root[data-accent="teal"] {
-  @include teal-theme;
-}
-
-:root[data-accent="indigo"] {
-  @include indigo-theme;
-}
-
-:root[data-accent="purple"] {
-  @include purple-theme;
-}
-
-:root[data-accent="orange"] {
-  @include orange-theme;
-}
-
-:root[data-accent="pink"] {
-  @include pink-theme;
-}
-
-:root[data-accent="red"] {
-  @include red-theme;
-}
-
-:root[data-accent="yellow"] {
-  @include yellow-theme;
-}
--- a/packages/hoppscotch-common/locales/de.json
+++ b/packages/hoppscotch-common/locales/de.json
@@ -48,7 +48,8 @@
    "turn_off": "Ausschalten",
    "turn_on": "Einschalten",
    "undo": "Rückgängig machen",
-    "yes": "Ja"
+    "yes": "Ja",
+    "secret": "Als Secret speichern"
  },
  "add": {
    "new": "Neue hinzufügen",
@@ -880,4 +881,4 @@
    "team": "Team Workspace",
    "title": "Workspaces"
  }
-}
+}
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -48,7 +48,8 @@
    "turn_off": "Turn off",
    "turn_on": "Turn on",
    "undo": "Undo",
-    "yes": "Yes"
+    "yes": "Yes",
+    "secret": "Save as secret"
  },
  "add": {
    "new": "Add new",
@@ -112,7 +113,6 @@
  },
  "authorization": {
    "generate_token": "Generate Token",
-    "graphql_headers": "Authorization Headers are sent as part of the payload to connection_init",
    "include_in_url": "Include in URL",
    "learn": "Learn how",
    "pass_key_by": "Pass by",
@@ -125,7 +125,6 @@
    "created": "Collection created",
    "different_parent": "Cannot reorder collection with different parent",
    "edit": "Edit Collection",
-    "import_or_create": "Import or create a collection",
    "invalid_name": "Please provide a name for the collection",
    "invalid_root_move": "Collection already in the root",
    "moved": "Moved Successfully",
@@ -211,7 +210,6 @@
    "empty_variables": "No variables",
    "global": "Global",
    "global_variables": "Global variables",
-    "import_or_create": "Import or create a environment",
    "invalid_name": "Please provide a name for the environment",
    "list": "Environment variables",
    "my_environments": "My Environments",
@@ -252,9 +250,7 @@
    "json_prettify_invalid_body": "Couldn't prettify an invalid body, solve json syntax errors and try again",
    "network_error": "There seems to be a network error. Please try again.",
    "network_fail": "Could not send request",
-    "no_collections_to_export": "No collections to export. Please create a collection to get started.",
    "no_duration": "No duration",
-    "no_environments_to_export": "No environments to export. Please create an environment to get started.",
    "no_results_found": "No matches found",
    "page_not_found": "This page could not be found",
    "proxy_error": "Proxy error",
@@ -461,7 +457,6 @@
    "enter_curl": "Enter cURL command",
    "generate_code": "Generate code",
    "generated_code": "Generated code",
-    "go_to_authorization_tab": "Go to Authorization",
    "header_list": "Header List",
    "invalid_name": "Please provide a name for the request",
    "method": "Method",
@@ -749,11 +744,9 @@
    "disconnected_from": "Disconnected from {name}",
    "docs_generated": "Documentation generated",
    "download_started": "Download started",
-    "download_failed": "Download failed",
    "enabled": "Enabled",
    "file_imported": "File imported",
    "finished_in": "Finished in {duration} ms",
-    "hide": "Hide",
    "history_deleted": "History deleted",
    "linewrap": "Wrap lines",
    "loading": "Loading...",
@@ -764,7 +757,6 @@
    "published_error": "Something went wrong while publishing msg: {topic} to topic: {message}",
    "published_message": "Published message: {message} to topic: {topic}",
    "reconnection_error": "Failed to reconnect",
-    "show":"Show",
    "subscribed_failed": "Failed to subscribe to topic: {topic}",
    "subscribed_success": "Successfully subscribed to topic: {topic}",
    "unsubscribed_failed": "Failed to unsubscribe from topic: {topic}",
@@ -846,7 +838,7 @@
    "new": "New Team",
    "new_created": "New team created",
    "new_name": "My New Team",
-    "no_access": "You do not have edit access to this team",
+    "no_access": "You do not have edit access to these collections",
    "no_invite_found": "Invitation not found. Contact your team owner.",
    "no_request_found": "Request not found.",
    "not_found": "Team not found. Contact your team owner.",
--- a/packages/hoppscotch-common/locales/tw.json
+++ b/packages/hoppscotch-common/locales/tw.json
@@ -5,7 +5,7 @@
    "choose_file": "選擇一個檔案",
    "clear": "清除",
    "clear_all": "全部清除",
-    "clear_history": "清除所有歷史記錄",
+    "clear_history": "Clear all History",
    "close": "關閉",
    "connect": "連線",
    "connecting": "正在連接",
@@ -79,8 +79,8 @@
    "search": "搜尋",
    "share": "分享",
    "shortcuts": "快捷方式",
-    "social_description": "在社交媒體上追蹤我們即可在第一時間得知新聞、更新、以及新版本的消息。",
-    "social_links": "社群連結",
+    "social_description": "Follow us on social media to stay updated with the latest news, updates and releases.",
+    "social_links": "Social links",
    "spotlight": "聚光燈",
    "status": "狀態",
    "status_description": "檢查網站狀態",
@@ -135,15 +135,15 @@
    "renamed": "集合已重新命名",
    "request_in_use": "請求正在使用中",
    "save_as": "另存為",
-    "save_to_collection": "儲存到集合",
+    "save_to_collection": "Save to Collection",
    "select": "選擇一個集合",
    "select_location": "選擇位置",
    "select_team": "選擇一個團隊",
    "team_collections": "團隊集合"
  },
  "confirm": {
-    "close_unsaved_tab": "您確定要關閉此分頁嗎？",
-    "close_unsaved_tabs": "您確定要關閉所有分頁嗎？{count} 個未儲存的分頁將會遺失。",
+    "close_unsaved_tab": "Are you sure you want to close this tab?",
+    "close_unsaved_tabs": "Are you sure you want to close all tabs? {count} unsaved tabs will be lost.",
    "exit_team": "您確定要離開此團隊嗎？",
    "logout": "您確定要登出嗎？",
    "remove_collection": "您確定要永久刪除該集合嗎？",
@@ -158,9 +158,9 @@
    "sync": "您想從雲端恢復您的工作區嗎？這將丟棄您的本地進度。"
  },
  "context_menu": {
-    "add_parameters": "新增至參數",
-    "open_request_in_new_tab": "在新分頁開啟請求",
-    "set_environment_variable": "設為變數"
+    "add_parameters": "Add to parameters",
+    "open_request_in_new_tab": "Open request in new tab",
+    "set_environment_variable": "Set as variable"
  },
  "count": {
    "header": "請求標頭 {count}",
@@ -204,31 +204,31 @@
    "create_new": "建立新環境",
    "created": "已建立環境",
    "deleted": "刪除環境",
-    "duplicated": "已複製環境",
+    "duplicated": "Environment duplicated",
    "edit": "編輯環境",
-    "empty_variables": "無變數",
-    "global": "全域",
-    "global_variables": "全域變數",
+    "empty_variables": "No variables",
+    "global": "Global",
+    "global_variables": "Global variables",
    "invalid_name": "請提供有效的環境名稱",
-    "list": "環境變數",
+    "list": "Environment variables",
    "my_environments": "我的環境",
-    "name": "名稱",
+    "name": "Name",
    "nested_overflow": "巢狀環境變數不得大於 10 層",
    "new": "建立環境",
-    "no_active_environment": "無使用中的環境",
+    "no_active_environment": "No active environment",
    "no_environment": "無環境",
    "no_environment_description": "未選取任何環境。請選擇要對以下變數進行的動作。",
-    "quick_peek": "快速預覽環境",
-    "replace_with_variable": "以變數替代",
-    "scope": "範圍",
+    "quick_peek": "Environment Quick Peek",
+    "replace_with_variable": "Replace with variable",
+    "scope": "Scope",
    "select": "選擇環境",
-    "set": "設定環境",
-    "set_as_environment": "設為環境",
+    "set": "Set environment",
+    "set_as_environment": "Set as environment",
    "team_environments": "團隊環境",
    "title": "環境",
    "updated": "更新環境",
-    "value": "數值",
-    "variable": "變數",
+    "value": "Value",
+    "variable": "Variable",
    "variable_list": "變數列表"
  },
  "error": {
@@ -252,7 +252,7 @@
    "no_duration": "無持續時間",
    "no_results_found": "找不到結果",
    "page_not_found": "找不到此頁面",
-    "proxy_error": "Proxy 錯誤",
+    "proxy_error": "Proxy error",
    "script_fail": "無法執行預請求指令碼",
    "something_went_wrong": "發生了一些錯誤",
    "test_script_fail": "無法執行測試指令碼"
@@ -278,13 +278,13 @@
    "renamed": "資料夾已重新命名"
  },
  "graphql": {
-    "connection_switch_confirm": "您要使用最新的 GraphQL 端點連線嗎？",
-    "connection_switch_new_url": "切換至分頁將斷開使用中的 GraphQL 連線。新的連線網址為 ",
-    "connection_switch_url": "您已連接至 GraphQL 端點。連線網址為 ",
+    "connection_switch_confirm": "Do you want to connect with the latest GraphQL endpoint?",
+    "connection_switch_new_url": "Switching to a tab will disconnected you from the active GraphQL connection. New connection URL is",
+    "connection_switch_url": "You're connected to a GraphQL endpoint the connection URL is",
    "mutations": "變體",
    "schema": "綱要",
    "subscriptions": "訂閱",
-    "switch_connection": "切換連線"
+    "switch_connection": "Switch connection"
  },
  "group": {
    "time": "時間",
@@ -339,27 +339,27 @@
    "title": "匯入"
  },
  "inspections": {
-    "description": "檢查潛在錯誤",
+    "description": "Inspect possible errors",
    "environment": {
-      "add_environment": "新增至環境",
-      "not_found": "找不到環境變數 “{environment}”。"
+      "add_environment": "Add to Environment",
+      "not_found": "Environment variable “{environment}” not found."
    },
    "header": {
-      "cookie": "瀏覽器不允許 Hoppscotch 設定 Cookie 標頭。在我們推出 Hoppscotch 桌面版前，請先使用 Authorization 標頭。"
+      "cookie": "The browser doesn't allow Hoppscotch to set the Cookie Header. While we're working on the Hoppscotch Desktop App (coming soon), please use the Authorization Header instead."
    },
    "response": {
-      "401_error": "請檢查您的授權認證。",
-      "404_error": "請檢查您的請求網址和方式類型。",
-      "cors_error": "請檢查您的跨來源資源共用設定。",
-      "default_error": "請檢查您的請求。",
-      "network_error": "請檢查您的網路連線。"
+      "401_error": "Please check your authentication credentials.",
+      "404_error": "Please check your request URL and method type.",
+      "cors_error": "Please check your Cross-Origin Resource Sharing configuration.",
+      "default_error": "Please check your request.",
+      "network_error": "Please check your network connection."
    },
-    "title": "檢查工具",
+    "title": "Inspector",
    "url": {
-      "extension_not_installed": "未安裝擴充套件。",
-      "extension_unknown_origin": "請確認您是否已將 API 端點的來源加入 Hoppscotch 擴充套件的清單。",
-      "extention_enable_action": "啟用瀏覽器擴充套件",
-      "extention_not_enabled": "未啟用擴充套件。"
+      "extension_not_installed": "Extension not installed.",
+      "extension_unknown_origin": "Make sure you've added the API endpoint's origin to the Hoppscotch Browser Extension list.",
+      "extention_enable_action": "Enable Browser Extension",
+      "extention_not_enabled": "Extension not enabled."
    }
  },
  "layout": {
@@ -472,7 +472,7 @@
    "payload": "負載",
    "query": "查詢",
    "raw_body": "原始請求本體",
-    "rename": "重新命名請求",
+    "rename": "Rename Request",
    "renamed": "請求已重新命名",
    "run": "執行",
    "save": "儲存",
@@ -510,7 +510,7 @@
    "accent_color": "強調色",
    "account": "帳號",
    "account_deleted": "已刪除您的帳號",
-    "account_description": "自訂您的帳號設定。",
+    "account_description": "自定義您的帳號設定。",
    "account_email_description": "您的主要電子郵件地址。",
    "account_name_description": "這是您的顯示名稱。",
    "background": "背景",
@@ -542,7 +542,7 @@
    "read_the": "閱讀",
    "reset_default": "重置為預設",
    "short_codes": "快捷碼",
-    "short_codes_description": "您建立的快捷碼。",
+    "short_codes_description": "我們為您打造的快捷碼。",
    "sidebar_on_left": "左側邊欄",
    "sync": "同步",
    "sync_collections": "集合",
@@ -551,9 +551,9 @@
    "sync_history": "歷史",
    "system_mode": "系統",
    "telemetry": "遙測服務",
-    "telemetry_helps_us": "遙測服務能夠幫助我們進行個人化操作，為您提供最佳體驗。",
+    "telemetry_helps_us": "遙測服務幫助我們進行個性化操作，為您提供最佳體驗。",
    "theme": "主題",
-    "theme_description": "自訂您的應用程式主題。",
+    "theme_description": "自定義您的應用程式主題。",
    "use_experimental_url_bar": "使用帶有環境醒目標示的實驗性網址欄",
    "user": "使用者",
    "verified_email": "已確認電子郵件地址",
@@ -592,26 +592,26 @@
      "title": "導航"
    },
    "others": {
-      "prettify": "美化編輯器的內容",
-      "title": "其他"
+      "prettify": "Prettify Editor's Content",
+      "title": "Others"
    },
    "request": {
      "copy_request_link": "複製請求連結",
      "delete_method": "選擇 DELETE 方法",
      "get_method": "選擇 GET 方法",
      "head_method": "選擇 HEAD 方法",
-      "import_curl": "匯入 cURL",
+      "import_curl": "Import cURL",
      "method": "方法",
      "next_method": "選擇下一個方法",
      "post_method": "選擇 POST 方法",
      "previous_method": "選擇上一個方法",
      "put_method": "選擇 PUT 方法",
-      "rename": "重新命名請求",
+      "rename": "Rename Request",
      "reset_request": "重置請求",
-      "save_request": "儲存請求",
+      "save_request": "Save Request",
      "save_to_collections": "儲存到集合",
      "send_request": "傳送請求",
-      "show_code": "產生程式碼片段",
+      "show_code": "Generate code snippet",
      "title": "請求"
    },
    "response": {
@@ -642,82 +642,82 @@
    "url": "網址"
  },
  "spotlight": {
-    "change_language": "變更語言",
+    "change_language": "Change Language",
    "environments": {
-      "delete": "刪除目前環境",
-      "duplicate": "複製目前環境",
-      "duplicate_global": "複製全域環境",
-      "edit": "編輯目前環境",
-      "edit_global": "編輯全域環境",
-      "new": "建立新環境",
-      "new_variable": "建立新環境變數",
-      "title": "環境"
+      "delete": "Delete current environment",
+      "duplicate": "Duplicate current environment",
+      "duplicate_global": "Duplicate global environment",
+      "edit": "Edit current environment",
+      "edit_global": "Edit global environment",
+      "new": "Create new environment",
+      "new_variable": "Create a new environment variable",
+      "title": "Environments"
    },
    "general": {
-      "chat": "與客服對話",
-      "help_menu": "幫助與支援",
-      "open_docs": "閱讀說明文件",
-      "open_github": "開啟 GitHub 儲存庫",
-      "open_keybindings": "鍵盤快捷鍵",
-      "social": "社交",
-      "title": "一般"
+      "chat": "Chat with support",
+      "help_menu": "Help and support",
+      "open_docs": "Read Documentation",
+      "open_github": "Open GitHub repository",
+      "open_keybindings": "Keyboard shortcuts",
+      "social": "Social",
+      "title": "General"
    },
    "graphql": {
-      "connect": "連接至伺服器",
-      "disconnect": "斷開與伺服器的連線"
+      "connect": "Connect to server",
+      "disconnect": "Disconnect from server"
    },
    "miscellaneous": {
-      "invite": "邀請您的朋友使用 Hoppscotch",
-      "title": "雜項"
+      "invite": "Invite your friends to Hoppscotch",
+      "title": "Miscellaneous"
    },
    "request": {
-      "save_as_new": "儲存為新請求",
-      "select_method": "選擇方法",
-      "switch_to": "切換至",
-      "tab_authorization": "授權分頁",
-      "tab_body": "本體分頁",
-      "tab_headers": "標頭分頁",
-      "tab_parameters": "參數分頁",
-      "tab_pre_request_script": "預請求腳本分頁",
-      "tab_query": "查詢分頁",
-      "tab_tests": "測試分頁",
-      "tab_variables": "變數分頁"
+      "save_as_new": "Save as new request",
+      "select_method": "Select method",
+      "switch_to": "Switch to",
+      "tab_authorization": "Authorization tab",
+      "tab_body": "Body tab",
+      "tab_headers": "Headers tab",
+      "tab_parameters": "Parameters tab",
+      "tab_pre_request_script": "Pre-request script tab",
+      "tab_query": "Query tab",
+      "tab_tests": "Tests tab",
+      "tab_variables": "Variables tab"
    },
    "response": {
-      "copy": "複製回應",
-      "download": "下載回應",
-      "title": "回應"
+      "copy": "Copy response",
+      "download": "Download response as file",
+      "title": "Response"
    },
    "section": {
-      "interceptor": "攔截器",
-      "interface": "介面",
-      "theme": "主題",
-      "user": "使用者"
+      "interceptor": "Interceptor",
+      "interface": "Interface",
+      "theme": "Theme",
+      "user": "User"
    },
    "settings": {
-      "change_interceptor": "變更攔截器",
-      "change_language": "變更語言",
+      "change_interceptor": "Change Interceptor",
+      "change_language": "Change Language",
      "theme": {
-        "black": "黑色",
-        "dark": "暗色",
-        "light": "亮色",
-        "system": "跟隨系統"
+        "black": "Black",
+        "dark": "Dark",
+        "light": "Light",
+        "system": "System preference"
      }
    },
    "tab": {
-      "close_current": "關閉目前分頁",
-      "close_others": "關閉所有其他分頁",
-      "duplicate": "複製目前分頁",
-      "new_tab": "開啟新分頁",
-      "title": "分頁"
+      "close_current": "Close current tab",
+      "close_others": "Close all other tabs",
+      "duplicate": "Duplicate current tab",
+      "new_tab": "Open a new tab",
+      "title": "Tabs"
    },
    "workspace": {
-      "delete": "刪除目前團隊",
-      "edit": "編輯目前團隊",
-      "invite": "邀請他人加入團隊",
-      "new": "建立新團隊",
-      "switch_to_personal": "切換至您的個人工作區",
-      "title": "團隊"
+      "delete": "Delete current team",
+      "edit": "Edit current team",
+      "invite": "Invite people to team",
+      "new": "Create new team",
+      "switch_to_personal": "Switch to your personal workspace",
+      "title": "Teams"
    }
  },
  "sse": {
@@ -777,11 +777,11 @@
  "tab": {
    "authorization": "授權",
    "body": "請求本體",
-    "close": "關閉分頁",
-    "close_others": "關閉其他分頁",
+    "close": "Close Tab",
+    "close_others": "Close other Tabs",
    "collections": "集合",
    "documentation": "幫助文件",
-    "duplicate": "複製分頁",
+    "duplicate": "Duplicate Tab",
    "environments": "環境",
    "headers": "請求標頭",
    "history": "歷史記錄",
--- a/packages/hoppscotch-common/package.json
+++ b/packages/hoppscotch-common/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@hoppscotch/common",
  "private": true,
-  "version": "2023.8.3",
+  "version": "2023.8.1",
  "scripts": {
    "dev": "pnpm exec npm-run-all -p -l dev:*",
    "test": "vitest --run",
@@ -17,22 +17,22 @@
    "postinstall": "pnpm run gql-codegen",
    "do-test": "pnpm run test",
    "do-lint": "pnpm run prod-lint",
-    "do-typecheck": "node type-check.mjs",
+    "do-typecheck": "pnpm run lint",
    "do-lintfix": "pnpm run lintfix"
  },
  "dependencies": {
    "@apidevtools/swagger-parser": "^10.1.0",
-    "@codemirror/autocomplete": "^6.10.2",
-    "@codemirror/commands": "^6.3.0",
-    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/autocomplete": "^6.9.0",
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/lang-javascript": "^6.1.9",
    "@codemirror/lang-json": "^6.0.1",
    "@codemirror/lang-xml": "^6.0.2",
-    "@codemirror/language": "^6.9.2",
+    "@codemirror/language": "^6.9.0",
    "@codemirror/legacy-modes": "^6.3.3",
-    "@codemirror/lint": "^6.4.2",
-    "@codemirror/search": "^6.5.4",
-    "@codemirror/state": "^6.3.1",
-    "@codemirror/view": "^6.22.0",
+    "@codemirror/lint": "^6.4.0",
+    "@codemirror/search": "^6.5.1",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "^6.16.0",
    "@fontsource-variable/inter": "^5.0.8",
    "@fontsource-variable/material-symbols-rounded": "^5.0.7",
    "@fontsource-variable/roboto-mono": "^5.0.9",
@@ -41,7 +41,9 @@
    "@hoppscotch/js-sandbox": "workspace:^",
    "@hoppscotch/ui": "workspace:^",
    "@hoppscotch/vue-toasted": "^0.1.0",
-    "@lezer/highlight": "1.1.4",
+    "@lezer/highlight": "^1.1.6",
+    "@sentry/tracing": "^7.64.0",
+    "@sentry/vue": "^7.64.0",
    "@urql/core": "^4.1.1",
    "@urql/devtools": "^2.0.3",
    "@urql/exchange-auth": "^2.1.6",
@@ -131,18 +133,12 @@
    "@vue/compiler-sfc": "^3.3.4",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/runtime-core": "^3.3.4",
-    "autoprefixer": "^10.4.14",
    "cross-env": "^7.0.3",
    "dotenv": "^16.3.1",
    "eslint": "^8.47.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-vue": "^9.17.0",
-    "glob": "^10.3.10",
    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.23",
-    "prettier-plugin-tailwindcss": "^0.5.6",
-    "tailwindcss": "^3.3.2",
-    "vite-plugin-fonts": "^0.6.0",
    "openapi-types": "^12.1.3",
    "rollup-plugin-polyfill-node": "^0.12.0",
    "sass": "^1.66.0",
@@ -158,7 +154,9 @@
    "vite-plugin-pages-sitemap": "^1.6.1",
    "vite-plugin-pwa": "^0.16.4",
    "vite-plugin-vue-layouts": "^0.8.0",
+    "vite-plugin-windicss": "^1.9.1",
    "vitest": "^0.34.2",
-    "vue-tsc": "^1.8.8"
+    "vue-tsc": "^1.8.8",
+    "windicss": "^3.5.6"
  }
 }
--- a/packages/hoppscotch-common/src/App.vue
+++ b/packages/hoppscotch-common/src/App.vue
@@ -2,7 +2,7 @@
  <div>
    <div
      v-if="isLoadingInitialRoute"
-      class="flex min-h-screen flex-col items-center justify-center"
+      class="flex flex-col items-center justify-center min-h-screen"
    >
      <HoppSmartSpinner />
    </div>
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -5,11 +5,10 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}

-declare module "vue" {
+declare module 'vue' {
  export interface GlobalComponents {
    AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
    AppAnnouncement: typeof import('./components/app/Announcement.vue')['default']
-    AppBanner: typeof import('./components/app/Banner.vue')['default']
    AppContextMenu: typeof import('./components/app/ContextMenu.vue')['default']
    AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default']
    AppFooter: typeof import('./components/app/Footer.vue')['default']
@@ -97,7 +96,6 @@ declare module "vue" {
    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
-    HoppSmartIntersection: typeof import('@hoppscotch/ui')['HoppSmartIntersection']
    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
@@ -141,11 +139,9 @@ declare module "vue" {
    HttpTests: typeof import('./components/http/Tests.vue')['default']
    HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
    IconLucideActivity: typeof import('~icons/lucide/activity')['default']
-    IconLucideAlertCircle: typeof import('~icons/lucide/alert-circle')['default']
    IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
    IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
-    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
@@ -155,10 +151,8 @@ declare module "vue" {
    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
    IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideRss: typeof import('~icons/lucide/rss')['default']
    IconLucideSearch: typeof import('~icons/lucide/search')['default']
    IconLucideUsers: typeof import('~icons/lucide/users')['default']
-    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
    InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default']
    LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
    LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
@@ -191,6 +185,7 @@ declare module "vue" {
    SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
    SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default']
    SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default']
+    SmartFontSizePicker: typeof import('./components/smart/FontSizePicker.vue')['default']
    SmartInput: typeof import('./../../hoppscotch-ui/src/components/smart/Input.vue')['default']
    SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default']
    SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
--- a/packages/hoppscotch-common/src/components/app/ActionHandler.vue
+++ b/packages/hoppscotch-common/src/components/app/ActionHandler.vue
@@ -2,16 +2,53 @@
  <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
  <AppShare :show="showShare" @hide-modal="showShare = false" />
  <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+
+  <HoppSmartConfirmModal
+    :show="confirmRemove"
+    :title="t('confirm.remove_team')"
+    @hide-modal="confirmRemove = false"
+    @resolve="deleteTeam()"
+  />
 </template>

 <script setup lang="ts">
 import { ref } from "vue"
-import { defineActionHandler } from "~/helpers/actions"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
+import { defineActionHandler, invokeAction } from "~/helpers/actions"
+import { useToast } from "~/composables/toast"
+import { useI18n } from "~/composables/i18n"
+
+const toast = useToast()
+const t = useI18n()

 const showShortcuts = ref(false)
 const showShare = ref(false)
 const showLogin = ref(false)

+const confirmRemove = ref(false)
+
+const teamID = ref<string | null>(null)
+
+const deleteTeam = () => {
+  if (!teamID.value) return
+  pipe(
+    backendDeleteTeam(teamID.value),
+    TE.match(
+      (err) => {
+        // TODO: Better errors ? We know the possible errors now
+        toast.error(`${t("error.something_went_wrong")}`)
+        console.error(err)
+      },
+      () => {
+        invokeAction("workspace.switch.personal")
+        toast.success(`${t("team.deleted")}`)
+      }
+    )
+  )() // Tasks (and TEs) are lazy, so call the function returned
+}
+
 defineActionHandler("flyouts.keybinds.toggle", () => {
  showShortcuts.value = !showShortcuts.value
 })
@@ -23,4 +60,9 @@ defineActionHandler("modals.share.toggle", () => {
 defineActionHandler("modals.login.toggle", () => {
  showLogin.value = !showLogin.value
 })
+
+defineActionHandler("modals.team.delete", ({ teamId }) => {
+  teamID.value = teamId
+  confirmRemove.value = true
+})
 </script>
--- a/packages/hoppscotch-common/src/components/app/Announcement.vue
+++ b/packages/hoppscotch-common/src/components/app/Announcement.vue
@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
+    role="alert"
+  >
+    <icon-lucide-info class="mr-2" />
+    <span class="text-secondaryDark">
+      <span class="md:hidden">
+        {{ t("helpers.offline_short") }}
+      </span>
+      <span class="<md:hidden">
+        {{ t("helpers.offline") }}
+      </span>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "~/composables/i18n"
+
+const t = useI18n()
+</script>
--- a/packages/hoppscotch-common/src/components/app/Banner.vue
+++ b/packages/hoppscotch-common/src/components/app/Banner.vue
@@ -1,54 +0,0 @@
-<template>
-  <div
-    :role="bannerRole"
-    class="flex items-center px-4 py-2 text-tiny"
-    :class="bannerColor"
-  >
-    <component :is="bannerIcon" class="mr-2 text-white" />
-
-    <span class="text-white">
-      <span v-if="banner.alternateText" class="md:hidden">
-        {{ banner.alternateText }}
-      </span>
-      <span class="<md:hidden">
-        {{ banner.text }}
-      </span>
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-
-import { BannerContent, BannerType } from "~/services/banner.service"
-
-import IconAlertCircle from "~icons/lucide/alert-circle"
-import IconAlertTriangle from "~icons/lucide/alert-triangle"
-import IconInfo from "~icons/lucide/info"
-
-const props = defineProps<{
-  banner: BannerContent
-}>()
-
-const ariaRoles: Record<BannerType, string> = {
-  error: "alert",
-  warning: "status",
-  info: "status",
-}
-
-const bgColors: Record<BannerType, string> = {
-  error: "bg-red-700",
-  warning: "bg-yellow-700",
-  info: "bg-stone-800",
-}
-
-const icons = {
-  info: IconInfo,
-  warning: IconAlertCircle,
-  error: IconAlertTriangle,
-}
-
-const bannerColor = computed(() => bgColors[props.banner.type])
-const bannerIcon = computed(() => icons[props.banner.type])
-const bannerRole = computed(() => ariaRoles[props.banner.type])
-</script>
--- a/packages/hoppscotch-common/src/components/app/ContextMenu.vue
+++ b/packages/hoppscotch-common/src/components/app/ContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    ref="contextMenuRef"
-    class="fixed translate-y-8 transform rounded border border-dividerDark bg-popover p-2 shadow-lg"
+    class="fixed bg-popover shadow-lg transform translate-y-8 border border-dividerDark p-2 rounded"
    :style="`top: ${position.top}px; left: ${position.left}px; z-index: 1000;`"
  >
    <div v-if="contextMenuOptions" class="flex flex-col">
--- a/packages/hoppscotch-common/src/components/app/DeveloperOptions.vue
+++ b/packages/hoppscotch-common/src/components/app/DeveloperOptions.vue
@@ -6,7 +6,7 @@
    @close="hideModal"
  >
    <template #body>
-      <p class="mb-4 px-2 text-secondaryLight">
+      <p class="px-2 mb-4 text-secondaryLight">
        {{ t("app.developer_option_description") }}
      </p>
      <div class="flex flex-1">
--- a/packages/hoppscotch-common/src/components/app/Footer.vue
+++ b/packages/hoppscotch-common/src/components/app/Footer.vue
@@ -175,7 +175,7 @@
          @click="COLUMN_LAYOUT = !COLUMN_LAYOUT"
        />
        <span
-          class="transform transition"
+          class="transition transform"
          :class="{
            'rotate-180': SIDEBAR_ON_LEFT,
          }"
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/packages/hoppscotch-common/src/components/app/Header.vue
@@ -1,28 +1,28 @@
 <template>
  <div>
    <header
-      class="flex flex-1 flex-shrink-0 items-center justify-between space-x-2 overflow-x-auto overflow-y-hidden px-2 py-2"
+      class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
    >
      <div
-        class="inline-flex flex-1 items-center justify-start space-x-2"
+        class="inline-flex items-center justify-start flex-1 space-x-2"
        :style="{
          paddingTop: platform.ui?.appHeader?.paddingTop?.value,
          paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
        }"
      >
        <HoppButtonSecondary
-          class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
+          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
          :label="t('app.name')"
          to="/"
        />
      </div>
-      <div class="inline-flex flex-1 items-center justify-center space-x-2">
+      <div class="inline-flex items-center justify-center flex-1 space-x-2">
        <button
-          class="flex max-w-[15rem] flex-1 cursor-text items-center justify-between self-stretch rounded border border-dividerDark bg-primaryDark px-2 py-1 text-secondaryLight transition hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
+          class="flex flex-1 items-center justify-between px-2 py-1 self-stretch bg-primaryDark transition text-secondaryLight cursor-text rounded border border-dividerDark max-w-60 hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
          @click="invokeAction('modals.search.toggle')"
        >
          <span class="inline-flex flex-1 items-center">
-            <icon-lucide-search class="svg-icons mr-2" />
+            <icon-lucide-search class="mr-2 svg-icons" />
            {{ t("app.search") }}
          </span>
          <span class="flex space-x-1">
@@ -48,7 +48,7 @@
          @click="invokeAction('modals.support.toggle')"
        />
      </div>
-      <div class="inline-flex flex-1 items-center justify-end space-x-2">
+      <div class="inline-flex items-center justify-end flex-1 space-x-2">
        <div
          v-if="currentUser === null"
          class="inline-flex items-center space-x-2"
@@ -56,7 +56,7 @@
          <HoppButtonSecondary
            :icon="IconUploadCloud"
            :label="t('header.save_workspace')"
-            class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 hidden border border-green-600/25 bg-green-500/[.15] !text-green-500 hover:border-green-800/50 hover:bg-green-400/10 focus-visible:border-green-800/50 focus-visible:bg-green-400/10 md:flex"
+            class="hidden md:flex bg-green-500/15 py-1.75 border border-green-600/25 !text-green-500 hover:bg-green-400/10 focus-visible:bg-green-400/10 focus-visible:border-green-800/50 !focus-visible:text-green-600 hover:border-green-800/50 !hover:text-green-600"
            @click="invokeAction('modals.login.toggle')"
          />
          <HoppButtonPrimary
@@ -77,13 +77,13 @@
            @handle-click="handleTeamEdit()"
          />
          <div
-            class="flex divide-x divide-green-600/25 rounded border border-green-600/25 bg-green-500/[.15] focus-within:divide-green-800/50 focus-within:border-green-800/50 focus-within:bg-green-400/10 hover:divide-green-800/50 hover:border-green-800/50 hover:bg-green-400/10"
+            class="flex border divide-x rounded bg-green-500/15 divide-green-600/25 border-green-600/25 focus-within:bg-green-400/10 focus-within:border-green-800/50 focus-within:divide-green-800/50 hover:bg-green-400/10 hover:border-green-800/50 hover:divide-green-800/50"
          >
            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('team.invite_tooltip')"
              :icon="IconUserPlus"
-              class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
+              class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
              @click="handleInvite()"
            />
            <HoppButtonSecondary
@@ -95,7 +95,7 @@
              v-tippy="{ theme: 'tooltip' }"
              :title="t('team.edit')"
              :icon="IconSettings"
-              class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
+              class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
              @click="handleTeamEdit()"
            />
          </div>
@@ -110,7 +110,7 @@
              :title="t('workspace.change')"
              :label="mdAndLarger ? workspaceName : ``"
              :icon="workspace.type === 'personal' ? IconUser : IconUsers"
-              class="select-wrapper !focus-visible:text-blue-600 !hover:text-blue-600 rounded border border-blue-600/25 bg-blue-500/[.15] py-[0.4375rem] pr-8 !text-blue-500 hover:border-blue-800/50 hover:bg-blue-400/10 focus-visible:border-blue-800/50 focus-visible:bg-blue-400/10"
+              class="pr-8 select-wrapper rounded bg-blue-500/15 py-1.75 border border-blue-600/25 !text-blue-500 focus-visible:bg-blue-400/10 focus-visible:border-blue-800/50 !focus-visible:text-blue-600 hover:bg-blue-400/10 hover:border-blue-800/50 !hover:text-blue-600"
            />
            <template #content="{ hide }">
              <div
@@ -176,7 +176,7 @@
                  @keyup.escape="hide()"
                >
                  <div class="flex flex-col px-2 text-tiny">
-                    <span class="inline-flex truncate font-semibold">
+                    <span class="inline-flex font-semibold truncate">
                      {{
                        currentUser.displayName ||
                        t("profile.default_hopp_displayname")
@@ -215,7 +215,7 @@
        </div>
      </div>
    </header>
-    <AppBanner v-if="banner" :banner="banner" />
+    <AppAnnouncement v-if="!network.isOnline" />
    <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
    <TeamsInvite
      v-if="workspace.type === 'team' && workspace.teamID"
@@ -231,40 +231,29 @@
      @invite-team="inviteTeam(editingTeamName, editingTeamID)"
      @refetch-teams="refetchTeams"
    />
-
-    <HoppSmartConfirmModal
-      :show="confirmRemove"
-      :title="t('confirm.remove_team')"
-      @hide-modal="confirmRemove = false"
-      @resolve="deleteTeam"
-    />
  </div>
 </template>

 <script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue"
+import IconUser from "~icons/lucide/user"
+import IconUsers from "~icons/lucide/users"
+import IconSettings from "~icons/lucide/settings"
+import IconDownload from "~icons/lucide/download"
+import IconUploadCloud from "~icons/lucide/upload-cloud"
+import IconUserPlus from "~icons/lucide/user-plus"
+import IconLifeBuoy from "~icons/lucide/life-buoy"
+import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
+import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
+import { platform } from "~/platform"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { defineActionHandler, invokeAction } from "@helpers/actions"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { useToast } from "~/composables/toast"
 import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
-import { installPWA, pwaDefferedPrompt } from "@modules/pwa"
-import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
-import { computed, reactive, ref, watch } from "vue"
-import { useToast } from "~/composables/toast"
-import { GetMyTeamsQuery, TeamMemberRole } from "~/helpers/backend/graphql"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
-import { platform } from "~/platform"
-import IconDownload from "~icons/lucide/download"
-import IconLifeBuoy from "~icons/lucide/life-buoy"
-import IconSettings from "~icons/lucide/settings"
-import IconUploadCloud from "~icons/lucide/upload-cloud"
-import IconUser from "~icons/lucide/user"
-import IconUserPlus from "~icons/lucide/user-plus"
-import IconUsers from "~icons/lucide/users"
-import { pipe } from "fp-ts/function"
-import * as TE from "fp-ts/TaskEither"
-import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
-import { BannerService } from "~/services/banner.service"

 const t = useI18n()
 const toast = useToast()
@@ -282,29 +271,13 @@ const showTeamsModal = ref(false)
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const mdAndLarger = breakpoints.greater("md")

-const { content: banner } = useService(BannerService)
 const network = reactive(useNetwork())

-watch(network, () => {
-  if (network.isOnline) {
-    banner.value = null
-    return
-  }
-  banner.value = {
-    type: "info",
-    text: t("helpers.offline"),
-    alternateText: t("helpers.offline_short"),
-  }
-})
-
 const currentUser = useReadonlyStream(
  platform.auth.getProbableUserStream(),
  platform.auth.getProbableUser()
 )

-const confirmRemove = ref(false)
-const teamID = ref<string | null>(null)
-
 const selectedTeam = ref<GetMyTeamsQuery["myTeams"][number] | undefined>()

 // TeamList-Adapter
@@ -404,24 +377,6 @@ const handleTeamEdit = () => {
  }
 }

-const deleteTeam = () => {
-  if (!teamID.value) return
-  pipe(
-    backendDeleteTeam(teamID.value),
-    TE.match(
-      (err) => {
-        // TODO: Better errors ? We know the possible errors now
-        toast.error(`${t("error.something_went_wrong")}`)
-        console.error(err)
-      },
-      () => {
-        invokeAction("workspace.switch.personal")
-        toast.success(`${t("team.deleted")}`)
-      }
-    )
-  )() // Tasks (and TEs) are lazy, so call the function returned
-}
-
 // Template refs
 const tippyActions = ref<any | null>(null)
 const profile = ref<any | null>(null)
@@ -450,12 +405,6 @@ defineActionHandler(
  computed(() => !currentUser.value)
 )

-defineActionHandler("modals.team.delete", ({ teamId }) => {
-  if (selectedTeam.value?.myRole !== TeamMemberRole.Owner) return noPermission()
-  teamID.value = teamId
-  confirmRemove.value = true
-})
-
 const noPermission = () => {
  toast.error(`${t("profile.no_permission")}`)
 }
--- a/packages/hoppscotch-common/src/components/app/Inspection.vue
+++ b/packages/hoppscotch-common/src/components/app/Inspection.vue
@@ -1,7 +1,7 @@
 <template>
  <div v-if="inspectionResults && inspectionResults.length > 0">
    <tippy interactive trigger="click" theme="popover">
-      <div class="flex flex-1 flex-col items-center justify-center">
+      <div class="flex justify-center items-center flex-1 flex-col">
        <HoppButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :icon="IconAlertTriangle"
@@ -10,12 +10,12 @@
        />
      </div>
      <template #content="{ hide }">
-        <div class="flex flex-1 flex-col items-start space-y-2">
+        <div class="flex flex-col space-y-2 items-start flex-1">
          <div
-            class="sticky top-0 flex justify-between self-stretch rounded border border-divider bg-popover pl-2"
+            class="flex justify-between border rounded pl-2 border-divider bg-popover sticky top-0 self-stretch"
          >
-            <span class="flex flex-1 items-center">
-              <icon-lucide-activity class="svg-icons mr-2 text-accent" />
+            <span class="flex items-center flex-1">
+              <icon-lucide-activity class="mr-2 svg-icons text-accent" />
              <span class="font-bold">
                {{ t("inspections.title") }}
              </span>
@@ -31,10 +31,10 @@
          <div
            v-for="(inspector, index) in inspectionResults"
            :key="index"
-            class="flex w-full max-w-md self-stretch"
+            class="flex self-stretch max-w-md w-full"
          >
            <div
-              class="flex flex-1 flex-col divide-y divide-dashed divide-dividerDark rounded border border-dashed border-dividerDark"
+              class="flex flex-col flex-1 rounded border border-dashed border-dividerDark divide-y divide-dashed divide-dividerDark"
            >
              <span
                v-if="inspector.text.type === 'text'"
@@ -44,13 +44,13 @@
                <HoppSmartLink
                  blank
                  :to="inspector.doc.link"
-                  class="text-accent transition hover:text-accentDark"
+                  class="text-accent hover:text-accentDark transition"
                >
                  {{ inspector.doc.text }}
                  <icon-lucide-arrow-up-right class="svg-icons" />
                </HoppSmartLink>
              </span>
-              <span v-if="inspector.action" class="flex space-x-2 p-2">
+              <span v-if="inspector.action" class="flex p-2 space-x-2">
                <HoppButtonSecondary
                  :label="inspector.action.text"
                  outline
--- a/packages/hoppscotch-common/src/components/app/Options.vue
+++ b/packages/hoppscotch-common/src/components/app/Options.vue
@@ -8,7 +8,7 @@
  >
    <template #body>
      <div class="flex flex-col space-y-2">
-        <h2 class="p-4 font-bold font-semibold text-secondaryDark">
+        <h2 class="p-4 font-semibold font-bold text-secondaryDark">
          {{ t("layout.name") }}
        </h2>
        <HoppSmartItem
@@ -27,7 +27,7 @@
          active
          @click="expandCollection"
        />
-        <h2 class="p-4 font-bold font-semibold text-secondaryDark">
+        <h2 class="p-4 font-semibold font-bold text-secondaryDark">
          {{ t("support.title") }}
        </h2>
        <template
--- a/packages/hoppscotch-common/src/components/app/Share.vue
+++ b/packages/hoppscotch-common/src/components/app/Share.vue
@@ -16,13 +16,13 @@
            class="share-link"
            tabindex="0"
          >
-            <component :is="platform.icon" class="h-6 w-6" />
+            <component :is="platform.icon" class="w-6 h-6" />
            <span class="mt-3">
              {{ platform.name }}
            </span>
          </a>
          <button class="share-link" @click="copyAppLink">
-            <component :is="copyIcon" class="h-6 w-6 text-xl" />
+            <component :is="copyIcon" class="w-6 h-6 text-xl" />
            <span class="mt-3">
              {{ t("app.copy") }}
            </span>
@@ -119,14 +119,14 @@ const hideModal = () => {
 .share-link {
  @apply border border-dividerLight;
  @apply rounded;
-  @apply flex flex-col;
+  @apply flex-col flex;
  @apply p-4;
  @apply items-center;
  @apply justify-center;
  @apply font-semibold;
-  @apply hover:bg-primaryLight hover:text-secondaryDark;
-  @apply focus:outline-none;
-  @apply focus-visible:border-divider;
+  @apply hover: (bg-primaryLight text-secondaryDark);
+  @apply focus: outline-none;
+  @apply focus-visible: border-divider;

  svg {
    @apply opacity-80;
--- a/packages/hoppscotch-common/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-common/src/components/app/Shortcuts.vue
@@ -2,7 +2,7 @@
  <HoppSmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
    <template #content>
      <div
-        class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary"
+        class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
      >
        <HoppSmartInput
          v-model="filterText"
@@ -17,7 +17,7 @@
          v-if="isEmpty(shortcutsResults)"
          :text="`${t('state.nothing_found')} ‟${filterText}”`"
        >
-          <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+          <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
        </HoppSmartPlaceholder>

        <details
@@ -28,16 +28,16 @@
          open
        >
          <summary
-            class="flex min-w-0 flex-1 cursor-pointer items-center px-6 py-4 font-semibold text-secondaryLight transition hover:text-secondaryDark focus:outline-none"
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
          >
-            <icon-lucide-chevron-right class="indicator mr-2" />
+            <icon-lucide-chevron-right class="mr-2 indicator" />
            <span
-              class="capitalize-first truncate font-semibold text-secondaryDark"
+              class="font-semibold truncate capitalize-first text-secondaryDark"
            >
              {{ sectionTitle }}
            </span>
          </summary>
-          <div class="flex flex-col space-y-2 px-6 pb-4">
+          <div class="flex flex-col px-6 pb-4 space-y-2">
            <AppShortcutsEntry
              v-for="(shortcut, index) in sectionResults"
              :key="`shortcut-${index}`"
--- a/packages/hoppscotch-common/src/components/app/ShortcutsEntry.vue
+++ b/packages/hoppscotch-common/src/components/app/ShortcutsEntry.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="flex items-center py-1">
-    <span class="mr-4 flex flex-1">
+    <span class="flex flex-1 mr-4">
      {{ shortcut.label }}
    </span>
    <kbd
--- a/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
+++ b/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
@@ -1,17 +1,17 @@
 <template>
  <div class="flex flex-col items-center justify-center text-secondaryLight">
-    <div class="mb-4 flex space-x-2">
+    <div class="flex mb-4 space-x-2">
      <div class="flex flex-col items-end space-y-4 text-right">
-        <span class="flex flex-1 items-center">
+        <span class="flex items-center flex-1">
          {{ t("shortcut.request.send_request") }}
        </span>
-        <span class="flex flex-1 items-center">
+        <span class="flex items-center flex-1">
          {{ t("shortcut.general.show_all") }}
        </span>
-        <span class="flex flex-1 items-center">
+        <span class="flex items-center flex-1">
          {{ t("shortcut.general.command_menu") }}
        </span>
-        <span class="flex flex-1 items-center">
+        <span class="flex items-center flex-1">
          {{ t("shortcut.general.help_menu") }}
        </span>
      </div>
--- a/packages/hoppscotch-common/src/components/app/Sidenav.vue
+++ b/packages/hoppscotch-common/src/components/app/Sidenav.vue
@@ -1,6 +1,6 @@
 <template>
-  <aside class="flex h-full justify-between md:flex-col">
-    <nav class="flex flex-1 flex-nowrap bg-primary md:flex-none md:flex-col">
+  <aside class="flex justify-between h-full md:flex-col">
+    <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none bg-primary">
      <HoppSmartLink
        v-for="(navigation, index) in primaryNavigation"
        :key="`navigation-${index}`"
@@ -73,25 +73,25 @@ const primaryNavigation = [
 .nav-link {
  @apply relative;
  @apply p-4;
-  @apply flex flex-1 flex-col;
+  @apply flex flex-col flex-1;
  @apply items-center;
  @apply justify-center;
-  @apply hover:bg-primaryDark hover:text-secondaryDark;
-  @apply focus-visible:text-secondaryDark;
+  @apply hover: (bg-primaryDark text-secondaryDark);
+  @apply focus-visible: text-secondaryDark;
  @apply after:absolute;
  @apply after:inset-x-0;
-  @apply after:md:inset-x-auto;
-  @apply after:md:inset-y-0;
+  @apply after:md: inset-x-auto;
+  @apply after:md: inset-y-0;
  @apply after:bottom-0;
-  @apply after:md:bottom-auto;
-  @apply after:md:left-0;
-  @apply after:z-10;
+  @apply after:md: bottom-auto;
+  @apply after:md: left-0;
+  @apply after:z-2;
  @apply after:h-0.5;
-  @apply after:md:h-full;
+  @apply after:md: h-full;
  @apply after:w-full;
-  @apply after:md:w-0.5;
-  @apply after:content-[""];
-  @apply focus:after:bg-divider;
+  @apply after:md: w-0.5;
+  @apply after:content-DEFAULT;
+  @apply focus: after: bg-divider;

  .svg-icons {
    @apply opacity-75;
@@ -105,7 +105,7 @@ const primaryNavigation = [
  &.router-link-active {
    @apply text-secondaryDark;
    @apply bg-primaryLight;
-    @apply hover:text-secondaryDark;
+    @apply hover: text-secondaryDark;
    @apply after:bg-accent;

    .svg-icons {
@@ -116,7 +116,7 @@ const primaryNavigation = [
  &.exact-active-link {
    @apply text-secondaryDark;
    @apply bg-primaryLight;
-    @apply hover:text-secondaryDark;
+    @apply hover: text-secondaryDark;
    @apply after:bg-accent;

    .svg-icons {
--- a/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
@@ -1,7 +1,7 @@
 <template>
  <button
    ref="el"
-    class="search-entry relative flex flex-1 cursor-pointer items-center space-x-4 px-6 py-4 font-medium transition focus:outline-none"
+    class="flex items-center flex-1 px-6 py-4 font-medium space-x-4 transition cursor-pointer relative search-entry focus:outline-none"
    :class="{ 'active bg-primaryLight text-secondaryDark': active }"
    tabindex="-1"
    @click="emit('action')"
@@ -9,7 +9,7 @@
  >
    <component
      :is="entry.icon"
-      class="svg-icons opacity-50"
+      class="opacity-50 svg-icons"
      :class="{ 'opacity-100': active }"
    />
    <template
@@ -112,9 +112,9 @@ watch(
  @apply after:left-0;
  @apply after:bottom-0;
  @apply after:bg-transparent;
-  @apply after:z-10;
+  @apply after:z-2;
  @apply after:w-0.5;
-  @apply after:content-[''];
+  @apply after:content-DEFAULT;

  &.active {
    @apply after:bg-accentLight;
--- a/packages/hoppscotch-common/src/components/app/spotlight/entry/GQLHistory.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/entry/GQLHistory.vue
@@ -8,7 +8,7 @@
      {{ historyEntry.request.url }}
    </span>
    <span
-      class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
+      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
    >
      {{ historyEntry.request.query.split("\n")[0] }}
    </span>
--- a/packages/hoppscotch-common/src/components/app/spotlight/entry/GQLRequest.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/entry/GQLRequest.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="flex flex-1 items-center space-x-2">
+  <span class="flex flex-1 space-x-2 items-center">
    <template v-for="(folder, index) in pathFolders" :key="index">
      <span class="block" :class="{ truncate: index !== 0 }">
        {{ folder.name }}
--- a/packages/hoppscotch-common/src/components/app/spotlight/entry/RESTHistory.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/entry/RESTHistory.vue
@@ -5,7 +5,7 @@
    </span>
    <icon-lucide-chevron-right class="flex flex-shrink-0" />
    <span
-      class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
+      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
      :class="entryStatus.className"
    >
      {{ historyEntry.request.method }}
--- a/packages/hoppscotch-common/src/components/app/spotlight/entry/RESTRequest.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/entry/RESTRequest.vue
@@ -8,8 +8,8 @@
    </template>
    <span
      v-if="request"
-      class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
-      :style="{ color: getMethodLabelColorClassOf(request) }"
+      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
+      :class="getMethodLabelColorClassOf(request)"
    >
      {{ request.method.toUpperCase() }}
    </span>
--- a/packages/hoppscotch-common/src/components/app/spotlight/index.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/index.vue
@@ -6,7 +6,7 @@
    @close="emit('hide-modal')"
  >
    <template #body>
-      <div class="flex flex-col border-b border-divider transition">
+      <div class="flex flex-col border-b transition border-divider">
        <div class="flex items-center">
          <input
            id="command"
@@ -16,14 +16,14 @@
            autocomplete="off"
            name="command"
            :placeholder="`${t('app.type_a_command_search')}`"
-            class="flex flex-1 bg-transparent px-6 py-5 text-base text-secondaryDark"
+            class="flex flex-1 text-base bg-transparent text-secondaryDark px-6 py-5"
          />
          <HoppSmartSpinner v-if="searchSession?.loading" class="mr-6" />
        </div>
      </div>
      <div
        v-if="searchSession && search.length > 0"
-        class="flex flex-1 flex-col divide-y divide-dividerLight overflow-y-auto border-b border-divider"
+        class="flex flex-col flex-1 overflow-y-auto border-b border-divider divide-y divide-dividerLight"
      >
        <div
          v-for="([sectionID, sectionResult], sectionIndex) in scoredResults"
@@ -31,7 +31,7 @@
          class="flex flex-col"
        >
          <h5
-            class="sticky top-0 z-10 bg-primaryContrast px-6 py-2 text-secondaryLight"
+            class="px-6 py-2 bg-primaryContrast z-10 text-secondaryLight sticky top-0"
          >
            {{ sectionResult.title }}
          </h5>
@@ -49,7 +49,7 @@
          :text="`${t('state.nothing_found')} ‟${search}”`"
        >
          <template #icon>
-            <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+            <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
          </template>
          <HoppButtonSecondary
            :label="t('action.clear')"
@@ -59,7 +59,7 @@
        </HoppSmartPlaceholder>
      </div>
      <div
-        class="flex flex-shrink-0 justify-between overflow-auto whitespace-nowrap p-4 text-tiny text-secondaryLight <sm:hidden"
+        class="flex flex-shrink-0 text-tiny text-secondaryLight p-4 justify-between whitespace-nowrap overflow-auto <sm:hidden"
      >
        <div class="flex items-center">
          <kbd class="shortcut-key">↑</kbd>
--- a/packages/hoppscotch-common/src/components/collections/AddRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/AddRequest.vue
@@ -37,8 +37,7 @@
 import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { useService } from "dioc/vue"
-import { RESTTabService } from "~/services/tab/rest"
+import { currentActiveTab } from "~/helpers/rest/tab"

 const toast = useToast()
 const t = useI18n()
@@ -61,12 +60,11 @@ const emit = defineEmits<{

 const editingName = ref("")

-const tabs = useService(RESTTabService)
 watch(
  () => props.show,
  (show) => {
    if (show) {
-      editingName.value = tabs.currentActiveTab.value.document.request.name
+      editingName.value = currentActiveTab.value.document.request.name
    }
  }
 )
--- a/packages/hoppscotch-common/src/components/collections/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/Collection.vue
@@ -12,16 +12,16 @@
      @dragleave="ordering = false"
      @dragend="resetDragState"
    ></div>
-    <div class="relative flex flex-col">
+    <div class="flex flex-col relative">
      <div
-        class="z-1 pointer-events-none absolute inset-0 bg-accent opacity-0 transition"
+        class="absolute bg-accent opacity-0 pointer-events-none inset-0 z-1 transition"
        :class="{
          'opacity-25':
            dragging && notSameDestination && notSameParentDestination,
        }"
      ></div>
      <div
-        class="z-3 group pointer-events-auto relative flex cursor-pointer items-stretch"
+        class="flex items-stretch group relative z-3 cursor-pointer pointer-events-auto"
        :draggable="!hasNoTeamAccess"
        @dragstart="dragStart"
        @drop="handelDrop($event)"
@@ -36,11 +36,11 @@
        @contextmenu.prevent="options?.tippy.show()"
      >
        <div
-          class="flex min-w-0 flex-1 items-center justify-center"
+          class="flex items-center justify-center flex-1 min-w-0"
          @click="emit('toggle-children')"
        >
          <span
-            class="pointer-events-none flex items-center justify-center px-4"
+            class="flex items-center justify-center px-4 pointer-events-none"
          >
            <HoppSmartSpinner v-if="isCollLoading" />
            <component
@@ -51,7 +51,7 @@
            />
          </span>
          <span
-            class="pointer-events-none flex min-w-0 flex-1 py-2 pr-2 transition group-hover:text-secondaryDark"
+            class="flex flex-1 min-w-0 py-2 pr-2 transition pointer-events-none group-hover:text-secondaryDark"
          >
            <span class="truncate" :class="{ 'text-accent': isSelected }">
              {{ collectionName }}
--- a/packages/hoppscotch-common/src/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/ImportExport.vue
@@ -26,7 +26,7 @@
            <div v-if="step.name === 'FILE_IMPORT'" class="space-y-4">
              <p class="flex items-center">
                <span
-                  class="mr-4 inline-flex flex-shrink-0 items-center justify-center rounded-full border-4 border-primary text-dividerDark"
+                  class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
                  :class="{
                    '!text-green-500': hasFile,
                  }"
@@ -38,14 +38,14 @@
                </span>
              </p>
              <p
-                class="ml-10 flex flex-col rounded border border-dashed border-dividerDark"
+                class="flex flex-col ml-10 border border-dashed rounded border-dividerDark"
              >
                <input
                  id="inputChooseFileToImportFrom"
                  ref="inputChooseFileToImportFrom"
                  name="inputChooseFileToImportFrom"
                  type="file"
-                  class="cursor-pointer p-4 text-secondary transition file:mr-2 file:cursor-pointer file:rounded file:border-0 file:bg-primaryLight file:px-4 file:py-2 file:text-secondary file:transition hover:text-secondaryDark hover:file:bg-primaryDark hover:file:text-secondaryDark"
+                  class="p-4 cursor-pointer transition file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
                  :accept="step.metadata.acceptedFileTypes"
                  @change="onFileChange"
                />
@@ -54,7 +54,7 @@
            <div v-else-if="step.name === 'URL_IMPORT'" class="space-y-4">
              <p class="flex items-center">
                <span
-                  class="mr-4 inline-flex flex-shrink-0 items-center justify-center rounded-full border-4 border-primary text-dividerDark"
+                  class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
                  :class="{
                    '!text-green-500': hasGist,
                  }"
@@ -65,7 +65,7 @@
                  {{ t(`${step.metadata.caption}`) }}
                </span>
              </p>
-              <p class="ml-10 flex flex-col">
+              <p class="flex flex-col ml-10">
                <input
                  v-model="inputChooseGistToImportFrom"
                  type="url"
--- a/packages/hoppscotch-common/src/components/collections/MyCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-1 flex-col">
+  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
      :style="
        saveRequest
          ? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
@@ -25,13 +25,13 @@
        <HoppButtonSecondary
          v-if="!saveRequest"
          v-tippy="{ theme: 'tooltip' }"
-          :icon="IconImport"
+          :icon="IconArchive"
          :title="t('modal.import_export')"
          @click="emit('display-modal-import-export')"
        />
      </span>
    </div>
-    <div class="flex flex-1 flex-col">
+    <div class="flex flex-col flex-1">
      <HoppSmartTree :adapter="myAdapter">
        <template
          #content="{ node, toggleChildren, isOpen, highlightChildren }"
@@ -248,7 +248,7 @@
            :text="`${t('state.nothing_found')} ‟${filterText}”`"
          >
            <template #icon>
-              <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+              <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
            </template>
          </HoppSmartPlaceholder>
          <HoppSmartPlaceholder
@@ -257,27 +257,12 @@
            :alt="`${t('empty.collections')}`"
            :text="t('empty.collections')"
          >
-            <div class="flex flex-col items-center space-y-4">
-              <span class="text-center text-secondaryLight">
-                {{ t("collection.import_or_create") }}
-              </span>
-              <div class="flex flex-col items-stretch gap-4">
-                <HoppButtonPrimary
-                  :icon="IconImport"
-                  :label="t('import.title')"
-                  filled
-                  outline
-                  @click="emit('display-modal-import-export')"
-                />
-                <HoppButtonSecondary
-                  :icon="IconPlus"
-                  :label="t('add.new')"
-                  filled
-                  outline
-                  @click="emit('display-modal-add')"
-                />
-              </div>
-            </div>
+            <HoppButtonSecondary
+              :label="t('add.new')"
+              filled
+              outline
+              @click="emit('display-modal-add')"
+            />
          </HoppSmartPlaceholder>
          <HoppSmartPlaceholder
            v-else-if="node.data.type === 'collections'"
@@ -303,7 +288,8 @@
            :src="`/images/states/${colorMode.value}/pack.svg`"
            :alt="`${t('empty.folder')}`"
            :text="t('empty.folder')"
-          />
+          >
+          </HoppSmartPlaceholder>
        </template>
      </HoppSmartTree>
    </div>
@@ -311,9 +297,9 @@
 </template>

 <script setup lang="ts">
+import IconArchive from "~icons/lucide/archive"
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
-import IconImport from "~icons/lucide/folder-down"
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { computed, PropType, Ref, toRef } from "vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
@@ -326,8 +312,7 @@ import { useColorMode } from "@composables/theming"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import { Picked } from "~/helpers/types/HoppPicked.js"
-import { useService } from "dioc/vue"
-import { RESTTabService } from "~/services/tab/rest"
+import { currentActiveTab } from "~/helpers/rest/tab"

 export type Collection = {
  type: "collections"
@@ -535,8 +520,7 @@ const isSelected = ({
  }
 }

-const tabs = useService(RESTTabService)
-const active = computed(() => tabs.currentActiveTab.value.document.saveContext)
+const active = computed(() => currentActiveTab.value.document.saveContext)

 const isActiveRequest = (folderPath: string, requestIndex: number) => {
  return pipe(
--- a/packages/hoppscotch-common/src/components/collections/Request.vue
+++ b/packages/hoppscotch-common/src/components/collections/Request.vue
@@ -13,7 +13,7 @@
      @dragend="resetDragState"
    ></div>
    <div
-      class="group flex items-stretch"
+      class="flex items-stretch group"
      :draggable="!hasNoTeamAccess"
      @drop="handelDrop"
      @dragstart="dragStart"
@@ -23,13 +23,12 @@
      @contextmenu.prevent="options?.tippy.show()"
    >
      <div
-        class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
+        class="flex items-center justify-center flex-1 min-w-0 cursor-pointer pointer-events-auto"
        @click="selectRequest()"
      >
        <span
-          class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
+          class="flex items-center justify-center w-16 px-2 truncate pointer-events-none"
          :class="requestLabelColor"
-          :style="{ color: requestLabelColor }"
        >
          <component
            :is="IconCheckCircle"
@@ -38,12 +37,12 @@
            :class="{ 'text-accent': isSelected }"
          />
          <HoppSmartSpinner v-else-if="isRequestLoading" />
-          <span v-else class="truncate text-tiny font-semibold">
+          <span v-else class="font-semibold truncate text-tiny">
            {{ request.method }}
          </span>
        </span>
        <span
-          class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
+          class="flex items-center flex-1 min-w-0 py-2 pr-2 pointer-events-none transition group-hover:text-secondaryDark"
        >
          <span class="truncate" :class="{ 'text-accent': isSelected }">
            {{ request.name }}
@@ -51,15 +50,15 @@
          <span
            v-if="isActive"
            v-tippy="{ theme: 'tooltip' }"
-            class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
+            class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
            :title="`${t('collection.request_in_use')}`"
          >
            <span
-              class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
+              class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
            >
            </span>
            <span
-              class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
+              class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
            ></span>
          </span>
        </span>
--- a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
@@ -82,16 +82,12 @@ import {
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { computedWithControl } from "@vueuse/core"
 import { platform } from "~/platform"
-import { useService } from "dioc/vue"
-import { RESTTabService } from "~/services/tab/rest"
-import { GQLTabService } from "~/services/tab/graphql"
+import { currentActiveTab as activeRESTTab } from "~/helpers/rest/tab"
+import { currentActiveTab as activeGQLTab } from "~/helpers/graphql/tab"

 const t = useI18n()
 const toast = useToast()

-const RESTTabs = useService(RESTTabService)
-const GQLTabs = useService(GQLTabService)
-
 type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined

 type CollectionType =
@@ -127,13 +123,13 @@ const emit = defineEmits<{
 }>()

 const gqlRequestName = computedWithControl(
-  () => GQLTabs.currentActiveTab.value,
-  () => GQLTabs.currentActiveTab.value.document.request.name
+  () => activeGQLTab.value,
+  () => activeGQLTab.value.document.request.name
 )

 const restRequestName = computedWithControl(
-  () => RESTTabs.currentActiveTab.value,
-  () => RESTTabs.currentActiveTab.value.document.request.name
+  () => activeRESTTab.value,
+  () => activeRESTTab.value.document.request.name
 )

 const reqName = computed(() => {
@@ -149,14 +145,12 @@ const reqName = computed(() => {
 const requestName = ref(reqName.value)

 watch(
-  () => [RESTTabs.currentActiveTab.value, GQLTabs.currentActiveTab.value],
+  () => [activeRESTTab.value, activeGQLTab.value],
  () => {
    if (props.mode === "rest") {
-      requestName.value =
-        RESTTabs.currentActiveTab.value?.document.request.name ?? ""
+      requestName.value = activeRESTTab.value?.document.request.name ?? ""
    } else {
-      requestName.value =
-        GQLTabs.currentActiveTab.value?.document.request.name ?? ""
+      requestName.value = activeGQLTab.value?.document.request.name ?? ""
    }
  }
 )
@@ -216,8 +210,8 @@ const saveRequestAs = async () => {

  const requestUpdated =
    props.mode === "rest"
-      ? cloneDeep(RESTTabs.currentActiveTab.value.document.request)
-      : cloneDeep(GQLTabs.currentActiveTab.value.document.request)
+      ? cloneDeep(activeRESTTab.value.document.request)
+      : cloneDeep(activeGQLTab.value.document.request)

  requestUpdated.name = requestName.value

@@ -230,7 +224,7 @@ const saveRequestAs = async () => {
      requestUpdated
    )

-    RESTTabs.currentActiveTab.value.document = {
+    activeRESTTab.value.document = {
      request: requestUpdated,
      isDirty: false,
      saveContext: {
@@ -257,7 +251,7 @@ const saveRequestAs = async () => {
      requestUpdated
    )

-    RESTTabs.currentActiveTab.value.document = {
+    activeRESTTab.value.document = {
      request: requestUpdated,
      isDirty: false,
      saveContext: {
@@ -285,7 +279,7 @@ const saveRequestAs = async () => {
      requestUpdated
    )

-    RESTTabs.currentActiveTab.value.document = {
+    activeRESTTab.value.document = {
      request: requestUpdated,
      isDirty: false,
      saveContext: {
@@ -445,7 +439,7 @@ const updateTeamCollectionOrFolder = (
      (result) => {
        const { createRequestInCollection } = result

-        RESTTabs.currentActiveTab.value.document = {
+        activeRESTTab.value.document = {
          request: requestUpdated,
          isDirty: false,
          saveContext: {
@@ -466,7 +460,7 @@ const updateTeamCollectionOrFolder = (
 const requestSaved = () => {
  toast.success(`${t("request.added")}`)
  nextTick(() => {
-    RESTTabs.currentActiveTab.value.document.isDirty = false
+    activeRESTTab.value.document.isDirty = false
  })
  hideModal()
 }
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-1 flex-col">
+  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
      :style="
        saveRequest
          ? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
@@ -15,12 +15,12 @@
        class="!rounded-none"
        :icon="IconPlus"
        :title="t('team.no_access')"
-        :label="t('add.new')"
+        :label="t('action.new')"
      />
      <HoppButtonSecondary
        v-else
        :icon="IconPlus"
-        :label="t('add.new')"
+        :label="t('action.new')"
        class="!rounded-none"
        @click="emit('display-modal-add')"
      />
@@ -39,7 +39,7 @@
            collectionsType.type === 'team-collections' &&
            collectionsType.selectedTeam === undefined
          "
-          :icon="IconImport"
+          :icon="IconArchive"
          :title="t('modal.import_export')"
          @click="emit('display-modal-import-export')"
        />
@@ -261,68 +261,55 @@
          />
        </template>
        <template #emptyNode="{ node }">
-          <HoppSmartPlaceholder
-            v-if="node === null"
-            :src="`/images/states/${colorMode.value}/pack.svg`"
-            :alt="`${t('empty.collections')}`"
-            :text="t('empty.collections')"
-            @drop.stop
-          >
-            <div class="flex flex-col items-center space-y-4">
-              <span class="text-center text-secondaryLight">
-                {{ t("collection.import_or_create") }}
-              </span>
-              <div class="flex flex-col items-stretch gap-4">
-                <HoppButtonPrimary
-                  :icon="IconImport"
-                  :label="t('import.title')"
+          <div v-if="node === null">
+            <div @drop="(e) => e.stopPropagation()">
+              <HoppSmartPlaceholder
+                :src="`/images/states/${colorMode.value}/pack.svg`"
+                :alt="`${t('empty.collections')}`"
+                :text="t('empty.collections')"
+              >
+                <HoppButtonSecondary
+                  v-if="hasNoTeamAccess"
+                  v-tippy="{ theme: 'tooltip' }"
+                  disabled
                  filled
                  outline
-                  :disabled="hasNoTeamAccess"
-                  :title="hasNoTeamAccess ? t('team.no_access') : ''"
-                  @click="
-                    hasNoTeamAccess ? null : emit('display-modal-import-export')
-                  "
+                  :title="t('team.no_access')"
+                  :label="t('action.new')"
                />
                <HoppButtonSecondary
+                  v-else
                  :icon="IconPlus"
-                  :label="t('add.new')"
+                  :label="t('action.new')"
                  filled
                  outline
-                  :disabled="hasNoTeamAccess"
-                  :title="hasNoTeamAccess ? t('team.no_access') : ''"
-                  @click="hasNoTeamAccess ? null : emit('display-modal-add')"
+                  @click="emit('display-modal-add')"
                />
-              </div>
+              </HoppSmartPlaceholder>
            </div>
-          </HoppSmartPlaceholder>
-          <HoppSmartPlaceholder
+          </div>
+          <div
            v-else-if="node.data.type === 'collections'"
-            :src="`/images/states/${colorMode.value}/pack.svg`"
-            :alt="`${t('empty.collections')}`"
-            :text="t('empty.collections')"
-            @drop.stop
+            @drop="(e) => e.stopPropagation()"
          >
-            <HoppButtonSecondary
-              :label="t('add.new')"
-              filled
-              outline
-              @click="
-                node.data.type === 'collections' &&
-                  emit('add-folder', {
-                    path: node.id,
-                    folder: node.data.data.data,
-                  })
-              "
-            />
-          </HoppSmartPlaceholder>
-          <HoppSmartPlaceholder
+            <HoppSmartPlaceholder
+              :src="`/images/states/${colorMode.value}/pack.svg`"
+              :alt="`${t('empty.collections')}`"
+              :text="t('empty.collections')"
+            >
+            </HoppSmartPlaceholder>
+          </div>
+          <div
            v-else-if="node.data.type === 'folders'"
-            :src="`/images/states/${colorMode.value}/pack.svg`"
-            :alt="`${t('empty.folder')}`"
-            :text="t('empty.folder')"
-            @drop.stop
-          />
+            @drop="(e) => e.stopPropagation()"
+          >
+            <HoppSmartPlaceholder
+              :src="`/images/states/${colorMode.value}/pack.svg`"
+              :alt="`${t('empty.folder')}`"
+              :text="t('empty.folder')"
+            >
+            </HoppSmartPlaceholder>
+          </div>
        </template>
      </HoppSmartTree>
    </div>
@@ -330,9 +317,9 @@
 </template>

 <script setup lang="ts">
+import IconArchive from "~icons/lucide/archive"
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
-import IconImport from "~icons/lucide/folder-down"
 import { computed, PropType, Ref, toRef } from "vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useI18n } from "@composables/i18n"
@@ -348,12 +335,10 @@ import { HoppRESTRequest } from "@hoppscotch/data"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import { Picked } from "~/helpers/types/HoppPicked.js"
-import { RESTTabService } from "~/services/tab/rest"
-import { useService } from "dioc/vue"
+import { currentActiveTab } from "~/helpers/rest/tab"

 const t = useI18n()
 const colorMode = useColorMode()
-const tabs = useService(RESTTabService)

 type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined

@@ -551,7 +536,7 @@ const isSelected = ({
  }
 }

-const active = computed(() => tabs.currentActiveTab.value.document.saveContext)
+const active = computed(() => currentActiveTab.value.document.saveContext)

 const isActiveRequest = (requestID: string) => {
  return pipe(
--- a/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue
@@ -36,14 +36,11 @@
 import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { useService } from "dioc/vue"
-import { GQLTabService } from "~/services/tab/graphql"
+import { currentActiveTab } from "~/helpers/graphql/tab"

 const toast = useToast()
 const t = useI18n()

-const tabs = useService(GQLTabService)
-
 const props = defineProps<{
  show: boolean
  folderPath?: string
@@ -66,7 +63,7 @@ watch(
  () => props.show,
  (show) => {
    if (show) {
-      editingName.value = tabs.currentActiveTab.value?.document.request.name
+      editingName.value = currentActiveTab.value?.document.request.name
    }
  }
 )
--- a/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
    <div
-      class="group flex items-stretch"
+      class="flex items-stretch group"
      @dragover.prevent
      @drop.prevent="dropEvent"
      @dragover="dragging = true"
@@ -11,7 +11,7 @@
      @contextmenu.prevent="options.tippy.show()"
    >
      <span
-        class="flex cursor-pointer items-center justify-center px-4"
+        class="flex items-center justify-center px-4 cursor-pointer"
        @click="toggleShowChildren()"
      >
        <component
@@ -21,7 +21,7 @@
        />
      </span>
      <span
-        class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -136,10 +136,10 @@
    </div>
    <div v-if="showChildren || isFiltered" class="flex">
      <div
-        class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
+        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
        @click="toggleShowChildren()"
      ></div>
-      <div class="flex flex-1 flex-col truncate">
+      <div class="flex flex-col flex-1 truncate">
        <CollectionsGraphqlFolder
          v-for="(folder, index) in collection.folders"
          :key="`folder-${String(index)}`"
@@ -220,8 +220,7 @@ import {
  moveGraphqlRequest,
 } from "~/newstore/collections"
 import { Picked } from "~/helpers/types/HoppPicked"
-import { useService } from "dioc/vue"
-import { GQLTabService } from "~/services/tab/graphql"
+import { getTabsRefTo } from "~/helpers/graphql/tab"

 const props = defineProps({
  picked: { type: Object, default: null },
@@ -236,8 +235,6 @@ const colorMode = useColorMode()
 const toast = useToast()
 const t = useI18n()

-const tabs = useService(GQLTabService)
-
 // TODO: improve types plz
 const emit = defineEmits<{
  (e: "select", i: Picked | null): void
@@ -298,7 +295,7 @@ const removeCollection = () => {
    emit("select", null)
  }

-  const possibleTabs = tabs.getTabsRefTo((tab) => {
+  const possibleTabs = getTabsRefTo((tab) => {
    const ctx = tab.document.saveContext

    if (!ctx) return false
--- a/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
    <div
-      class="group flex items-stretch"
+      class="flex items-stretch group"
      @dragover.prevent
      @drop.prevent="dropEvent"
      @dragover="dragging = true"
@@ -11,7 +11,7 @@
      @contextmenu.prevent="options.tippy.show()"
    >
      <span
-        class="flex cursor-pointer items-center justify-center px-4"
+        class="flex items-center justify-center px-4 cursor-pointer"
        @click="toggleShowChildren()"
      >
        <component
@@ -21,7 +21,7 @@
        />
      </span>
      <span
-        class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -128,10 +128,10 @@
    </div>
    <div v-if="showChildren || isFiltered" class="flex">
      <div
-        class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
+        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
        @click="toggleShowChildren()"
      ></div>
-      <div class="flex flex-1 flex-col truncate">
+      <div class="flex flex-col flex-1 truncate">
        <!-- Referring to this component only (this is recursive) -->
        <Folder
          v-for="(subFolder, subFolderIndex) in folder.folders"
@@ -203,15 +203,12 @@ import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
 import { computed, ref } from "vue"
-import { useService } from "dioc/vue"
-import { GQLTabService } from "~/services/tab/graphql"
+import { getTabsRefTo } from "~/helpers/graphql/tab"

 const toast = useToast()
 const t = useI18n()
 const colorMode = useColorMode()

-const tabs = useService(GQLTabService)
-
 const props = defineProps({
  picked: { type: Object, default: null },
  // Whether the request is in a selectable mode (activates 'select' event)
@@ -280,7 +277,7 @@ const removeFolder = () => {
    emit("select", { picked: null })
  }

-  const possibleTabs = tabs.getTabsRefTo((tab) => {
+  const possibleTabs = getTabsRefTo((tab) => {
    const ctx = tab.document.saveContext

    if (!ctx) return false
--- a/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
@@ -260,13 +260,6 @@ const importFromJSON = () => {

 const exportJSON = () => {
  const dataToWrite = collectionJson.value
-
-  const parsedCollections = JSON.parse(dataToWrite)
-
-  if (!parsedCollections.length) {
-    return toast.error(t("error.no_collections_to_export"))
-  }
-
  const file = new Blob([dataToWrite], { type: "application/json" })
  const a = document.createElement("a")
  const url = URL.createObjectURL(file)
--- a/packages/hoppscotch-common/src/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Request.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
    <div
-      class="group flex items-stretch"
+      class="flex items-stretch group"
      draggable="true"
      @dragstart="dragStart"
      @dragover.stop
@@ -10,7 +10,7 @@
      @contextmenu.prevent="options.tippy.show()"
    >
      <span
-        class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
        @click="selectRequest()"
      >
        <component
@@ -20,7 +20,7 @@
        />
      </span>
      <span
-        class="flex min-w-0 flex-1 cursor-pointer items-center py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="flex items-center flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="selectRequest()"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -29,15 +29,15 @@
        <span
          v-if="isActive"
          v-tippy="{ theme: 'tooltip' }"
-          class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
+          class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
          :title="`${t('collection.request_in_use')}`"
        >
          <span
-            class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
+            class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
          >
          </span>
          <span
-            class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
+            class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
          ></span>
        </span>
      </span>
@@ -137,8 +137,12 @@ import { useToast } from "@composables/toast"
 import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
 import { cloneDeep } from "lodash-es"
 import { removeGraphqlRequest } from "~/newstore/collections"
-import { useService } from "dioc/vue"
-import { GQLTabService } from "~/services/tab/graphql"
+import {
+  createNewTab,
+  getTabRefWithSaveContext,
+  currentTabID,
+  currentActiveTab,
+} from "~/helpers/graphql/tab"

 // Template refs
 const tippyActions = ref<any | null>(null)
@@ -150,8 +154,6 @@ const deleteAction = ref<any | null>(null)
 const t = useI18n()
 const toast = useToast()

-const tabs = useService(GQLTabService)
-
 const props = defineProps({
  // Whether the object is selected (show the tick mark)
  picked: { type: Object, default: null },
@@ -163,7 +165,7 @@ const props = defineProps({
 })

 const isActive = computed(() => {
-  const saveCtx = tabs.currentActiveTab.value?.document.saveContext
+  const saveCtx = currentActiveTab.value?.document.saveContext

  if (!saveCtx) return false

@@ -199,7 +201,7 @@ const selectRequest = () => {
  if (props.saveRequest) {
    pick()
  } else {
-    const possibleTab = tabs.getTabRefWithSaveContext({
+    const possibleTab = getTabRefWithSaveContext({
      originLocation: "user-collection",
      folderPath: props.folderPath,
      requestIndex: props.requestIndex,
@@ -207,11 +209,11 @@ const selectRequest = () => {

    // Switch to that request if that request is open
    if (possibleTab) {
-      tabs.setActiveTab(possibleTab.value.id)
+      currentTabID.value = possibleTab.value.id
      return
    }

-    tabs.createNewTab({
+    createNewTab({
      saveContext: {
        originLocation: "user-collection",
        folderPath: props.folderPath,
@@ -251,7 +253,7 @@ const removeRequest = () => {
  }

  // Detach the request from any of the tabs
-  const possibleTab = tabs.getTabRefWithSaveContext({
+  const possibleTab = getTabRefWithSaveContext({
    originLocation: "user-collection",
    folderPath: props.folderPath,
    requestIndex: props.requestIndex,
--- a/packages/hoppscotch-common/src/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div :class="{ 'rounded border border-divider': saveRequest }">
    <div
-      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto rounded-t bg-primary"
+      class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto rounded-t bg-primary"
      :style="
        saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
      "
@@ -11,10 +11,10 @@
        type="search"
        autocomplete="off"
        :placeholder="t('action.search')"
-        class="!border-0 bg-transparent py-2 pl-4 pr-2"
+        class="py-2 pl-4 pr-2 bg-transparent !border-0"
      />
      <div
-        class="flex flex-1 flex-shrink-0 justify-between border-y border-dividerLight bg-primary"
+        class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
      >
        <HoppButtonSecondary
          :icon="IconPlus"
@@ -34,7 +34,7 @@
            v-if="!saveRequest"
            v-tippy="{ theme: 'tooltip' }"
            :title="t('modal.import_export')"
-            :icon="IconImport"
+            :icon="IconArchive"
            @click="displayModalImportExport(true)"
          />
        </div>
@@ -66,34 +66,19 @@
      :alt="`${t('empty.collections')}`"
      :text="t('empty.collections')"
    >
-      <div class="flex flex-col items-center space-y-4">
-        <span class="text-center text-secondaryLight">
-          {{ t("collection.import_or_create") }}
-        </span>
-        <div class="flex flex-col items-stretch gap-4">
-          <HoppButtonPrimary
-            :icon="IconImport"
-            :label="t('import.title')"
-            filled
-            outline
-            @click="displayModalImportExport(true)"
-          />
-          <HoppButtonSecondary
-            :label="t('add.new')"
-            filled
-            outline
-            :icon="IconPlus"
-            @click="displayModalAdd(true)"
-          />
-        </div>
-      </div>
+      <HoppButtonSecondary
+        :label="t('add.new')"
+        filled
+        outline
+        @click="displayModalAdd(true)"
+      />
    </HoppSmartPlaceholder>
    <HoppSmartPlaceholder
      v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
      :text="`${t('state.nothing_found')} ‟${filterText}”`"
    >
      <template #icon>
-        <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+        <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
      </template>
    </HoppSmartPlaceholder>
    <CollectionsGraphqlAdd
@@ -155,13 +140,12 @@ import {

 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
-import IconImport from "~icons/lucide/folder-down"
+import IconArchive from "~icons/lucide/archive"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
 import { platform } from "~/platform"
-import { useService } from "dioc/vue"
-import { GQLTabService } from "~/services/tab/graphql"
+import { createNewTab, currentActiveTab } from "~/helpers/graphql/tab"

 export default defineComponent({
  props: {
@@ -174,16 +158,14 @@ export default defineComponent({
    const collections = useReadonlyStream(graphqlCollections$, [], "deep")
    const colorMode = useColorMode()
    const t = useI18n()
-    const tabs = useService(GQLTabService)

    return {
      collections,
      colorMode,
      t,
-      tabs,
      IconPlus,
      IconHelpCircle,
-      IconImport,
+      IconArchive,
    }
  },
  data() {
@@ -285,13 +267,13 @@ export default defineComponent({
    },
    onAddRequest({ name, path, index }) {
      const newRequest = {
-        ...this.tabs.currentActiveTab.value.document.request,
+        ...currentActiveTab.value.document.request,
        name,
      }

      saveGraphqlRequestAs(path, newRequest)

-      this.tabs.createNewTab({
+      createNewTab({
        saveContext: {
          originLocation: "user-collection",
          folderPath: path,
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -11,19 +11,20 @@
    @dragend="draggingToRoot = false"
  >
    <div
-      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
+      class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
      :class="{ 'rounded-t': saveRequest }"
      :style="
        saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
      "
    >
      <WorkspaceCurrent :section="t('tab.collections')" />
-      <input
+
+      <HoppSmartInput
        v-model="filterTexts"
-        type="search"
-        autocomplete="off"
-        class="flex h-8 w-full bg-transparent p-4 py-2"
        :placeholder="t('action.search')"
+        input-styles="py-2 pl-4 pr-2 bg-transparent !border-0"
+        type="search"
+        :autofocus="false"
        :disabled="collectionsType.type === 'team-collections'"
      />
    </div>
@@ -85,12 +86,12 @@
      @display-modal-import-export="displayModalImportExport(true)"
    />
    <div
-      class="py-15 hidden flex-1 flex-col items-center justify-center bg-primaryDark px-4 text-secondaryLight"
+      class="hidden bg-primaryDark flex-col flex-1 items-center py-15 justify-center px-4 text-secondaryLight"
      :class="{
        '!flex': draggingToRoot && currentReorderingStatus.type !== 'request',
      }"
    >
-      <icon-lucide-list-end class="svg-icons !h-8 !w-8" />
+      <icon-lucide-list-end class="svg-icons !w-8 !h-8" />
    </div>
    <CollectionsAdd
      :show="showModalAdd"
@@ -218,6 +219,12 @@ import {
 import * as E from "fp-ts/Either"
 import { platform } from "~/platform"
 import { createCollectionGists } from "~/helpers/gist"
+import {
+  createNewTab,
+  currentActiveTab,
+  currentTabID,
+  getTabRefWithSaveContext,
+} from "~/helpers/rest/tab"
 import {
  getRequestsByPath,
  resolveSaveContextOnRequestReorder,
@@ -232,11 +239,9 @@ import { currentReorderingStatus$ } from "~/newstore/reordering"
 import { defineActionHandler } from "~/helpers/actions"
 import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
-import { RESTTabService } from "~/services/tab/rest"

 const t = useI18n()
 const toast = useToast()
-const tabs = useService(RESTTabService)

 const props = defineProps({
  saveRequest: {
@@ -372,26 +377,22 @@ const updateSelectedTeam = (team: SelectedTeam) => {
 const workspace = workspaceService.currentWorkspace

 // Used to switch collection type and team when user switch workspace in the global workspace switcher
-// Check if there is a teamID in the workspace, if yes, switch to team collections and select the team
-// If there is no teamID, switch to my collections
+// Check if there is a teamID in the workspace, if yes, switch to team collection and select the team
+// If there is no teamID, switch to my environment
 watch(
  () => {
    const space = workspace.value
-    return space.type === "personal" ? undefined : space.teamID
+
+    if (space.type === "personal") return undefined
+    else return space.teamID
  },
  (teamID) => {
-    if (teamID) {
+    if (!teamID) {
+      switchToMyCollections()
+    } else if (teamID) {
      const team = myTeams.value?.find((t) => t.id === teamID)
-      if (team) {
-        updateSelectedTeam(team)
-      }
-      return
+      if (team) updateSelectedTeam(team)
    }
-
-    return switchToMyCollections()
-  },
-  {
-    immediate: true,
  }
 )

@@ -649,7 +650,7 @@ const addRequest = (payload: {

 const onAddRequest = (requestName: string) => {
  const newRequest = {
-    ...cloneDeep(tabs.currentActiveTab.value.document.request),
+    ...cloneDeep(currentActiveTab.value.document.request),
    name: requestName,
  }

@@ -658,7 +659,7 @@ const onAddRequest = (requestName: string) => {
    if (!path) return
    const insertionIndex = saveRESTRequestAs(path, newRequest)

-    tabs.createNewTab({
+    createNewTab({
      request: newRequest,
      isDirty: false,
      saveContext: {
@@ -707,7 +708,7 @@ const onAddRequest = (requestName: string) => {
        (result) => {
          const { createRequestInCollection } = result

-          tabs.createNewTab({
+          createNewTab({
            request: newRequest,
            isDirty: false,
            saveContext: {
@@ -930,7 +931,7 @@ const updateEditingRequest = (newName: string) => {

    if (folderPath === null || requestIndex === null) return

-    const possibleActiveTab = tabs.getTabRefWithSaveContext({
+    const possibleActiveTab = getTabRefWithSaveContext({
      originLocation: "user-collection",
      requestIndex,
      folderPath,
@@ -974,7 +975,7 @@ const updateEditingRequest = (newName: string) => {
      )
    )()

-    const possibleTab = tabs.getTabRefWithSaveContext({
+    const possibleTab = getTabRefWithSaveContext({
      originLocation: "team-collection",
      requestID,
    })
@@ -1210,7 +1211,7 @@ const onRemoveRequest = () => {
      emit("select", null)
    }

-    const possibleTab = tabs.getTabRefWithSaveContext({
+    const possibleTab = getTabRefWithSaveContext({
      originLocation: "user-collection",
      folderPath,
      requestIndex,
@@ -1270,7 +1271,7 @@ const onRemoveRequest = () => {
    )()

    // If there is a tab attached to this request, dissociate its state and mark it dirty
-    const possibleTab = tabs.getTabRefWithSaveContext({
+    const possibleTab = getTabRefWithSaveContext({
      originLocation: "team-collection",
      requestID,
    })
@@ -1303,14 +1304,14 @@ const selectRequest = (selectedRequest: {
  let possibleTab = null

  if (collectionsType.value.type === "team-collections") {
-    possibleTab = tabs.getTabRefWithSaveContext({
+    possibleTab = getTabRefWithSaveContext({
      originLocation: "team-collection",
      requestID: requestIndex,
    })
    if (possibleTab) {
-      tabs.setActiveTab(possibleTab.value.id)
+      currentTabID.value = possibleTab.value.id
    } else {
-      tabs.createNewTab({
+      createNewTab({
        request: cloneDeep(request),
        isDirty: false,
        saveContext: {
@@ -1320,16 +1321,16 @@ const selectRequest = (selectedRequest: {
      })
    }
  } else {
-    possibleTab = tabs.getTabRefWithSaveContext({
+    possibleTab = getTabRefWithSaveContext({
      originLocation: "user-collection",
      requestIndex: parseInt(requestIndex),
      folderPath: folderPath!,
    })
    if (possibleTab) {
-      tabs.setActiveTab(possibleTab.value.id)
+      currentTabID.value = possibleTab.value.id
    } else {
      // If not, open the request in a new tab
-      tabs.createNewTab({
+      createNewTab({
        request: cloneDeep(request),
        isDirty: false,
        saveContext: {
@@ -1372,7 +1373,7 @@ const dropRequest = (payload: {
      destinationCollectionIndex
    )

-    const possibleTab = tabs.getTabRefWithSaveContext({
+    const possibleTab = getTabRefWithSaveContext({
      originLocation: "user-collection",
      folderPath,
      requestIndex: pathToLastIndex(requestIndex),
@@ -1421,7 +1422,7 @@ const dropRequest = (payload: {
            1
          )

-          const possibleTab = tabs.getTabRefWithSaveContext({
+          const possibleTab = getTabRefWithSaveContext({
            originLocation: "team-collection",
            requestID: requestIndex,
          })
@@ -1937,12 +1938,6 @@ const exportJSONCollection = async () => {

  await getJSONCollection()

-  const parsedCollections = JSON.parse(collectionJSON.value)
-
-  if (!parsedCollections.length) {
-    return toast.error(t("error.no_collections_to_export"))
-  }
-
  initializeDownloadCollection(collectionJSON.value, null)
 }

--- a/packages/hoppscotch-common/src/components/environments/Add.vue
+++ b/packages/hoppscotch-common/src/components/environments/Add.vue
@@ -5,9 +5,9 @@
    @close="hideModal"
  >
    <template #body>
-      <div class="flex flex-1 flex-col space-y-4">
-        <div class="ml-2 flex items-center space-x-8">
-          <label for="name" class="min-w-10 font-semibold">{{
+      <div class="flex space-y-4 flex-1 flex-col">
+        <div class="flex items-center space-x-8 ml-2">
+          <label for="name" class="font-semibold min-w-10">{{
            t("environment.name")
          }}</label>
          <input
@@ -17,8 +17,8 @@
            class="input"
          />
        </div>
-        <div class="ml-2 flex items-center space-x-8">
-          <label for="value" class="min-w-10 font-semibold">{{
+        <div class="flex items-center space-x-8 ml-2">
+          <label for="value" class="font-semibold min-w-10">{{
            t("environment.value")
          }}</label>
          <input
@@ -28,17 +28,17 @@
            :placeholder="t('environment.value')"
          />
        </div>
-        <div class="ml-2 flex items-center space-x-8">
-          <label for="scope" class="min-w-10 font-semibold">
+        <div class="flex items-center space-x-8 ml-2">
+          <label for="scope" class="font-semibold min-w-10">
            {{ t("environment.scope") }}
          </label>
          <div
-            class="relative flex flex-1 flex-col rounded border border-divider focus-visible:border-dividerDark"
+            class="relative flex flex-1 flex-col border border-divider rounded focus-visible:border-dividerDark"
          >
            <EnvironmentsSelector v-model="scope" :is-scope-selector="true" />
          </div>
        </div>
-        <div v-if="replaceWithVariable" class="mt-3 flex space-x-2">
+        <div v-if="replaceWithVariable" class="flex space-x-2 mt-3">
          <div class="min-w-18" />
          <HoppSmartCheckbox
            :on="replaceWithVariable"
@@ -83,14 +83,11 @@ import {
 import * as TE from "fp-ts/TaskEither"
 import { pipe } from "fp-ts/function"
 import { updateTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
-import { RESTTabService } from "~/services/tab/rest"
-import { useService } from "dioc/vue"
+import { currentActiveTab } from "~/helpers/rest/tab"

 const t = useI18n()
 const toast = useToast()

-const tabs = useService(RESTTabService)
-
 const props = defineProps<{
  show: boolean
  position: { top: number; left: number }
@@ -192,8 +189,8 @@ const addEnvironment = async () => {
    //replace the current tab endpoint with the variable name with << and >>
    const variableName = `<<${editingName.value}>>`
    //replace the currenttab endpoint containing the value in the text with variablename
-    tabs.currentActiveTab.value.document.request.endpoint =
-      tabs.currentActiveTab.value.document.request.endpoint.replace(
+    currentActiveTab.value.document.request.endpoint =
+      currentActiveTab.value.document.request.endpoint.replace(
        editingValue.value,
        variableName
      )
--- a/packages/hoppscotch-common/src/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
@@ -377,13 +377,6 @@ const importFromPostman = ({

 const exportJSON = () => {
  const dataToWrite = environmentJson.value
-
-  const parsedCollections = JSON.parse(dataToWrite)
-
-  if (!parsedCollections.length) {
-    return toast.error(t("error.no_environments_to_export"))
-  }
-
  const file = new Blob([dataToWrite], { type: "application/json" })
  const a = document.createElement("a")
  const url = URL.createObjectURL(file)
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
nivedin	9581f1d747	refactor: asterik length same as real text length	2023-09-21 13:19:57 +05:30
nivedin	882aafdb43	refactor: update secret toggle icon	2023-09-21 13:18:50 +05:30
Daniel Maurer	f33fa6ac1a	fix: adjusted tests to work with the secret flag	2023-09-19 12:37:31 +05:30
Daniel Maurer	b9a1cc21f1	fix: fixed bug in gui with masked secrets	2023-09-19 12:37:31 +05:30
Daniel Maurer	f530fc2853	fix: inputfield to readonly + asterisk if secret	2023-09-19 12:37:28 +05:30
Daniel Maurer	e0eb8af6f5	feat: added masking of secrets in cli in url	2023-09-19 12:37:13 +05:30
Daniel Maurer	088f1d6b47	feat: missing files from last commit	2023-09-19 12:37:13 +05:30
Daniel Maurer	7d61e69b3d	feat: added toggle Button to Frontend	2023-09-19 12:37:10 +05:30