feat: revamped header wireframe

2023-12-01 19:49:23 +05:30
279 changed files with 7145 additions and 10171 deletions
--- a/package.json
+++ b/package.json
@@ -32,9 +32,6 @@
    "lint-staged": "12.4.0"
  },
  "pnpm": {
-    "overrides": {
-      "vue": "3.3.9"
-    },
    "packageExtensions": {
      "httpsnippet@^3.0.1": {
        "peerDependencies": {
--- a/packages/hoppscotch-backend/prisma/migrations/20231130082054_collection_headers/migration.sql
+++ b/packages/hoppscotch-backend/prisma/migrations/20231130082054_collection_headers/migration.sql
@@ -1,5 +0,0 @@
-- AlterTable
-ALTER TABLE "TeamCollection" ADD COLUMN     "data" JSONB;
-
-- AlterTable
-ALTER TABLE "UserCollection" ADD COLUMN     "data" JSONB;
--- a/packages/hoppscotch-backend/prisma/schema.prisma
+++ b/packages/hoppscotch-backend/prisma/schema.prisma
@@ -43,7 +43,6 @@ model TeamInvitation {
 model TeamCollection {
  id         String           @id @default(cuid())
  parentID   String?
-  data       Json?
  parent     TeamCollection?  @relation("TeamCollectionChildParent", fields: [parentID], references: [id])
  children   TeamCollection[] @relation("TeamCollectionChildParent")
  requests   TeamRequest[]
@@ -75,8 +74,7 @@ model Shortcode {
  creatorUid      String?
  User            User?    @relation(fields: [creatorUid], references: [uid])
  createdOn       DateTime @default(now())
-  updatedOn       DateTime @default(now()) @updatedAt
-
+  updatedOn       DateTime @updatedAt @default(now())
  @@unique(fields: [id, creatorUid], name: "creator_uid_shortcode_unique")
 }

@@ -197,7 +195,6 @@ model UserCollection {
  userUid    String
  user       User             @relation(fields: [userUid], references: [uid], onDelete: Cascade)
  title      String
-  data       Json?
  orderIndex Int
  type       ReqType
  createdOn  DateTime         @default(now()) @db.Timestamp(3)
--- a/packages/hoppscotch-backend/src/errors.ts
+++ b/packages/hoppscotch-backend/src/errors.ts
@@ -254,13 +254,6 @@ export const TEAM_COLL_INVALID_JSON = 'team_coll/invalid_json';
 */
 export const TEAM_NOT_OWNER = 'team_coll/team_not_owner' as const;

-/**
- * The Team Collection data is not valid
- * (TeamCollectionService)
- */
-export const TEAM_COLL_DATA_INVALID =
-  'team_coll/team_coll_data_invalid' as const;
-
 /**
 * Tried to perform an action on a request that doesn't accept their member role level
 * (GqlRequestTeamMemberGuard)
@@ -592,13 +585,6 @@ export const USER_COLL_REORDERING_FAILED =
 export const USER_COLL_SAME_NEXT_COLL =
  'user_coll/user_collection_and_next_user_collection_are_same' as const;

-/**
- * The User Collection data is not valid
- * (UserCollectionService)
- */
-export const USER_COLL_DATA_INVALID =
-  'user_coll/user_coll_data_invalid' as const;
-
 /**
 * The User Collection does not belong to the logged-in user
 * (UserCollectionService)
--- a/packages/hoppscotch-backend/src/pubsub/topicsDefs.ts
+++ b/packages/hoppscotch-backend/src/pubsub/topicsDefs.ts
@@ -21,8 +21,8 @@ import {
 } from 'src/team-request/team-request.model';
 import { TeamInvitation } from 'src/team-invitation/team-invitation.model';
 import { InvitedUser } from '../admin/invited-user.model';
+import { UserCollection } from '@prisma/client';
 import {
-  UserCollection,
  UserCollectionRemovedData,
  UserCollectionReorderData,
 } from 'src/user-collection/user-collections.model';
--- a/packages/hoppscotch-backend/src/team-collection/input-type.args.ts
+++ b/packages/hoppscotch-backend/src/team-collection/input-type.args.ts
@@ -14,13 +14,6 @@ export class CreateRootTeamCollectionArgs {

  @Field({ name: 'title', description: 'Title of the new collection' })
  title: string;
-
-  @Field({
-    name: 'data',
-    description: 'JSON string representing the collection data',
-    nullable: true,
-  })
-  data: string;
 }

@ArgsType()
@@ -33,13 +26,6 @@ export class CreateChildTeamCollectionArgs {

  @Field({ name: 'childTitle', description: 'Title of the new collection' })
  childTitle: string;
-
-  @Field({
-    name: 'data',
-    description: 'JSON string representing the collection data',
-    nullable: true,
-  })
-  data: string;
 }

@ArgsType()
@@ -47,14 +33,12 @@ export class RenameTeamCollectionArgs {
  @Field(() => ID, {
    name: 'collectionID',
    description: 'ID of the collection',
-    deprecationReason: 'Switch to updateTeamCollection mutation instead',
  })
  collectionID: string;

  @Field({
    name: 'newTitle',
    description: 'The updated title of the collection',
-    deprecationReason: 'Switch to updateTeamCollection mutation instead',
  })
  newTitle: string;
 }
@@ -114,26 +98,3 @@ export class ReplaceTeamCollectionArgs {
  })
  parentCollectionID?: string;
 }
-
-@ArgsType()
-export class UpdateTeamCollectionArgs {
-  @Field(() => ID, {
-    name: 'collectionID',
-    description: 'ID of the collection',
-  })
-  collectionID: string;
-
-  @Field({
-    name: 'newTitle',
-    description: 'The updated title of the collection',
-    nullable: true,
-  })
-  newTitle: string;
-
-  @Field({
-    name: 'data',
-    description: 'JSON string representing the collection data',
-    nullable: true,
-  })
-  data: string;
-}
--- a/packages/hoppscotch-backend/src/team-collection/team-collection.model.ts
+++ b/packages/hoppscotch-backend/src/team-collection/team-collection.model.ts
@@ -12,17 +12,12 @@ export class TeamCollection {
  })
  title: string;

-  @Field({
-    description: 'JSON string representing the collection data',
-    nullable: true,
-  })
-  data: string;
-
  @Field(() => ID, {
    description: 'ID of the collection',
    nullable: true,
  })
  parentID: string;
+  teamID: string;
 }

@ObjectType()
--- a/packages/hoppscotch-backend/src/team-collection/team-collection.resolver.ts
+++ b/packages/hoppscotch-backend/src/team-collection/team-collection.resolver.ts
@@ -25,7 +25,6 @@ import {
  MoveTeamCollectionArgs,
  RenameTeamCollectionArgs,
  ReplaceTeamCollectionArgs,
-  UpdateTeamCollectionArgs,
  UpdateTeamCollectionOrderArgs,
 } from './input-type.args';
 import * as E from 'fp-ts/Either';
@@ -142,14 +141,7 @@ export class TeamCollectionResolver {
    );

    if (E.isLeft(teamCollections)) throwErr(teamCollections.left);
-    return <TeamCollection>{
-      id: teamCollections.right.id,
-      title: teamCollections.right.title,
-      parentID: teamCollections.right.parentID,
-      data: !teamCollections.right.data
-        ? null
-        : JSON.stringify(teamCollections.right.data),
-    };
+    return teamCollections.right;
  }

  // Mutations
@@ -163,7 +155,6 @@ export class TeamCollectionResolver {
    const teamCollection = await this.teamCollectionService.createCollection(
      args.teamID,
      args.title,
-      args.data,
      null,
    );

@@ -239,7 +230,6 @@ export class TeamCollectionResolver {
    const teamCollection = await this.teamCollectionService.createCollection(
      team.right.id,
      args.childTitle,
-      args.data,
      args.collectionID,
    );

@@ -249,7 +239,6 @@ export class TeamCollectionResolver {

  @Mutation(() => TeamCollection, {
    description: 'Rename a collection',
-    deprecationReason: 'Switch to updateTeamCollection mutation instead',
  })
  @UseGuards(GqlAuthGuard, GqlCollectionTeamMemberGuard)
  @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
@@ -314,23 +303,6 @@ export class TeamCollectionResolver {
    return request.right;
  }

-  @Mutation(() => TeamCollection, {
-    description: 'Update Team Collection details',
-  })
-  @UseGuards(GqlAuthGuard, GqlCollectionTeamMemberGuard)
-  @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  async updateTeamCollection(@Args() args: UpdateTeamCollectionArgs) {
-    const updatedTeamCollection =
-      await this.teamCollectionService.updateTeamCollection(
-        args.collectionID,
-        args.data,
-        args.newTitle,
-      );
-
-    if (E.isLeft(updatedTeamCollection)) throwErr(updatedTeamCollection.left);
-    return updatedTeamCollection.right;
-  }
-
  // Subscriptions

  @Subscription(() => TeamCollection, {
--- 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,7 +1,6 @@
 import { Team, TeamCollection as DBTeamCollection } from '@prisma/client';
 import { mockDeep, mockReset } from 'jest-mock-extended';
 import {
-  TEAM_COLL_DATA_INVALID,
  TEAM_COLL_DEST_SAME,
  TEAM_COLL_INVALID_JSON,
  TEAM_COLL_IS_PARENT_COLL,
@@ -18,7 +17,6 @@ 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';

 const mockPrisma = mockDeep<PrismaService>();
 const mockPubSub = mockDeep<PubSubService>();
@@ -53,60 +51,35 @@ const rootTeamCollection: DBTeamCollection = {
  id: '123',
  orderIndex: 1,
  parentID: null,
-  data: {},
  title: 'Root Collection 1',
  teamID: team.id,
  createdOn: currentTime,
  updatedOn: currentTime,
 };

-const rootTeamCollectionsCasted: TeamCollection = {
-  id: rootTeamCollection.id,
-  title: rootTeamCollection.title,
-  parentID: rootTeamCollection.parentID,
-  data: JSON.stringify(rootTeamCollection.data),
-};
-
 const rootTeamCollection_2: DBTeamCollection = {
  id: 'erv',
  orderIndex: 2,
  parentID: null,
-  data: {},
  title: 'Root Collection 1',
  teamID: team.id,
  createdOn: currentTime,
  updatedOn: currentTime,
 };

-const rootTeamCollection_2Casted: TeamCollection = {
-  id: 'erv',
-  parentID: null,
-  data: JSON.stringify(rootTeamCollection_2.data),
-  title: 'Root Collection 1',
-};
-
 const childTeamCollection: DBTeamCollection = {
  id: 'rfe',
  orderIndex: 1,
  parentID: rootTeamCollection.id,
-  data: {},
  title: 'Child Collection 1',
  teamID: team.id,
  createdOn: currentTime,
  updatedOn: currentTime,
 };

-const childTeamCollectionCasted: TeamCollection = {
-  id: 'rfe',
-  parentID: rootTeamCollection.id,
-  data: JSON.stringify(childTeamCollection.data),
-  title: 'Child Collection 1',
-};
-
 const childTeamCollection_2: DBTeamCollection = {
  id: 'bgdz',
  orderIndex: 1,
-  data: {},
  parentID: rootTeamCollection_2.id,
  title: 'Child Collection 1',
  teamID: team.id,
@@ -114,20 +87,11 @@ const childTeamCollection_2: DBTeamCollection = {
  updatedOn: currentTime,
 };

-const childTeamCollection_2Casted: TeamCollection = {
-  id: 'bgdz',
-  data: JSON.stringify(childTeamCollection_2.data),
-  parentID: rootTeamCollection_2.id,
-  title: 'Child Collection 1',
-};
-
 const rootTeamCollectionList: DBTeamCollection[] = [
  {
    id: 'fdv',
    orderIndex: 1,
    parentID: null,
-    data: {},
-
    title: 'Root Collection 1',
    teamID: team.id,
    createdOn: currentTime,
@@ -138,8 +102,6 @@ const rootTeamCollectionList: DBTeamCollection[] = [
    orderIndex: 2,
    parentID: null,
    title: 'Root Collection 1',
-    data: {},
-
    teamID: team.id,
    createdOn: currentTime,
    updatedOn: currentTime,
@@ -149,8 +111,6 @@ const rootTeamCollectionList: DBTeamCollection[] = [
    orderIndex: 3,
    parentID: null,
    title: 'Root Collection 1',
-    data: {},
-
    teamID: team.id,
    createdOn: currentTime,
    updatedOn: currentTime,
@@ -159,8 +119,6 @@ const rootTeamCollectionList: DBTeamCollection[] = [
    id: 'bre3',
    orderIndex: 4,
    parentID: null,
-    data: {},
-
    title: 'Root Collection 1',
    teamID: team.id,
    createdOn: currentTime,
@@ -171,8 +129,6 @@ const rootTeamCollectionList: DBTeamCollection[] = [
    orderIndex: 5,
    parentID: null,
    title: 'Root Collection 1',
-    data: {},
-
    teamID: team.id,
    createdOn: currentTime,
    updatedOn: currentTime,
@@ -183,8 +139,6 @@ const rootTeamCollectionList: DBTeamCollection[] = [
    parentID: null,
    title: 'Root Collection 1',
    teamID: team.id,
-    data: {},
-
    createdOn: currentTime,
    updatedOn: currentTime,
  },
@@ -194,8 +148,6 @@ const rootTeamCollectionList: DBTeamCollection[] = [
    parentID: null,
    title: 'Root Collection 1',
    teamID: team.id,
-    data: {},
-
    createdOn: currentTime,
    updatedOn: currentTime,
  },
@@ -204,7 +156,6 @@ const rootTeamCollectionList: DBTeamCollection[] = [
    orderIndex: 8,
    parentID: null,
    title: 'Root Collection 1',
-    data: {},
    teamID: team.id,
    createdOn: currentTime,
    updatedOn: currentTime,
@@ -214,7 +165,6 @@ const rootTeamCollectionList: DBTeamCollection[] = [
    orderIndex: 9,
    parentID: null,
    title: 'Root Collection 1',
-    data: {},
    teamID: team.id,
    createdOn: currentTime,
    updatedOn: currentTime,
@@ -225,83 +175,17 @@ const rootTeamCollectionList: DBTeamCollection[] = [
    parentID: null,
    title: 'Root Collection 1',
    teamID: team.id,
-    data: {},
    createdOn: currentTime,
    updatedOn: currentTime,
  },
 ];

-const rootTeamCollectionListCasted: TeamCollection[] = [
-  {
-    id: 'fdv',
-    parentID: null,
-    title: 'Root Collection 1',
-    data: JSON.stringify(rootTeamCollection.data),
-  },
-  {
-    id: 'fbbg',
-    parentID: null,
-    title: 'Root Collection 1',
-    data: JSON.stringify(rootTeamCollection.data),
-  },
-  {
-    id: 'fgbfg',
-    parentID: null,
-    title: 'Root Collection 1',
-    data: JSON.stringify(rootTeamCollection.data),
-  },
-  {
-    id: 'bre3',
-    parentID: null,
-    data: JSON.stringify(rootTeamCollection.data),
-    title: 'Root Collection 1',
-  },
-  {
-    id: 'hghgf',
-    parentID: null,
-    title: 'Root Collection 1',
-    data: JSON.stringify(rootTeamCollection.data),
-  },
-  {
-    id: '123',
-    parentID: null,
-    title: 'Root Collection 1',
-    data: JSON.stringify(rootTeamCollection.data),
-  },
-  {
-    id: '54tyh',
-    parentID: null,
-    title: 'Root Collection 1',
-    data: JSON.stringify(rootTeamCollection.data),
-  },
-  {
-    id: '234re',
-    parentID: null,
-    title: 'Root Collection 1',
-    data: JSON.stringify(rootTeamCollection.data),
-  },
-  {
-    id: '34rtg',
-    parentID: null,
-    title: 'Root Collection 1',
-    data: JSON.stringify(rootTeamCollection.data),
-  },
-  {
-    id: '45tgh',
-    parentID: null,
-    title: 'Root Collection 1',
-    data: JSON.stringify(rootTeamCollection.data),
-  },
-];
-
 const childTeamCollectionList: DBTeamCollection[] = [
  {
    id: '123',
    orderIndex: 1,
    parentID: rootTeamCollection.id,
    title: 'Root Collection 1',
-    data: {},
-
    teamID: team.id,
    createdOn: currentTime,
    updatedOn: currentTime,
@@ -311,8 +195,6 @@ const childTeamCollectionList: DBTeamCollection[] = [
    orderIndex: 2,
    parentID: rootTeamCollection.id,
    title: 'Root Collection 1',
-    data: {},
-
    teamID: team.id,
    createdOn: currentTime,
    updatedOn: currentTime,
@@ -322,8 +204,6 @@ const childTeamCollectionList: DBTeamCollection[] = [
    orderIndex: 3,
    parentID: rootTeamCollection.id,
    title: 'Root Collection 1',
-    data: {},
-
    teamID: team.id,
    createdOn: currentTime,
    updatedOn: currentTime,
@@ -332,8 +212,6 @@ const childTeamCollectionList: DBTeamCollection[] = [
    id: '567',
    orderIndex: 4,
    parentID: rootTeamCollection.id,
-    data: {},
-
    title: 'Root Collection 1',
    teamID: team.id,
    createdOn: currentTime,
@@ -343,8 +221,6 @@ const childTeamCollectionList: DBTeamCollection[] = [
    id: '123',
    orderIndex: 5,
    parentID: rootTeamCollection.id,
-    data: {},
-
    title: 'Root Collection 1',
    teamID: team.id,
    createdOn: currentTime,
@@ -354,8 +230,6 @@ const childTeamCollectionList: DBTeamCollection[] = [
    id: '678',
    orderIndex: 6,
    parentID: rootTeamCollection.id,
-    data: {},
-
    title: 'Root Collection 1',
    teamID: team.id,
    createdOn: currentTime,
@@ -365,8 +239,6 @@ const childTeamCollectionList: DBTeamCollection[] = [
    id: '789',
    orderIndex: 7,
    parentID: rootTeamCollection.id,
-    data: {},
-
    title: 'Root Collection 1',
    teamID: team.id,
    createdOn: currentTime,
@@ -376,8 +248,6 @@ const childTeamCollectionList: DBTeamCollection[] = [
    id: '890',
    orderIndex: 8,
    parentID: rootTeamCollection.id,
-    data: {},
-
    title: 'Root Collection 1',
    teamID: team.id,
    createdOn: currentTime,
@@ -387,7 +257,6 @@ const childTeamCollectionList: DBTeamCollection[] = [
    id: '012',
    orderIndex: 9,
    parentID: rootTeamCollection.id,
-    data: {},
    title: 'Root Collection 1',
    teamID: team.id,
    createdOn: currentTime,
@@ -397,8 +266,6 @@ const childTeamCollectionList: DBTeamCollection[] = [
    id: '0bhu',
    orderIndex: 10,
    parentID: rootTeamCollection.id,
-    data: {},
-
    title: 'Root Collection 1',
    teamID: team.id,
    createdOn: currentTime,
@@ -406,75 +273,6 @@ const childTeamCollectionList: DBTeamCollection[] = [
  },
 ];

-const childTeamCollectionListCasted: TeamCollection[] = [
-  {
-    id: '123',
-    parentID: rootTeamCollection.id,
-    title: 'Root Collection 1',
-    data: JSON.stringify({}),
-  },
-  {
-    id: '345',
-    parentID: rootTeamCollection.id,
-    title: 'Root Collection 1',
-    data: JSON.stringify({}),
-  },
-  {
-    id: '456',
-    parentID: rootTeamCollection.id,
-    title: 'Root Collection 1',
-    data: JSON.stringify({}),
-  },
-  {
-    id: '567',
-    parentID: rootTeamCollection.id,
-    data: JSON.stringify({}),
-
-    title: 'Root Collection 1',
-  },
-  {
-    id: '123',
-    parentID: rootTeamCollection.id,
-    data: JSON.stringify({}),
-
-    title: 'Root Collection 1',
-  },
-  {
-    id: '678',
-    parentID: rootTeamCollection.id,
-    data: JSON.stringify({}),
-
-    title: 'Root Collection 1',
-  },
-  {
-    id: '789',
-    parentID: rootTeamCollection.id,
-    data: JSON.stringify({}),
-
-    title: 'Root Collection 1',
-  },
-  {
-    id: '890',
-    parentID: rootTeamCollection.id,
-    data: JSON.stringify({}),
-
-    title: 'Root Collection 1',
-  },
-  {
-    id: '012',
-    parentID: rootTeamCollection.id,
-    data: JSON.stringify({}),
-    title: 'Root Collection 1',
-  },
-  {
-    id: '0bhu',
-    parentID: rootTeamCollection.id,
-    data: JSON.stringify({}),
-
-    title: 'Root Collection 1',
-  },
-];
-
 beforeEach(() => {
  mockReset(mockPrisma);
  mockPubSub.publish.mockClear();
@@ -513,7 +311,7 @@ describe('getParentOfCollection', () => {
    const result = await teamCollectionService.getParentOfCollection(
      childTeamCollection.id,
    );
-    expect(result).toEqual(rootTeamCollectionsCasted);
+    expect(result).toEqual(rootTeamCollection);
  });

  test('should return null successfully for a root collection with valid collectionID', async () => {
@@ -549,7 +347,7 @@ describe('getChildrenOfCollection', () => {
      null,
      10,
    );
-    expect(result).toEqual(childTeamCollectionListCasted);
+    expect(result).toEqual(childTeamCollectionList);
  });

  test('should return a list of 3 child collections successfully with cursor being equal to the 7th item in the list', async () => {
@@ -565,9 +363,9 @@ describe('getChildrenOfCollection', () => {
      10,
    );
    expect(result).toEqual([
-      { ...childTeamCollectionListCasted[7] },
-      { ...childTeamCollectionListCasted[8] },
-      { ...childTeamCollectionListCasted[9] },
+      { ...childTeamCollectionList[7] },
+      { ...childTeamCollectionList[8] },
+      { ...childTeamCollectionList[9] },
    ]);
  });

@@ -594,7 +392,7 @@ describe('getTeamRootCollections', () => {
      null,
      10,
    );
-    expect(result).toEqual(rootTeamCollectionListCasted);
+    expect(result).toEqual(rootTeamCollectionList);
  });

  test('should return a list of 3 root collections successfully with cursor being equal to the 7th item in the list', async () => {
@@ -610,9 +408,9 @@ describe('getTeamRootCollections', () => {
      10,
    );
    expect(result).toEqual([
-      { ...rootTeamCollectionListCasted[7] },
-      { ...rootTeamCollectionListCasted[8] },
-      { ...rootTeamCollectionListCasted[9] },
+      { ...rootTeamCollectionList[7] },
+      { ...rootTeamCollectionList[8] },
+      { ...rootTeamCollectionList[9] },
    ]);
  });

@@ -666,7 +464,6 @@ describe('createCollection', () => {
    const result = await teamCollectionService.createCollection(
      rootTeamCollection.teamID,
      'ab',
-      JSON.stringify(rootTeamCollection.data),
      rootTeamCollection.id,
    );
    expect(result).toEqualLeft(TEAM_COLL_SHORT_TITLE);
@@ -681,27 +478,11 @@ describe('createCollection', () => {
    const result = await teamCollectionService.createCollection(
      rootTeamCollection.teamID,
      'abcd',
-      JSON.stringify(rootTeamCollection.data),
      rootTeamCollection.id,
    );
    expect(result).toEqualLeft(TEAM_NOT_OWNER);
  });

-  test('should throw TEAM_COLL_DATA_INVALID when parent TeamCollection does not belong to the team', async () => {
-    // isOwnerCheck
-    mockPrisma.teamCollection.findFirstOrThrow.mockResolvedValueOnce(
-      rootTeamCollection,
-    );
-
-    const result = await teamCollectionService.createCollection(
-      rootTeamCollection.teamID,
-      'abcd',
-      '{',
-      rootTeamCollection.id,
-    );
-    expect(result).toEqualLeft(TEAM_COLL_DATA_INVALID);
-  });
-
  test('should successfully create a new root TeamCollection with valid inputs', async () => {
    // isOwnerCheck
    mockPrisma.teamCollection.findFirstOrThrow.mockResolvedValueOnce(
@@ -715,10 +496,9 @@ describe('createCollection', () => {
    const result = await teamCollectionService.createCollection(
      rootTeamCollection.teamID,
      'abcdefg',
-      JSON.stringify(rootTeamCollection.data),
      rootTeamCollection.id,
    );
-    expect(result).toEqualRight(rootTeamCollectionsCasted);
+    expect(result).toEqualRight(rootTeamCollection);
  });

  test('should successfully create a new child TeamCollection with valid inputs', async () => {
@@ -734,10 +514,9 @@ describe('createCollection', () => {
    const result = await teamCollectionService.createCollection(
      childTeamCollection.teamID,
      childTeamCollection.title,
-      JSON.stringify(rootTeamCollection.data),
      rootTeamCollection.id,
    );
-    expect(result).toEqualRight(childTeamCollectionCasted);
+    expect(result).toEqualRight(childTeamCollection);
  });

  test('should send pubsub message to "team_coll/<teamID>/coll_added" if child TeamCollection is created successfully', async () => {
@@ -753,13 +532,11 @@ describe('createCollection', () => {
    const result = await teamCollectionService.createCollection(
      childTeamCollection.teamID,
      childTeamCollection.title,
-      JSON.stringify(rootTeamCollection.data),
-
      rootTeamCollection.id,
    );
    expect(mockPubSub.publish).toHaveBeenCalledWith(
      `team_coll/${childTeamCollection.teamID}/coll_added`,
-      childTeamCollectionCasted,
+      childTeamCollection,
    );
  });

@@ -776,13 +553,11 @@ describe('createCollection', () => {
    const result = await teamCollectionService.createCollection(
      rootTeamCollection.teamID,
      'abcdefg',
-      JSON.stringify(rootTeamCollection.data),
-
      rootTeamCollection.id,
    );
    expect(mockPubSub.publish).toHaveBeenCalledWith(
      `team_coll/${rootTeamCollection.teamID}/coll_added`,
-      rootTeamCollectionsCasted,
+      rootTeamCollection,
    );
  });
 });
@@ -812,7 +587,7 @@ describe('renameCollection', () => {
      'NewTitle',
    );
    expect(result).toEqualRight({
-      ...rootTeamCollectionsCasted,
+      ...rootTeamCollection,
      title: 'NewTitle',
    });
  });
@@ -850,7 +625,7 @@ describe('renameCollection', () => {
    expect(mockPubSub.publish).toHaveBeenCalledWith(
      `team_coll/${rootTeamCollection.teamID}/coll_updated`,
      {
-        ...rootTeamCollectionsCasted,
+        ...rootTeamCollection,
        title: 'NewTitle',
      },
    );
@@ -1057,8 +832,9 @@ describe('moveCollection', () => {
      null,
    );
    expect(result).toEqualRight({
-      ...childTeamCollectionCasted,
+      ...childTeamCollection,
      parentID: null,
+      orderIndex: 2,
    });
  });

@@ -1114,8 +890,9 @@ describe('moveCollection', () => {
    expect(mockPubSub.publish).toHaveBeenCalledWith(
      `team_coll/${childTeamCollection.teamID}/coll_moved`,
      {
-        ...childTeamCollectionCasted,
+        ...childTeamCollection,
        parentID: null,
+        orderIndex: 2,
      },
    );
  });
@@ -1154,8 +931,9 @@ describe('moveCollection', () => {
      childTeamCollection_2.id,
    );
    expect(result).toEqualRight({
-      ...rootTeamCollectionsCasted,
-      parentID: childTeamCollection_2Casted.id,
+      ...rootTeamCollection,
+      parentID: childTeamCollection_2.id,
+      orderIndex: 1,
    });
  });

@@ -1195,8 +973,9 @@ describe('moveCollection', () => {
    expect(mockPubSub.publish).toHaveBeenCalledWith(
      `team_coll/${childTeamCollection_2.teamID}/coll_moved`,
      {
-        ...rootTeamCollectionsCasted,
-        parentID: childTeamCollection_2Casted.id,
+        ...rootTeamCollection,
+        parentID: childTeamCollection_2.id,
+        orderIndex: 1,
      },
    );
  });
@@ -1235,8 +1014,9 @@ describe('moveCollection', () => {
      childTeamCollection_2.id,
    );
    expect(result).toEqualRight({
-      ...childTeamCollectionCasted,
-      parentID: childTeamCollection_2Casted.id,
+      ...childTeamCollection,
+      parentID: childTeamCollection_2.id,
+      orderIndex: 1,
    });
  });

@@ -1276,8 +1056,9 @@ describe('moveCollection', () => {
    expect(mockPubSub.publish).toHaveBeenCalledWith(
      `team_coll/${childTeamCollection.teamID}/coll_moved`,
      {
-        ...childTeamCollectionCasted,
-        parentID: childTeamCollection_2Casted.id,
+        ...childTeamCollection,
+        parentID: childTeamCollection_2.id,
+        orderIndex: 1,
      },
    );
  });
@@ -1373,7 +1154,7 @@ describe('updateCollectionOrder', () => {
    expect(mockPubSub.publish).toHaveBeenCalledWith(
      `team_coll/${childTeamCollectionList[4].teamID}/coll_order_updated`,
      {
-        collection: rootTeamCollectionListCasted[4],
+        collection: rootTeamCollectionList[4],
        nextCollection: null,
      },
    );
@@ -1454,8 +1235,8 @@ describe('updateCollectionOrder', () => {
    expect(mockPubSub.publish).toHaveBeenCalledWith(
      `team_coll/${childTeamCollectionList[2].teamID}/coll_order_updated`,
      {
-        collection: childTeamCollectionListCasted[4],
-        nextCollection: childTeamCollectionListCasted[2],
+        collection: childTeamCollectionList[4],
+        nextCollection: childTeamCollectionList[2],
      },
    );
  });
@@ -1521,7 +1302,7 @@ describe('importCollectionsFromJSON', () => {
    );
    expect(mockPubSub.publish).toHaveBeenCalledWith(
      `team_coll/${rootTeamCollection.teamID}/coll_added`,
-      rootTeamCollectionsCasted,
+      rootTeamCollection,
    );
  });
 });
@@ -1640,7 +1421,7 @@ describe('replaceCollectionsWithJSON', () => {
    );
    expect(mockPubSub.publish).toHaveBeenCalledWith(
      `team_coll/${rootTeamCollection.teamID}/coll_added`,
-      rootTeamCollectionsCasted,
+      rootTeamCollection,
    );
  });
 });
@@ -1677,64 +1458,4 @@ describe('totalCollectionsInTeam', () => {
  });
 });

-describe('updateTeamCollection', () => {
-  test('should throw TEAM_COLL_SHORT_TITLE if title is invalid', async () => {
-    const result = await teamCollectionService.updateTeamCollection(
-      rootTeamCollection.id,
-      JSON.stringify(rootTeamCollection.data),
-      'de',
-    );
-    expect(result).toEqualLeft(TEAM_COLL_SHORT_TITLE);
-  });
-
-  test('should throw TEAM_COLL_DATA_INVALID is collection data is invalid', async () => {
-    const result = await teamCollectionService.updateTeamCollection(
-      rootTeamCollection.id,
-      '{',
-      rootTeamCollection.title,
-    );
-    expect(result).toEqualLeft(TEAM_COLL_DATA_INVALID);
-  });
-
-  test('should throw TEAM_COLL_NOT_FOUND is collectionID is invalid', async () => {
-    mockPrisma.teamCollection.update.mockRejectedValueOnce('RecordNotFound');
-
-    const result = await teamCollectionService.updateTeamCollection(
-      'invalid_id',
-      JSON.stringify(rootTeamCollection.data),
-      rootTeamCollection.title,
-    );
-    expect(result).toEqualLeft(TEAM_COLL_NOT_FOUND);
-  });
-
-  test('should successfully update a collection', async () => {
-    mockPrisma.teamCollection.update.mockResolvedValueOnce(rootTeamCollection);
-
-    const result = await teamCollectionService.updateTeamCollection(
-      rootTeamCollection.id,
-      JSON.stringify({ foo: 'bar' }),
-      'new_title',
-    );
-    expect(result).toEqualRight({
-      data: JSON.stringify({ foo: 'bar' }),
-      title: 'new_title',
-      ...rootTeamCollectionsCasted,
-    });
-  });
-
-  test('should send pubsub message to "team_coll/<teamID>/coll_updated" if TeamCollection is updated successfully', async () => {
-    mockPrisma.teamCollection.update.mockResolvedValueOnce(rootTeamCollection);
-
-    const result = await teamCollectionService.updateTeamCollection(
-      rootTeamCollection.id,
-      JSON.stringify(rootTeamCollection.data),
-      rootTeamCollection.title,
-    );
-    expect(mockPubSub.publish).toHaveBeenCalledWith(
-      `team_coll/${rootTeamCollection.teamID}/coll_updated`,
-      rootTeamCollectionsCasted,
-    );
-  });
-});
-
 //ToDo: write test cases for exportCollectionsToJSON
--- a/packages/hoppscotch-backend/src/team-collection/team-collection.service.ts
+++ b/packages/hoppscotch-backend/src/team-collection/team-collection.service.ts
@@ -13,7 +13,6 @@ import {
  TEAM_COLL_IS_PARENT_COLL,
  TEAM_COL_SAME_NEXT_COLL,
  TEAM_COL_REORDERING_FAILED,
-  TEAM_COLL_DATA_INVALID,
 } from '../errors';
 import { PubSubService } from '../pubsub/pubsub.service';
 import { isValidLength } from 'src/utils';
@@ -70,7 +69,6 @@ export class TeamCollectionService {
          this.generatePrismaQueryObjForFBCollFolder(f, teamID, index + 1),
        ),
      },
-      data: folder.data ?? undefined,
    };
  }

@@ -120,7 +118,6 @@ export class TeamCollectionService {
      name: collection.right.title,
      folders: childrenCollectionObjects,
      requests: requests.map((x) => x.request),
-      data: JSON.stringify(collection.right.data),
    };

    return E.right(result);
@@ -201,11 +198,8 @@ export class TeamCollectionService {
      ),
    );

-    teamCollections.forEach((collection) =>
-      this.pubsub.publish(
-        `team_coll/${destTeamID}/coll_added`,
-        this.cast(collection),
-      ),
+    teamCollections.forEach((x) =>
+      this.pubsub.publish(`team_coll/${destTeamID}/coll_added`, x),
    );

    return E.right(true);
@@ -274,11 +268,8 @@ export class TeamCollectionService {
      ),
    );

-    teamCollections.forEach((collections) =>
-      this.pubsub.publish(
-        `team_coll/${destTeamID}/coll_added`,
-        this.cast(collections),
-      ),
+    teamCollections.forEach((x) =>
+      this.pubsub.publish(`team_coll/${destTeamID}/coll_added`, x),
    );

    return E.right(true);
@@ -286,17 +277,11 @@ export class TeamCollectionService {

  /**
   * Typecast a database TeamCollection to a TeamCollection model
-   *
   * @param teamCollection database TeamCollection
   * @returns TeamCollection model
   */
  private cast(teamCollection: DBTeamCollection): TeamCollection {
-    return <TeamCollection>{
-      id: teamCollection.id,
-      title: teamCollection.title,
-      parentID: teamCollection.parentID,
-      data: !teamCollection.data ? null : JSON.stringify(teamCollection.data),
-    };
+    return <TeamCollection>{ ...teamCollection };
  }

  /**
@@ -339,7 +324,7 @@ export class TeamCollectionService {
    });
    if (!teamCollection) return null;

-    return !teamCollection.parent ? null : this.cast(teamCollection.parent);
+    return teamCollection.parent;
  }

  /**
@@ -350,12 +335,12 @@ export class TeamCollectionService {
   * @param take Number of items we want returned
   * @returns A list of child collections
   */
-  async getChildrenOfCollection(
+  getChildrenOfCollection(
    collectionID: string,
    cursor: string | null,
    take: number,
  ) {
-    const res = await this.prisma.teamCollection.findMany({
+    return this.prisma.teamCollection.findMany({
      where: {
        parentID: collectionID,
      },
@@ -366,12 +351,6 @@ export class TeamCollectionService {
      skip: cursor ? 1 : 0,
      cursor: cursor ? { id: cursor } : undefined,
    });
-
-    const childCollections = res.map((teamCollection) =>
-      this.cast(teamCollection),
-    );
-
-    return childCollections;
  }

  /**
@@ -387,7 +366,7 @@ export class TeamCollectionService {
    cursor: string | null,
    take: number,
  ) {
-    const res = await this.prisma.teamCollection.findMany({
+    return this.prisma.teamCollection.findMany({
      where: {
        teamID,
        parentID: null,
@@ -399,12 +378,6 @@ export class TeamCollectionService {
      skip: cursor ? 1 : 0,
      cursor: cursor ? { id: cursor } : undefined,
    });
-
-    const teamCollections = res.map((teamCollection) =>
-      this.cast(teamCollection),
-    );
-
-    return teamCollections;
  }

  /**
@@ -497,7 +470,6 @@ export class TeamCollectionService {
  async createCollection(
    teamID: string,
    title: string,
-    data: string | null = null,
    parentTeamCollectionID: string | null,
  ) {
    const isTitleValid = isValidLength(title, this.TITLE_LENGTH);
@@ -509,13 +481,6 @@ export class TeamCollectionService {
      if (O.isNone(isOwner)) return E.left(TEAM_NOT_OWNER);
    }

-    if (data === '') return E.left(TEAM_COLL_DATA_INVALID);
-    if (data) {
-      const jsonReq = stringToJson(data);
-      if (E.isLeft(jsonReq)) return E.left(TEAM_COLL_DATA_INVALID);
-      data = jsonReq.right;
-    }
-
    const isParent = parentTeamCollectionID
      ? {
          connect: {
@@ -533,23 +498,18 @@ export class TeamCollectionService {
          },
        },
        parent: isParent,
-        data: data ?? undefined,
        orderIndex: !parentTeamCollectionID
          ? (await this.getRootCollectionsCount(teamID)) + 1
          : (await this.getChildCollectionsCount(parentTeamCollectionID)) + 1,
      },
    });

-    this.pubsub.publish(
-      `team_coll/${teamID}/coll_added`,
-      this.cast(teamCollection),
-    );
+    this.pubsub.publish(`team_coll/${teamID}/coll_added`, teamCollection);

    return E.right(this.cast(teamCollection));
  }

  /**
-   * @deprecated Use updateTeamCollection method instead
   * Update the title of a TeamCollection
   *
   * @param collectionID The Collection ID
@@ -572,10 +532,10 @@ export class TeamCollectionService {

      this.pubsub.publish(
        `team_coll/${updatedTeamCollection.teamID}/coll_updated`,
-        this.cast(updatedTeamCollection),
+        updatedTeamCollection,
      );

-      return E.right(this.cast(updatedTeamCollection));
+      return E.right(updatedTeamCollection);
    } catch (error) {
      return E.left(TEAM_COLL_NOT_FOUND);
    }
@@ -734,8 +694,8 @@ export class TeamCollectionService {
   * @returns An Option of boolean, is parent or not
   */
  private async isParent(
-    collection: DBTeamCollection,
-    destCollection: DBTeamCollection,
+    collection: TeamCollection,
+    destCollection: TeamCollection,
  ): Promise<O.Option<boolean>> {
    //* Recursively check if collection is a parent by going up the tree of child-parent collections until we reach a root collection i.e parentID === null
    //* Valid condition, isParent returns false
@@ -1011,49 +971,4 @@ export class TeamCollectionService {
    const teamCollectionsCount = this.prisma.teamCollection.count();
    return teamCollectionsCount;
  }
-
-  /**
-   * Update Team Collection details
-   *
-   * @param collectionID Collection ID
-   * @param collectionData new header data in a JSONified string form
-   * @param newTitle New title of the collection
-   * @returns Updated TeamCollection
-   */
-  async updateTeamCollection(
-    collectionID: string,
-    collectionData: string = null,
-    newTitle: string = null,
-  ) {
-    try {
-      if (newTitle != null) {
-        const isTitleValid = isValidLength(newTitle, this.TITLE_LENGTH);
-        if (!isTitleValid) return E.left(TEAM_COLL_SHORT_TITLE);
-      }
-
-      if (collectionData === '') return E.left(TEAM_COLL_DATA_INVALID);
-      if (collectionData) {
-        const jsonReq = stringToJson(collectionData);
-        if (E.isLeft(jsonReq)) return E.left(TEAM_COLL_DATA_INVALID);
-        collectionData = jsonReq.right;
-      }
-
-      const updatedTeamCollection = await this.prisma.teamCollection.update({
-        where: { id: collectionID },
-        data: {
-          data: collectionData ?? undefined,
-          title: newTitle ?? undefined,
-        },
-      });
-
-      this.pubsub.publish(
-        `team_coll/${updatedTeamCollection.teamID}/coll_updated`,
-        this.cast(updatedTeamCollection),
-      );
-
-      return E.right(this.cast(updatedTeamCollection));
-    } catch (e) {
-      return E.left(TEAM_COLL_NOT_FOUND);
-    }
-  }
 }
--- a/packages/hoppscotch-backend/src/team-request/team-request.service.spec.ts
+++ b/packages/hoppscotch-backend/src/team-request/team-request.service.spec.ts
@@ -42,7 +42,6 @@ const teamCollection: DbTeamCollection = {
  id: 'team-coll-1',
  parentID: null,
  teamID: team.id,
-  data: {},
  title: 'Team Collection 1',
  orderIndex: 1,
  createdOn: new Date(),
--- a/packages/hoppscotch-backend/src/types/CollectionFolder.ts
+++ b/packages/hoppscotch-backend/src/types/CollectionFolder.ts
@@ -1,8 +1,6 @@
-// This interface defines how data will be received from the app when we are importing Hoppscotch collections
 export interface CollectionFolder {
  id?: string;
  folders: CollectionFolder[];
  requests: any[];
  name: string;
-  data?: string;
 }
--- a/packages/hoppscotch-backend/src/user-collection/input-type.args.ts
+++ b/packages/hoppscotch-backend/src/user-collection/input-type.args.ts
@@ -6,13 +6,6 @@ import { PaginationArgs } from 'src/types/input-types.args';
 export class CreateRootUserCollectionArgs {
  @Field({ name: 'title', description: 'Title of the new user collection' })
  title: string;
-
-  @Field({
-    name: 'data',
-    description: 'JSON string representing the collection data',
-    nullable: true,
-  })
-  data: string;
 }
@ArgsType()
 export class CreateChildUserCollectionArgs {
@@ -24,13 +17,6 @@ export class CreateChildUserCollectionArgs {
    description: 'ID of the parent to the new user collection',
  })
  parentUserCollectionID: string;
-
-  @Field({
-    name: 'data',
-    description: 'JSON string representing the collection data',
-    nullable: true,
-  })
-  data: string;
 }

@ArgsType()
@@ -109,26 +95,3 @@ export class ImportUserCollectionsFromJSONArgs {
  })
  parentCollectionID?: string;
 }
-
-@ArgsType()
-export class UpdateUserCollectionsArgs {
-  @Field(() => ID, {
-    name: 'userCollectionID',
-    description: 'ID of the user collection',
-  })
-  userCollectionID: string;
-
-  @Field({
-    name: 'newTitle',
-    description: 'The updated title of the user collection',
-    nullable: true,
-  })
-  newTitle: string;
-
-  @Field({
-    name: 'data',
-    description: 'JSON string representing the collection data',
-    nullable: true,
-  })
-  data: string;
-}
--- a/packages/hoppscotch-backend/src/user-collection/user-collection.resolver.ts
+++ b/packages/hoppscotch-backend/src/user-collection/user-collection.resolver.ts
@@ -30,7 +30,6 @@ import {
  MoveUserCollectionArgs,
  RenameUserCollectionsArgs,
  UpdateUserCollectionArgs,
-  UpdateUserCollectionsArgs,
 } from './input-type.args';
 import { ReqType } from 'src/types/RequestTypes';
 import * as E from 'fp-ts/Either';
@@ -143,13 +142,7 @@ export class UserCollectionResolver {
    );

    if (E.isLeft(userCollection)) throwErr(userCollection.left);
-    return <UserCollection>{
-      ...userCollection.right,
-      userID: userCollection.right.userUid,
-      data: !userCollection.right.data
-        ? null
-        : JSON.stringify(userCollection.right.data),
-    };
+    return userCollection.right;
  }

  @Query(() => UserCollectionExportJSONData, {
@@ -198,7 +191,6 @@ export class UserCollectionResolver {
      await this.userCollectionService.createUserCollection(
        user,
        args.title,
-        args.data,
        null,
        ReqType.REST,
      );
@@ -220,7 +212,6 @@ export class UserCollectionResolver {
      await this.userCollectionService.createUserCollection(
        user,
        args.title,
-        args.data,
        null,
        ReqType.GQL,
      );
@@ -241,7 +232,6 @@ export class UserCollectionResolver {
      await this.userCollectionService.createUserCollection(
        user,
        args.title,
-        args.data,
        args.parentUserCollectionID,
        ReqType.GQL,
      );
@@ -262,7 +252,6 @@ export class UserCollectionResolver {
      await this.userCollectionService.createUserCollection(
        user,
        args.title,
-        args.data,
        args.parentUserCollectionID,
        ReqType.REST,
      );
@@ -370,26 +359,6 @@ export class UserCollectionResolver {
    return importedCollection.right;
  }

-  @Mutation(() => UserCollection, {
-    description: 'Update a UserCollection',
-  })
-  @UseGuards(GqlAuthGuard)
-  async updateUserCollection(
-    @GqlUser() user: AuthUser,
-    @Args() args: UpdateUserCollectionsArgs,
-  ) {
-    const updatedUserCollection =
-      await this.userCollectionService.updateUserCollection(
-        args.newTitle,
-        args.data,
-        args.userCollectionID,
-        user.uid,
-      );
-
-    if (E.isLeft(updatedUserCollection)) throwErr(updatedUserCollection.left);
-    return updatedUserCollection.right;
-  }
-
  // Subscriptions
  @Subscription(() => UserCollection, {
    description: 'Listen for User Collection Creation',
--- a/packages/hoppscotch-backend/src/user-collection/user-collection.service.spec.ts
+++ b/packages/hoppscotch-backend/src/user-collection/user-collection.service.spec.ts
--- a/packages/hoppscotch-backend/src/user-collection/user-collection.service.ts
+++ b/packages/hoppscotch-backend/src/user-collection/user-collection.service.ts
@@ -12,7 +12,6 @@ import {
  USER_NOT_FOUND,
  USER_NOT_OWNER,
  USER_COLL_INVALID_JSON,
-  USER_COLL_DATA_INVALID,
 } from 'src/errors';
 import { PrismaService } from 'src/prisma/prisma.service';
 import { AuthUser } from 'src/types/AuthUser';
@@ -44,12 +43,8 @@ export class UserCollectionService {
   */
  private cast(collection: UserCollection) {
    return <UserCollectionModel>{
-      id: collection.id,
-      title: collection.title,
-      type: collection.type,
-      parentID: collection.parentID,
+      ...collection,
      userID: collection.userUid,
-      data: !collection.data ? null : JSON.stringify(collection.data),
    };
  }

@@ -151,7 +146,7 @@ export class UserCollectionService {
      },
    });

-    return !parent ? null : this.cast(parent);
+    return parent;
  }

  /**
@@ -169,7 +164,7 @@ export class UserCollectionService {
    take: number,
    type: ReqType,
  ) {
-    const res = await this.prisma.userCollection.findMany({
+    return this.prisma.userCollection.findMany({
      where: {
        parentID: collectionID,
        type: type,
@@ -181,12 +176,6 @@ export class UserCollectionService {
      skip: cursor ? 1 : 0,
      cursor: cursor ? { id: cursor } : undefined,
    });
-
-    const childCollections = res.map((childCollection) =>
-      this.cast(childCollection),
-    );
-
-    return childCollections;
  }

  /**
@@ -222,20 +211,12 @@ export class UserCollectionService {
  async createUserCollection(
    user: AuthUser,
    title: string,
-    data: string | null = null,
    parentUserCollectionID: string | null,
    type: ReqType,
  ) {
    const isTitleValid = isValidLength(title, this.TITLE_LENGTH);
    if (!isTitleValid) return E.left(USER_COLL_SHORT_TITLE);

-    if (data === '') return E.left(USER_COLL_DATA_INVALID);
-    if (data) {
-      const jsonReq = stringToJson(data);
-      if (E.isLeft(jsonReq)) return E.left(USER_COLL_DATA_INVALID);
-      data = jsonReq.right;
-    }
-
    // If creating a child collection
    if (parentUserCollectionID !== null) {
      const parentCollection = await this.getUserCollection(
@@ -270,19 +251,15 @@ export class UserCollectionService {
          },
        },
        parent: isParent,
-        data: data ?? undefined,
        orderIndex: !parentUserCollectionID
          ? (await this.getRootCollectionsCount(user.uid)) + 1
          : (await this.getChildCollectionsCount(parentUserCollectionID)) + 1,
      },
    });

-    await this.pubsub.publish(
-      `user_coll/${user.uid}/created`,
-      this.cast(userCollection),
-    );
+    await this.pubsub.publish(`user_coll/${user.uid}/created`, userCollection);

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

  /**
@@ -299,7 +276,7 @@ export class UserCollectionService {
    take: number,
    type: ReqType,
  ) {
-    const res = await this.prisma.userCollection.findMany({
+    return this.prisma.userCollection.findMany({
      where: {
        userUid: user.uid,
        parentID: null,
@@ -312,12 +289,6 @@ export class UserCollectionService {
      skip: cursor ? 1 : 0,
      cursor: cursor ? { id: cursor } : undefined,
    });
-
-    const userCollections = res.map((childCollection) =>
-      this.cast(childCollection),
-    );
-
-    return userCollections;
  }

  /**
@@ -336,7 +307,7 @@ export class UserCollectionService {
    take: number,
    type: ReqType,
  ) {
-    const res = await this.prisma.userCollection.findMany({
+    return this.prisma.userCollection.findMany({
      where: {
        userUid: user.uid,
        parentID: userCollectionID,
@@ -346,16 +317,9 @@ export class UserCollectionService {
      skip: cursor ? 1 : 0,
      cursor: cursor ? { id: cursor } : undefined,
    });
-
-    const childCollections = res.map((childCollection) =>
-      this.cast(childCollection),
-    );
-
-    return childCollections;
  }

  /**
-   * @deprecated Use updateUserCollection method instead
   * Update the title of a UserCollection
   *
   * @param newTitle The new title of collection
@@ -387,10 +351,10 @@ export class UserCollectionService {

      this.pubsub.publish(
        `user_coll/${updatedUserCollection.userUid}/updated`,
-        this.cast(updatedUserCollection),
+        updatedUserCollection,
      );

-      return E.right(this.cast(updatedUserCollection));
+      return E.right(updatedUserCollection);
    } catch (error) {
      return E.left(USER_COLL_NOT_FOUND);
    }
@@ -627,10 +591,10 @@ export class UserCollectionService {

      this.pubsub.publish(
        `user_coll/${collection.right.userUid}/moved`,
-        this.cast(updatedCollection.right),
+        updatedCollection.right,
      );

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

    // destCollectionID != null i.e move into another collection
@@ -678,10 +642,10 @@ export class UserCollectionService {

    this.pubsub.publish(
      `user_coll/${collection.right.userUid}/moved`,
-      this.cast(updatedCollection.right),
+      updatedCollection.right,
    );

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

  /**
@@ -882,7 +846,6 @@ export class UserCollectionService {
          ...(x.request as Record<string, unknown>), // type casting x.request of type Prisma.JSONValue to an object to enable spread
        };
      }),
-      data: JSON.stringify(collection.right.data),
    };

    return E.right(result);
@@ -955,7 +918,6 @@ export class UserCollectionService {
              ...(x.request as Record<string, unknown>), // type casting x.request of type Prisma.JSONValue to an object to enable spread
            };
          }),
-          data: JSON.stringify(parentCollection.right.data),
        }),
        collectionType: parentCollection.right.type,
      });
@@ -1009,7 +971,6 @@ export class UserCollectionService {
          this.generatePrismaQueryObj(f, userID, index + 1, reqType),
        ),
      },
-      data: folder.data ?? undefined,
    };
  }

@@ -1079,63 +1040,10 @@ export class UserCollectionService {
      ),
    );

-    userCollections.forEach((collection) =>
-      this.pubsub.publish(`user_coll/${userID}/created`, this.cast(collection)),
+    userCollections.forEach((x) =>
+      this.pubsub.publish(`user_coll/${userID}/created`, x),
    );

    return E.right(true);
  }
-
-  /**
-   * Update a UserCollection
-   *
-   * @param newTitle The new title of collection
-   * @param userCollectionID The Collection Id
-   * @param userID The User UID
-   * @returns An Either of the updated UserCollection
-   */
-  async updateUserCollection(
-    newTitle: string = null,
-    collectionData: string | null = null,
-    userCollectionID: string,
-    userID: string,
-  ) {
-    if (collectionData === '') return E.left(USER_COLL_DATA_INVALID);
-
-    if (collectionData) {
-      const jsonReq = stringToJson(collectionData);
-      if (E.isLeft(jsonReq)) return E.left(USER_COLL_DATA_INVALID);
-      collectionData = jsonReq.right;
-    }
-
-    if (newTitle != null) {
-      const isTitleValid = isValidLength(newTitle, this.TITLE_LENGTH);
-      if (!isTitleValid) return E.left(USER_COLL_SHORT_TITLE);
-    }
-
-    // Check to see is the collection belongs to the user
-    const isOwner = await this.isOwnerCheck(userCollectionID, userID);
-    if (O.isNone(isOwner)) return E.left(USER_NOT_OWNER);
-
-    try {
-      const updatedUserCollection = await this.prisma.userCollection.update({
-        where: {
-          id: userCollectionID,
-        },
-        data: {
-          data: collectionData ?? undefined,
-          title: newTitle ?? undefined,
-        },
-      });
-
-      this.pubsub.publish(
-        `user_coll/${updatedUserCollection.userUid}/updated`,
-        this.cast(updatedUserCollection),
-      );
-
-      return E.right(this.cast(updatedUserCollection));
-    } catch (error) {
-      return E.left(USER_COLL_NOT_FOUND);
-    }
-  }
 }
--- a/packages/hoppscotch-backend/src/user-collection/user-collections.model.ts
+++ b/packages/hoppscotch-backend/src/user-collection/user-collections.model.ts
@@ -13,12 +13,6 @@ export class UserCollection {
  })
  title: string;

-  @Field({
-    description: 'JSON string representing the collection data',
-    nullable: true,
-  })
-  data: string;
-
  @Field(() => ReqType, {
    description: 'Type of the user collection',
  })
--- a/packages/hoppscotch-cli/jest.config.ts
+++ b/packages/hoppscotch-cli/jest.config.ts
@@ -147,7 +147,7 @@ module.exports = {
  // The glob patterns Jest uses to detect test files
  testMatch: [
    // "**/__tests__/**/*.[jt]s?(x)",
-    "**/src/__tests__/commands/**/*.*.ts",
+    "**/src/__tests__/**/*.*.ts",
  ],

  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
--- a/packages/hoppscotch-cli/package.json
+++ b/packages/hoppscotch-cli/package.json
@@ -19,9 +19,8 @@
    "debugger": "node debugger.js 9999",
    "prepublish": "pnpm exec tsup",
    "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write",
-    "test": "pnpm run build && jest && rm -rf dist",
    "do-typecheck": "pnpm exec tsc --noEmit",
-    "do-test": "pnpm test"
+    "test": "pnpm run build && jest && rm -rf dist"
  },
  "keywords": [
    "cli",
--- a/packages/hoppscotch-cli/src/tests/commands/test.spec.ts
+++ b/packages/hoppscotch-cli/src/tests/commands/test.spec.ts
@@ -28,7 +28,7 @@ describe("Test 'hopp test <file>' command:", () => {

    expect(out).toBe<HoppErrorCode>("UNKNOWN_ERROR");
  });
-
+  
  test("Malformed collection file.", async () => {
    const cmd = `node ./bin/hopp test ${getTestJsonFilePath(
      "malformed-collection2.json"
@@ -106,7 +106,7 @@ describe("Test 'hopp test <file> --env <file>' command:", () => {
    const TESTS_PATH = getTestJsonFilePath("env-flag-tests.json");
    const ENV_PATH = getTestJsonFilePath("env-flag-envs.json");
    const cmd = `node ./bin/hopp test ${TESTS_PATH} --env ${ENV_PATH}`;
-    const { error, stdout } = await execAsync(cmd);
+    const { error } = await execAsync(cmd);

    expect(error).toBeNull();
  });
@@ -129,6 +129,7 @@ describe("Test 'hopp test <file> --delay <delay_in_ms>' command:", () => {
    const cmd = `${VALID_TEST_CMD} --delay 'NaN'`;
    const { stderr } = await execAsync(cmd);
    const out = getErrorCode(stderr);
+    console.log("invalid value thing", out)
    expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
  });

--- a/packages/hoppscotch-cli/src/tests/samples/env-flag-envs.json
+++ b/packages/hoppscotch-cli/src/tests/samples/env-flag-envs.json
@@ -1,6 +1,7 @@
 {
  "URL": "https://echo.hoppscotch.io",
  "HOST": "echo.hoppscotch.io",
+  "X-COUNTRY": "IN",
  "BODY_VALUE": "body_value",
  "BODY_KEY": "body_key"
 }
--- a/packages/hoppscotch-cli/src/tests/samples/env-flag-tests.json
+++ b/packages/hoppscotch-cli/src/tests/samples/env-flag-tests.json
@@ -12,7 +12,7 @@
      "method": "POST",
      "auth": { "authType": "none", "authActive": true },
      "preRequestScript": "",
-      "testScript": "const HOST = pw.env.get(\"HOST\");\nconst UNSET_ENV = pw.env.get(\"UNSET_ENV\");\nconst EXPECTED_URL = \"https://echo.hoppscotch.io\";\nconst URL = pw.env.get(\"URL\");\nconst BODY_VALUE = pw.env.get(\"BODY_VALUE\");\n\n// Check JSON response property\npw.test(\"Check headers properties.\", ()=> {\n    pw.expect(pw.response.body.headers.host).toBe(HOST);\n});\n\npw.test(\"Check data properties.\", () => {\n\tconst DATA = pw.response.body.data;\n  \n    pw.expect(DATA).toBeType(\"string\");\n    pw.expect(JSON.parse(DATA).body_key).toBe(BODY_VALUE);\n});\n\npw.test(\"Check request URL.\", () => {\n  pw.expect(URL).toBe(EXPECTED_URL);\n})\n\npw.test(\"Check unset ENV.\", () => {\n  pw.expect(UNSET_ENV).toBeType(\"undefined\");\n})",
+      "testScript": "const HOST = pw.env.get(\"HOST\");\nconst UNSET_ENV = pw.env.get(\"UNSET_ENV\");\nconst EXPECTED_URL = \"https://echo.hoppscotch.io\";\nconst URL = pw.env.get(\"URL\");\nconst X_COUNTRY = pw.env.get(\"X-COUNTRY\");\nconst BODY_VALUE = pw.env.get(\"BODY_VALUE\");\n\n// Check JSON response property\npw.test(\"Check headers properties.\", ()=> {\n    pw.expect(pw.response.body.headers.host).toBe(HOST);\n\t   pw.expect(pw.response.body.headers[\"x-country\"]).toBe(X_COUNTRY);  \n});\n\npw.test(\"Check data properties.\", () => {\n\tconst DATA = pw.response.body.data;\n  \n    pw.expect(DATA).toBeType(\"string\");\n    pw.expect(JSON.parse(DATA).body_key).toBe(BODY_VALUE);\n});\n\npw.test(\"Check request URL.\", () => {\n  pw.expect(URL).toBe(EXPECTED_URL);\n})\n\npw.test(\"Check unset ENV.\", () => {\n  pw.expect(UNSET_ENV).toBeType(\"undefined\");\n})",
      "body": {
        "contentType": "application/json",
        "body": "{\n  \"<<BODY_KEY>>\":\"<<BODY_VALUE>>\"\n}"
--- a/packages/hoppscotch-cli/src/utils/pre-request.ts
+++ b/packages/hoppscotch-cli/src/utils/pre-request.ts
@@ -6,24 +6,23 @@ import {
  parseTemplateString,
  parseTemplateStringE,
 } from "@hoppscotch/data";
-import { runPreRequestScript } from "@hoppscotch/js-sandbox/node";
-import * as A from "fp-ts/Array";
-import * as E from "fp-ts/Either";
-import * as O from "fp-ts/Option";
-import * as RA from "fp-ts/ReadonlyArray";
-import * as TE from "fp-ts/TaskEither";
+import { runPreRequestScript } from "@hoppscotch/js-sandbox";
 import { flow, pipe } from "fp-ts/function";
+import * as TE from "fp-ts/TaskEither";
+import * as E from "fp-ts/Either";
+import * as RA from "fp-ts/ReadonlyArray";
+import * as A from "fp-ts/Array";
+import * as O from "fp-ts/Option";
 import * as S from "fp-ts/string";
 import qs from "qs";
-
 import { EffectiveHoppRESTRequest } from "../interfaces/request";
-import { HoppCLIError, error } from "../types/errors";
+import { error, HoppCLIError } from "../types/errors";
 import { HoppEnvs } from "../types/request";
-import { PreRequestMetrics } from "../types/response";
 import { isHoppCLIError } from "./checks";
-import { arrayFlatMap, arraySort, tupleToRecord } from "./functions/array";
-import { getEffectiveFinalMetaData } from "./getters";
+import { tupleToRecord, arraySort, arrayFlatMap } from "./functions/array";
 import { toFormData } from "./mutators";
+import { getEffectiveFinalMetaData } from "./getters";
+import { PreRequestMetrics } from "../types/response";

 /**
 * Runs pre-request-script runner over given request which extracts set ENVs and
--- a/packages/hoppscotch-cli/src/utils/test.ts
+++ b/packages/hoppscotch-cli/src/utils/test.ts
@@ -1,19 +1,17 @@
 import { HoppRESTRequest } from "@hoppscotch/data";
-import { TestDescriptor } from "@hoppscotch/js-sandbox";
-import { runTestScript } from "@hoppscotch/js-sandbox/node";
-import * as A from "fp-ts/Array";
-import * as RA from "fp-ts/ReadonlyArray";
-import * as T from "fp-ts/Task";
-import * as TE from "fp-ts/TaskEither";
-import { flow, pipe } from "fp-ts/function";
+import { execTestScript, TestDescriptor } from "@hoppscotch/js-sandbox";
 import { hrtime } from "process";
-
+import { flow, pipe } from "fp-ts/function";
+import * as RA from "fp-ts/ReadonlyArray";
+import * as A from "fp-ts/Array";
+import * as TE from "fp-ts/TaskEither";
+import * as T from "fp-ts/Task";
 import {
  RequestRunnerResponse,
  TestReport,
  TestScriptParams,
 } from "../interfaces/response";
-import { HoppCLIError, error } from "../types/errors";
+import { error, HoppCLIError } from "../types/errors";
 import { HoppEnvs } from "../types/request";
 import { ExpectResult, TestMetrics, TestRunnerRes } from "../types/response";
 import { getDurationInSeconds } from "./getters";
@@ -38,7 +36,7 @@ export const testRunner = (
      pipe(
        TE.of(testScriptData),
        TE.chain(({ testScript, response, envs }) =>
-          runTestScript(testScript, envs, response)
+          execTestScript(testScript, envs, response)
        )
      )
    ),
--- a/packages/hoppscotch-common/.eslintrc.js
+++ b/packages/hoppscotch-common/.eslintrc.js
@@ -69,7 +69,5 @@ module.exports = {
          "Do not use 'localStorage' directly. Please use the PersistenceService",
      },
    ],
-    eqeqeq: 1,
-    "no-else-return": 1,
  },
 }
--- a/packages/hoppscotch-common/.prettierrc.js
+++ b/packages/hoppscotch-common/.prettierrc.js
@@ -5,4 +5,5 @@ module.exports = {
  printWidth: 80,
  useTabs: false,
  tabWidth: 2,
+  plugins: ["prettier-plugin-tailwindcss"],
 }
--- a/packages/hoppscotch-common/assets/icons/graphql.svg
+++ b/packages/hoppscotch-common/assets/icons/graphql.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width=".88em" height="1em" viewBox="0 0 21 24"><path fill="currentColor" d="M12.731 2.751 17.666 5.6a2.138 2.138 0 1 1 2.07 3.548l-.015.003v5.7a2.14 2.14 0 1 1-2.098 3.502l-.002-.002-4.905 2.832a2.14 2.14 0 1 1-4.079.054l-.004.015-4.941-2.844a2.14 2.14 0 1 1-2.067-3.556l.015-.003V9.15a2.14 2.14 0 1 1 1.58-3.926l-.01-.005c.184.106.342.231.479.376l.001.001 4.938-2.85a2.14 2.14 0 1 1 4.096.021l.004-.015zm-.515.877a.766.766 0 0 1-.057.057l-.001.001 6.461 11.19c.026-.009.056-.016.082-.023V9.146a2.14 2.14 0 0 1-1.555-2.603l-.003.015.019-.072zm-3.015.059-.06-.06-4.946 2.852A2.137 2.137 0 0 1 2.749 9.12l-.015.004-.076.021v5.708l.084.023 6.461-11.19zm2.076.507a2.164 2.164 0 0 1-1.207-.004l.015.004-6.46 11.189c.286.276.496.629.597 1.026l.003.015h12.911c.102-.413.313-.768.599-1.043l.001-.001L11.28 4.194zm.986 16.227 4.917-2.838a1.748 1.748 0 0 1-.038-.142H4.222l-.021.083 4.939 2.852c.39-.403.936-.653 1.54-.653.626 0 1.189.268 1.581.696l.001.002z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width=".88em" height="1em" viewBox="0 0 21 24" class="iconify iconify--fontisto"><path fill="currentColor" d="M12.731 2.751 17.666 5.6a2.138 2.138 0 1 1 2.07 3.548l-.015.003v5.7a2.14 2.14 0 1 1-2.098 3.502l-.002-.002-4.905 2.832a2.14 2.14 0 1 1-4.079.054l-.004.015-4.941-2.844a2.14 2.14 0 1 1-2.067-3.556l.015-.003V9.15a2.14 2.14 0 1 1 1.58-3.926l-.01-.005c.184.106.342.231.479.376l.001.001 4.938-2.85a2.14 2.14 0 1 1 4.096.021l.004-.015zm-.515.877a.766.766 0 0 1-.057.057l-.001.001 6.461 11.19c.026-.009.056-.016.082-.023V9.146a2.14 2.14 0 0 1-1.555-2.603l-.003.015.019-.072zm-3.015.059-.06-.06-4.946 2.852A2.137 2.137 0 0 1 2.749 9.12l-.015.004-.076.021v5.708l.084.023 6.461-11.19zm2.076.507a2.164 2.164 0 0 1-1.207-.004l.015.004-6.46 11.189c.286.276.496.629.597 1.026l.003.015h12.911c.102-.413.313-.768.599-1.043l.001-.001L11.28 4.194zm.986 16.227 4.917-2.838a1.748 1.748 0 0 1-.038-.142H4.222l-.021.083 4.939 2.852c.39-.403.936-.653 1.54-.653.626 0 1.189.268 1.581.696l.001.002z"/></svg>
--- a/packages/hoppscotch-common/assets/icons/mqtt.svg
+++ b/packages/hoppscotch-common/assets/icons/mqtt.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.133 1h4.409a.5.5 0 0 1 .5.5v4.422c0 .026-.035.033-.045.01l-.048-.112a9.095 9.095 0 0 0-4.825-4.776c-.023-.01-.016-.044.01-.044Zm-8.588.275h-.5v1h.5c7.027 0 12.229 5.199 12.229 12.226v.5h1v-.5c0-7.58-5.65-13.226-13.229-13.226Zm.034 4.22h-.5v1h.5c2.361 0 4.348.837 5.744 2.238 1.395 1.401 2.227 3.395 2.227 5.758v.5h1v-.5c0-2.604-.921-4.859-2.52-6.463-1.596-1.605-3.845-2.532-6.45-2.532Zm-.528 8.996v-4.423c0-.041.033-.074.074-.074a4.923 4.923 0 0 1 4.923 4.922.074.074 0 0 1-.074.074H1.551a.5.5 0 0 1-.5-.5Z" clip-rule="evenodd"/></svg>
--- a/packages/hoppscotch-common/assets/icons/socketio.svg
+++ b/packages/hoppscotch-common/assets/icons/socketio.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.277 2.084a.5.5 0 0 1 .185.607l-2.269 5.5a.5.5 0 0 1-.462.309H3.5a.5.5 0 0 1-.354-.854l5.5-5.5a.5.5 0 0 1 .631-.062ZM4.707 7.5h1.69l1.186-2.875L4.707 7.5Zm2.016 6.416a.5.5 0 0 1-.185-.607l2.269-5.5a.5.5 0 0 1 .462-.309H12.5a.5.5 0 0 1 .354.854l-5.5 5.5a.5.5 0 0 1-.631.062Zm4.57-5.416h-1.69l-1.186 2.875L11.293 8.5Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1 0A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" clip-rule="evenodd"/></svg>
--- a/packages/hoppscotch-common/assets/icons/websocket.svg
+++ b/packages/hoppscotch-common/assets/icons/websocket.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1 2h4.257a2.5 2.5 0 0 1 1.768.732L9.293 5 5 9.293 3.732 8.025A2.5 2.5 0 0 1 3 6.257V4H2v2.257a3.5 3.5 0 0 0 1.025 2.475L5 10.707l1.25-1.25 2.396 2.397.708-.708L6.957 8.75 8.75 6.957l2.396 2.397.708-.708L9.457 6.25 10.707 5 7.732 2.025A3.5 3.5 0 0 0 5.257 1H1v1ZM10.646 2.354l2.622 2.62A2.5 2.5 0 0 1 14 6.744V12h1V6.743a3.5 3.5 0 0 0-1.025-2.475l-2.621-2.622-.707.708ZM4.268 13.975l-2.622-2.621.708-.708 2.62 2.622A2.5 2.5 0 0 0 6.744 14H15v1H6.743a3.5 3.5 0 0 1-2.475-1.025Z"/></svg>
--- a/packages/hoppscotch-common/assets/scss/styles.scss
+++ b/packages/hoppscotch-common/assets/scss/styles.scss
@@ -29,6 +29,14 @@
  @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 {
@@ -57,7 +65,7 @@ input::placeholder,
 textarea::placeholder,
 .cm-placeholder {
  @apply text-secondary;
-  @apply opacity-50 #{!important};
+  @apply opacity-50;
 }

 input,
@@ -76,7 +84,7 @@ body {
  @apply font-medium;
  @apply select-none;
  @apply overflow-x-hidden;
-  @apply leading-body #{!important};
+  @apply leading-body;
  animation: fade 300ms forwards;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
@@ -174,7 +182,7 @@ a {
    @apply font-semibold;
    @apply px-2 py-1;
    @apply truncate;
-    @apply leading-body;
+    @apply leading-normal;
    @apply items-center;

    kbd {
@@ -221,7 +229,7 @@ a {
    @apply overflow-y-auto;
    @apply text-body text-secondary;
    @apply p-2;
-    @apply leading-body;
+    @apply leading-normal;
    @apply focus:outline-none;
    scroll-behavior: smooth;

@@ -253,7 +261,7 @@ a {

 hr {
  @apply border-b border-dividerLight;
-  @apply my-2 #{!important};
+  @apply my-2;
 }

 .heading {
@@ -342,28 +350,44 @@ pre.ace_editor {
  }
 }

+.select-wrapper {
+  @apply flex flex-1;
+  @apply relative;
+  @apply after:absolute;
+  @apply after:flex;
+  @apply after:inset-y-0;
+  @apply after:items-center;
+  @apply after:justify-center;
+  @apply after:pointer-events-none;
+  @apply after:font-icon;
+  @apply after:text-current;
+  @apply after:right-3;
+  @apply after:content-["\e5cf"];
+  @apply after:text-lg;
+}
+
 .info-response {
-  color: var(--status-info-color);
+  color: var(--info-color);
 }

 .success-response {
-  color: var(--status-success-color);
+  color: var(--success-color);
 }

-.redirect-response {
-  color: var(--status-redirect-color);
+.redir-response {
+  color: var(--warning-color);
 }

-.critical-error-response {
-  color: var(--status-critical-error-color);
+.cl-error-response {
+  color: var(--cl-error-color);
 }

-.server-error-response {
-  color: var(--status-server-error-color);
+.sv-error-response {
+  color: var(--sv-error-color);
 }

 .missing-data-response {
-  color: var(--status-missing-data-color);
+  @apply text-secondaryLight;
 }

 .toasted-container {
@@ -513,12 +537,12 @@ pre.ace_editor {
  @apply inline-flex;
  @apply font-sans;
  @apply text-tiny;
-  @apply bg-dividerLight;
+  @apply bg-divider;
  @apply rounded;
  @apply ml-2;
  @apply px-1;
-  @apply min-w-[1.25rem];
-  @apply min-h-[1.25rem];
+  @apply min-w-5;
+  @apply min-h-5;
  @apply items-center;
  @apply justify-center;
  @apply border border-dividerDark;
--- a/packages/hoppscotch-common/assets/themes/accent-themes.scss
+++ b/packages/hoppscotch-common/assets/themes/accent-themes.scss
@@ -1,89 +1,89 @@
@mixin green-theme {
-  --accent-color: theme("colors.emerald.500");
-  --accent-light-color: theme("colors.emerald.400");
-  --accent-dark-color: theme("colors.emerald.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.emerald.400");
-  --gradient-via-color: theme("colors.emerald.500");
-  --gradient-to-color: theme("colors.emerald.600");
+  --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: 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.400");
-  --gradient-via-color: theme("colors.teal.500");
-  --gradient-to-color: theme("colors.teal.600");
+  --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: 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.400");
-  --gradient-via-color: theme("colors.blue.500");
-  --gradient-to-color: theme("colors.blue.600");
+  --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: 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.400");
-  --gradient-via-color: theme("colors.indigo.500");
-  --gradient-to-color: theme("colors.indigo.600");
+  --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: 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.400");
-  --gradient-via-color: theme("colors.purple.500");
-  --gradient-to-color: theme("colors.purple.600");
+  --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: theme("colors.amber.500");
-  --accent-light-color: theme("colors.amber.400");
-  --accent-dark-color: theme("colors.amber.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.amber.400");
-  --gradient-via-color: theme("colors.amber.500");
-  --gradient-to-color: theme("colors.amber.600");
+  --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: 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.400");
-  --gradient-via-color: theme("colors.orange.500");
-  --gradient-to-color: theme("colors.orange.600");
+  --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: 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.400");
-  --gradient-via-color: theme("colors.red.500");
-  --gradient-to-color: theme("colors.red.600");
+  --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: 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.400");
-  --gradient-via-color: theme("colors.pink.500");
-  --gradient-to-color: theme("colors.pink.600");
+  --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,16 +1,17 @@
@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.625rem;
+  --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.75rem;
-  --upper-mobile-secondary-sticky-fold: 8.813rem;
-  --upper-mobile-sticky-fold: 10.875rem;
+  --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;
@@ -19,122 +20,62 @@
  --sidebar-primary-sticky-fold: 2rem;
 }

-@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: #fdfdfd;
-
-  --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");
-
-  --banner-info-color: theme("colors.stone.100");
-  --banner-warning-color: theme("colors.yellow.100");
-  --banner-error-color: theme("colors.red.100");
-
-  --tooltip-color: theme("colors.neutral.800");
-  --popover-color: theme("colors.white");
-
-  --method-get-color: theme("colors.green.500");
-  --method-post-color: theme("colors.amber.500");
-  --method-put-color: theme("colors.blue.500");
-  --method-patch-color: theme("colors.purple.500");
-  --method-delete-color: theme("colors.red.500");
-  --method-head-color: theme("colors.lime.500");
-  --method-options-color: theme("colors.pink.500");
-  --method-default-color: theme("colors.gray.500");
-
-  --status-info-color: theme("colors.blue.500");
-  --status-success-color: theme("colors.green.500");
-  --status-redirect-color: theme("colors.amber.500");
-  --status-critical-error-color: theme("colors.red.500");
-  --status-server-error-color: theme("colors.rose.500");
-  --status-missing-data-color: theme("colors.slate.500");
-
-  --editor-theme: "textmate";
-}
-
@mixin dark-theme {
  --primary-color: #181818;
  --primary-light-color: #1c1c1e;
-  --primary-dark-color: theme("colors.neutral.800");
-  --primary-contrast-color: theme("colors.neutral.900");
+  --primary-dark-color: #262626;
+  --primary-contrast-color: #171717;

-  --secondary-color: theme("colors.neutral.400");
-  --secondary-light-color: theme("colors.neutral.500");
-  --secondary-dark-color: theme("colors.zinc.50");
+  --secondary-color: #a3a3a3;
+  --secondary-light-color: #737373;
+  --secondary-dark-color: #fafafa;

-  --divider-color: #1f1f1f;
+  --divider-color: #262626;
  --divider-light-color: #1f1f1f;
-  --divider-dark-color: theme("colors.zinc.800");
+  --divider-dark-color: #2d2d2d;

-  --banner-info-color: theme("colors.stone.800");
-  --banner-warning-color: theme("colors.yellow.800");
-  --banner-error-color: theme("colors.red.800");
-
-  --tooltip-color: theme("colors.neutral.100");
+  --error-color: #292524;
+  --tooltip-color: #f5f5f5;
  --popover-color: #1b1b1b;
-
-  --method-get-color: theme("colors.emerald.500");
-  --method-post-color: theme("colors.yellow.500");
-  --method-put-color: theme("colors.sky.500");
-  --method-patch-color: theme("colors.violet.500");
-  --method-delete-color: theme("colors.rose.500");
-  --method-head-color: theme("colors.teal.500");
-  --method-options-color: theme("colors.indigo.500");
-  --method-default-color: theme("colors.neutral.500");
-
-  --status-info-color: theme("colors.blue.500");
-  --status-success-color: theme("colors.green.500");
-  --status-redirect-color: theme("colors.amber.500");
-  --status-critical-error-color: theme("colors.red.500");
-  --status-server-error-color: theme("colors.rose.500");
-  --status-missing-data-color: theme("colors.slate.500");
-
  --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: theme("colors.neutral.900");
+  --primary-light-color: #171717;
  --primary-dark-color: #181818;
  --primary-contrast-color: #0f0f0f;

-  --secondary-color: theme("colors.neutral.400");
-  --secondary-light-color: theme("colors.neutral.500");
-  --secondary-dark-color: theme("colors.neutral.50");
+  --secondary-color: #a3a3a3;
+  --secondary-light-color: #737373;
+  --secondary-dark-color: #f5f5f5;

-  --divider-color: theme("colors.neutral.900");
-  --divider-light-color: theme("colors.neutral.900");
-  --divider-dark-color: theme("colors.zinc.800");
-
-  --banner-info-color: theme("colors.stone.900");
-  --banner-warning-color: theme("colors.yellow.900");
-  --banner-error-color: theme("colors.red.900");
-
-  --tooltip-color: theme("colors.neutral.100");
-  --popover-color: theme("colors.stone.950");
-
-  --method-get-color: theme("colors.emerald.500");
-  --method-post-color: theme("colors.yellow.500");
-  --method-put-color: theme("colors.sky.500");
-  --method-patch-color: theme("colors.violet.500");
-  --method-delete-color: theme("colors.rose.500");
-  --method-head-color: theme("colors.teal.500");
-  --method-options-color: theme("colors.indigo.500");
-  --method-default-color: theme("colors.zinc.500");
-
-  --status-info-color: theme("colors.blue.500");
-  --status-success-color: theme("colors.green.500");
-  --status-redirect-color: theme("colors.amber.500");
-  --status-critical-error-color: theme("colors.red.500");
-  --status-server-error-color: theme("colors.rose.500");
-  --status-missing-data-color: theme("colors.slate.500");
+  --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 +1,41 @@
-@mixin light-editor-theme {
-  --editor-type-color: theme("colors.violet.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.emerald.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 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 dark-editor-theme {
-  --editor-type-color: theme("colors.violet.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.emerald.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: #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: theme("colors.violet.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.emerald.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");
+  --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/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -11,7 +11,6 @@
    "connect": "Connect",
    "connecting": "Connecting",
    "copy": "Copy",
-    "create": "Create",
    "delete": "Delete",
    "disconnect": "Disconnect",
    "dismiss": "Dismiss",
@@ -41,7 +40,6 @@
    "scroll_to_top": "Scroll to top",
    "search": "Search",
    "send": "Send",
-    "share": "Share",
    "start": "Start",
    "starting": "Starting",
    "stop": "Stop",
@@ -80,7 +78,6 @@
    "contact_us": "Contact us",
    "cookies": "Cookies",
    "copy": "Copy",
-    "copy_interface_type": "Copy interface type",
    "copy_user_id": "Copy User Auth Token",
    "developer_option": "Developer options",
    "developer_option_description": "Developer tools which helps in development and maintenance of Hoppscotch.",
@@ -96,7 +93,6 @@
    "keyboard_shortcuts": "Keyboard shortcuts",
    "name": "Hoppscotch",
    "new_version_found": "New version found. Refresh to update.",
-    "open_in_hoppscotch": "Open in Hoppscotch",
    "options": "Options",
    "proxy_privacy_policy": "Proxy privacy policy",
    "reload": "Reload",
@@ -191,7 +187,6 @@
    "remove_folder": "Are you sure you want to permanently delete this folder?",
    "remove_history": "Are you sure you want to permanently delete all history?",
    "remove_request": "Are you sure you want to permanently delete this request?",
-    "remove_shared_request": "Are you sure you want to permanently delete this shared request?",
    "remove_team": "Are you sure you want to delete this team?",
    "remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
    "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
@@ -233,8 +228,7 @@
    "profile": "Login to view your profile",
    "protocols": "Protocols are empty",
    "schema": "Connect to a GraphQL endpoint to view schema",
-    "shared_requests_logout": "Login to view your shared requests or create a new one",
-    "shared_requests": "Shared requests are empty",
+    "shortcodes": "Shortcodes are empty",
    "subscription": "Subscriptions are empty",
    "team_name": "Team name empty",
    "teams": "You don't belong to any teams",
@@ -274,9 +268,6 @@
    "variable": "Variable",
    "variable_list": "Variable List"
  },
-  "graphql_collections": {
-    "title": "GraphQL Collections"
-  },
  "error": {
    "browser_support_sse": "This browser doesn't seems to have Server Sent Events support.",
    "check_console_details": "Check console log for details.",
@@ -312,8 +303,7 @@
    "create_secret_gist": "Create secret Gist",
    "gist_created": "Gist created",
    "require_github": "Login with GitHub to create secret gist",
-    "title": "Export",
-    "failed": "Something went wrong while exporting"
+    "title": "Export"
  },
  "filter": {
    "all": "All",
@@ -342,16 +332,20 @@
    "url": "URL"
  },
  "header": {
-    "install_pwa": "Install app",
+    "install_pwa": "Add to Home Screen",
    "login": "Login",
-    "save_workspace": "Save My Workspace"
+    "save_workspace": "Save My Workspace",
+    "download_app": "Download app",
+    "menu": "Menu",
+    "go_back": "Go back",
+    "go_forward": "Go forward"
  },
  "helpers": {
    "authorization": "The authorization header will be automatically generated when you send the request.",
    "generate_documentation_first": "Generate documentation first",
    "network_fail": "Unable to reach the API endpoint. Check your network connection or select a different Interceptor and try again.",
-    "offline": "You're using Hoppscotch offline. Updates will sync when you're online, based on workspace settings.",
-    "offline_short": "You're using Hoppscotch offline.",
+    "offline": "You seem to be offline. Data in this workspace might not be up to date.",
+    "offline_short": "You seem to be offline.",
    "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
    "pre_request_script": "Pre-request scripts are written in JavaScript, and are run before the request is sent.",
    "script_fail": "It seems there is a glitch in the pre-request script. Check the error below and fix the script accordingly.",
@@ -380,7 +374,6 @@
    "from_openapi_description": "Import from OpenAPI specification file (YML/JSON)",
    "from_postman": "Import from Postman",
    "from_postman_description": "Import from Postman collection",
-    "from_file": "Import from File",
    "from_url": "Import from URL",
    "gist_url": "Enter Gist URL",
    "import_from_url_invalid_fetch": "Couldn't get data from the url",
@@ -388,14 +381,7 @@
    "import_from_url_invalid_type": "Unsupported type. accepted values are 'hoppscotch', 'openapi', 'postman', 'insomnia'",
    "import_from_url_success": "Collections Imported",
    "json_description": "Import collections from a Hoppscotch Collections JSON file",
-    "title": "Import",
-    "hoppscotch_environment": "Hoppscotch Environment",
-    "hoppscotch_environment_description": "Import Hoppscotch Environment JSON file",
-    "postman_environment": "Postman Environment",
-    "postman_environment_description": "Import Postman Environment JSON file",
-    "environments_from_gist": "Import From Gist",
-    "environments_from_gist_description": "Import Hoppscotch Environments From Gist",
-    "gql_collections_from_gist_description": "Import GraphQL Collections From Gist"
+    "title": "Import"
  },
  "inspections": {
    "description": "Inspect possible errors",
@@ -432,9 +418,7 @@
    "close_unsaved_tab": "You have unsaved changes",
    "collections": "Collections",
    "confirm": "Confirm",
-    "customize_request": "Customize Request",
    "edit_request": "Edit Request",
-    "share_request": "Share Request",
    "import_export": "Import / Export"
  },
  "mqtt": {
@@ -510,6 +494,7 @@
      "structured": "Structured",
      "text": "Text"
    },
+    "copy_link": "Copy link",
    "different_collection": "Cannot reorder requests from different collections",
    "duplicated": "Request duplicated",
    "duration": "Duration",
@@ -542,7 +527,6 @@
    "saved": "Request saved",
    "share": "Share",
    "share_description": "Share Hoppscotch with your friends",
-    "share_request": "Share Request",
    "stop": "Stop",
    "title": "Request",
    "type": "Request type",
@@ -623,31 +607,14 @@
    "additional": "Additional Settings",
    "verify_email": "Verify email"
  },
-  "shared_requests": {
-    "button": "Button",
-    "button_info": "Create a 'Run in Hoppscotch' button for your website, blog or a README.",
-    "customize": "Customize",
-    "creating_widget": "Creating widget",
-    "copy_html": "Copy HTML",
-    "copy_link": "Copy Link",
-    "copy_markdown": "Copy Markdown",
-    "deleted": "Shared request deleted",
-    "description": "Select a widget, you can change and customize this later",
-    "embed": "Embed",
-    "embed_info": "Add a mini 'Hoppscotch API Playground' to your website, blog or documentation.",
-    "link": "Link",
-    "link_info": "Create a shareable link to share with anyone on the internet with view access.",
-    "modified": "Shared request modified",
-    "not_found": "Shared request not found",
-    "open_new_tab": "Open in new tab",
-    "preview": "Preview",
-    "run_in_hoppscotch": "Run in Hoppscotch",
-    "theme": {
-      "dark": "Dark",
-      "light": "Light",
-      "system": "System",
-      "title": "Theme"
-    }
+  "shortcodes": {
+    "actions": "Actions",
+    "created_on": "Created on",
+    "deleted": "Shortcode deleted",
+    "method": "Method",
+    "not_found": "Shortcode not found",
+    "short_code": "Short code",
+    "url": "URL"
  },
  "shortcut": {
    "general": {
@@ -677,6 +644,7 @@
      "title": "Others"
    },
    "request": {
+      "copy_request_link": "Copy Request Link",
      "delete_method": "Select DELETE method",
      "get_method": "Select GET method",
      "head_method": "Select HEAD method",
@@ -692,7 +660,6 @@
      "save_to_collections": "Save to Collections",
      "send_request": "Send Request",
      "show_code": "Generate code snippet",
-      "share_request": "Share Request",
      "title": "Request"
    },
    "response": {
@@ -817,7 +784,6 @@
    "connection_failed": "Connection failed",
    "connection_lost": "Connection lost",
    "copied_to_clipboard": "Copied to clipboard",
-    "copied_interface_to_clipboard": "Copied {language} interface type to clipboard",
    "deleted": "Deleted",
    "deprecated": "DEPRECATED",
    "disabled": "Disabled",
@@ -876,7 +842,6 @@
    "queries": "Queries",
    "query": "Query",
    "schema": "Schema",
-    "shared_requests": "Shared Requests",
    "socketio": "Socket.IO",
    "sse": "SSE",
    "tests": "Tests",
--- a/packages/hoppscotch-common/package.json
+++ b/packages/hoppscotch-common/package.json
@@ -22,41 +22,45 @@
  },
  "dependencies": {
    "@apidevtools/swagger-parser": "^10.1.0",
-    "@codemirror/autocomplete": "^6.11.0",
+    "@codemirror/autocomplete": "^6.10.2",
    "@codemirror/commands": "^6.3.0",
    "@codemirror/lang-javascript": "^6.2.1",
    "@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",
+    "@fontsource-variable/inter": "^5.0.8",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.7",
+    "@fontsource-variable/roboto-mono": "^5.0.9",
    "@hoppscotch/codemirror-lang-graphql": "workspace:^",
    "@hoppscotch/data": "workspace:^",
    "@hoppscotch/js-sandbox": "workspace:^",
    "@hoppscotch/ui": "workspace:^",
    "@hoppscotch/vue-toasted": "^0.1.0",
-    "@lezer/highlight": "1.2.0",
-    "@unhead/vue": "^1.8.8",
-    "@urql/core": "^4.2.0",
+    "@lezer/highlight": "1.1.4",
+    "@urql/core": "^4.1.1",
    "@urql/devtools": "^2.0.3",
    "@urql/exchange-auth": "^2.1.6",
-    "@urql/exchange-graphcache": "^6.3.3",
+    "@urql/exchange-graphcache": "^6.3.2",
    "@vitejs/plugin-legacy": "^4.1.1",
-    "@vueuse/core": "^10.6.1",
-    "acorn-walk": "^8.3.0",
-    "axios": "^1.6.2",
+    "@vueuse/core": "^10.3.0",
+    "@vueuse/head": "^1.3.1",
+    "acorn-walk": "^8.2.0",
+    "axios": "^1.4.0",
    "buffer": "^6.0.3",
    "cookie-es": "^1.0.0",
    "dioc": "workspace:^",
    "esprima": "^4.0.1",
    "events": "^3.3.0",
    "fp-ts": "^2.16.1",
+    "fuse.js": "^6.6.2",
    "globalthis": "^1.0.3",
-    "graphql": "^16.8.1",
-    "graphql-language-service-interface": "^2.10.2",
+    "graphql": "^16.8.0",
+    "graphql-language-service-interface": "^2.9.1",
    "graphql-tag": "^2.12.6",
    "httpsnippet": "^3.0.1",
    "insomnia-importers": "^3.6.0",
@@ -64,15 +68,14 @@
    "js-yaml": "^4.1.0",
    "jsonpath-plus": "^7.2.0",
    "lodash-es": "^4.17.21",
-    "lossless-json": "^3.0.2",
-    "minisearch": "^6.3.0",
+    "lossless-json": "^2.0.11",
+    "minisearch": "^6.1.0",
    "nprogress": "^0.2.0",
    "paho-mqtt": "^1.1.0",
    "path": "^0.12.7",
-    "postman-collection": "^4.3.0",
+    "postman-collection": "^4.2.0",
    "process": "^0.11.10",
    "qs": "^6.11.2",
-    "quicktype-core": "^23.0.79",
    "rxjs": "^7.8.1",
    "set-cookie-parser": "^2.6.0",
    "set-cookie-parser-es": "^1.0.5",
@@ -86,19 +89,19 @@
    "tern": "^0.24.3",
    "timers": "^0.1.1",
    "tippy.js": "^6.3.7",
-    "url": "^0.11.3",
+    "url": "^0.11.1",
    "util": "^0.12.5",
+    "uuid": "^9.0.0",
    "verzod": "^0.2.0",
-    "uuid": "^9.0.1",
-    "vue": "^3.3.8",
-    "vue-i18n": "^9.7.1",
-    "vue-pdf-embed": "^1.2.1",
-    "vue-router": "^4.2.5",
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.2.2",
+    "vue-pdf-embed": "^1.1.6",
+    "vue-router": "^4.2.4",
    "vue-tippy": "6.3.1",
    "vuedraggable-es": "^4.1.1",
    "wonka": "^6.3.4",
    "workbox-window": "^7.0.0",
-    "xml-formatter": "^3.6.0",
+    "xml-formatter": "^3.5.0",
    "yargs-parser": "^21.1.1",
    "zod": "^3.22.4"
  },
@@ -110,58 +113,57 @@
    "@graphql-codegen/typed-document-node": "^5.0.1",
    "@graphql-codegen/typescript": "^4.0.1",
    "@graphql-codegen/typescript-operations": "^4.0.1",
-    "@graphql-codegen/typescript-urql-graphcache": "^3.0.0",
-    "@graphql-codegen/urql-introspection": "^3.0.0",
+    "@graphql-codegen/typescript-urql-graphcache": "^2.4.5",
+    "@graphql-codegen/urql-introspection": "^2.2.1",
    "@graphql-typed-document-node/core": "^3.2.0",
-    "@iconify-json/lucide": "^1.1.141",
+    "@iconify-json/lucide": "^1.1.119",
    "@intlify/vite-plugin-vue-i18n": "^7.0.0",
    "@relmify/jest-fp-ts": "^2.1.1",
-    "@rushstack/eslint-patch": "^1.6.0",
-    "@types/har-format": "^1.2.15",
-    "@types/js-yaml": "^4.0.9",
-    "@types/lodash-es": "^4.17.12",
-    "@types/lossless-json": "^1.0.4",
-    "@types/nprogress": "^0.2.3",
-    "@types/paho-mqtt": "^1.0.10",
-    "@types/postman-collection": "^3.5.10",
-    "@types/splitpanes": "^2.2.6",
-    "@types/uuid": "^9.0.7",
-    "@types/yargs-parser": "^21.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "@vitejs/plugin-vue": "^4.5.0",
-    "@vue/compiler-sfc": "^3.3.8",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/runtime-core": "^3.3.8",
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@types/har-format": "^1.2.12",
+    "@types/js-yaml": "^4.0.5",
+    "@types/lodash-es": "^4.17.8",
+    "@types/lossless-json": "^1.0.1",
+    "@types/nprogress": "^0.2.0",
+    "@types/paho-mqtt": "^1.0.7",
+    "@types/postman-collection": "^3.5.7",
+    "@types/splitpanes": "^2.2.1",
+    "@types/uuid": "^9.0.2",
+    "@types/yargs-parser": "^21.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
+    "@vitejs/plugin-vue": "^4.3.1",
+    "@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.54.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-vue": "^9.18.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",
    "openapi-types": "^12.1.3",
    "postcss": "^8.4.23",
-    "prettier": "^3.1.0",
-    "prettier-plugin-tailwindcss": "^0.5.7",
-    "rollup-plugin-polyfill-node": "^0.13.0",
-    "sass": "^1.69.5",
+    "prettier-plugin-tailwindcss": "^0.5.6",
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "sass": "^1.66.0",
    "tailwindcss": "^3.3.2",
-    "typescript": "^5.3.2",
-    "unplugin-fonts": "^1.1.1",
-    "unplugin-icons": "^0.17.4",
-    "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.5.0",
-    "vite-plugin-checker": "^0.6.2",
-    "vite-plugin-fonts": "^0.7.0",
+    "typescript": "^5.1.6",
+    "unplugin-fonts": "^1.0.3",
+    "unplugin-icons": "^0.16.5",
+    "unplugin-vue-components": "^0.25.1",
+    "vite": "^4.4.9",
+    "vite-plugin-checker": "^0.6.1",
+    "vite-plugin-fonts": "^0.6.0",
    "vite-plugin-html-config": "^1.0.11",
-    "vite-plugin-inspect": "^0.7.42",
+    "vite-plugin-inspect": "^0.7.38",
    "vite-plugin-pages": "^0.31.0",
    "vite-plugin-pages-sitemap": "^1.6.1",
-    "vite-plugin-pwa": "^0.17.0",
+    "vite-plugin-pwa": "^0.16.4",
    "vite-plugin-vue-layouts": "^0.8.0",
-    "vitest": "^0.34.6",
-    "vue-tsc": "^1.8.22"
+    "vitest": "^0.34.2",
+    "vue-tsc": "^1.8.8"
  }
-}
+}
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -61,7 +61,6 @@ declare module 'vue' {
    CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
    CookiesAllModal: typeof import('./components/cookies/AllModal.vue')['default']
    CookiesEditCookie: typeof import('./components/cookies/EditCookie.vue')['default']
-    Embeds: typeof import('./components/embeds/index.vue')['default']
    Environments: typeof import('./components/environments/index.vue')['default']
    EnvironmentsAdd: typeof import('./components/environments/Add.vue')['default']
    EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
@@ -109,7 +108,6 @@ declare module 'vue' {
    HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
    HoppSmartRadio: typeof import('@hoppscotch/ui')['HoppSmartRadio']
    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
-    HoppSmartSelectWrapper: typeof import('@hoppscotch/ui')['HoppSmartSelectWrapper']
    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
@@ -162,14 +160,6 @@ declare module 'vue' {
    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']
-    IconLucideX: typeof import('~icons/lucide/x')['default']
-    ImportExportBase: typeof import('./components/importExport/Base.vue')['default']
-    ImportExportImportExportList: typeof import('./components/importExport/ImportExportList.vue')['default']
-    ImportExportImportExportSourcesList: typeof import('./components/importExport/ImportExportSourcesList.vue')['default']
-    ImportExportImportExportStepsFileImport: typeof import('./components/importExport/ImportExportSteps/FileImport.vue')['default']
-    ImportExportImportExportStepsMyCollectionImport: typeof import('./components/importExport/ImportExportSteps/MyCollectionImport.vue')['default']
-    ImportExportImportExportStepsUrlImport: typeof import('./components/importExport/ImportExportSteps/UrlImport.vue')['default']
    InterceptorsErrorPlaceholder: typeof import('./components/interceptors/ErrorPlaceholder.vue')['default']
    InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default']
    LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
@@ -193,16 +183,6 @@ declare module 'vue' {
    RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
    SettingsExtension: typeof import('./components/settings/Extension.vue')['default']
    SettingsProxy: typeof import('./components/settings/Proxy.vue')['default']
-    Share: typeof import('./components/share/index.vue')['default']
-    ShareCreateModal: typeof import('./components/share/CreateModal.vue')['default']
-    ShareCustomizeModal: typeof import('./components/share/CustomizeModal.vue')['default']
-    ShareModal: typeof import('./components/share/Modal.vue')['default']
-    ShareRequest: typeof import('./components/share/Request.vue')['default']
-    ShareRequestModal: typeof import('./components/share/RequestModal.vue')['default']
-    ShareShareRequestModal: typeof import('./components/share/ShareRequestModal.vue')['default']
-    ShareTemplatesButton: typeof import('./components/share/templates/Button.vue')['default']
-    ShareTemplatesEmbeds: typeof import('./components/share/templates/Embeds.vue')['default']
-    ShareTemplatesLink: typeof import('./components/share/templates/Link.vue')['default']
    SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
    SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default']
    SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default']
@@ -223,7 +203,6 @@ declare module 'vue' {
    SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default']
    SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default']
    SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default']
-    SmartSelectWrapper: typeof import('./../../hoppscotch-ui/src/components/smart/SelectWrapper.vue')['default']
    SmartSlideOver: typeof import('./../../hoppscotch-ui/src/components/smart/SlideOver.vue')['default']
    SmartSpinner: typeof import('./../../hoppscotch-ui/src/components/smart/Spinner.vue')['default']
    SmartTab: typeof import('./../../hoppscotch-ui/src/components/smart/Tab.vue')['default']
--- a/packages/hoppscotch-common/src/components/app/Banner.vue
+++ b/packages/hoppscotch-common/src/components/app/Banner.vue
@@ -1,23 +1,19 @@
 <template>
  <div
    :role="bannerRole"
-    class="flex items-center justify-between px-4 py-2 text-tiny text-secondaryDark"
+    class="flex items-center px-4 py-2 text-tiny"
    :class="bannerColor"
  >
-    <div class="flex items-center">
-      <component :is="bannerIcon" class="mr-2" />
-      <span :class="{ 'hidden sm:inline-flex': banner.alternateText }">
-        {{ banner.text(t) }}
-      </span>
-      <span v-if="banner.alternateText" class="inline-flex sm:hidden">
+    <component :is="bannerIcon" class="mr-2 text-white" />
+
+    <span class="text-white">
+      <span v-if="banner.alternateText" class="md:hidden">
        {{ banner.alternateText(t) }}
      </span>
-    </div>
-    <icon-lucide-x
-      v-if="dismissible"
-      class="opacity-50 hover:cursor-pointer hover:opacity-100"
-      @click="emit('dismiss')"
-    />
+      <span :class="banner.alternateText ? '<md:hidden' : ''">
+        {{ banner.text(t) }}
+      </span>
+    </span>
  </div>
 </template>

@@ -30,32 +26,22 @@ import IconAlertCircle from "~icons/lucide/alert-circle"
 import IconAlertTriangle from "~icons/lucide/alert-triangle"
 import IconInfo from "~icons/lucide/info"

-const props = withDefaults(
-  defineProps<{
-    banner: BannerContent
-    dismissible?: boolean
-  }>(),
-  {
-    dismissible: false,
-  }
-)
+const props = defineProps<{
+  banner: BannerContent
+}>()

 const t = useI18n()

-const emit = defineEmits<{
-  (e: "dismiss"): void
-}>()
-
 const ariaRoles: Record<BannerType, string> = {
-  info: "status",
-  warning: "status",
  error: "alert",
+  warning: "status",
+  info: "status",
 }

 const bgColors: Record<BannerType, string> = {
-  info: "bg-bannerInfo",
-  warning: "bg-bannerWarning",
-  error: "bg-bannerError",
+  error: "bg-red-700",
+  warning: "bg-yellow-700",
+  info: "bg-stone-800",
 }

 const icons = {
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/packages/hoppscotch-common/src/components/app/Header.vue
@@ -13,16 +13,38 @@
        }"
      >
        <div class="flex">
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('header.menu')"
+            :icon="IconMenu"
+            class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+          />
          <HoppButtonSecondary
            class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
            :label="t('app.name')"
            to="/"
          />
        </div>
+        <div class="flex">
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('header.go_back')"
+            :icon="IconArrowLeft"
+            class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+            @click="router.back()"
+          />
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('header.go_forward')"
+            :icon="IconArrowRight"
+            class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+            @click="router.forward()"
+          />
+        </div>
      </div>
      <div class="col-span-1 flex items-center justify-between space-x-2">
        <button
-          class="flex h-full flex-1 cursor-text items-center justify-between self-stretch rounded border border-dividerDark bg-primaryDark px-2 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 h-full flex-1 cursor-text items-center justify-between rounded border border-dividerDark bg-primaryDark px-2 text-secondaryLight transition 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">
@@ -37,14 +59,6 @@
      </div>
      <div class="col-span-2 flex items-center justify-between space-x-2">
        <div class="flex">
-          <HoppButtonSecondary
-            v-if="showInstallButton"
-            v-tippy="{ theme: 'tooltip' }"
-            :title="t('header.install_pwa')"
-            :icon="IconDownload"
-            class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-            @click="installPWA()"
-          />
          <HoppButtonSecondary
            v-tippy="{ theme: 'tooltip', allowHTML: true }"
            :title="`${
@@ -54,6 +68,41 @@
            class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
            @click="invokeAction('modals.support.toggle')"
          />
+          <span>
+            <tippy
+              interactive
+              trigger="click"
+              theme="popover"
+              :on-shown="() => downloadActions.focus()"
+            >
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('header.download_app')"
+                :icon="IconDownload"
+                class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+              />
+              <template #content="{ hide }">
+                <div
+                  ref="downloadActions"
+                  class="flex flex-col focus:outline-none"
+                  tabindex="0"
+                  @keyup.escape="hide()"
+                  @click="hide()"
+                >
+                  <HoppSmartItem
+                    :label="t('header.download_app')"
+                    :icon="IconDownload"
+                  />
+                  <HoppSmartItem
+                    v-if="showInstallButton"
+                    :label="t('header.install_pwa')"
+                    :icon="IconPlusSquare"
+                    @click="installPWA()"
+                  />
+                </div>
+              </template>
+            </tippy>
+          </span>
        </div>
        <div class="flex">
          <div
@@ -113,17 +162,13 @@
              theme="popover"
              :on-shown="() => accountActions.focus()"
            >
-              <HoppSmartSelectWrapper
-                class="!text-blue-500 !focus-visible:text-blue-600 !hover:text-blue-600"
-              >
-                <HoppButtonSecondary
-                  v-tippy="{ theme: 'tooltip' }"
-                  :title="t('workspace.change')"
-                  :label="mdAndLarger ? workspaceName : ``"
-                  :icon="workspace.type === 'personal' ? IconUser : IconUsers"
-                  class="!focus-visible:text-blue-600 !hover:text-blue-600 h-8 rounded border border-blue-600/25 bg-blue-500/10 pr-8 !text-blue-500 hover:border-blue-600/20 hover:bg-blue-600/20 focus-visible:border-blue-600/20 focus-visible:bg-blue-600/20"
-                />
-              </HoppSmartSelectWrapper>
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :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 h-8 rounded border border-blue-600/25 bg-blue-500/10 pr-8 !text-blue-500 hover:border-blue-600/20 hover:bg-blue-600/20 focus-visible:border-blue-600/20 focus-visible:bg-blue-600/20"
+              />
              <template #content="{ hide }">
                <div
                  ref="accountActions"
@@ -144,10 +189,15 @@
                :on-shown="() => tippyActions.focus()"
              >
                <HoppSmartPicture
+                  v-if="currentUser.photoURL"
                  v-tippy="{
                    theme: 'tooltip',
                  }"
-                  :name="currentUser.uid"
+                  :url="currentUser.photoURL"
+                  :alt="
+                    currentUser.displayName ||
+                    t('profile.default_hopp_displayname')
+                  "
                  :title="
                    currentUser.displayName ||
                    currentUser.email ||
@@ -155,7 +205,21 @@
                  "
                  indicator
                  :indicator-styles="
-                    network.isOnline ? 'bg-green-500' : 'bg-red-500'
+                    network.isOnline ? 'bg-emerald-500' : 'bg-red-500'
+                  "
+                />
+                <HoppSmartPicture
+                  v-else
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="
+                    currentUser.displayName ||
+                    currentUser.email ||
+                    t('profile.default_hopp_displayname')
+                  "
+                  :initial="currentUser.displayName || currentUser.email"
+                  indicator
+                  :indicator-styles="
+                    network.isOnline ? 'bg-emerald-500' : 'bg-red-500'
                  "
                />
                <template #content="{ hide }">
@@ -168,16 +232,14 @@
                    @keyup.l="logout.$el.click()"
                    @keyup.escape="hide()"
                  >
-                    <div class="flex flex-col px-2">
+                    <div class="flex flex-col px-2 text-tiny">
                      <span class="inline-flex truncate font-semibold">
                        {{
                          currentUser.displayName ||
                          t("profile.default_hopp_displayname")
                        }}
                      </span>
-                      <span
-                        class="inline-flex truncate text-secondaryLight text-tiny"
-                      >
+                      <span class="inline-flex truncate text-secondaryLight">
                        {{ currentUser.email }}
                      </span>
                    </div>
@@ -211,12 +273,7 @@
        </div>
      </div>
    </header>
-    <AppBanner
-      v-if="bannerContent"
-      :banner="bannerContent"
-      :dismissible="true"
-      @dismiss="dismissOfflineBanner"
-    />
+    <AppBanner v-if="bannerContent" :banner="bannerContent" />
    <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
    <TeamsInvite
      v-if="workspace.type === 'team' && workspace.teamID"
@@ -261,6 +318,10 @@ 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 IconPlusSquare from "~icons/lucide/plus-square"
+import IconArrowLeft from "~icons/lucide/arrow-left"
+import IconArrowRight from "~icons/lucide/arrow-right"
+import IconMenu from "~icons/lucide/align-left"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
@@ -269,9 +330,11 @@ import {
  BannerContent,
  BANNER_PRIORITY_HIGH,
 } from "~/services/banner.service"
+import { useRouter } from "vue-router"

 const t = useI18n()
 const toast = useToast()
+const router = useRouter()

 /**
 * Once the PWA code is initialized, this holds a method
@@ -291,7 +354,7 @@ const bannerContent = computed(() => banner.content.value?.content)
 let bannerID: number | null = null

 const offlineBanner: BannerContent = {
-  type: "warning",
+  type: "info",
  text: (t) => t("helpers.offline"),
  alternateText: (t) => t("helpers.offline_short"),
  score: BANNER_PRIORITY_HIGH,
@@ -305,14 +368,13 @@ watch(isOnline, () => {
  if (!isOnline.value) {
    bannerID = banner.showBanner(offlineBanner)
    return
-  }
-  if (banner.content && bannerID) {
-    banner.removeBanner(bannerID)
+  } else {
+    if (banner.content && bannerID) {
+      banner.removeBanner(bannerID)
+    }
  }
 })

-const dismissOfflineBanner = () => banner.removeBanner(bannerID!)
-
 const currentUser = useReadonlyStream(
  platform.auth.getProbableUserStream(),
  platform.auth.getProbableUser()
@@ -444,6 +506,7 @@ const profile = ref<any | null>(null)
 const settings = ref<any | null>(null)
 const logout = ref<any | null>(null)
 const accountActions = ref<any | null>(null)
+const downloadActions = ref<any | null>(null)

 defineActionHandler("modals.team.edit", handleTeamEdit)

--- a/packages/hoppscotch-common/src/components/app/Inspection.vue
+++ b/packages/hoppscotch-common/src/components/app/Inspection.vue
@@ -92,8 +92,9 @@ const getHighestSeverity = computed(() => {
      },
      { severity: 0 }
    )
+  } else {
+    return { severity: 0 }
  }
-  return { severity: 0 }
 })

 const severityColor = (severity: number) => {
--- a/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
@@ -9,8 +9,8 @@
  >
    <component
      :is="entry.icon"
-      class="svg-icons opacity-80"
-      :class="{ 'opacity-25': active }"
+      class="svg-icons opacity-50"
+      :class="{ 'opacity-100': active }"
    />
    <template
      v-if="entry.text.type === 'text' && typeof entry.text.text === 'string'"
@@ -82,9 +82,9 @@ const props = defineProps<{

 const formattedShortcutKeys = computed(
  () =>
-    props.entry.meta?.keyboardShortcut?.map(
-      (key) => SPECIAL_KEY_CHARS[key] ?? capitalize(key)
-    )
+    props.entry.meta?.keyboardShortcut?.map((key) => {
+      return SPECIAL_KEY_CHARS[key] ?? capitalize(key)
+    })
 )

 const emit = defineEmits<{
--- a/packages/hoppscotch-common/src/components/app/spotlight/index.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/index.vue
@@ -16,7 +16,7 @@
            autocomplete="off"
            name="command"
            :placeholder="`${t('app.type_a_command_search')}`"
-            class="flex flex-1 bg-transparent px-6 pt-5 pb-3 text-base text-secondaryDark"
+            class="flex flex-1 bg-transparent px-6 py-5 text-base text-secondaryDark"
          />
          <HoppSmartSpinner v-if="searchSession?.loading" class="mr-6" />
        </div>
@@ -112,7 +112,6 @@ import {
  WorkspaceSpotlightSearcherService,
 } from "~/services/spotlight/searchers/workspace.searcher"
 import { InterceptorSpotlightSearcherService } from "~/services/spotlight/searchers/interceptor.searcher"
-import { platform } from "~/platform"

 const t = useI18n()

@@ -142,10 +141,6 @@ useService(WorkspaceSpotlightSearcherService)
 useService(SwitchWorkspaceSpotlightSearcherService)
 useService(InterceptorSpotlightSearcherService)

-platform.spotlight?.additionalSearchers?.forEach((searcher) =>
-  useService(searcher)
-)
-
 const search = ref("")

 const searchSession = ref<SpotlightSearchState>()
--- a/packages/hoppscotch-common/src/components/collections/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/Collection.vue
@@ -14,14 +14,14 @@
    ></div>
    <div class="relative flex flex-col">
      <div
-        class="z-[1] pointer-events-none absolute inset-0 bg-accent opacity-0 transition"
+        class="z-1 pointer-events-none absolute inset-0 bg-accent opacity-0 transition"
        :class="{
          'opacity-25':
            dragging && notSameDestination && notSameParentDestination,
        }"
      ></div>
      <div
-        class="z-[3] group pointer-events-auto relative flex cursor-pointer items-stretch"
+        class="z-3 group pointer-events-auto relative flex cursor-pointer items-stretch"
        :draggable="!hasNoTeamAccess"
        @dragstart="dragStart"
        @drop="handelDrop($event)"
@@ -290,13 +290,13 @@ const collectionIcon = computed(() => {
  if (props.isSelected) return IconCheckCircle
  else if (!props.isOpen) return IconFolder
  else if (props.isOpen) return IconFolderOpen
-  return IconFolder
+  else return IconFolder
 })

 const collectionName = computed(() => {
  if ((props.data as HoppCollection<HoppRESTRequest>).name)
    return (props.data as HoppCollection<HoppRESTRequest>).name
-  return (props.data as TeamCollection).title
+  else return (props.data as TeamCollection).title
 })

 watch(
@@ -424,8 +424,9 @@ const isCollLoading = computed(() => {
    props.data.id
  ) {
    return collectionMoveLoading.includes(props.data.id)
+  } else {
+    return false
  }
-  return false
 })

 const resetDragState = () => {
--- a/packages/hoppscotch-common/src/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/ImportExport.vue
@@ -1,568 +1,361 @@
 <template>
-  <ImportExportBase
-    ref="collections-import-export"
-    modal-title="modal.collections"
-    :importer-modules="importerModules"
-    :exporter-modules="exporterModules"
-    @hide-modal="emit('hide-modal')"
-  />
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    :title="t('modal.collections')"
+    styles="sm:max-w-md"
+    @close="hideModal"
+  >
+    <template #actions>
+      <HoppButtonSecondary
+        v-if="importerType !== null"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.go_back')"
+        :icon="IconArrowLeft"
+        @click="resetImport"
+      />
+    </template>
+    <template #body>
+      <div v-if="importerType !== null" class="flex flex-col">
+        <div class="flex flex-col pb-4">
+          <div
+            v-for="(step, index) in importerSteps"
+            :key="`step-${index}`"
+            class="flex flex-col space-y-8"
+          >
+            <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="{
+                    '!text-green-500': hasFile,
+                  }"
+                >
+                  <icon-lucide-check-circle class="svg-icons" />
+                </span>
+                <span>
+                  {{ t(`${step.metadata.caption}`) }}
+                </span>
+              </p>
+              <p
+                class="ml-10 flex flex-col rounded border border-dashed 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"
+                  :accept="step.metadata.acceptedFileTypes"
+                  @change="onFileChange"
+                />
+              </p>
+            </div>
+            <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="{
+                    '!text-green-500': hasGist,
+                  }"
+                >
+                  <icon-lucide-check-circle class="svg-icons" />
+                </span>
+                <span>
+                  {{ t(`${step.metadata.caption}`) }}
+                </span>
+              </p>
+              <p class="ml-10 flex flex-col">
+                <input
+                  v-model="inputChooseGistToImportFrom"
+                  type="url"
+                  class="input"
+                  :placeholder="`${t('import.gist_url')}`"
+                />
+              </p>
+            </div>
+            <div
+              v-else-if="step.name === 'TARGET_MY_COLLECTION'"
+              class="flex flex-col"
+            >
+              <div class="select-wrapper">
+                <select
+                  v-model="mySelectedCollectionID"
+                  autocomplete="off"
+                  class="select"
+                  autofocus
+                >
+                  <option :key="undefined" :value="undefined" disabled selected>
+                    {{ t("collection.select") }}
+                  </option>
+                  <option
+                    v-for="(collection, collectionIndex) in myCollections"
+                    :key="`collection-${collectionIndex}`"
+                    :value="collectionIndex"
+                    class="bg-primary"
+                  >
+                    {{ collection.name }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <HoppButtonPrimary
+          :label="t('import.title')"
+          :disabled="enableImportButton"
+          :loading="importingMyCollections"
+          @click="finishImport"
+        />
+      </div>
+      <div v-else class="flex flex-col">
+        <HoppSmartExpand>
+          <template #body>
+            <HoppSmartItem
+              v-for="(importer, index) in importerModules"
+              :key="`importer-${index}`"
+              :icon="importer.icon"
+              :label="t(`${importer.name}`)"
+              @click="importerType = index"
+            />
+          </template>
+        </HoppSmartExpand>
+        <hr />
+        <div class="flex flex-col space-y-2">
+          <HoppSmartItem
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('action.download_file')"
+            :icon="IconDownload"
+            :loading="exportingTeamCollections"
+            :label="t('export.as_json')"
+            @click="emit('export-json-collection')"
+          />
+          <span
+            v-if="platform.platformFeatureFlags.exportAsGIST"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              !currentUser
+                ? `${t('export.require_github')}`
+                : currentUser.provider !== 'github.com'
+                ? `${t('export.require_github')}`
+                : undefined
+            "
+            class="flex"
+          >
+            <HoppSmartItem
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              :icon="IconGithub"
+              :loading="creatingGistCollection"
+              :label="t('export.create_secret_gist')"
+              @click="emit('create-collection-gist')"
+            />
+          </span>
+        </div>
+      </div>
+    </template>
+  </HoppSmartModal>
 </template>

 <script setup lang="ts">
-import * as E from "fp-ts/Either"
-import { FileSource } from "~/helpers/import-export/import/import-sources/FileSource"
-import { UrlSource } from "~/helpers/import-export/import/import-sources/UrlSource"
-
-import IconFile from "~icons/lucide/file"
-
-import {
-  hoppRESTImporter,
-  hoppInsomniaImporter,
-  hoppPostmanImporter,
-  toTeamsImporter,
-  hoppOpenAPIImporter,
-} from "~/helpers/import-export/import/importers"
-
-import { defineStep } from "~/composables/step-components"
-import { PropType, computed, ref } from "vue"
-
-import { useI18n } from "~/composables/i18n"
-import { useToast } from "~/composables/toast"
-import { HoppCollection } from "@hoppscotch/data"
-import { HoppRESTRequest } from "@hoppscotch/data"
-import { appendRESTCollections, restCollections$ } from "~/newstore/collections"
-import MyCollectionImport from "~/components/importExport/ImportExportSteps/MyCollectionImport.vue"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-
-import IconFolderPlus from "~icons/lucide/folder-plus"
-import IconOpenAPI from "~icons/lucide/file"
-import IconPostman from "~icons/hopp/postman"
-import IconInsomnia from "~icons/hopp/insomnia"
+import IconArrowLeft from "~icons/lucide/arrow-left"
+import IconDownload from "~icons/lucide/download"
 import IconGithub from "~icons/lucide/github"
-import IconLink from "~icons/lucide/link"
-
-import IconUser from "~icons/lucide/user"
-import { useReadonlyStream } from "~/composables/stream"
-
-import { getTeamCollectionJSON } from "~/helpers/backend/helpers"
-
+import { computed, PropType, ref, watch } from "vue"
+import { pipe } from "fp-ts/function"
+import * as E from "fp-ts/Either"
+import { HoppRESTRequest, HoppCollection } from "@hoppscotch/data"
+import { useI18n } from "@composables/i18n"
+import { useReadonlyStream } from "@composables/stream"
+import { useToast } from "@composables/toast"
 import { platform } from "~/platform"
+import { appendRESTCollections, restCollections$ } from "~/newstore/collections"
+import { RESTCollectionImporters } from "~/helpers/import-export/import/importers"
+import { StepReturnValue } from "~/helpers/import-export/steps"

-import { initializeDownloadCollection } from "~/helpers/import-export/export"
-import { collectionsGistExporter } from "~/helpers/import-export/export/gistExport"
-import { myCollectionsExporter } from "~/helpers/import-export/export/myCollections"
-import { teamCollectionsExporter } from "~/helpers/import-export/export/teamCollections"
-
-import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
-import { ImporterOrExporter } from "~/components/importExport/types"
-
-const t = useI18n()
 const toast = useToast()
+const t = useI18n()

-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
-type CollectionType =
-  | {
-      type: "team-collections"
-      selectedTeam: SelectedTeam
-    }
-  | { type: "my-collections" }
+type CollectionType = "team-collections" | "my-collections"

 const props = defineProps({
-  collectionsType: {
-    type: Object as PropType<CollectionType>,
-    default: () => ({
-      type: "my-collections",
-      selectedTeam: undefined,
-    }),
+  show: {
+    type: Boolean,
+    default: false,
    required: true,
  },
+  collectionsType: {
+    type: String as PropType<CollectionType>,
+    default: "my-collections",
+    required: true,
+  },
+  exportingTeamCollections: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  creatingGistCollection: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  importingMyCollections: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
 })

+const emit = defineEmits<{
+  (e: "hide-modal"): void
+  (e: "update-team-collections"): void
+  (e: "export-json-collection"): void
+  (e: "create-collection-gist"): void
+  (e: "import-to-teams", payload: HoppCollection<HoppRESTRequest>[]): void
+}>()
+
+const hasFile = ref(false)
+const hasGist = ref(false)
+
+const importerType = ref<number | null>(null)
+
+const stepResults = ref<StepReturnValue[]>([])
+
+const inputChooseFileToImportFrom = ref<HTMLInputElement | any>()
+const mySelectedCollectionID = ref<number | undefined>(undefined)
+const inputChooseGistToImportFrom = ref<string>("")
+
+const importerModules = computed(() =>
+  RESTCollectionImporters.filter(
+    (i) => i.applicableTo?.includes(props.collectionsType) ?? true
+  )
+)
+
+const importerModule = computed(() => {
+  if (importerType.value === null) return null
+  return importerModules.value[importerType.value]
+})
+
+const importerSteps = computed(() => importerModule.value?.steps ?? null)
+
+const enableImportButton = computed(
+  () => !(stepResults.value.length === importerSteps.value?.length)
+)
+
+watch(mySelectedCollectionID, (newValue) => {
+  if (newValue === undefined) return
+  stepResults.value = []
+  stepResults.value.push(newValue)
+})
+
+watch(inputChooseGistToImportFrom, (url) => {
+  stepResults.value = []
+  if (url === "") {
+    hasGist.value = false
+  } else {
+    hasGist.value = true
+    stepResults.value.push(inputChooseGistToImportFrom.value)
+  }
+})
+
+const myCollections = useReadonlyStream(restCollections$, [])
 const currentUser = useReadonlyStream(
  platform.auth.getCurrentUserStream(),
  platform.auth.getCurrentUser()
 )

-const showImportFailedError = () => {
-  toast.error(t("import.failed"))
-}
+const importerAction = async (stepResults: StepReturnValue[]) => {
+  if (!importerModule.value) return

-const handleImportToStore = async (
-  collections: HoppCollection<HoppRESTRequest>[]
-) => {
-  const importResult =
-    props.collectionsType.type === "my-collections"
-      ? await importToPersonalWorkspace(collections)
-      : await importToTeamsWorkspace(collections)
+  pipe(
+    await importerModule.value.importer(stepResults as any)(),
+    E.match(
+      (err) => {
+        failedImport()
+        console.error("error", err)
+      },
+      (result) => {
+        if (props.collectionsType === "team-collections") {
+          emit("import-to-teams", result)
+        } else {
+          appendRESTCollections(result)

-  if (E.isRight(importResult)) {
-    toast.success(t("state.file_imported"))
-    emit("hide-modal")
-  } else {
-    toast.error(t("import.failed"))
-  }
-}
+          platform.analytics?.logEvent({
+            type: "HOPP_IMPORT_COLLECTION",
+            importer: importerModule.value!.name,
+            platform: "rest",
+            workspaceType: "personal",
+          })

-const importToPersonalWorkspace = (
-  collections: HoppCollection<HoppRESTRequest>[]
-) => {
-  appendRESTCollections(collections)
-  return E.right({
-    success: true,
-  })
-}
-
-const importToTeamsWorkspace = async (
-  collections: HoppCollection<HoppRESTRequest>[]
-) => {
-  if (!hasTeamWriteAccess.value || !selectedTeamID.value) {
-    return E.left({
-      success: false,
-    })
-  }
-
-  const res = await toTeamsImporter(
-    JSON.stringify(collections),
-    selectedTeamID.value
-  )()
-
-  return E.isRight(res)
-    ? E.right({ success: true })
-    : E.left({
-        success: false,
-      })
-}
-
-const emit = defineEmits<{
-  (e: "hide-modal"): () => void
-}>()
-
-const isHoppMyCollectionExporterInProgress = ref(false)
-const isHoppTeamCollectionExporterInProgress = ref(false)
-const isHoppGistCollectionExporterInProgress = ref(false)
-
-const isTeamWorkspace = computed(() => {
-  return props.collectionsType.type === "team-collections"
-})
-
-const HoppRESTImporter: ImporterOrExporter = {
-  metadata: {
-    id: "hopp_rest",
-    name: "import.from_json",
-    title: "import.from_json_description",
-    icon: IconFolderPlus,
-    disabled: false,
-    applicableTo: ["personal-workspace", "team-workspace", "url-import"],
-  },
-  component: FileSource({
-    caption: "import.from_file",
-    acceptedFileTypes: ".json",
-    onImportFromFile: async (content) => {
-      const res = await hoppRESTImporter(content)()
-
-      if (E.isRight(res)) {
-        handleImportToStore(res.right)
-
-        platform.analytics?.logEvent({
-          type: "HOPP_IMPORT_COLLECTION",
-          importer: "import.from_json",
-          platform: "rest",
-          workspaceType: isTeamWorkspace.value ? "team" : "personal",
-        })
-      } else {
-        showImportFailedError()
-      }
-    },
-  }),
-}
-
-const HoppMyCollectionImporter: ImporterOrExporter = {
-  metadata: {
-    id: "hopp_my_collection",
-    name: "import.from_my_collections",
-    title: "import.from_my_collections_description",
-    icon: IconUser,
-    disabled: false,
-    applicableTo: ["team-workspace"],
-  },
-  component: defineStep("my_collection_import", MyCollectionImport, () => ({
-    async onImportFromMyCollection(content) {
-      handleImportToStore([content])
-
-      // our analytics consider this as an export event, so keeping compatibility with that
-      platform.analytics?.logEvent({
-        type: "HOPP_EXPORT_COLLECTION",
-        exporter: "import_to_teams",
-        platform: "rest",
-      })
-    },
-  })),
-}
-
-const HoppOpenAPIImporter: ImporterOrExporter = {
-  metadata: {
-    id: "hopp_openapi",
-    name: "import.from_openapi",
-    title: "import.from_openapi_description",
-    icon: IconOpenAPI,
-    disabled: false,
-    applicableTo: ["personal-workspace", "team-workspace", "url-import"],
-  },
-  supported_sources: [
-    {
-      id: "file_import",
-      name: "import.from_file",
-      icon: IconFile,
-      step: FileSource({
-        caption: "import.from_file",
-        acceptedFileTypes: ".json, .yaml, .yml",
-        onImportFromFile: async (content) => {
-          const res = await hoppOpenAPIImporter(content)()
-
-          if (E.isRight(res)) {
-            handleImportToStore(res.right)
-
-            platform.analytics?.logEvent({
-              platform: "rest",
-              type: "HOPP_IMPORT_COLLECTION",
-              importer: "import.from_openapi",
-              workspaceType: isTeamWorkspace.value ? "team" : "personal",
-            })
-          } else {
-            showImportFailedError()
-          }
-        },
-      }),
-    },
-    {
-      id: "url_import",
-      name: "import.from_url",
-      icon: IconLink,
-      step: UrlSource({
-        caption: "import.from_url",
-        onImportFromURL: async (content) => {
-          const res = await hoppOpenAPIImporter(content)()
-
-          if (E.isRight(res)) {
-            handleImportToStore(res.right)
-
-            platform.analytics?.logEvent({
-              platform: "rest",
-              type: "HOPP_IMPORT_COLLECTION",
-              importer: "import.from_openapi",
-              workspaceType: isTeamWorkspace.value ? "team" : "personal",
-            })
-          } else {
-            showImportFailedError()
-          }
-        },
-      }),
-    },
-  ],
-}
-
-const HoppPostmanImporter: ImporterOrExporter = {
-  metadata: {
-    id: "hopp_postman",
-    name: "import.from_postman",
-    title: "import.from_postman_description",
-    icon: IconPostman,
-    disabled: false,
-    applicableTo: ["personal-workspace", "team-workspace", "url-import"],
-  },
-  component: FileSource({
-    caption: "import.from_file",
-    acceptedFileTypes: ".json",
-    onImportFromFile: async (content) => {
-      const res = await hoppPostmanImporter(content)()
-
-      if (E.isRight(res)) {
-        handleImportToStore(res.right)
-
-        platform.analytics?.logEvent({
-          platform: "rest",
-          type: "HOPP_IMPORT_COLLECTION",
-          importer: "import.from_postman",
-          workspaceType: isTeamWorkspace.value ? "team" : "personal",
-        })
-      } else {
-        showImportFailedError()
-      }
-    },
-  }),
-}
-
-const HoppInsomniaImporter: ImporterOrExporter = {
-  metadata: {
-    id: "hopp_insomnia",
-    name: "import.from_insomnia",
-    title: "import.from_insomnia_description",
-    icon: IconInsomnia,
-    disabled: true,
-    applicableTo: ["personal-workspace", "team-workspace", "url-import"],
-  },
-  component: FileSource({
-    caption: "import.from_file",
-    acceptedFileTypes: ".json",
-    onImportFromFile: async (content) => {
-      const res = await hoppInsomniaImporter(content)()
-
-      if (E.isRight(res)) {
-        handleImportToStore(res.right)
-
-        platform.analytics?.logEvent({
-          platform: "rest",
-          type: "HOPP_IMPORT_COLLECTION",
-          importer: "import.from_insomnia",
-          workspaceType: isTeamWorkspace.value ? "team" : "personal",
-        })
-      } else {
-        showImportFailedError()
-      }
-    },
-  }),
-}
-
-const HoppGistImporter: ImporterOrExporter = {
-  metadata: {
-    id: "hopp_gist",
-    name: "import.from_gist",
-    title: "import.from_gist_description",
-    icon: IconGithub,
-    disabled: true,
-    applicableTo: ["personal-workspace", "team-workspace", "url-import"],
-  },
-  component: GistSource({
-    caption: "import.from_url",
-    onImportFromGist: async (content) => {
-      if (E.isLeft(content)) {
-        showImportFailedError()
-        return
-      }
-
-      const res = await hoppRESTImporter(content.right)()
-
-      if (E.isRight(res)) {
-        handleImportToStore(res.right)
-
-        platform.analytics?.logEvent({
-          platform: "rest",
-          type: "HOPP_IMPORT_COLLECTION",
-          importer: "import.from_gist",
-          workspaceType: isTeamWorkspace.value ? "team" : "personal",
-        })
-      } else {
-        showImportFailedError()
-      }
-    },
-  }),
-}
-
-const HoppMyCollectionsExporter: ImporterOrExporter = {
-  metadata: {
-    id: "hopp_my_collections",
-    name: "export.as_json",
-    title: "action.download_file",
-    icon: IconUser,
-    disabled: false,
-    applicableTo: ["personal-workspace"],
-    isLoading: isHoppMyCollectionExporterInProgress,
-  },
-  action: () => {
-    if (!myCollections.value.length) {
-      return toast.error(t("error.no_collections_to_export"))
-    }
-
-    isHoppMyCollectionExporterInProgress.value = true
-
-    const message = initializeDownloadCollection(
-      myCollectionsExporter(myCollections.value),
-      "Collections"
-    )
-
-    if (E.isRight(message)) {
-      toast.success(t(message.right))
-
-      platform.analytics?.logEvent({
-        type: "HOPP_EXPORT_COLLECTION",
-        exporter: "json",
-        platform: "rest",
-      })
-    }
-
-    isHoppMyCollectionExporterInProgress.value = false
-  },
-}
-
-const HoppTeamCollectionsExporter: ImporterOrExporter = {
-  metadata: {
-    id: "hopp_team_collections",
-    name: "export.as_json",
-    title: "export.as_json_description",
-    icon: IconUser,
-    disabled: false,
-    applicableTo: ["team-workspace"],
-    isLoading: isHoppTeamCollectionExporterInProgress,
-  },
-  action: async () => {
-    isHoppTeamCollectionExporterInProgress.value = true
-
-    if (
-      props.collectionsType.type === "team-collections" &&
-      props.collectionsType.selectedTeam
-    ) {
-      const res = await teamCollectionsExporter(
-        props.collectionsType.selectedTeam.id
-      )
-
-      if (E.isRight(res)) {
-        const { exportCollectionsToJSON } = res.right
-
-        if (!JSON.parse(exportCollectionsToJSON).length) {
-          isHoppTeamCollectionExporterInProgress.value = false
-
-          return toast.error(t("error.no_collections_to_export"))
+          fileImported()
        }
-
-        initializeDownloadCollection(
-          exportCollectionsToJSON,
-          "team-collections"
-        )
-
-        platform.analytics?.logEvent({
-          type: "HOPP_EXPORT_COLLECTION",
-          exporter: "json",
-          platform: "rest",
-        })
-      } else {
-        toast.error(res.left.error.toString())
      }
-    }
-
-    isHoppTeamCollectionExporterInProgress.value = false
-  },
+    )
+  )
 }

-const HoppGistCollectionsExporter: ImporterOrExporter = {
-  metadata: {
-    id: "create_secret_gist",
-    name: "export.create_secret_gist",
-    icon: IconGithub,
-    disabled: !currentUser.value
-      ? true
-      : currentUser.value.provider !== "github.com",
-    title: t("export.create_secret_gist"),
-    applicableTo: ["personal-workspace", "team-workspace"],
-    isLoading: isHoppGistCollectionExporterInProgress,
-  },
-  action: async () => {
-    isHoppGistCollectionExporterInProgress.value = true
+const finishImport = async () => {
+  await importerAction(stepResults.value)
+}

-    const collectionJSON = await getCollectionJSON()
-    const accessToken = currentUser.value?.accessToken
+const onFileChange = () => {
+  stepResults.value = []

-    if (!accessToken) {
-      toast.error(t("error.something_went_wrong"))
-      isHoppGistCollectionExporterInProgress.value = false
+  const inputFileToImport = inputChooseFileToImportFrom.value[0]
+
+  if (!inputFileToImport) {
+    hasFile.value = false
+    return
+  }
+
+  if (!inputFileToImport.files || inputFileToImport.files.length === 0) {
+    inputChooseFileToImportFrom.value[0].value = ""
+    hasFile.value = false
+    toast.show(t("action.choose_file").toString())
+    return
+  }
+
+  const reader = new FileReader()
+
+  reader.onload = ({ target }) => {
+    const content = target!.result as string | null
+    if (!content) {
+      hasFile.value = false
+      toast.show(t("action.choose_file").toString())
      return
    }

-    if (E.isRight(collectionJSON)) {
-      collectionsGistExporter(collectionJSON.right, accessToken)
+    stepResults.value.push(content)
+    hasFile.value = !!content?.length
+  }

-      platform.analytics?.logEvent({
-        type: "HOPP_EXPORT_COLLECTION",
-        exporter: "gist",
-        platform: "rest",
-      })
-    }
-
-    isHoppGistCollectionExporterInProgress.value = false
-  },
+  reader.readAsText(inputFileToImport.files[0])
 }

-const importerModules = computed(() => {
-  const enabledImporters = [
-    HoppRESTImporter,
-    HoppMyCollectionImporter,
-    HoppOpenAPIImporter,
-    HoppPostmanImporter,
-    HoppInsomniaImporter,
-    HoppGistImporter,
-  ]
+const fileImported = () => {
+  toast.success(t("state.file_imported").toString())
+  hideModal()
+}
+const failedImport = () => {
+  toast.error(t("import.failed").toString())
+}
+const hideModal = () => {
+  resetImport()
+  emit("hide-modal")
+}

-  const isTeams = props.collectionsType.type === "team-collections"
-
-  return enabledImporters.filter((importer) => {
-    return isTeams
-      ? importer.metadata.applicableTo.includes("team-workspace")
-      : importer.metadata.applicableTo.includes("personal-workspace")
-  })
-})
-
-const exporterModules = computed(() => {
-  const enabledExporters = [
-    HoppMyCollectionsExporter,
-    HoppTeamCollectionsExporter,
-  ]
-
-  if (platform.platformFeatureFlags.exportAsGIST) {
-    enabledExporters.push(HoppGistCollectionsExporter)
-  }
-
-  return enabledExporters.filter((exporter) => {
-    return exporter.metadata.applicableTo.includes(
-      props.collectionsType.type === "my-collections"
-        ? "personal-workspace"
-        : "team-workspace"
-    )
-  })
-})
-
-const hasTeamWriteAccess = computed(() => {
-  const { collectionsType } = props
-
-  const isTeamCollection = collectionsType.type === "team-collections"
-
-  if (!isTeamCollection || !collectionsType.selectedTeam) {
-    return false
-  }
-
-  return (
-    collectionsType.selectedTeam.myRole === "EDITOR" ||
-    collectionsType.selectedTeam.myRole === "OWNER"
-  )
-})
-
-const selectedTeamID = computed(() => {
-  const { collectionsType } = props
-
-  return collectionsType.type === "team-collections"
-    ? collectionsType.selectedTeam?.id
-    : undefined
-})
-
-const myCollections = useReadonlyStream(restCollections$, [])
-
-const getCollectionJSON = async () => {
-  if (
-    props.collectionsType.type === "team-collections" &&
-    props.collectionsType.selectedTeam?.id
-  ) {
-    const res = await getTeamCollectionJSON(
-      props.collectionsType.selectedTeam?.id
-    )
-
-    return E.isRight(res)
-      ? E.right(res.right.exportCollectionsToJSON)
-      : E.left(res.left)
-  }
-
-  if (props.collectionsType.type === "my-collections") {
-    return E.right(JSON.stringify(myCollections.value, null, 2))
-  }
-
-  return E.left("INVALID_SELECTED_TEAM_OR_INVALID_COLLECTION_TYPE")
+const resetImport = () => {
+  importerType.value = null
+  hasFile.value = false
+  hasGist.value = false
+  stepResults.value = []
+  inputChooseFileToImportFrom.value = ""
+  inputChooseGistToImportFrom.value = ""
+  mySelectedCollectionID.value = undefined
 }
 </script>
--- a/packages/hoppscotch-common/src/components/collections/MyCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
@@ -222,12 +222,6 @@
                  requestIndex: pathToIndex(node.id),
                })
            "
-            @share-request="
-              node.data.type === 'requests' &&
-                emit('share-request', {
-                  request: node.data.data.data,
-                })
-            "
            @drag-request="
              dragRequest($event, {
                folderPath: node.data.data.parentIndex,
@@ -466,12 +460,6 @@ const emit = defineEmits<{
      isActive: boolean
    }
  ): void
-  (
-    event: "share-request",
-    payload: {
-      request: HoppRESTRequest
-    }
-  ): void
  (
    event: "drop-request",
    payload: {
@@ -538,12 +526,13 @@ const isSelected = ({
      props.picked.folderPath === folderPath &&
      props.picked.requestIndex === requestIndex
    )
+  } else {
+    return (
+      props.picked &&
+      props.picked.pickedType === "my-folder" &&
+      props.picked.folderPath === folderPath
+    )
  }
-  return (
-    props.picked &&
-    props.picked.pickedType === "my-folder" &&
-    props.picked.folderPath === folderPath
-  )
 }

 const tabs = useService(RESTTabService)
@@ -740,10 +729,11 @@ class MyCollectionsAdapter implements SmartTreeAdapter<MyCollectionNode> {
          status: "loaded",
          data: data,
        } as ChildrenResult<Folder | Requests>
-      }
-      return {
-        status: "loaded",
-        data: [],
+      } else {
+        return {
+          status: "loaded",
+          data: [],
+        }
      }
    })
  }
--- a/packages/hoppscotch-common/src/components/collections/Request.vue
+++ b/packages/hoppscotch-common/src/components/collections/Request.vue
@@ -28,7 +28,8 @@
      >
        <span
          class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
-          :style="{ color: getMethodLabelColorClassOf(request) }"
+          :class="requestLabelColor"
+          :style="{ color: requestLabelColor }"
        >
          <component
            :is="IconCheckCircle"
@@ -93,7 +94,6 @@
                @keyup.e="edit?.$el.click()"
                @keyup.d="duplicate?.$el.click()"
                @keyup.delete="deleteAction?.$el.click()"
-                @keyup.s="shareAction?.$el.click()"
                @keyup.escape="hide()"
              >
                <HoppSmartItem
@@ -133,18 +133,6 @@
                    }
                  "
                />
-                <HoppSmartItem
-                  ref="shareAction"
-                  :icon="IconShare2"
-                  :label="t('action.share')"
-                  :shortcut="['S']"
-                  @click="
-                    () => {
-                      emit('share-request')
-                      hide()
-                    }
-                  "
-                />
              </div>
            </template>
          </tippy>
@@ -174,7 +162,6 @@ import IconEdit from "~icons/lucide/edit"
 import IconCopy from "~icons/lucide/copy"
 import IconTrash2 from "~icons/lucide/trash-2"
 import IconRotateCCW from "~icons/lucide/rotate-ccw"
-import IconShare2 from "~icons/lucide/share-2"
 import { ref, PropType, watch, computed } from "vue"
 import { HoppRESTRequest } from "@hoppscotch/data"
 import { useI18n } from "@composables/i18n"
@@ -253,7 +240,6 @@ const emit = defineEmits<{
  (event: "duplicate-request"): void
  (event: "remove-request"): void
  (event: "select-request"): void
-  (event: "share-request"): void
  (event: "drag-request", payload: DataTransfer): void
  (event: "update-request-order", payload: DataTransfer): void
  (event: "update-last-request-order", payload: DataTransfer): void
@@ -264,7 +250,6 @@ const edit = ref<HTMLButtonElement | null>(null)
 const deleteAction = ref<HTMLButtonElement | null>(null)
 const options = ref<TippyComponent | null>(null)
 const duplicate = ref<HTMLButtonElement | null>(null)
-const shareAction = ref<HTMLButtonElement | null>(null)

 const dragging = ref(false)
 const ordering = ref(false)
@@ -276,6 +261,10 @@ const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
  parentID: "",
 })

+const requestLabelColor = computed(() =>
+  getMethodLabelColorClassOf(props.request)
+)
+
 watch(
  () => props.duplicateLoading,
  (val) => {
@@ -374,8 +363,9 @@ const updateLastItemOrder = (e: DragEvent) => {
 const isRequestLoading = computed(() => {
  if (props.requestMoveLoading.length > 0 && props.requestID) {
    return props.requestMoveLoading.includes(props.requestID)
+  } else {
+    return false
  }
-  return false
 })

 const resetDragState = () => {
--- a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
@@ -141,8 +141,9 @@ const reqName = computed(() => {
    return props.request.name
  } else if (props.mode === "rest") {
    return restRequestName.value
+  } else {
+    return gqlRequestName.value
  }
-  return gqlRequestName.value
 })

 const requestName = ref(reqName.value)
@@ -479,20 +480,21 @@ const getErrorMessage = (err: GQLError<string>) => {
  console.error(err)
  if (err.type === "network_error") {
    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_coll/short_title":
-      return t("collection.name_length_insufficient")
-    case "team/invalid_coll_id":
-      return t("team.invalid_id")
-    case "team/not_required_role":
-      return t("profile.no_permission")
-    case "team_req/not_required_role":
-      return t("profile.no_permission")
-    case "Forbidden resource":
-      return t("profile.no_permission")
-    default:
-      return t("error.something_went_wrong")
+  } else {
+    switch (err.error) {
+      case "team_coll/short_title":
+        return t("collection.name_length_insufficient")
+      case "team/invalid_coll_id":
+        return t("team.invalid_id")
+      case "team/not_required_role":
+        return t("profile.no_permission")
+      case "team_req/not_required_role":
+        return t("profile.no_permission")
+      case "Forbidden resource":
+        return t("profile.no_permission")
+      default:
+        return t("error.something_went_wrong")
+    }
  }
 }
 </script>
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -15,12 +15,12 @@
        class="!rounded-none"
        :icon="IconPlus"
        :title="t('team.no_access')"
-        :label="t('action.new')"
+        :label="t('add.new')"
      />
      <HoppButtonSecondary
        v-else
        :icon="IconPlus"
-        :label="t('action.new')"
+        :label="t('add.new')"
        class="!rounded-none"
        @click="emit('display-modal-add')"
      />
@@ -240,12 +240,6 @@
                  requestIndex: node.data.data.data.id,
                })
            "
-            @share-request="
-              node.data.type === 'requests' &&
-                emit('share-request', {
-                  request: node.data.data.data.request,
-                })
-            "
            @drag-request="
              dragRequest($event, {
                folderPath: node.data.data.parentIndex,
@@ -479,12 +473,6 @@ const emit = defineEmits<{
      folderPath?: string | undefined
    }
  ): void
-  (
-    event: "share-request",
-    payload: {
-      request: HoppRESTRequest
-    }
-  ): void
  (
    event: "drop-request",
    payload: {
@@ -554,12 +542,13 @@ const isSelected = ({
      props.picked.pickedType === "teams-request" &&
      props.picked.requestID === requestID
    )
+  } else {
+    return (
+      props.picked &&
+      props.picked.pickedType === "teams-folder" &&
+      props.picked.folderID === folderID
+    )
  }
-  return (
-    props.picked &&
-    props.picked.pickedType === "teams-folder" &&
-    props.picked.folderID === folderID
-  )
 }

 const active = computed(() => tabs.currentActiveTab.value.document.saveContext)
@@ -725,77 +714,81 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
          return {
            status: "loading",
          }
-        }
-        const data = this.data.value.map((item, index) => ({
-          id: item.id,
-          data: {
-            isLastItem: index === this.data.value.length - 1,
-            type: "collections",
+        } else {
+          const data = this.data.value.map((item, index) => ({
+            id: item.id,
            data: {
-              parentIndex: null,
-              data: item,
+              isLastItem: index === this.data.value.length - 1,
+              type: "collections",
+              data: {
+                parentIndex: null,
+                data: item,
+              },
            },
-          },
-        }))
-        return {
-          status: "loaded",
-          data: cloneDeep(data),
-        } as ChildrenResult<TeamCollections>
-      }
-      const parsedID = id.split("/")[id.split("/").length - 1]
-
-      !props.teamLoadingCollections.includes(parsedID) &&
-        emit("expand-team-collection", parsedID)
-
-      if (props.teamLoadingCollections.includes(parsedID)) {
-        return {
-          status: "loading",
+          }))
+          return {
+            status: "loaded",
+            data: cloneDeep(data),
+          } as ChildrenResult<TeamCollections>
+        }
+      } else {
+        const parsedID = id.split("/")[id.split("/").length - 1]
+
+        !props.teamLoadingCollections.includes(parsedID) &&
+          emit("expand-team-collection", parsedID)
+
+        if (props.teamLoadingCollections.includes(parsedID)) {
+          return {
+            status: "loading",
+          }
+        } else {
+          const items = this.findCollInTree(this.data.value, parsedID)
+          if (items) {
+            const data = [
+              ...(items.children
+                ? items.children.map((item, index) => ({
+                    id: `${id}/${item.id}`,
+                    data: {
+                      isLastItem:
+                        items.children && items.children.length > 1
+                          ? index === items.children.length - 1
+                          : false,
+                      type: "folders",
+                      data: {
+                        parentIndex: parsedID,
+                        data: item,
+                      },
+                    },
+                  }))
+                : []),
+              ...(items.requests
+                ? items.requests.map((item, index) => ({
+                    id: `${id}/${item.id}`,
+                    data: {
+                      isLastItem:
+                        items.requests && items.requests.length > 1
+                          ? index === items.requests.length - 1
+                          : false,
+                      type: "requests",
+                      data: {
+                        parentIndex: parsedID,
+                        data: item,
+                      },
+                    },
+                  }))
+                : []),
+            ]
+            return {
+              status: "loaded",
+              data: cloneDeep(data),
+            } as ChildrenResult<TeamFolder | TeamRequests>
+          } else {
+            return {
+              status: "loaded",
+              data: [],
+            }
+          }
        }
-      }
-      const items = this.findCollInTree(this.data.value, parsedID)
-      if (items) {
-        const data = [
-          ...(items.children
-            ? items.children.map((item, index) => ({
-                id: `${id}/${item.id}`,
-                data: {
-                  isLastItem:
-                    items.children && items.children.length > 1
-                      ? index === items.children.length - 1
-                      : false,
-                  type: "folders",
-                  data: {
-                    parentIndex: parsedID,
-                    data: item,
-                  },
-                },
-              }))
-            : []),
-          ...(items.requests
-            ? items.requests.map((item, index) => ({
-                id: `${id}/${item.id}`,
-                data: {
-                  isLastItem:
-                    items.requests && items.requests.length > 1
-                      ? index === items.requests.length - 1
-                      : false,
-                  type: "requests",
-                  data: {
-                    parentIndex: parsedID,
-                    data: item,
-                  },
-                },
-              }))
-            : []),
-        ]
-        return {
-          status: "loaded",
-          data: cloneDeep(data),
-        } as ChildrenResult<TeamFolder | TeamRequests>
-      }
-      return {
-        status: "loaded",
-        data: [],
      }
    })
  }
--- a/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
@@ -271,7 +271,7 @@ const collectionIcon = computed(() => {
  if (isSelected.value) return IconCheckCircle
  else if (!showChildren.value && !props.isFiltered) return IconFolder
  else if (!showChildren.value || props.isFiltered) return IconFolderOpen
-  return IconFolder
+  else return IconFolder
 })

 const pick = () => {
--- a/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
@@ -253,7 +253,7 @@ const collectionIcon = computed(() => {
  if (isSelected.value) return IconCheckCircle
  else if (!showChildren.value && !props.isFiltered) return IconFolder
  else if (showChildren.value || !props.isFiltered) return IconFolderOpen
-  return IconFolder
+  else return IconFolder
 })

 const pick = () => {
--- a/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
@@ -1,227 +1,299 @@
 <template>
-  <ImportExportBase
-    ref="collections-import-export"
-    modal-title="graphql_collections.title"
-    :importer-modules="importerModules"
-    :exporter-modules="exporterModules"
-    @hide-modal="emit('hide-modal')"
-  />
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    :title="`${t('modal.collections')}`"
+    styles="sm:max-w-md"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
+        <tippy interactive trigger="click" theme="popover">
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('action.more')"
+            :icon="IconMoreVertical"
+            :on-shown="() => tippyActions.focus()"
+          />
+          <template #content="{ hide }">
+            <div
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
+              tabindex="0"
+              @keyup.escape="hide()"
+            >
+              <HoppSmartItem
+                :icon="IconGithub"
+                :label="t('import.from_gist')"
+                @click="
+                  () => {
+                    readCollectionGist()
+                    hide()
+                  }
+                "
+              />
+              <span
+                v-tippy="{ theme: 'tooltip' }"
+                :title="
+                  !currentUser
+                    ? `${t('export.require_github')}`
+                    : currentUser.provider !== 'github.com'
+                    ? `${t('export.require_github')}`
+                    : undefined
+                "
+              >
+                <HoppSmartItem
+                  :disabled="
+                    !currentUser
+                      ? true
+                      : currentUser.provider !== 'github.com'
+                      ? true
+                      : false
+                  "
+                  :icon="IconGithub"
+                  :label="t('export.create_secret_gist')"
+                  @click="
+                    () => {
+                      createCollectionGist()
+                      hide()
+                    }
+                  "
+                />
+              </span>
+            </div>
+          </template>
+        </tippy>
+      </span>
+    </template>
+    <template #body>
+      <div class="flex flex-col space-y-2">
+        <HoppSmartItem
+          :icon="IconFolderPlus"
+          :label="t('import.from_json')"
+          @click="openDialogChooseFileToImportFrom"
+        />
+        <input
+          ref="inputChooseFileToImportFrom"
+          class="input"
+          type="file"
+          accept="application/json"
+          @change="importFromJSON"
+        />
+        <hr />
+        <HoppSmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.download_file')"
+          :icon="IconDownload"
+          :label="t('export.as_json')"
+          @click="exportJSON"
+        />
+      </div>
+    </template>
+  </HoppSmartModal>
 </template>

 <script setup lang="ts">
-import { useI18n } from "~/composables/i18n"
-import { useToast } from "~/composables/toast"
-import { HoppCollection, HoppGQLRequest } from "@hoppscotch/data"
-import { ImporterOrExporter } from "~/components/importExport/types"
-import { FileSource } from "~/helpers/import-export/import/import-sources/FileSource"
-import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
-
-import * as E from "fp-ts/Either"
-
+import axios from "axios"
+import IconMoreVertical from "~icons/lucide/more-vertical"
 import IconFolderPlus from "~icons/lucide/folder-plus"
-import IconUser from "~icons/lucide/user"
-import { initializeDownloadCollection } from "~/helpers/import-export/export"
-import { useReadonlyStream } from "~/composables/stream"
-
+import IconDownload from "~icons/lucide/download"
+import IconGithub from "~icons/lucide/github"
+import { computed, ref } from "vue"
 import { platform } from "~/platform"
+import { useI18n } from "@composables/i18n"
+import { useReadonlyStream } from "@composables/stream"
+import { useToast } from "@composables/toast"
 import {
  graphqlCollections$,
  setGraphqlCollections,
+  appendGraphqlCollections,
 } from "~/newstore/collections"
-import { hoppGqlCollectionsImporter } from "~/helpers/import-export/import/hoppGql"
-import { gqlCollectionsExporter } from "~/helpers/import-export/export/gqlCollections"
-import { gqlCollectionsGistExporter } from "~/helpers/import-export/export/gqlCollectionsGistExporter"
-import { computed } from "vue"

-const t = useI18n()
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
 const toast = useToast()
-
+const t = useI18n()
+const collections = useReadonlyStream(graphqlCollections$, [])
 const currentUser = useReadonlyStream(
  platform.auth.getCurrentUserStream(),
  platform.auth.getCurrentUser()
 )

-const GqlCollectionsHoppImporter: ImporterOrExporter = {
-  metadata: {
-    id: "import.from_json",
-    name: "import.from_json",
-    icon: IconFolderPlus,
-    title: "import.from_json",
-    applicableTo: ["personal-workspace"],
-    disabled: false,
-  },
-  component: FileSource({
-    acceptedFileTypes: "application/json",
-    caption: "import.from_json_description",
-    onImportFromFile: async (gqlCollections) => {
-      const res = await hoppGqlCollectionsImporter(gqlCollections)
+// Template refs
+const tippyActions = ref<any | null>(null)
+const inputChooseFileToImportFrom = ref<HTMLInputElement>()

-      if (E.isLeft(res)) {
-        showImportFailedError()
-        return
-      }
-
-      handleImportToStore(res.right)
-
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_COLLECTION",
-        platform: "gql",
-        workspaceType: "personal",
-        importer: "json",
-      })
-
-      emit("hide-modal")
-    },
-  }),
-}
-
-const GqlCollectionsGistImporter: ImporterOrExporter = {
-  metadata: {
-    id: "import.from_gist",
-    name: "import.from_gist",
-    icon: IconFolderPlus,
-    title: "import.from_gist",
-    applicableTo: ["personal-workspace", "team-workspace"],
-    disabled: false,
-  },
-  component: GistSource({
-    caption: "import.gql_collections_from_gist_description",
-    onImportFromGist: async (gqlCollections) => {
-      if (E.isLeft(gqlCollections)) {
-        showImportFailedError()
-        return
-      }
-
-      const res = await hoppGqlCollectionsImporter(gqlCollections.right)
-
-      if (E.isLeft(res)) {
-        showImportFailedError()
-        return
-      }
-
-      handleImportToStore(res.right)
-
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_COLLECTION",
-        platform: "gql",
-        workspaceType: "personal",
-        importer: "gist",
-      })
-
-      emit("hide-modal")
-    },
-  }),
-}
-
-const gqlCollections = useReadonlyStream(graphqlCollections$, [])
-
-const GqlCollectionsHoppExporter: ImporterOrExporter = {
-  metadata: {
-    id: "export.as_json",
-    name: "export.as_json",
-    title: "action.download_file",
-    icon: IconUser,
-    disabled: false,
-    applicableTo: ["personal-workspace", "team-workspace"],
-  },
-  action: () => {
-    if (!gqlCollections.value.length) {
-      return toast.error(t("error.no_collections_to_export"))
-    }
-
-    const message = initializeDownloadCollection(
-      gqlCollectionsExporter(gqlCollections.value),
-      "GQLCollections"
-    )
-
-    if (E.isLeft(message)) {
-      toast.error(t("export.failed"))
-      return
-    }
-
-    toast.success(message.right)
-
-    platform.analytics?.logEvent({
-      type: "HOPP_EXPORT_COLLECTION",
-      platform: "gql",
-      exporter: "json",
-    })
-  },
-}
-
-const GqlCollectionsGistExporter: ImporterOrExporter = {
-  metadata: {
-    id: "export.as_gist",
-    name: "export.create_secret_gist",
-    title: !currentUser
-      ? "export.require_github"
-      : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        currentUser.provider !== "github.com"
-        ? `export.require_github`
-        : "export.create_secret_gist",
-    icon: IconUser,
-    disabled: !currentUser.value
-      ? true
-      : currentUser.value.provider !== "github.com",
-    applicableTo: ["personal-workspace"],
-  },
-  action: async () => {
-    if (!currentUser.value) {
-      toast.error(t("profile.no_permission"))
-      return
-    }
-
-    const accessToken = currentUser.value?.accessToken
-
-    if (accessToken) {
-      const res = await gqlCollectionsGistExporter(
-        JSON.stringify(gqlCollections.value),
-        accessToken
-      )
-
-      if (E.isLeft(res)) {
-        toast.error(t("export.failed"))
-        return
-      }
-
-      toast.success(t("export.success"))
-
-      platform.analytics?.logEvent({
-        type: "HOPP_EXPORT_COLLECTION",
-        platform: "gql",
-        exporter: "gist",
-      })
-
-      window.open(res.right, "_blank")
-    }
-  },
-}
-
-const importerModules = [GqlCollectionsHoppImporter, GqlCollectionsGistImporter]
-
-const exporterModules = computed(() => {
-  const modules = [GqlCollectionsHoppExporter]
-
-  if (platform.platformFeatureFlags.exportAsGIST) {
-    modules.push(GqlCollectionsGistExporter)
-  }
-
-  return modules
+const collectionJson = computed(() => {
+  return JSON.stringify(collections.value, null, 2)
 })

-const showImportFailedError = () => {
-  toast.error(t("import.failed"))
+const createCollectionGist = async () => {
+  if (!currentUser.value) {
+    toast.error(t("profile.no_permission").toString())
+
+    return
+  }
+
+  try {
+    const res = await axios.post(
+      "https://api.github.com/gists",
+      {
+        files: {
+          "hoppscotch-collections.json": {
+            content: collectionJson.value,
+          },
+        },
+      },
+      {
+        headers: {
+          Authorization: `token ${currentUser.value.accessToken}`,
+          Accept: "application/vnd.github.v3+json",
+        },
+      }
+    )
+
+    toast.success(t("export.gist_created").toString())
+    window.open(res.data.html_url)
+  } catch (e) {
+    toast.error(t("error.something_went_wrong").toString())
+    console.error(e)
+  }
 }

-const handleImportToStore = async (
-  gqlCollections: HoppCollection<HoppGQLRequest>[]
-) => {
-  setGraphqlCollections(gqlCollections)
-  toast.success(t("import.success"))
+const fileImported = () => {
+  toast.success(t("state.file_imported").toString())
 }

-const emit = defineEmits<{
-  (e: "hide-modal"): () => void
-}>()
+const failedImport = () => {
+  toast.error(t("import.failed").toString())
+}
+
+const readCollectionGist = async () => {
+  const gist = prompt(t("import.gist_url").toString())
+  if (!gist) return
+
+  try {
+    const { files } = (await axios.get(
+      `https://api.github.com/gists/${gist.split("/").pop()}`,
+      {
+        headers: {
+          Accept: "application/vnd.github.v3+json",
+        },
+      }
+    )) as {
+      files: {
+        [fileName: string]: {
+          content: any
+        }
+      }
+    }
+
+    const collections = JSON.parse(Object.values(files)[0].content)
+    setGraphqlCollections(collections)
+    fileImported()
+  } catch (e) {
+    failedImport()
+    console.error(e)
+  }
+}
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+
+const openDialogChooseFileToImportFrom = () => {
+  if (inputChooseFileToImportFrom.value)
+    inputChooseFileToImportFrom.value.click()
+}
+
+const importFromJSON = () => {
+  if (!inputChooseFileToImportFrom.value) return
+
+  if (
+    !inputChooseFileToImportFrom.value.files ||
+    inputChooseFileToImportFrom.value.files.length === 0
+  ) {
+    toast.show(t("action.choose_file").toString())
+    return
+  }
+
+  const reader = new FileReader()
+
+  reader.onload = ({ target }) => {
+    const content = target!.result as string | null
+
+    if (!content) {
+      toast.show(t("action.choose_file").toString())
+      return
+    }
+
+    const collections = JSON.parse(content)
+    if (collections[0]) {
+      const [name, folders, requests] = Object.keys(collections[0])
+      if (name === "name" && folders === "folders" && requests === "requests") {
+        // Do nothing
+      }
+    } else {
+      failedImport()
+      return
+    }
+    appendGraphqlCollections(collections)
+
+    platform.analytics?.logEvent({
+      type: "HOPP_IMPORT_COLLECTION",
+      importer: "json",
+      workspaceType: "personal",
+      platform: "gql",
+    })
+
+    fileImported()
+  }
+  reader.readAsText(inputChooseFileToImportFrom.value.files[0])
+  inputChooseFileToImportFrom.value.value = ""
+}
+
+const exportJSON = async () => {
+  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 url = URL.createObjectURL(file)
+
+  const filename = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+
+  URL.revokeObjectURL(url)
+
+  const result = await platform.io.saveFileWithDialog({
+    data: dataToWrite,
+    contentType: "application/json",
+    suggestedFilename: filename,
+    filters: [
+      {
+        name: "Hoppscotch Collection JSON file",
+        extensions: ["json"],
+      },
+    ],
+  })
+
+  if (result.type === "unknown" || result.type === "saved") {
+    platform?.analytics?.logEvent({
+      type: "HOPP_EXPORT_COLLECTION",
+      exporter: "json",
+      platform: "gql",
+    })
+
+    toast.success(t("state.download_started").toString())
+  }
+}
 </script>
--- a/packages/hoppscotch-common/src/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
@@ -137,7 +137,7 @@
      @hide-modal="displayModalEditRequest(false)"
    />
    <CollectionsGraphqlImportExport
-      v-if="showModalImportExport"
+      :show="showModalImportExport"
      @hide-modal="displayModalImportExport(false)"
    />
  </div>
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -11,7 +11,7 @@
    @dragend="draggingToRoot = false"
  >
    <div
-      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary border-b border-dividerLight"
+      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
      :class="{ 'rounded-t': saveRequest }"
      :style="
        saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
@@ -22,7 +22,7 @@
        v-model="filterTexts"
        type="search"
        autocomplete="off"
-        class="flex w-full bg-transparent px-4 py-2"
+        class="flex h-8 w-full bg-transparent p-4 py-2"
        :placeholder="t('action.search')"
        :disabled="collectionsType.type === 'team-collections'"
      />
@@ -41,7 +41,6 @@
      @export-data="exportData"
      @remove-collection="removeCollection"
      @remove-folder="removeFolder"
-      @share-request="shareRequest"
      @drop-collection="dropCollection"
      @update-request-order="updateRequestOrder"
      @update-collection-order="updateCollectionOrder"
@@ -72,7 +71,6 @@
      @export-data="exportData"
      @remove-collection="removeCollection"
      @remove-folder="removeFolder"
-      @share-request="shareRequest"
      @edit-request="editRequest"
      @duplicate-request="duplicateRequest"
      @remove-request="removeRequest"
@@ -140,13 +138,17 @@
      @hide-modal="showConfirmModal = false"
      @resolve="resolveConfirmModal"
    />
-
    <CollectionsImportExport
-      v-if="showModalImportExport"
-      :collections-type="collectionsType"
+      :show="showModalImportExport"
+      :collections-type="collectionsType.type"
+      :exporting-team-collections="exportingTeamCollections"
+      :creating-gist-collection="creatingGistCollection"
+      :importing-my-collections="importingMyCollections"
+      @export-json-collection="exportJSONCollection"
+      @create-collection-gist="createCollectionGist"
+      @import-to-teams="importToTeams"
      @hide-modal="displayModalImportExport(false)"
    />
-
    <TeamsAdd
      :show="showTeamModalAdd"
      @hide-modal="displayTeamModalAdd(false)"
@@ -195,6 +197,7 @@ import {
  createChildCollection,
  renameCollection,
  deleteCollection,
+  importJSONToTeam,
  moveRESTTeamCollection,
  updateOrderRESTTeamCollection,
 } from "~/helpers/backend/mutations/TeamCollection"
@@ -209,9 +212,12 @@ import { TeamCollection } from "~/helpers/teams/TeamCollection"
 import { Collection as NodeCollection } from "./MyCollections.vue"
 import {
  getCompleteCollectionTree,
+  getTeamCollectionJSON,
  teamCollToHoppRESTColl,
 } from "~/helpers/backend/helpers"
+import * as E from "fp-ts/Either"
 import { platform } from "~/platform"
+import { createCollectionGists } from "~/helpers/gist"
 import {
  getRequestsByPath,
  resolveSaveContextOnRequestReorder,
@@ -223,7 +229,7 @@ import {
  resetTeamRequestsContext,
 } from "~/helpers/collection/collection"
 import { currentReorderingStatus$ } from "~/newstore/reordering"
-import { defineActionHandler, invokeAction } from "~/helpers/actions"
+import { defineActionHandler } from "~/helpers/actions"
 import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
 import { RESTTabService } from "~/services/tab/rest"
@@ -297,6 +303,12 @@ const draggingToRoot = ref(false)
 const collectionMoveLoading = ref<string[]>([])
 const requestMoveLoading = ref<string[]>([])

+// Export - Import refs
+const collectionJSON = ref("")
+const exportingTeamCollections = ref(false)
+const creatingGistCollection = ref(false)
+const importingMyCollections = ref(false)
+
 // TeamList-Adapter
 const workspaceService = useService(WorkspaceService)
 const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
@@ -400,12 +412,14 @@ const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
 })

 const hasTeamWriteAccess = computed(() => {
-  if (collectionsType.value.type !== "team-collections") {
-    return false
-  }
+  if (!collectionsType.value.selectedTeam) return false

-  const role = collectionsType.value.selectedTeam?.myRole
-  return role === "OWNER" || role === "EDITOR"
+  if (
+    collectionsType.value.type === "team-collections" &&
+    collectionsType.value.selectedTeam.myRole !== "VIEWER"
+  )
+    return true
+  else return false
 })

 const filteredCollections = computed(() => {
@@ -1055,7 +1069,7 @@ const onRemoveCollection = () => {
    const collectionIndex = editingCollectionIndex.value

    const collectionToRemove =
-      collectionIndex || collectionIndex === 0
+      collectionIndex || collectionIndex == 0
        ? navigateToFolderWithIndexPath(restCollectionStore.value.state, [
            collectionIndex,
          ])
@@ -1454,8 +1468,9 @@ const checkIfCollectionIsAParentOfTheChildren = (
    )
    if (isEqual(slicedDestinationCollectionPath, collectionDraggedPath)) {
      return true
+    } else {
+      return false
    }
-    return false
  }

  return false
@@ -1476,8 +1491,9 @@ const isMoveToSameLocation = (

    if (isEqual(draggedItemParentPathArr, destinationPathArr)) {
      return true
+    } else {
+      return false
    }
-    return false
  }
 }

@@ -1657,22 +1673,25 @@ const isSameSameParent = (
    const dragedItemParent = draggedItemIndex.slice(0, -1)

    return dragedItemParent.join("/") === destinationCollectionIndex
-  }
-  if (destinationItemPath === null) return false
-  const destinationItemIndex = pathToIndex(destinationItemPath)
+  } else {
+    if (destinationItemPath === null) return false
+    const destinationItemIndex = pathToIndex(destinationItemPath)

-  // length of 1 means the request is in the root
-  if (draggedItemIndex.length === 1 && destinationItemIndex.length === 1) {
-    return true
-  } else if (draggedItemIndex.length === destinationItemIndex.length) {
-    const dragedItemParent = draggedItemIndex.slice(0, -1)
-    const destinationItemParent = destinationItemIndex.slice(0, -1)
-    if (isEqual(dragedItemParent, destinationItemParent)) {
+    // length of 1 means the request is in the root
+    if (draggedItemIndex.length === 1 && destinationItemIndex.length === 1) {
      return true
+    } else if (draggedItemIndex.length === destinationItemIndex.length) {
+      const dragedItemParent = draggedItemIndex.slice(0, -1)
+      const destinationItemParent = destinationItemIndex.slice(0, -1)
+      if (isEqual(dragedItemParent, destinationItemParent)) {
+        return true
+      } else {
+        return false
+      }
+    } else {
+      return false
    }
-    return false
  }
-  return false
 }

 /**
@@ -1814,6 +1833,33 @@ const updateCollectionOrder = (payload: {
  }
 }
 // Import - Export Collection functions
+/**
+ * Export the whole my collection or specific team collection to JSON
+ */
+const getJSONCollection = async () => {
+  if (collectionsType.value.type === "my-collections") {
+    collectionJSON.value = JSON.stringify(myCollections.value, null, 2)
+  } else {
+    if (!collectionsType.value.selectedTeam) return
+    exportingTeamCollections.value = true
+    pipe(
+      await getTeamCollectionJSON(collectionsType.value.selectedTeam.id),
+      E.match(
+        (err) => {
+          toast.error(`${getErrorMessage(err)}`)
+          exportingTeamCollections.value = false
+        },
+        (result) => {
+          const { exportCollectionsToJSON } = result
+          collectionJSON.value = exportCollectionsToJSON
+          exportingTeamCollections.value = false
+        }
+      )
+    )
+  }
+
+  return collectionJSON.value
+}

 /**
 * Create a downloadable file from a collection and prompts the user to download it.
@@ -1882,15 +1928,88 @@ const exportData = async (
  }
 }

-const shareRequest = ({ request }: { request: HoppRESTRequest }) => {
-  if (currentUser.value) {
-    // opens the share request modal
-    invokeAction("share.request", {
-      request,
-    })
-  } else {
-    invokeAction("modals.login.toggle")
+const exportJSONCollection = async () => {
+  platform.analytics?.logEvent({
+    type: "HOPP_EXPORT_COLLECTION",
+    exporter: "json",
+    platform: "rest",
+  })
+
+  await getJSONCollection()
+
+  const parsedCollections = JSON.parse(collectionJSON.value)
+
+  if (!parsedCollections.length) {
+    return toast.error(t("error.no_collections_to_export"))
  }
+
+  initializeDownloadCollection(collectionJSON.value, null)
+}
+
+const createCollectionGist = async () => {
+  if (!currentUser.value || !currentUser.value.accessToken) {
+    toast.error(t("profile.no_permission").toString())
+    return
+  }
+
+  platform.analytics?.logEvent({
+    type: "HOPP_EXPORT_COLLECTION",
+    exporter: "gist",
+    platform: "rest",
+  })
+
+  creatingGistCollection.value = true
+  await getJSONCollection()
+
+  pipe(
+    createCollectionGists(collectionJSON.value, currentUser.value.accessToken),
+    TE.match(
+      (err) => {
+        toast.error(t("error.something_went_wrong").toString())
+        console.error(err)
+        creatingGistCollection.value = false
+      },
+      (result) => {
+        toast.success(t("export.gist_created").toString())
+        creatingGistCollection.value = false
+        window.open(result.data.html_url)
+      }
+    )
+  )()
+}
+
+const importToTeams = async (collection: HoppCollection<HoppRESTRequest>[]) => {
+  if (!hasTeamWriteAccess.value) {
+    toast.error(t("team.no_access").toString())
+    return
+  }
+
+  if (!collectionsType.value.selectedTeam) return
+
+  importingMyCollections.value = true
+
+  platform.analytics?.logEvent({
+    type: "HOPP_EXPORT_COLLECTION",
+    exporter: "import-to-teams",
+    platform: "rest",
+  })
+
+  pipe(
+    importJSONToTeam(
+      JSON.stringify(collection),
+      collectionsType.value.selectedTeam.id
+    ),
+    TE.match(
+      (err: GQLError<string>) => {
+        toast.error(`${getErrorMessage(err)}`)
+        importingMyCollections.value = false
+      },
+      () => {
+        importingMyCollections.value = false
+        displayModalImportExport(false)
+      }
+    )
+  )()
 }

 const resolveConfirmModal = (title: string | null) => {
@@ -1922,36 +2041,37 @@ const getErrorMessage = (err: GQLError<string>) => {
  console.error(err)
  if (err.type === "network_error") {
    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_coll/short_title":
-      return t("collection.name_length_insufficient")
-    case "team/invalid_coll_id":
-    case "bug/team_coll/no_coll_id":
-    case "team_req/invalid_target_id":
-      return t("team.invalid_coll_id")
-    case "team/not_required_role":
-      return t("profile.no_permission")
-    case "team_req/not_required_role":
-      return t("profile.no_permission")
-    case "Forbidden resource":
-      return t("profile.no_permission")
-    case "team_req/not_found":
-      return t("team.no_request_found")
-    case "bug/team_req/no_req_id":
-      return t("team.no_request_found")
-    case "team/collection_is_parent_coll":
-      return t("team.parent_coll_move")
-    case "team/target_and_destination_collection_are_same":
-      return t("team.same_target_destination")
-    case "team/target_collection_is_already_root_collection":
-      return t("collection.invalid_root_move")
-    case "team_req/requests_not_from_same_collection":
-      return t("request.different_collection")
-    case "team/team_collections_have_different_parents":
-      return t("collection.different_parent")
-    default:
-      return t("error.something_went_wrong")
+  } else {
+    switch (err.error) {
+      case "team_coll/short_title":
+        return t("collection.name_length_insufficient")
+      case "team/invalid_coll_id":
+      case "bug/team_coll/no_coll_id":
+      case "team_req/invalid_target_id":
+        return t("team.invalid_coll_id")
+      case "team/not_required_role":
+        return t("profile.no_permission")
+      case "team_req/not_required_role":
+        return t("profile.no_permission")
+      case "Forbidden resource":
+        return t("profile.no_permission")
+      case "team_req/not_found":
+        return t("team.no_request_found")
+      case "bug/team_req/no_req_id":
+        return t("team.no_request_found")
+      case "team/collection_is_parent_coll":
+        return t("team.parent_coll_move")
+      case "team/target_and_destination_collection_are_same":
+        return t("team.same_target_destination")
+      case "team/target_collection_is_already_root_collection":
+        return t("collection.invalid_root_move")
+      case "team_req/requests_not_from_same_collection":
+        return t("request.different_collection")
+      case "team/team_collections_have_different_parents":
+        return t("collection.different_parent")
+      default:
+        return t("error.something_went_wrong")
+    }
  }
 }

--- a/packages/hoppscotch-common/src/components/embeds/index.vue
+++ b/packages/hoppscotch-common/src/components/embeds/index.vue
@@ -1,206 +0,0 @@
-<template>
-  <div class="flex flex-col flex-1">
-    <header
-      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="flex items-center justify-between flex-1 space-x-2">
-        <HoppButtonSecondary
-          class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
-          :label="t('app.name')"
-          to="https://hoppscotch.io"
-          blank
-        />
-        <div class="flex">
-          <HoppButtonSecondary
-            :label="t('app.open_in_hoppscotch')"
-            :to="sharedRequestURL"
-            blank
-          />
-        </div>
-      </div>
-    </header>
-    <div class="sticky top-0 z-10 flex-1">
-      <div
-        class="flex-none flex-shrink-0 p-4 bg-primary sm:flex sm:flex-shrink-0 sm:space-x-2"
-      >
-        <div
-          class="flex flex-1 overflow-hidden border divide-x rounded text-secondaryDark divide-divider min-w-[12rem] overflow-x-auto border-divider"
-        >
-          <span
-            class="flex items-center justify-center px-4 py-2 font-semibold transition rounded-l"
-          >
-            {{ tab.document.request.method }}
-          </span>
-          <div
-            class="flex items-center flex-1 flex-shrink-0 min-w-0 px-4 py-2 truncate rounded-r"
-          >
-            {{ tab.document.request.endpoint }}
-          </div>
-        </div>
-        <div class="flex mt-2 space-x-2 sm:mt-0">
-          <HoppButtonPrimary
-            id="send"
-            :title="`${t(
-              'action.send'
-            )} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
-            :label="`${!loading ? t('action.send') : t('action.cancel')}`"
-            class="flex-1 min-w-20"
-            outline
-            @click="!loading ? newSendRequest() : cancelRequest()"
-          />
-          <div class="flex">
-            <HoppButtonSecondary
-              :title="`${t(
-                'request.save'
-              )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
-              :label="t('request.save')"
-              filled
-              :icon="IconSave"
-              class="flex-1 rounded"
-              blank
-              outline
-              :to="sharedRequestURL"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <HttpRequestOptions
-      v-model="tab.document.request"
-      v-model:option-tab="selectedOptionTab"
-      :properties="properties"
-    />
-    <HttpResponse :document="tab.document" :is-embed="true" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Ref } from "vue"
-import { computed, useModel } from "vue"
-import { ref } from "vue"
-import { useI18n } from "~/composables/i18n"
-import { useToast } from "~/composables/toast"
-import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
-import * as E from "fp-ts/Either"
-import { useStreamSubscriber } from "~/composables/stream"
-import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { runRESTRequest$ } from "~/helpers/RequestRunner"
-import { HoppTab } from "~/services/tab"
-import { HoppRESTDocument } from "~/helpers/rest/document"
-import IconSave from "~icons/lucide/save"
-const t = useI18n()
-const toast = useToast()
-
-const props = defineProps<{
-  modelTab: HoppTab<HoppRESTDocument>
-  properties: string[]
-  sharedRequestID: string
-}>()
-
-const tab = useModel(props, "modelTab")
-
-const selectedOptionTab = ref(props.properties[0])
-
-const requestCancelFunc: Ref<(() => void) | null> = ref(null)
-
-const loading = ref(false)
-
-const baseURL = import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
-const sharedRequestURL = computed(() => {
-  return `${baseURL}/r/${props.sharedRequestID}`
-})
-
-const { subscribeToStream } = useStreamSubscriber()
-
-const newSendRequest = async () => {
-  if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
-    toast.error(`${t("empty.endpoint")}`)
-    return
-  }
-
-  ensureMethodInEndpoint()
-
-  loading.value = true
-
-  const [cancel, streamPromise] = runRESTRequest$(tab)
-  const streamResult = await streamPromise
-
-  requestCancelFunc.value = cancel
-  if (E.isRight(streamResult)) {
-    subscribeToStream(
-      streamResult.right,
-      (responseState) => {
-        if (loading.value) {
-          // Check exists because, loading can be set to false
-          // when cancelled
-          updateRESTResponse(responseState)
-        }
-      },
-      () => {
-        loading.value = false
-      },
-      () => {
-        // TODO: Change this any to a proper type
-        const result = (streamResult.right as any).value
-        if (
-          result.type === "network_fail" &&
-          result.error?.error === "NO_PW_EXT_HOOK"
-        ) {
-          const errorResponse: HoppRESTResponse = {
-            type: "extension_error",
-            error: result.error.humanMessage.heading,
-            component: result.error.component,
-            req: result.req,
-          }
-          updateRESTResponse(errorResponse)
-        }
-        loading.value = false
-      }
-    )
-  } else {
-    loading.value = false
-    toast.error(`${t("error.script_fail")}`)
-    let error: Error
-    if (typeof streamResult.left === "string") {
-      error = { name: "RequestFailure", message: streamResult.left }
-    } else {
-      error = streamResult.left
-    }
-    updateRESTResponse({
-      type: "script_fail",
-      error,
-    })
-  }
-}
-
-const updateRESTResponse = (response: HoppRESTResponse | null) => {
-  tab.value.document.response = response
-}
-
-const newEndpoint = computed(() => {
-  return tab.value.document.request.endpoint
-})
-
-const ensureMethodInEndpoint = () => {
-  if (
-    !/^http[s]?:\/\//.test(newEndpoint.value) &&
-    !newEndpoint.value.startsWith("<<")
-  ) {
-    const domain = newEndpoint.value.split(/[/:#?]+/)[0]
-    if (domain === "localhost" || /([0-9]+\.)*[0-9]/.test(domain)) {
-      tab.value.document.request.endpoint =
-        "http://" + tab.value.document.request.endpoint
-    } else {
-      tab.value.document.request.endpoint =
-        "https://" + tab.value.document.request.endpoint
-    }
-  }
-}
-
-const cancelRequest = () => {
-  loading.value = false
-  requestCancelFunc.value?.()
-
-  updateRESTResponse(null)
-}
-</script>
--- a/packages/hoppscotch-common/src/components/environments/Add.vue
+++ b/packages/hoppscotch-common/src/components/environments/Add.vue
@@ -7,7 +7,7 @@
    <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-[2.5rem] font-semibold">{{
+          <label for="name" class="min-w-10 font-semibold">{{
            t("environment.name")
          }}</label>
          <input
@@ -18,7 +18,7 @@
          />
        </div>
        <div class="ml-2 flex items-center space-x-8">
-          <label for="value" class="min-w-[2.5rem] font-semibold">{{
+          <label for="value" class="min-w-10 font-semibold">{{
            t("environment.value")
          }}</label>
          <input
@@ -29,7 +29,7 @@
          />
        </div>
        <div class="ml-2 flex items-center space-x-8">
-          <label for="scope" class="min-w-[2.5rem] font-semibold">
+          <label for="scope" class="min-w-10 font-semibold">
            {{ t("environment.scope") }}
          </label>
          <div
@@ -39,10 +39,10 @@
          </div>
        </div>
        <div v-if="replaceWithVariable" class="mt-3 flex space-x-2">
-          <div class="min-w-[4rem]" />
+          <div class="min-w-18" />
          <HoppSmartCheckbox
            :on="replaceWithVariable"
-            :title="t('environment.replace_with_variable')"
+            title="t('environment.replace_with_variable'))"
            @change="replaceWithVariable = !replaceWithVariable"
          />
          <label for="replaceWithVariable">
@@ -205,14 +205,15 @@ const addEnvironment = async () => {
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_environment/not_found":
-      return t("team_environment.not_found")
-    case "Forbidden resource":
-      return t("profile.no_permission")
-    default:
-      return t("error.something_went_wrong")
+  } else {
+    switch (err.error) {
+      case "team_environment/not_found":
+        return t("team_environment.not_found")
+      case "Forbidden resource":
+        return t("profile.no_permission")
+      default:
+        return t("error.something_went_wrong")
+    }
  }
 }
 </script>
--- a/packages/hoppscotch-common/src/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
@@ -1,60 +1,154 @@
 <template>
-  <ImportExportBase
-    ref="collections-import-export"
-    modal-title="environment.title"
-    :importer-modules="importerModules"
-    :exporter-modules="exporterModules"
-    @hide-modal="emit('hide-modal')"
-  />
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    :title="`${t('environment.title')}`"
+    styles="sm:max-w-md"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
+        <tippy
+          interactive
+          trigger="click"
+          theme="popover"
+          :on-shown="() => tippyActions!.focus()"
+        >
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('action.more')"
+            :icon="IconMoreVertical"
+          />
+          <template #content="{ hide }">
+            <div
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
+              tabindex="0"
+              @keyup.escape="hide()"
+            >
+              <HoppSmartItem
+                :icon="IconGithub"
+                :label="t('import.from_gist')"
+                @click="
+                  () => {
+                    readEnvironmentGist()
+                    hide()
+                  }
+                "
+              />
+              <span
+                v-tippy="{ theme: 'tooltip' }"
+                :title="
+                  !currentUser
+                    ? `${t('export.require_github')}`
+                    : currentUser.provider !== 'github.com'
+                    ? `${t('export.require_github')}`
+                    : undefined
+                "
+              >
+                <HoppSmartItem
+                  :disabled="
+                    !currentUser
+                      ? true
+                      : currentUser.provider !== 'github.com'
+                      ? true
+                      : false
+                  "
+                  :icon="IconGithub"
+                  :label="t('export.create_secret_gist')"
+                  @click="
+                    () => {
+                      createEnvironmentGist()
+                      hide()
+                    }
+                  "
+                />
+              </span>
+            </div>
+          </template>
+        </tippy>
+      </span>
+    </template>
+    <template #body>
+      <div v-if="loading" class="flex flex-col items-center justify-center p-4">
+        <HoppSmartSpinner class="my-4" />
+        <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+      </div>
+      <div v-else class="flex flex-col space-y-2">
+        <HoppSmartItem
+          :icon="IconFolderPlus"
+          :label="t('import.from_json')"
+          @click="openDialogChooseFileToImportFrom"
+        />
+        <input
+          ref="inputChooseFileToImportFrom"
+          class="input"
+          type="file"
+          accept="application/json"
+          @change="importFromJSON"
+        />
+        <hr />
+        <HoppSmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.download_file')"
+          :icon="IconDownload"
+          :label="t('export.as_json')"
+          @click="exportJSON"
+        />
+      </div>
+    </template>
+  </HoppSmartModal>
 </template>

 <script setup lang="ts">
-import { useI18n } from "~/composables/i18n"
-import { useToast } from "~/composables/toast"
-import { Environment } from "@hoppscotch/data"
-import { ImporterOrExporter } from "~/components/importExport/types"
-import { FileSource } from "~/helpers/import-export/import/import-sources/FileSource"
-import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
-import { hoppEnvImporter } from "~/helpers/import-export/import/hoppEnv"
-
-import * as E from "fp-ts/Either"
-import { appendEnvironments, environments$ } from "~/newstore/environments"
-
-import { createTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
-import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
-import { GQLError } from "~/helpers/backend/GQLClient"
-import { CreateTeamEnvironmentMutation } from "~/helpers/backend/graphql"
-import { postmanEnvImporter } from "~/helpers/import-export/import/postmanEnv"
-
+import IconMoreVertical from "~icons/lucide/more-vertical"
 import IconFolderPlus from "~icons/lucide/folder-plus"
-import IconPostman from "~icons/hopp/postman"
-import IconUser from "~icons/lucide/user"
-import { initializeDownloadCollection } from "~/helpers/import-export/export"
-import { computed } from "vue"
-import { useReadonlyStream } from "~/composables/stream"
-import { environmentsExporter } from "~/helpers/import-export/export/environments"
-import { environmentsGistExporter } from "~/helpers/import-export/export/environmentsGistExport"
+import IconDownload from "~icons/lucide/download"
+import IconGithub from "~icons/lucide/github"
+import { computed, ref } from "vue"
+import { Environment } from "@hoppscotch/data"
 import { platform } from "~/platform"
-
-const t = useI18n()
-const toast = useToast()
+import axios from "axios"
+import { useI18n } from "@composables/i18n"
+import { useReadonlyStream } from "@composables/stream"
+import { useToast } from "@composables/toast"
+import {
+  environments$,
+  replaceEnvironments,
+  appendEnvironments,
+} from "~/newstore/environments"
+import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
+import * as TE from "fp-ts/TaskEither"
+import { pipe } from "fp-ts/function"
+import { createTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { TippyComponent } from "vue-tippy"

 const props = defineProps<{
+  show: boolean
  teamEnvironments?: TeamEnvironment[]
  teamId?: string | undefined
  environmentType: "MY_ENV" | "TEAM_ENV"
 }>()

-const myEnvironments = useReadonlyStream(environments$, [])
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()

+const toast = useToast()
+const t = useI18n()
+
+const loading = ref(false)
+
+const myEnvironments = useReadonlyStream(environments$, [])
 const currentUser = useReadonlyStream(
  platform.auth.getCurrentUserStream(),
  platform.auth.getCurrentUser()
 )

-const isTeamEnvironment = computed(() => {
-  return props.environmentType === "TEAM_ENV"
-})
+// Template refs
+const tippyActions = ref<TippyComponent | null>(null)
+const inputChooseFileToImportFrom = ref<HTMLInputElement>()

 const environmentJson = computed(() => {
  if (
@@ -64,249 +158,266 @@ const environmentJson = computed(() => {
    const teamEnvironments = props.teamEnvironments.map(
      (x) => x.environment as Environment
    )
-    return teamEnvironments
+    return JSON.stringify(teamEnvironments, null, 2)
+  } else {
+    return JSON.stringify(myEnvironments.value, null, 2)
  }
-
-  return myEnvironments.value
 })

-const HoppEnvironmentsImport: ImporterOrExporter = {
-  metadata: {
-    id: "import.from_json",
-    name: "import.from_json",
-    icon: IconFolderPlus,
-    title: "import.from_json",
-    applicableTo: ["personal-workspace", "team-workspace"],
-    disabled: false,
-  },
-  component: FileSource({
-    acceptedFileTypes: "application/json",
-    caption: "import.hoppscotch_environment_description",
-    onImportFromFile: async (environments) => {
-      const res = await hoppEnvImporter(environments)()
+const createEnvironmentGist = async () => {
+  if (!currentUser.value) {
+    toast.error(t("profile.no_permission").toString())

-      if (E.isLeft(res)) {
-        showImportFailedError()
-        return
+    return
+  }
+
+  try {
+    const res = await axios.post(
+      "https://api.github.com/gists",
+      {
+        files: {
+          "hoppscotch-environments.json": {
+            content: environmentJson.value,
+          },
+        },
+      },
+      {
+        headers: {
+          Authorization: `token ${currentUser.value.accessToken}`,
+          Accept: "application/vnd.github.v3+json",
+        },
      }
-
-      handleImportToStore(res.right)
-
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_ENVIRONMENT",
-        platform: "rest",
-        workspaceType: isTeamEnvironment.value ? "team" : "personal",
-      })
-
-      emit("hide-modal")
-    },
-  }),
-}
-
-const PostmanEnvironmentsImport: ImporterOrExporter = {
-  metadata: {
-    id: "import.from_postman",
-    name: "import.from_postman",
-    icon: IconPostman,
-    title: "import.from_json",
-    applicableTo: ["personal-workspace", "team-workspace"],
-    disabled: false,
-  },
-  component: FileSource({
-    acceptedFileTypes: "application/json",
-    caption: "import.postman_environment_description",
-    onImportFromFile: async (environments) => {
-      const res = await postmanEnvImporter(environments)()
-
-      if (E.isLeft(res)) {
-        showImportFailedError()
-        return
-      }
-
-      handleImportToStore([res.right])
-
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_ENVIRONMENT",
-        platform: "rest",
-        workspaceType: isTeamEnvironment.value ? "team" : "personal",
-      })
-
-      emit("hide-modal")
-    },
-  }),
-}
-
-const EnvironmentsImportFromGIST: ImporterOrExporter = {
-  metadata: {
-    id: "import.environments_from_gist",
-    name: "import.environments_from_gist",
-    icon: IconFolderPlus,
-    title: "import.environments_from_gist",
-    applicableTo: ["personal-workspace", "team-workspace"],
-    disabled: false,
-  },
-  component: GistSource({
-    caption: "import.environments_from_gist_description",
-    onImportFromGist: async (environments) => {
-      if (E.isLeft(environments)) {
-        showImportFailedError()
-        return
-      }
-
-      const res = await hoppEnvImporter(environments.right)()
-
-      if (E.isLeft(res)) {
-        showImportFailedError()
-        return
-      }
-
-      handleImportToStore(res.right)
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_ENVIRONMENT",
-        platform: "rest",
-        workspaceType: isTeamEnvironment.value ? "team" : "personal",
-      })
-      emit("hide-modal")
-    },
-  }),
-}
-
-const HoppEnvironmentsExport: ImporterOrExporter = {
-  metadata: {
-    id: "export.as_json",
-    name: "export.as_json",
-    title: "action.download_file",
-    icon: IconUser,
-    disabled: false,
-    applicableTo: ["personal-workspace", "team-workspace"],
-  },
-  action: () => {
-    if (!environmentJson.value.length) {
-      return toast.error(t("error.no_environments_to_export"))
-    }
-
-    const message = initializeDownloadCollection(
-      environmentsExporter(environmentJson.value),
-      "Environments"
    )

-    if (E.isLeft(message)) {
-      toast.error(t(message.left))
-      return
-    }
-
-    toast.success(t(message.right))
+    toast.success(t("export.gist_created").toString())

    platform.analytics?.logEvent({
      type: "HOPP_EXPORT_ENVIRONMENT",
      platform: "rest",
    })
-  },
-}

-const HoppEnvironmentsGistExporter: ImporterOrExporter = {
-  metadata: {
-    id: "export.as_gist",
-    name: "export.create_secret_gist",
-    title:
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      currentUser?.provider === "github.com"
-        ? "export.create_secret_gist"
-        : "export.require_github",
-    icon: IconUser,
-    disabled: !currentUser.value
-      ? true
-      : currentUser.value.provider !== "github.com",
-    applicableTo: ["personal-workspace", "team-workspace"],
-  },
-  action: async () => {
-    if (!currentUser.value) {
-      toast.error(t("profile.no_permission"))
-      return
-    }
-
-    const accessToken = currentUser.value?.accessToken
-
-    if (accessToken) {
-      const res = await environmentsGistExporter(
-        JSON.stringify(environmentJson.value),
-        accessToken
-      )
-
-      if (E.isLeft(res)) {
-        toast.error(t("export.failed"))
-        return
-      }
-
-      toast.success(t("export.success"))
-
-      platform.analytics?.logEvent({
-        type: "HOPP_EXPORT_ENVIRONMENT",
-        platform: "rest",
-      })
-
-      window.open(res.right, "_blank")
-    }
-  },
-}
-
-const importerModules = [
-  HoppEnvironmentsImport,
-  EnvironmentsImportFromGIST,
-  PostmanEnvironmentsImport,
-]
-
-const exporterModules = computed(() => {
-  const enabledExporters = [HoppEnvironmentsExport]
-
-  if (platform.platformFeatureFlags.exportAsGIST) {
-    enabledExporters.push(HoppEnvironmentsGistExporter)
+    window.open(res.data.html_url)
+  } catch (e) {
+    toast.error(t("error.something_went_wrong").toString())
+    console.error(e)
  }
+}

-  return enabledExporters
-})
+const fileImported = () => {
+  toast.success(t("state.file_imported").toString())
+}

-const showImportFailedError = () => {
+const failedImport = () => {
  toast.error(t("import.failed").toString())
 }

-const handleImportToStore = async (environments: Environment[]) => {
-  if (props.environmentType === "MY_ENV") {
-    appendEnvironments(environments)
-    toast.success(t("state.file_imported"))
-  } else {
-    await importToTeams(environments)
+const readEnvironmentGist = async () => {
+  const gist = prompt(t("import.gist_url").toString())
+  if (!gist) return
+
+  try {
+    const { files } = (await axios.get(
+      `https://api.github.com/gists/${gist.split("/").pop()}`,
+      {
+        headers: {
+          Accept: "application/vnd.github.v3+json",
+        },
+      }
+    )) as {
+      files: {
+        [fileName: string]: {
+          content: any
+        }
+      }
+    }
+    const environments = JSON.parse(Object.values(files)[0].content)
+
+    if (props.environmentType === "MY_ENV") {
+      replaceEnvironments(environments)
+      fileImported()
+    } else {
+      importToTeams(environments)
+    }
+  } catch (e) {
+    failedImport()
+    console.error(e)
  }
 }

+const hideModal = () => {
+  emit("hide-modal")
+}
+
+const openDialogChooseFileToImportFrom = () => {
+  if (inputChooseFileToImportFrom.value)
+    inputChooseFileToImportFrom.value.click()
+}
+
 const importToTeams = async (content: Environment[]) => {
-  const envImportPromises: Promise<
-    E.Either<GQLError<"">, CreateTeamEnvironmentMutation>
-  >[] = []
+  loading.value = true

-  for (const [, env] of content.entries()) {
-    const res = createTeamEnvironment(
-      JSON.stringify(env.variables),
-      props.teamId as string,
-      env.name
-    )()
+  platform.analytics?.logEvent({
+    type: "HOPP_IMPORT_ENVIRONMENT",
+    platform: "rest",
+    workspaceType: "team",
+  })

-    envImportPromises.push(res)
-  }
-
-  const res = await Promise.all(envImportPromises)
-
-  const failedImports = res.some((r) => E.isLeft(r))
-
-  if (failedImports) {
-    toast.error(t("import.failed"))
-  } else {
-    toast.success(t("import.success"))
+  for (const [i, env] of content.entries()) {
+    if (i === content.length - 1) {
+      await pipe(
+        createTeamEnvironment(
+          JSON.stringify(env.variables),
+          props.teamId as string,
+          env.name
+        ),
+        TE.match(
+          (err: GQLError<string>) => {
+            console.error(err)
+            toast.error(`${getErrorMessage(err)}`)
+          },
+          () => {
+            loading.value = false
+            hideModal()
+            fileImported()
+          }
+        )
+      )()
+    } else {
+      await pipe(
+        createTeamEnvironment(
+          JSON.stringify(env.variables),
+          props.teamId as string,
+          env.name
+        ),
+        TE.match(
+          (err: GQLError<string>) => {
+            console.error(err)
+            toast.error(`${getErrorMessage(err)}`)
+          },
+          () => {
+            // wait for all the environments to be created then fire the toast
+          }
+        )
+      )()
+    }
  }
 }

-const emit = defineEmits<{
-  (e: "hide-modal"): () => void
-}>()
+const importFromJSON = () => {
+  if (!inputChooseFileToImportFrom.value) return
+
+  if (
+    !inputChooseFileToImportFrom.value.files ||
+    inputChooseFileToImportFrom.value.files.length === 0
+  ) {
+    toast.show(t("action.choose_file").toString())
+    return
+  }
+
+  platform.analytics?.logEvent({
+    type: "HOPP_IMPORT_ENVIRONMENT",
+    platform: "rest",
+    workspaceType: "personal",
+  })
+
+  const reader = new FileReader()
+
+  reader.onload = ({ target }) => {
+    const content = target!.result as string | null
+
+    if (!content) {
+      toast.show(t("action.choose_file").toString())
+      return
+    }
+
+    const environments = JSON.parse(content)
+
+    if (
+      environments._postman_variable_scope === "environment" ||
+      environments._postman_variable_scope === "globals"
+    ) {
+      importFromPostman(environments)
+    } else if (environments[0]) {
+      const [name, variables] = Object.keys(environments[0])
+      if (name === "name" && variables === "variables") {
+        // Do nothing
+      }
+      importFromHoppscotch(environments)
+    } else {
+      failedImport()
+    }
+  }
+
+  reader.readAsText(inputChooseFileToImportFrom.value.files[0])
+  inputChooseFileToImportFrom.value.value = ""
+}
+
+const importFromHoppscotch = (environments: Environment[]) => {
+  if (props.environmentType === "MY_ENV") {
+    appendEnvironments(environments)
+    fileImported()
+  } else {
+    importToTeams(environments)
+  }
+}
+
+const importFromPostman = ({
+  name,
+  values,
+}: {
+  name: string
+  values: { key: string; value: string }[]
+}) => {
+  const environment: Environment = { name, variables: [] }
+  values.forEach(({ key, value }) => environment.variables.push({ key, value }))
+  const environments = [environment]
+
+  importFromHoppscotch(environments)
+}
+
+const exportJSON = async () => {
+  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 url = URL.createObjectURL(file)
+
+  const filename = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+
+  URL.revokeObjectURL(url)
+
+  const result = await platform.io.saveFileWithDialog({
+    data: dataToWrite,
+    contentType: "application/json",
+    suggestedFilename: filename,
+    filters: [
+      {
+        name: "JSON file",
+        extensions: ["json"],
+      },
+    ],
+  })
+
+  if (result.type === "unknown" || result.type === "saved") {
+    toast.success(t("state.download_started").toString())
+  }
+}
+
+const getErrorMessage = (err: GQLError<string>) => {
+  if (err.type === "network_error") {
+    return t("error.network_error")
+  } else {
+    switch (err.error) {
+      case "team_environment/not_found":
+        return t("team_environment.not_found")
+      default:
+        return t("error.something_went_wrong")
+    }
+  }
+}
 </script>
--- a/packages/hoppscotch-common/src/components/environments/Selector.vue
+++ b/packages/hoppscotch-common/src/components/environments/Selector.vue
@@ -6,9 +6,10 @@
      theme="popover"
      :on-shown="() => envSelectorActions!.focus()"
    >
-      <HoppSmartSelectWrapper
+      <span
        v-tippy="{ theme: 'tooltip' }"
        :title="`${t('environment.select')}`"
+        class="select-wrapper"
      >
        <HoppButtonSecondary
          :icon="IconLayers"
@@ -21,7 +22,7 @@
          "
          class="flex-1 !justify-start rounded-none pr-8"
        />
-      </HoppSmartSelectWrapper>
+      </span>
      <template #content="{ hide }">
        <div
          ref="envSelectorActions"
@@ -206,14 +207,10 @@
            </div>
            <div class="my-2 flex flex-1 flex-col space-y-2 pl-4 pr-2">
              <div class="flex flex-1 space-x-4">
-                <span
-                  class="min-w-[9rem] w-1/4 truncate text-tiny font-semibold"
-                >
+                <span class="min-w-32 w-1/4 truncate text-tiny font-semibold">
                  {{ t("environment.name") }}
                </span>
-                <span
-                  class="min-w-[9rem] w-full truncate text-tiny font-semibold"
-                >
+                <span class="min-w-32 w-full truncate text-tiny font-semibold">
                  {{ t("environment.value") }}
                </span>
              </div>
@@ -222,10 +219,10 @@
                :key="index"
                class="flex flex-1 space-x-4"
              >
-                <span class="min-w-[9rem] w-1/4 truncate text-secondaryLight">
+                <span class="min-w-32 w-1/4 truncate text-secondaryLight">
                  {{ variable.key }}
                </span>
-                <span class="min-w-[9rem] w-full truncate text-secondaryLight">
+                <span class="min-w-32 w-full truncate text-secondaryLight">
                  {{ variable.value }}
                </span>
              </div>
@@ -261,14 +258,10 @@
            </div>
            <div v-else class="my-2 flex flex-1 flex-col space-y-2 pl-4 pr-2">
              <div class="flex flex-1 space-x-4">
-                <span
-                  class="min-w-[9rem] w-1/4 truncate text-tiny font-semibold"
-                >
+                <span class="min-w-32 w-1/4 truncate text-tiny font-semibold">
                  {{ t("environment.name") }}
                </span>
-                <span
-                  class="min-w-[9rem] w-full truncate text-tiny font-semibold"
-                >
+                <span class="min-w-32 w-full truncate text-tiny font-semibold">
                  {{ t("environment.value") }}
                </span>
              </div>
@@ -277,10 +270,10 @@
                :key="index"
                class="flex flex-1 space-x-4"
              >
-                <span class="min-w-[9rem] w-1/4 truncate text-secondaryLight">
+                <span class="min-w-32 w-1/4 truncate text-secondaryLight">
                  {{ variable.key }}
                </span>
-                <span class="min-w-[9rem] w-full truncate text-secondaryLight">
+                <span class="min-w-32 w-full truncate text-secondaryLight">
                  {{ variable.value }}
                </span>
              </div>
@@ -453,11 +446,12 @@ const isEnvActive = (id: string | number) => {
  } else {
    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
      return selectedEnv.value.index === id
+    } else {
+      return (
+        selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+        selectedEnv.value.teamEnvID === id
+      )
    }
-    return (
-      selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-      selectedEnv.value.teamEnvID === id
-    )
  }
 }

@@ -502,36 +496,40 @@ const selectedEnv = computed(() => {
        name: props.modelValue.environment.environment.name,
        teamEnvID: props.modelValue.environment.id,
      }
+    } else {
+      return { type: "global", name: "Global" }
    }
-    return { type: "global", name: "Global" }
-  }
-  if (selectedEnvironmentIndex.value.type === "MY_ENV") {
-    const environment =
-      myEnvironments.value[selectedEnvironmentIndex.value.index]
-    return {
-      type: "MY_ENV",
-      index: selectedEnvironmentIndex.value.index,
-      name: environment.name,
-      variables: environment.variables,
-    }
-  } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
-    const teamEnv = teamEnvironmentList.value.find(
-      (env) =>
-        env.id ===
-        (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-          selectedEnvironmentIndex.value.teamEnvID)
-    )
-    if (teamEnv) {
+  } else {
+    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+      const environment =
+        myEnvironments.value[selectedEnvironmentIndex.value.index]
      return {
-        type: "TEAM_ENV",
-        name: teamEnv.environment.name,
-        teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
-        variables: teamEnv.environment.variables,
+        type: "MY_ENV",
+        index: selectedEnvironmentIndex.value.index,
+        name: environment.name,
+        variables: environment.variables,
      }
+    } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
+      const teamEnv = teamEnvironmentList.value.find(
+        (env) =>
+          env.id ===
+          (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+            selectedEnvironmentIndex.value.teamEnvID)
+      )
+      if (teamEnv) {
+        return {
+          type: "TEAM_ENV",
+          name: teamEnv.environment.name,
+          teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
+          variables: teamEnv.environment.variables,
+        }
+      } else {
+        return { type: "NO_ENV_SELECTED" }
+      }
+    } else {
+      return { type: "NO_ENV_SELECTED" }
    }
-    return { type: "NO_ENV_SELECTED" }
  }
-  return { type: "NO_ENV_SELECTED" }
 })

 // Set the selected environment as initial scope value
@@ -579,12 +577,13 @@ const envQuickPeekActions = ref<TippyComponent | null>(null)
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_environment/not_found":
-      return t("team_environment.not_found")
-    default:
-      return t("error.something_went_wrong")
+  } else {
+    switch (err.error) {
+      case "team_environment/not_found":
+        return t("team_environment.not_found")
+      default:
+        return t("error.something_went_wrong")
+    }
  }
 }

@@ -593,8 +592,9 @@ const globalEnvs = useReadonlyStream(globalEnv$, [])
 const environmentVariables = computed(() => {
  if (selectedEnv.value.variables) {
    return selectedEnv.value.variables
+  } else {
+    return []
  }
-  return []
 })

 const editGlobalEnv = () => {
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -198,8 +198,9 @@ const workingEnv = computed(() => {
      type: "MY_ENV",
      index: props.editingEnvironmentIndex,
    })
+  } else {
+    return null
  }
-  return null
 })

 const envList = useReadonlyStream(environments$, []) || props.envVars()
@@ -225,11 +226,12 @@ const liveEnvs = computed(() => {
    return [
      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
    ]
+  } else {
+    return [
+      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
+      ...globalVars.value.map((x) => ({ ...x, source: "Global" })),
+    ]
  }
-  return [
-    ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
-    ...globalVars.value.map((x) => ({ ...x, source: "Global" })),
-  ]
 })

 watch(
--- a/packages/hoppscotch-common/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/index.vue
@@ -68,7 +68,7 @@
      @hide-modal="displayModalEdit(false)"
    />
    <EnvironmentsImportExport
-      v-if="showModalImportExport"
+      :show="showModalImportExport"
      environment-type="MY_ENV"
      @hide-modal="displayModalImportExport(false)"
    />
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -205,8 +205,11 @@ const evnExpandError = computed(() => {
 const liveEnvs = computed(() => {
  if (evnExpandError.value) {
    return []
+  } else {
+    return [
+      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
+    ]
  }
-  return [...vars.value.map((x) => ({ ...x.env, source: editingName.value! }))]
 })

 watch(
@@ -335,12 +338,13 @@ const hideModal = () => {
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_environment/not_found":
-      return t("team_environment.not_found")
-    default:
-      return t("error.something_went_wrong")
+  } else {
+    switch (err.error) {
+      case "team_environment/not_found":
+        return t("team_environment.not_found")
+      default:
+        return t("error.something_went_wrong")
+    }
  }
 }
 </script>
--- a/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
@@ -184,12 +184,13 @@ const duplicateEnvironments = () => {
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_environment/not_found":
-      return t("team_environment.not_found")
-    default:
-      return t("error.something_went_wrong")
+  } else {
+    switch (err.error) {
+      case "team_environment/not_found":
+        return t("team_environment.not_found")
+      default:
+        return t("error.something_went_wrong")
+    }
  }
 }
 </script>
--- a/packages/hoppscotch-common/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -107,7 +107,7 @@
      @hide-modal="displayModalEdit(false)"
    />
    <EnvironmentsImportExport
-      v-if="showModalImportExport"
+      :show="showModalImportExport"
      :team-environments="teamEnvironments"
      :team-id="team?.id"
      environment-type="TEAM_ENV"
@@ -174,12 +174,13 @@ const resetSelectedData = () => {
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  }
-  switch (err.error) {
-    case "team_environment/not_found":
-      return t("team_environment.not_found")
-    default:
-      return t("error.something_went_wrong")
+  } else {
+    switch (err.error) {
+      case "team_environment/not_found":
+        return t("team_environment.not_found")
+      default:
+        return t("error.something_went_wrong")
+    }
  }
 }

--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
@@ -13,12 +13,12 @@
          theme="popover"
          :on-shown="() => tippyActions.focus()"
        >
-          <HoppSmartSelectWrapper>
+          <span class="select-wrapper">
            <HoppButtonSecondary
              class="ml-2 rounded-none pr-8"
              :label="authName"
            />
-          </HoppSmartSelectWrapper>
+          </span>
          <template #content="{ hide }">
            <div
              ref="tippyActions"
@@ -171,7 +171,7 @@
        </div>
      </div>
      <div
-        class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
+        class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
      >
        <div class="pb-2 text-secondaryLight">
          {{ t("helpers.authorization") }}
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Response.vue
@@ -25,7 +25,7 @@
            :title="`${t(
              'action.download_file'
            )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
-            :icon="downloadIcon"
+            :icon="downloadResponseIcon"
            @click="downloadResponse"
          />
          <HoppButtonSecondary
@@ -33,41 +33,9 @@
            :title="`${t(
              'action.copy'
            )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
-            :icon="copyIcon"
-            @click="copyResponse"
+            :icon="copyResponseIcon"
+            @click="copyResponse(response[0].data)"
          />
-          <tippy
-            interactive
-            trigger="click"
-            theme="popover"
-            :on-shown="() => copyInterfaceTippyActions.focus()"
-          >
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('app.copy_interface_type')"
-              :icon="IconMore"
-            />
-            <template #content="{ hide }">
-              <div
-                ref="copyInterfaceTippyActions"
-                class="flex flex-col focus:outline-none"
-                tabindex="0"
-                @keyup.escape="hide()"
-              >
-                <HoppSmartItem
-                  v-for="(language, index) in interfaceLanguages"
-                  :key="index"
-                  :label="language"
-                  :icon="
-                    copiedInterfaceLanguage === language
-                      ? copyInterfaceIcon
-                      : IconCopy
-                  "
-                  @click="runCopyInterface(language)"
-                />
-              </div>
-            </template>
-          </tippy>
        </div>
      </div>
      <div ref="schemaEditor" class="flex flex-1 flex-col"></div>
@@ -91,22 +59,22 @@

 <script setup lang="ts">
 import IconWrapText from "~icons/lucide/wrap-text"
+import IconDownload from "~icons/lucide/download"
+import IconCheck from "~icons/lucide/check"
 import IconCopy from "~icons/lucide/copy"
-import IconMore from "~icons/lucide/more-horizontal"
 import { computed, reactive, ref } from "vue"
+import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "@composables/codemirror"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { GQLResponseEvent } from "~/helpers/graphql/connection"
-import interfaceLanguages from "~/helpers/utils/interfaceLanguages"
-import {
-  useCopyInterface,
-  useCopyResponse,
-  useDownloadResponse,
-} from "~/composables/lens-actions"
+import { platform } from "~/platform"

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

 const props = withDefaults(
  defineProps<{
@@ -133,7 +101,6 @@ const responseString = computed(() => {
 })

 const schemaEditor = ref<any | null>(null)
-const copyInterfaceTippyActions = ref<any | null>(null)
 const linewrapEnabled = ref(true)

 useCodemirror(
@@ -151,29 +118,55 @@ useCodemirror(
  })
 )

-const { copyIcon, copyResponse } = useCopyResponse(responseString)
-const { copyInterfaceIcon, copyInterface } = useCopyInterface(responseString)
-const { downloadIcon, downloadResponse } = useDownloadResponse(
-  "application/json",
-  responseString
+const downloadResponseIcon = refAutoReset<
+  typeof IconDownload | typeof IconCheck
+>(IconDownload, 1000)
+const copyResponseIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
+  IconCopy,
+  1000
 )

-const copiedInterfaceLanguage = ref("")
+const copyResponse = (str: string) => {
+  copyToClipboard(str)
+  copyResponseIcon.value = IconCheck
+  toast.success(`${t("state.copied_to_clipboard")}`)
+}

-const runCopyInterface = (language: string) => {
-  copyInterface(language).then(() => {
-    copiedInterfaceLanguage.value = language
+const downloadResponse = async (str: string) => {
+  const dataToWrite = str
+  const file = new Blob([dataToWrite!], { type: "application/json" })
+  const url = URL.createObjectURL(file)
+
+  const filename = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+
+  URL.revokeObjectURL(url)
+
+  const result = await platform.io.saveFileWithDialog({
+    data: dataToWrite,
+    contentType: "application/json",
+    suggestedFilename: filename,
+    filters: [
+      {
+        name: "JSON file",
+        extensions: ["json"],
+      },
+    ],
  })
+
+  if (result.type === "unknown" || result.type === "saved") {
+    downloadResponseIcon.value = IconCheck
+    toast.success(`${t("state.download_started")}`)
+  }
 }

 defineActionHandler(
  "response.file.download",
-  () => downloadResponse(),
+  () => downloadResponse(responseString.value),
  computed(() => !!props.response && props.response.length > 0)
 )
 defineActionHandler(
  "response.copy",
-  () => copyResponse(),
+  () => copyResponse(responseString.value),
  computed(() => !!props.response && props.response.length > 0)
 )
 </script>
--- a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
@@ -30,7 +30,7 @@
            v-model="graphqlFieldsFilterText"
            type="search"
            autocomplete="off"
-            class="flex w-full bg-transparent px-4 py-2"
+            class="flex h-8 w-full bg-transparent p-4 py-2"
            :placeholder="`${t('action.search')}`"
          />
          <div class="flex">
--- a/packages/hoppscotch-common/src/components/graphql/TabHead.vue
+++ b/packages/hoppscotch-common/src/components/graphql/TabHead.vue
@@ -14,7 +14,7 @@
      theme="popover"
      :on-shown="() => tippyActions!.focus()"
    >
-      <span class="truncate">
+      <span class="truncate px-2 leading-8">
        {{ tab.document.request.name }}
      </span>
      <template #content="{ hide }">
--- a/packages/hoppscotch-common/src/components/graphql/TypeLink.vue
+++ b/packages/hoppscotch-common/src/components/graphql/TypeLink.vue
@@ -26,7 +26,7 @@ const isScalar = computed(() => {

 function resolveRootType(type: GraphQLType) {
  let t = type as any
-  while (t.ofType !== null) t = t.ofType
+  while (t.ofType != null) t = t.ofType
  return t
 }

--- a/packages/hoppscotch-common/src/components/history/index.vue
+++ b/packages/hoppscotch-common/src/components/history/index.vue
@@ -9,7 +9,7 @@
          v-model="filterText"
          type="search"
          autocomplete="off"
-          class="flex w-full bg-transparent px-4 py-2"
+          class="flex h-8 w-full bg-transparent p-4 py-2"
          :placeholder="`${t('action.search')}`"
        />
        <div class="flex">
--- a/packages/hoppscotch-common/src/components/history/rest/Card.vue
+++ b/packages/hoppscotch-common/src/components/history/rest/Card.vue
@@ -121,8 +121,7 @@ const duration = computed(() => {
    return responseDuration > 0
      ? `${t("request.duration")}: ${responseDuration}ms`
      : t("error.no_duration")
-  }
-  return t("error.no_duration")
+  } else return t("error.no_duration")
 })

 const entryStatus = computed(() => {
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@@ -13,12 +13,12 @@
          theme="popover"
          :on-shown="() => tippyActions.focus()"
        >
-          <HoppSmartSelectWrapper>
+          <span class="select-wrapper">
            <HoppButtonSecondary
              class="ml-2 rounded-none pr-8"
              :label="authName"
            />
-          </HoppSmartSelectWrapper>
+          </span>
          <template #content="{ hide }">
            <div
              ref="tippyActions"
@@ -149,7 +149,7 @@
        </div>
      </div>
      <div
-        class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
+        class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
      >
        <div class="pb-2 text-secondaryLight">
          {{ t("helpers.authorization") }}
--- a/packages/hoppscotch-common/src/components/http/Body.vue
+++ b/packages/hoppscotch-common/src/components/http/Body.vue
@@ -13,12 +13,12 @@
          theme="popover"
          :on-shown="() => tippyActions.focus()"
        >
-          <HoppSmartSelectWrapper>
+          <span class="select-wrapper">
            <HoppButtonSecondary
              :label="body.contentType || t('state.none')"
              class="ml-2 rounded-none pr-8"
            />
-          </HoppSmartSelectWrapper>
+          </span>
          <template #content="{ hide }">
            <div
              ref="tippyActions"
--- a/packages/hoppscotch-common/src/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
@@ -339,7 +339,7 @@ const deleteBodyParam = (index: number) => {
  }

  workingParams.value = workingParams.value.filter(
-    (_, arrIndex) => arrIndex !== index
+    (_, arrIndex) => arrIndex != index
  )
 }

--- a/packages/hoppscotch-common/src/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
@@ -17,7 +17,7 @@
          placement="bottom"
          :on-shown="() => tippyActions.focus()"
        >
-          <HoppSmartSelectWrapper>
+          <span class="select-wrapper">
            <HoppButtonSecondary
              :label="
                CodegenDefinitions.find((x) => x.name === codegenType)!.caption
@@ -25,7 +25,7 @@
              outline
              class="flex-1 pr-8"
            />
-          </HoppSmartSelectWrapper>
+          </span>
          <template #content="{ hide }">
            <div class="flex flex-col space-y-2">
              <div class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto">
@@ -214,9 +214,10 @@ const requestCode = computed(() => {
  if (O.isSome(result)) {
    errorState.value = false
    return result.value
+  } else {
+    errorState.value = true
+    return ""
  }
-  errorState.value = true
-  return ""
 })

 // Template refs
--- a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
@@ -34,7 +34,7 @@
        <div ref="preRequestEditor" class="h-full"></div>
      </div>
      <div
-        class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
+        class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
      >
        <div class="pb-2 text-secondaryLight">
          {{ t("helpers.pre_request_script") }}
--- a/packages/hoppscotch-common/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-common/src/components/http/RawBody.vue
@@ -126,19 +126,19 @@ const linewrapEnabled = ref(true)
 const rawBodyParameters = ref<any | null>(null)

 const codemirrorValue: Ref<string | undefined> =
-  typeof rawParamsBody.value === "string"
+  typeof rawParamsBody.value == "string"
    ? ref(rawParamsBody.value)
    : ref(undefined)

 watch(rawParamsBody, (newVal) => {
-  typeof newVal === "string"
+  typeof newVal == "string"
    ? (codemirrorValue.value = newVal)
    : (codemirrorValue.value = undefined)
 })

 // propagate the edits from codemirror back to the body
 watch(codemirrorValue, (updatedValue) => {
-  if (updatedValue && updatedValue !== rawParamsBody.value) {
+  if (updatedValue && updatedValue != rawParamsBody.value) {
    rawParamsBody.value = updatedValue
  }
 })
@@ -185,7 +185,7 @@ const prettifyRequestBody = () => {
    if (body.value.contentType.endsWith("json")) {
      const jsonObj = JSON.parse(rawParamsBody.value as string)
      prettifyBody = JSON.stringify(jsonObj, null, 2)
-    } else if (body.value.contentType === "application/xml") {
+    } else if (body.value.contentType == "application/xml") {
      prettifyBody = prettifyXML(rawParamsBody.value as string)
    }
    rawParamsBody.value = prettifyBody
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -3,7 +3,7 @@
    class="sticky top-0 z-20 flex-none flex-shrink-0 bg-primary p-4 sm:flex sm:flex-shrink-0 sm:space-x-2"
  >
    <div
-      class="min-w-[12rem] flex flex-1 whitespace-nowrap rounded border border-divider"
+      class="min-w-52 flex flex-1 whitespace-nowrap rounded border border-divider"
    >
      <div class="relative flex">
        <label for="method">
@@ -13,7 +13,7 @@
            theme="popover"
            :on-shown="() => methodTippyActions.focus()"
          >
-            <HoppSmartSelectWrapper>
+            <span class="select-wrapper">
              <input
                id="method"
                class="flex w-26 cursor-pointer rounded-l bg-primaryLight px-4 py-2 font-semibold text-secondaryDark transition"
@@ -22,7 +22,7 @@
                :placeholder="`${t('request.method')}`"
                @input="onSelectMethod($event)"
              />
-            </HoppSmartSelectWrapper>
+            </span>
            <template #content="{ hide }">
              <div
                ref="methodTippyActions"
@@ -34,9 +34,6 @@
                  v-for="(method, index) in methods"
                  :key="`method-${index}`"
                  :label="method"
-                  :style="{
-                    color: getMethodLabelColor(method),
-                  }"
                  @click="
                    () => {
                      updateMethod(method)
@@ -70,7 +67,7 @@
          'action.send'
        )} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
        :label="`${!loading ? t('action.send') : t('action.cancel')}`"
-        class="min-w-[5rem] flex-1 rounded-r-none"
+        class="min-w-20 flex-1 rounded-r-none"
        @click="!loading ? newSendRequest() : cancelRequest()"
      />
      <span class="flex">
@@ -182,16 +179,20 @@
                />
                <HoppSmartItem
                  ref="copyRequestAction"
-                  :label="t('request.share_request')"
-                  :icon="IconShare2"
+                  :label="shareButtonText"
+                  :icon="copyLinkIcon"
                  :loading="fetchingShareLink"
                  @click="
                    () => {
-                      shareRequest()
-                      hide()
+                      copyRequest()
                    }
                  "
                />
+                <HoppSmartItem
+                  :icon="IconLink2"
+                  :label="`${t('request.view_my_links')}`"
+                  to="/profile"
+                />
                <hr />
                <HoppSmartItem
                  ref="saveRequestAction"
@@ -235,20 +236,25 @@ import { useI18n } from "@composables/i18n"
 import { useSetting } from "@composables/settings"
 import { useReadonlyStream, useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
-import { useVModel } from "@vueuse/core"
+import { refAutoReset, useVModel } from "@vueuse/core"
 import * as E from "fp-ts/Either"
 import { Ref, computed, onBeforeUnmount, ref } from "vue"
-import { defineActionHandler, invokeAction } from "~/helpers/actions"
+import { defineActionHandler } from "~/helpers/actions"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
+import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { editRESTRequest } from "~/newstore/collections"
+import IconCheck from "~icons/lucide/check"
 import IconChevronDown from "~icons/lucide/chevron-down"
 import IconCode2 from "~icons/lucide/code-2"
+import IconCopy from "~icons/lucide/copy"
 import IconFileCode from "~icons/lucide/file-code"
 import IconFolderPlus from "~icons/lucide/folder-plus"
+import IconLink2 from "~icons/lucide/link-2"
 import IconRotateCCW from "~icons/lucide/rotate-ccw"
 import IconSave from "~icons/lucide/save"
 import IconShare2 from "~icons/lucide/share-2"
@@ -262,7 +268,6 @@ import { InterceptorService } from "~/services/interceptor.service"
 import { HoppTab } from "~/services/tab"
 import { HoppRESTDocument } from "~/helpers/rest/document"
 import { RESTTabService } from "~/services/tab/rest"
-import { getMethodLabelColor } from "~/helpers/rest/labelColoring"

 const t = useI18n()
 const interceptorService = useService(InterceptorService)
@@ -274,8 +279,8 @@ const methods = [
  "PATCH",
  "DELETE",
  "HEAD",
-  "OPTIONS",
  "CONNECT",
+  "OPTIONS",
  "TRACE",
  "CUSTOM",
 ]
@@ -304,6 +309,8 @@ const showCurlImportModal = ref(false)
 const showCodegenModal = ref(false)
 const showSaveRequestModal = ref(false)

+const hasNavigatorShare = !!navigator.share
+
 // Template refs
 const methodTippyActions = ref<any | null>(null)
 const sendTippyActions = ref<any | null>(null)
@@ -446,20 +453,62 @@ const updateRESTResponse = (response: HoppRESTResponse | null) => {
  tab.value.document.response = response
 }

-const currentUser = useReadonlyStream(
-  platform.auth.getCurrentUserStream(),
-  platform.auth.getCurrentUser()
-)
+const copyLinkIcon = refAutoReset<
+  typeof IconShare2 | typeof IconCopy | typeof IconCheck
+>(hasNavigatorShare ? IconShare2 : IconCopy, 1000)

+const shareLink = ref<string | null>("")
 const fetchingShareLink = ref(false)

-const shareRequest = () => {
-  if (currentUser.value) {
-    invokeAction("share.request", {
-      request: tab.value.document.request,
+const shareButtonText = computed(() => {
+  if (shareLink.value) {
+    return shareLink.value
+  } else if (fetchingShareLink.value) {
+    return t("state.loading")
+  } else {
+    return t("request.copy_link")
+  }
+})
+
+const copyRequest = async () => {
+  if (shareLink.value) {
+    copyShareLink(shareLink.value)
+  } else {
+    shareLink.value = ""
+    fetchingShareLink.value = true
+    const shortcodeResult = await createShortcode(tab.value.document.request)()
+
+    platform.analytics?.logEvent({
+      type: "HOPP_SHORTCODE_CREATED",
+    })
+
+    if (E.isLeft(shortcodeResult)) {
+      toast.error(`${shortcodeResult.left.error}`)
+      shareLink.value = `${t("error.something_went_wrong")}`
+    } else if (E.isRight(shortcodeResult)) {
+      shareLink.value = `/${shortcodeResult.right.createShortcode.id}`
+      copyShareLink(shareLink.value)
+    }
+    fetchingShareLink.value = false
+  }
+}
+
+const copyShareLink = (shareLink: string) => {
+  const link = `${
+    import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
+  }/r${shareLink}`
+  if (navigator.share) {
+    const time = new Date().toLocaleTimeString()
+    const date = new Date().toLocaleDateString()
+    navigator.share({
+      title: "Hoppscotch",
+      text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
+      url: link,
    })
  } else {
-    invokeAction("modals.login.toggle")
+    copyLinkIcon.value = IconCheck
+    copyToClipboard(link)
+    toast.success(`${t("state.copied_to_clipboard")}`)
  }
 }

@@ -562,7 +611,7 @@ defineActionHandler("request.send-cancel", () => {
  else cancelRequest()
 })
 defineActionHandler("request.reset", clearContent)
-defineActionHandler("request.share-request", shareRequest)
+defineActionHandler("request.copy-link", copyRequest)
 defineActionHandler("request.method.next", cycleDownMethod)
 defineActionHandler("request.method.prev", cycleUpMethod)
 defineActionHandler("request.save", saveRequest)
--- a/packages/hoppscotch-common/src/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/http/RequestOptions.vue
@@ -5,18 +5,13 @@
    render-inactive-tabs
  >
    <HoppSmartTab
-      v-if="properties ? properties.includes('parameters') : true"
      :id="'params'"
      :label="`${t('tab.parameters')}`"
      :info="`${newActiveParamsCount$}`"
    >
      <HttpParameters v-model="request.params" />
    </HoppSmartTab>
-    <HoppSmartTab
-      v-if="properties ? properties.includes('body') : true"
-      :id="'bodyParams'"
-      :label="`${t('tab.body')}`"
-    >
+    <HoppSmartTab :id="'bodyParams'" :label="`${t('tab.body')}`">
      <HttpBody
        v-model:headers="request.headers"
        v-model:body="request.body"
@@ -24,22 +19,16 @@
      />
    </HoppSmartTab>
    <HoppSmartTab
-      v-if="properties ? properties.includes('headers') : true"
      :id="'headers'"
      :label="`${t('tab.headers')}`"
      :info="`${newActiveHeadersCount$}`"
    >
      <HttpHeaders v-model="request" @change-tab="changeOptionTab" />
    </HoppSmartTab>
-    <HoppSmartTab
-      v-if="properties ? properties.includes('authorization') : true"
-      :id="'authorization'"
-      :label="`${t('tab.authorization')}`"
-    >
+    <HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
      <HttpAuthorization v-model="request.auth" />
    </HoppSmartTab>
    <HoppSmartTab
-      v-if="properties ? properties.includes('preRequestScript') : true"
      :id="'preRequestScript'"
      :label="`${t('tab.pre_request_script')}`"
      :indicator="
@@ -51,7 +40,6 @@
      <HttpPreRequestScript v-model="request.preRequestScript" />
    </HoppSmartTab>
    <HoppSmartTab
-      v-if="properties ? properties.includes('tests') : true"
      :id="'tests'"
      :label="`${t('tab.tests')}`"
      :indicator="
@@ -88,7 +76,6 @@ const props = withDefaults(
  defineProps<{
    modelValue: HoppRESTRequest
    optionTab: RESTOptionTabs
-    properties?: string[]
  }>(),
  {
    optionTab: "params",
--- a/packages/hoppscotch-common/src/components/http/Response.vue
+++ b/packages/hoppscotch-common/src/components/http/Response.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="relative flex flex-1 flex-col">
-    <HttpResponseMeta :response="doc.response" :is-embed="isEmbed" />
+    <HttpResponseMeta :response="doc.response" />
    <LensesResponseBodyRenderer
      v-if="!loading && hasResponse"
      v-model:document="doc"
@@ -15,7 +15,6 @@ import { HoppRESTDocument } from "~/helpers/rest/document"

 const props = defineProps<{
  document: HoppRESTDocument
-  isEmbed: boolean
 }>()

 const emit = defineEmits<{
--- a/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
@@ -2,20 +2,8 @@
  <div
    class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-center overflow-auto overflow-x-auto whitespace-nowrap bg-primary p-4"
  >
-    <AppShortcutsPrompt v-if="response == null && !isEmbed" class="flex-1" />
-
-    <div v-if="response == null && isEmbed">
-      <HoppButtonSecondary
-        :label="`${t('app.documentation')}`"
-        to="https://docs.hoppscotch.io/documentation/features/rest-api-testing#response"
-        :icon="IconExternalLink"
-        blank
-        outline
-        reverse
-      />
-    </div>
-
-    <div v-else-if="response" class="flex flex-1 flex-col">
+    <AppShortcutsPrompt v-if="response == null" class="flex-1" />
+    <div v-else class="flex flex-1 flex-col">
      <div
        v-if="response.type === 'loading'"
        class="flex flex-col items-center justify-center"
@@ -65,12 +53,7 @@
          <span v-if="response.statusCode">
            <span class="text-secondary"> {{ t("response.status") }}: </span>
            {{ `${response.statusCode}\xA0 • \xA0`
-            }}{{
-              getStatusCodeReasonPhrase(
-                response.statusCode,
-                response.statusText
-              )
-            }}
+            }}{{ getStatusCodeReasonPhrase(response.statusCode) }}
          </span>
          <span v-if="response.meta && response.meta.responseDuration">
            <span class="text-secondary"> {{ t("response.time") }}: </span>
@@ -117,7 +100,6 @@ import { getStatusCodeReasonPhrase } from "~/helpers/utils/statusCodes"
 import { useService } from "dioc/vue"
 import { InspectionService } from "~/services/inspection"
 import { RESTTabService } from "~/services/tab/rest"
-import IconExternalLink from "~icons/lucide/external-link"

 const t = useI18n()
 const colorMode = useColorMode()
@@ -125,7 +107,6 @@ const tabs = useService(RESTTabService)

 const props = defineProps<{
  response: HoppRESTResponse | null | undefined
-  isEmbed?: boolean
 }>()

 /**
--- a/packages/hoppscotch-common/src/components/http/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/http/Sidebar.vue
@@ -26,13 +26,6 @@
    >
      <History :page="'rest'" />
    </HoppSmartTab>
-    <HoppSmartTab
-      :id="'share-request'"
-      :icon="IconShare2"
-      :label="`${t('tab.shared_requests')}`"
-    >
-      <Share />
-    </HoppSmartTab>
  </HoppSmartTabs>
 </template>

@@ -40,7 +33,6 @@
 import IconClock from "~icons/lucide/clock"
 import IconLayers from "~icons/lucide/layers"
 import IconFolder from "~icons/lucide/folder"
-import IconShare2 from "~icons/lucide/share-2"
 import { ref } from "vue"
 import { useI18n } from "@composables/i18n"

--- a/packages/hoppscotch-common/src/components/http/TabHead.vue
+++ b/packages/hoppscotch-common/src/components/http/TabHead.vue
@@ -8,11 +8,12 @@
    @click.middle="emit('close-tab')"
  >
    <span
-      class="text-tiny font-semibold mr-2"
+      class="text-tiny font-semibold"
      :style="{ color: getMethodLabelColorClassOf(tab.document.request) }"
    >
      {{ tab.document.request.method }}
    </span>
+
    <tippy
      ref="options"
      trigger="manual"
@@ -20,7 +21,7 @@
      theme="popover"
      :on-shown="() => tippyActions!.focus()"
    >
-      <span class="truncate">
+      <span class="truncate px-2 leading-8">
        {{ tab.document.request.name }}
      </span>
      <template #content="{ hide }">
--- a/packages/hoppscotch-common/src/components/http/TestResult.vue
+++ b/packages/hoppscotch-common/src/components/http/TestResult.vue
@@ -41,7 +41,7 @@
            <div class="divide-y divide-dividerLight">
              <div
                v-if="noEnvSelected && !globalHasAdditions"
-                class="flex bg-bannerInfo p-4 text-secondaryDark"
+                class="flex bg-error p-4 text-secondaryDark"
                role="alert"
              >
                <icon-lucide-alert-triangle class="svg-icons mr-4" />
--- a/packages/hoppscotch-common/src/components/http/Tests.vue
+++ b/packages/hoppscotch-common/src/components/http/Tests.vue
@@ -34,7 +34,7 @@
        <div ref="testScriptEditor" class="h-full"></div>
      </div>
      <div
-        class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
+        class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
      >
        <div class="pb-2 text-secondaryLight">
          {{ t("helpers.post_request_tests") }}
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -242,7 +242,7 @@ const urlEncodedParamsRaw = pluckRef(body, "body")

 const urlEncodedParams = computed<RawKeyValueEntry[]>({
  get() {
-    return typeof urlEncodedParamsRaw.value === "string"
+    return typeof urlEncodedParamsRaw.value == "string"
      ? parseRawKeyValueEntries(urlEncodedParamsRaw.value)
      : []
  },
--- a/packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue
@@ -16,12 +16,12 @@
        theme="popover"
        :on-shown="() => authTippyActions.focus()"
      >
-        <HoppSmartSelectWrapper>
+        <span class="select-wrapper">
          <HoppButtonSecondary
            :label="auth.addTo || t('state.none')"
            class="ml-2 rounded-none pr-8"
          />
-        </HoppSmartSelectWrapper>
+        </span>
        <template #content="{ hide }">
          <div
            ref="authTippyActions"
--- a/packages/hoppscotch-common/src/components/importExport/Base.vue
+++ b/packages/hoppscotch-common/src/components/importExport/Base.vue
@@ -1,163 +0,0 @@
-<template>
-  <HoppSmartModal
-    dialog
-    :title="t(modalTitle)"
-    styles="sm:max-w-md"
-    @close="hideModal"
-  >
-    <template #actions>
-      <HoppButtonSecondary
-        v-if="hasPreviousStep"
-        v-tippy="{ theme: 'tooltip' }"
-        :title="t('action.go_back')"
-        :icon="IconArrowLeft"
-        @click="goToPreviousStep"
-      />
-    </template>
-    <template #body>
-      <component :is="currentStep.component" v-bind="currentStep.props()" />
-    </template>
-  </HoppSmartModal>
-</template>
-<script setup lang="ts">
-import IconArrowLeft from "~icons/lucide/arrow-left"
-
-import { useI18n } from "~/composables/i18n"
-import { PropType, ref } from "vue"
-
-import { useSteps, defineStep } from "~/composables/step-components"
-import ImportExportList from "./ImportExportList.vue"
-
-import ImportExportSourcesList from "./ImportExportSourcesList.vue"
-import { ImporterOrExporter } from "~/components/importExport/types"
-
-const t = useI18n()
-
-const props = defineProps({
-  importerModules: {
-    // type: Array as PropType<ReturnType<typeof defineImporter>[]>,
-    type: Array as PropType<ImporterOrExporter[]>,
-    default: () => [],
-    required: true,
-  },
-  exporterModules: {
-    type: Array as PropType<ImporterOrExporter[]>,
-    default: () => [],
-    required: true,
-  },
-  modalTitle: {
-    type: String,
-    required: true,
-  },
-})
-
-const {
-  addStep,
-  currentStep,
-  goToStep,
-  goToNextStep,
-  goToPreviousStep,
-  hasPreviousStep,
-} = useSteps()
-
-const selectedImporterID = ref<string | null>(null)
-const selectedSourceID = ref<string | null>(null)
-
-const chooseImporterOrExporter = defineStep(
-  "choose_importer_or_exporter",
-  ImportExportList,
-  () => ({
-    importers: props.importerModules.map((importer) => ({
-      id: importer.metadata.id,
-      name: importer.metadata.name,
-      title: importer.metadata.title,
-      icon: importer.metadata.icon,
-      disabled: importer.metadata.disabled,
-    })),
-    exporters: props.exporterModules.map((exporter) => ({
-      id: exporter.metadata.id,
-      name: exporter.metadata.name,
-      title: exporter.metadata.title,
-      icon: exporter.metadata.icon,
-      disabled: exporter.metadata.disabled,
-      loading: exporter.metadata.isLoading?.value ?? false,
-    })),
-    "onImporter-selected": (id: string) => {
-      selectedImporterID.value = id
-
-      const selectedImporter = props.importerModules.find(
-        (i) => i.metadata.id === id
-      )
-
-      if (selectedImporter?.supported_sources) goToNextStep()
-      else if (selectedImporter?.component)
-        goToStep(selectedImporter.component.id)
-    },
-    "onExporter-selected": (id: string) => {
-      const selectedExporter = props.exporterModules.find(
-        (i) => i.metadata.id === id
-      )
-
-      if (selectedExporter && selectedExporter.action) {
-        selectedExporter.action()
-      }
-    },
-  })
-)
-
-const chooseImportSource = defineStep(
-  "choose_import_source",
-  ImportExportSourcesList,
-  () => {
-    const currentImporter = props.importerModules.find(
-      (i) => i.metadata.id === selectedImporterID.value
-    )
-
-    const sources = currentImporter?.supported_sources
-
-    if (!sources)
-      return {
-        sources: [],
-      }
-
-    sources.forEach((source) => {
-      addStep(source.step)
-    })
-
-    return {
-      sources: sources.map((source) => ({
-        id: source.id,
-        name: source.name,
-        icon: source.icon,
-      })),
-      "onImport-source-selected": (sourceID) => {
-        selectedSourceID.value = sourceID
-
-        const sourceStep = sources.find((s) => s.id === sourceID)?.step
-
-        if (sourceStep) {
-          goToStep(sourceStep.id)
-        }
-      },
-    }
-  }
-)
-
-addStep(chooseImporterOrExporter)
-addStep(chooseImportSource)
-
-props.importerModules.forEach((importer) => {
-  if (importer.component) {
-    addStep(importer.component)
-  }
-})
-
-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const hideModal = () => {
-  // resetImport()
-  emit("hide-modal")
-}
-</script>
--- a/packages/hoppscotch-common/src/components/importExport/ImportExportList.vue
+++ b/packages/hoppscotch-common/src/components/importExport/ImportExportList.vue
@@ -1,75 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <HoppSmartExpand>
-      <template #body>
-        <HoppSmartItem
-          v-for="importer in importers"
-          :key="importer.id"
-          :icon="importer.icon"
-          :label="t(`${importer.name}`)"
-          @click="emit('importer-selected', importer.id)"
-        />
-      </template>
-    </HoppSmartExpand>
-    <hr />
-    <div class="flex flex-col space-y-2">
-      <template v-for="exporter in exporters" :key="exporter.id">
-        <!-- adding the title to a span if the item is visible, otherwise the title won't be shown -->
-
-        <span
-          v-if="exporter.disabled && exporter.title"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="t(`${exporter.title}`)"
-          class="flex"
-        >
-          <HoppSmartItem
-            v-tippy="{ theme: 'tooltip' }"
-            :icon="exporter.icon"
-            :label="t(`${exporter.name}`)"
-            :disabled="exporter.disabled"
-            :loading="exporter.loading"
-            @click="emit('exporter-selected', exporter.id)"
-          />
-        </span>
-
-        <HoppSmartItem
-          v-else
-          v-tippy="{ theme: 'tooltip' }"
-          :icon="exporter.icon"
-          :title="t(`${exporter.title}`)"
-          :label="t(`${exporter.name}`)"
-          :loading="exporter.loading"
-          :disabled="exporter.disabled"
-          @click="emit('exporter-selected', exporter.id)"
-        />
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { Component } from "vue"
-
-const t = useI18n()
-
-type ImportExportEntryMeta = {
-  id: string
-  name: string
-  icon: Component
-  disabled: boolean
-  title?: string
-  loading?: boolean
-  isVisible?: boolean
-}
-
-defineProps<{
-  importers: ImportExportEntryMeta[]
-  exporters: ImportExportEntryMeta[]
-}>()
-
-const emit = defineEmits<{
-  (e: "importer-selected", importerID: string): void
-  (e: "exporter-selected", exporterID: string): void
-}>()
-</script>
--- a/packages/hoppscotch-common/src/components/importExport/ImportExportSourcesList.vue
+++ b/packages/hoppscotch-common/src/components/importExport/ImportExportSourcesList.vue
@@ -1,33 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <HoppSmartItem
-      v-for="source in sources"
-      :key="source.id"
-      :icon="source.icon"
-      :label="t(`${source.name}`)"
-      @click="emit('import-source-selected', source.id)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { Component } from "vue"
-
-const t = useI18n()
-
-type ListItemMeta = {
-  id: string
-  name: string
-  icon: Component
-  title?: string
-}
-
-defineProps<{
-  sources: ListItemMeta[]
-}>()
-
-const emit = defineEmits<{
-  (e: "import-source-selected", sourceID: string): void
-}>()
-</script>
--- a/packages/hoppscotch-common/src/components/importExport/ImportExportSteps/FileImport.vue
+++ b/packages/hoppscotch-common/src/components/importExport/ImportExportSteps/FileImport.vue
@@ -1,95 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <p class="flex items-center">
-      <span
-        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,
-        }"
-      >
-        <icon-lucide-check-circle class="svg-icons" />
-      </span>
-      <span>
-        {{ t(`${caption}`) }}
-      </span>
-    </p>
-    <div
-      class="flex flex-col ml-10 border border-dashed rounded border-dividerDark"
-    >
-      <input
-        id="inputChooseFileToImportFrom"
-        ref="inputChooseFileToImportFrom"
-        name="inputChooseFileToImportFrom"
-        type="file"
-        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="acceptedFileTypes"
-        @change="onFileChange"
-      />
-    </div>
-
-    <div>
-      <HoppButtonPrimary
-        class="w-full"
-        :label="t('import.title')"
-        :disabled="!hasFile"
-        @click="emit('importFromFile', fileContent)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue"
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
-
-defineProps<{
-  caption: string
-  acceptedFileTypes: string
-}>()
-
-const t = useI18n()
-const toast = useToast()
-
-const hasFile = ref(false)
-const fileContent = ref("")
-
-const inputChooseFileToImportFrom = ref<HTMLInputElement | any>()
-
-const emit = defineEmits<{
-  (e: "importFromFile", content: string): void
-}>()
-
-const onFileChange = () => {
-  const inputFileToImport = inputChooseFileToImportFrom.value
-
-  if (!inputFileToImport) {
-    hasFile.value = false
-    return
-  }
-
-  if (!inputFileToImport.files || inputFileToImport.files.length === 0) {
-    inputChooseFileToImportFrom.value[0].value = ""
-    hasFile.value = false
-    toast.show(t("action.choose_file").toString())
-    return
-  }
-
-  const reader = new FileReader()
-
-  reader.onload = ({ target }) => {
-    const content = target!.result as string | null
-    if (!content) {
-      hasFile.value = false
-      toast.show(t("action.choose_file").toString())
-      return
-    }
-
-    fileContent.value = content
-
-    hasFile.value = !!content?.length
-  }
-
-  reader.readAsText(inputFileToImport.files[0])
-}
-</script>
--- a/packages/hoppscotch-common/src/components/importExport/ImportExportSteps/MyCollectionImport.vue
+++ b/packages/hoppscotch-common/src/components/importExport/ImportExportSteps/MyCollectionImport.vue
@@ -1,65 +0,0 @@
-<template>
-  <div class="select-wrapper">
-    <select
-      v-model="mySelectedCollectionID"
-      autocomplete="off"
-      class="select"
-      autofocus
-    >
-      <option :key="undefined" :value="undefined" disabled selected>
-        {{ t("collection.select") }}
-      </option>
-      <option
-        v-for="(collection, collectionIndex) in myCollections"
-        :key="`collection-${collectionIndex}`"
-        :value="collectionIndex"
-        class="bg-primary"
-      >
-        {{ collection.name }}
-      </option>
-    </select>
-  </div>
-
-  <div class="my-4">
-    <HoppButtonPrimary
-      class="w-full"
-      :label="t('import.title')"
-      :disabled="!hasSelectedCollectionID"
-      @click="fetchCollectionFromMyCollections"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
-import { computed, ref } from "vue"
-import { useI18n } from "~/composables/i18n"
-import { useReadonlyStream } from "~/composables/stream"
-import { getRESTCollection, restCollections$ } from "~/newstore/collections"
-
-const t = useI18n()
-
-const mySelectedCollectionID = ref<number | undefined>(undefined)
-
-const hasSelectedCollectionID = computed(() => {
-  return mySelectedCollectionID.value !== undefined
-})
-
-const myCollections = useReadonlyStream(restCollections$, [])
-
-const emit = defineEmits<{
-  (e: "importFromMyCollection", content: HoppCollection<HoppRESTRequest>): void
-}>()
-
-const fetchCollectionFromMyCollections = async () => {
-  if (mySelectedCollectionID.value === undefined) {
-    return
-  }
-
-  const collection = getRESTCollection(mySelectedCollectionID.value)
-
-  if (collection) {
-    emit("importFromMyCollection", collection)
-  }
-}
-</script>
--- a/packages/hoppscotch-common/src/components/importExport/ImportExportSteps/UrlImport.vue
+++ b/packages/hoppscotch-common/src/components/importExport/ImportExportSteps/UrlImport.vue
@@ -1,95 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <p class="flex items-center">
-      <span
-        class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
-        :class="{
-          '!text-green-500': hasURL,
-        }"
-      >
-        <icon-lucide-check-circle class="svg-icons" />
-      </span>
-      <span>
-        {{ t(caption) }}
-      </span>
-    </p>
-    <p class="flex flex-col ml-10">
-      <input
-        v-model="inputChooseGistToImportFrom"
-        type="url"
-        class="input"
-        :placeholder="`${t('import.from_url')}`"
-      />
-    </p>
-
-    <div>
-      <HoppButtonPrimary
-        class="w-full"
-        :label="t('import.title')"
-        :disabled="!hasURL"
-        :loading="isFetchingUrl"
-        @click="fetchUrlData"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from "vue"
-import { useI18n } from "@composables/i18n"
-import { useToast } from "~/composables/toast"
-import axios, { AxiosResponse } from "axios"
-
-const t = useI18n()
-
-const toast = useToast()
-
-const props = defineProps<{
-  caption: string
-  fetchLogic?: (url: string) => Promise<AxiosResponse<any>>
-}>()
-
-const emit = defineEmits<{
-  (e: "importFromURL", content: unknown): void
-}>()
-
-const inputChooseGistToImportFrom = ref<string>("")
-const hasURL = ref(false)
-
-const isFetchingUrl = ref(false)
-
-watch(inputChooseGistToImportFrom, (url) => {
-  hasURL.value = !!url
-})
-
-const urlFetchLogic =
-  props.fetchLogic ??
-  async function (url: string) {
-    const res = await axios.get(url, {
-      transitional: {
-        forcedJSONParsing: false,
-        silentJSONParsing: false,
-        clarifyTimeoutError: true,
-      },
-    })
-
-    return res
-  }
-
-async function fetchUrlData() {
-  isFetchingUrl.value = true
-
-  try {
-    const res = await urlFetchLogic(inputChooseGistToImportFrom.value)
-
-    if (res.status === 200) {
-      emit("importFromURL", res.data)
-    }
-  } catch (e) {
-    toast.error(t("import.failed"))
-    console.log(e)
-  } finally {
-    isFetchingUrl.value = false
-  }
-}
-</script>
--- a/packages/hoppscotch-common/src/components/importExport/types.ts
+++ b/packages/hoppscotch-common/src/components/importExport/types.ts
@@ -1,23 +0,0 @@
-import { Component, Ref } from "vue"
-import { defineStep } from "~/composables/step-components"
-
-// TODO: move the metadata except disabled and isLoading to importers.ts
-export type ImporterOrExporter = {
-  metadata: {
-    id: string
-    name: string
-    icon: any
-    title: string
-    disabled: boolean
-    applicableTo: Array<"personal-workspace" | "team-workspace" | "url-import">
-    isLoading?: Ref<boolean>
-  }
-  supported_sources?: {
-    id: string
-    name: string
-    icon: Component
-    step: ReturnType<typeof defineStep>
-  }[]
-  component?: ReturnType<typeof defineStep>
-  action?: (...args: any[]) => any
-}
--- a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -44,39 +44,6 @@
          :icon="copyIcon"
          @click="copyResponse"
        />
-        <tippy
-          v-if="response.body"
-          interactive
-          trigger="click"
-          theme="popover"
-          :on-shown="() => copyInterfaceTippyActions.focus()"
-        >
-          <HoppButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="t('app.copy_interface_type')"
-            :icon="IconMore"
-          />
-          <template #content="{ hide }">
-            <div
-              ref="copyInterfaceTippyActions"
-              class="flex flex-col focus:outline-none"
-              tabindex="0"
-              @keyup.escape="hide()"
-            >
-              <HoppSmartItem
-                v-for="(language, index) in interfaceLanguages"
-                :key="index"
-                :label="language"
-                :icon="
-                  copiedInterfaceLanguage === language
-                    ? copyInterfaceIcon
-                    : IconCopy
-                "
-                @click="runCopyInterface(language)"
-              />
-            </div>
-          </template>
-        </tippy>
      </div>
    </div>
    <div
@@ -234,9 +201,7 @@
 <script setup lang="ts">
 import IconWrapText from "~icons/lucide/wrap-text"
 import IconFilter from "~icons/lucide/filter"
-import IconMore from "~icons/lucide/more-horizontal"
 import IconHelpCircle from "~icons/lucide/help-circle"
-import IconCopy from "~icons/lucide/copy"
 import * as LJSON from "lossless-json"
 import * as O from "fp-ts/Option"
 import * as E from "fp-ts/Either"
@@ -256,11 +221,9 @@ import {
  useCopyResponse,
  useResponseBody,
  useDownloadResponse,
-  useCopyInterface,
 } from "@composables/lens-actions"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
-import interfaceLanguages from "~/helpers/utils/interfaceLanguages"

 const t = useI18n()

@@ -272,13 +235,6 @@ const { responseBodyText } = useResponseBody(props.response)

 const toggleFilter = ref(false)
 const filterQueryText = ref("")
-const copiedInterfaceLanguage = ref("")
-
-const runCopyInterface = (language: string) => {
-  copyInterface(language).then(() => {
-    copiedInterfaceLanguage.value = language
-  })
-}

 type BodyParseError =
  | { type: "JSON_PARSE_FAILED" }
@@ -313,8 +269,9 @@ const jsonResponseBodyText = computed(() => {
      ),
      E.map(JSON.stringify)
    )
+  } else {
+    return E.right(responseBodyText.value)
  }
-  return E.right(responseBodyText.value)
 })

 const jsonBodyText = computed(() =>
@@ -362,7 +319,6 @@ const filterResponseError = computed(() =>
 )

 const { copyIcon, copyResponse } = useCopyResponse(jsonBodyText)
-const { copyInterfaceIcon, copyInterface } = useCopyInterface(jsonBodyText)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
  "application/json",
  jsonBodyText
@@ -371,7 +327,6 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
 // Template refs
 const tippyActions = ref<any | null>(null)
 const jsonResponse = ref<any | null>(null)
-const copyInterfaceTippyActions = ref<any | null>(null)
 const linewrapEnabled = ref(true)

 const { cursor } = useCodemirror(
--- a/packages/hoppscotch-common/src/components/lenses/renderers/mixins/TextContentRendererMixin.js
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/mixins/TextContentRendererMixin.js
@@ -5,11 +5,12 @@ export default {
  computed: {
    responseBodyText() {
      if (typeof this.response.body === "string") return this.response.body
+      else {
+        const res = new TextDecoder("utf-8").decode(this.response.body)

-      const res = new TextDecoder("utf-8").decode(this.response.body)
-
-      // HACK: Temporary trailing null character issue from the extension fix
-      return res.replace(/\0+$/, "")
+        // HACK: Temporary trailing null character issue from the extension fix
+        return res.replace(/\0+$/, "")
+      }
    },
  },
 }
--- a/packages/hoppscotch-common/src/components/profile/Shortcode.vue
+++ b/packages/hoppscotch-common/src/components/profile/Shortcode.vue
@@ -0,0 +1,122 @@
+<template>
+  <div
+    class="my-6 block w-full divide-y divide-dividerLight border border-dividerLight lg:my-0 lg:flex lg:divide-x lg:divide-y-0 lg:border-0"
+  >
+    <div class="table-box font-mono text-tiny">
+      {{ shortcode.id }}
+    </div>
+    <div class="table-box" :class="requestLabelColor">
+      {{ parseShortcodeRequest.method }}
+    </div>
+    <div class="table-box">
+      {{ parseShortcodeRequest.endpoint }}
+    </div>
+    <div ref="timeStampRef" class="table-box">
+      {{ dateStamp }}
+    </div>
+    <div class="table-box justify-center">
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.open_workspace')"
+        :to="`${shortcodeBaseURL}/r/${shortcode.id}`"
+        blank
+        :icon="IconExternalLink"
+        class="px-3 text-accent hover:text-accent"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.copy')"
+        color="green"
+        :icon="copyIconRefs"
+        class="px-3"
+        @click="copyShortcode(shortcode.id)"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.delete')"
+        :icon="IconTrash"
+        color="red"
+        class="px-3"
+        @click="deleteShortcode(shortcode.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import { pipe } from "fp-ts/function"
+import * as RR from "fp-ts/ReadonlyRecord"
+import * as O from "fp-ts/Option"
+import { translateToNewRequest } from "@hoppscotch/data"
+import { refAutoReset } from "@vueuse/core"
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { Shortcode } from "~/helpers/shortcodes/Shortcode"
+import { shortDateTime } from "~/helpers/utils/date"
+
+import IconTrash from "~icons/lucide/trash"
+import IconExternalLink from "~icons/lucide/external-link"
+import IconCopy from "~icons/lucide/copy"
+import IconCheck from "~icons/lucide/check"
+
+const t = useI18n()
+const toast = useToast()
+
+const props = defineProps<{
+  shortcode: Shortcode
+}>()
+
+const emit = defineEmits<{
+  (e: "delete-shortcode", codeID: string): void
+}>()
+
+const deleteShortcode = (codeID: string) => {
+  emit("delete-shortcode", codeID)
+}
+
+const requestMethodLabels = {
+  get: "text-green-500",
+  post: "text-yellow-500",
+  put: "text-blue-500",
+  delete: "text-red-500",
+  default: "text-gray-500",
+} as const
+
+const timeStampRef = ref()
+
+const copyIconRefs = refAutoReset<typeof IconCopy | typeof IconCheck>(
+  IconCopy,
+  1000
+)
+
+const parseShortcodeRequest = computed(() =>
+  pipe(props.shortcode.request, JSON.parse, translateToNewRequest)
+)
+
+const requestLabelColor = computed(() =>
+  pipe(
+    requestMethodLabels,
+    RR.lookup(parseShortcodeRequest.value.method.toLowerCase()),
+    O.getOrElseW(() => requestMethodLabels.default)
+  )
+)
+
+const dateStamp = computed(() => shortDateTime(props.shortcode.createdOn))
+
+const shortcodeBaseURL =
+  import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
+
+const copyShortcode = (codeID: string) => {
+  copyToClipboard(`${shortcodeBaseURL}/r/${codeID}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
+  copyIconRefs.value = IconCheck
+}
+</script>
+
+<style lang="scss" scoped>
+.table-box {
+  @apply flex flex-1 items-center truncate px-4 py-1;
+}
+</style>
--- a/packages/hoppscotch-common/src/components/profile/Shortcodes.vue
+++ b/packages/hoppscotch-common/src/components/profile/Shortcodes.vue
@@ -0,0 +1,168 @@
+<template>
+  <section class="p-4">
+    <h4 class="font-semibold text-secondaryDark">
+      {{ t("settings.short_codes") }}
+    </h4>
+    <div class="my-1 text-secondaryLight">
+      {{ t("settings.short_codes_description") }}
+    </div>
+    <div class="relative overflow-x-auto py-4">
+      <div v-if="loading" class="flex flex-col items-center justify-center">
+        <HoppSmartSpinner class="mb-4" />
+        <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+      </div>
+      <HoppSmartPlaceholder
+        v-if="!loading && myShortcodes.length === 0"
+        :src="`/images/states/${colorMode.value}/add_files.svg`"
+        :alt="`${t('empty.shortcodes')}`"
+        :text="t('empty.shortcodes')"
+      >
+      </HoppSmartPlaceholder>
+      <div v-else-if="!loading">
+        <div
+          class="hidden w-full rounded-t border-x border-t border-dividerLight bg-primaryLight lg:flex"
+        >
+          <div class="flex w-full overflow-y-scroll">
+            <div class="table-box">
+              {{ t("shortcodes.short_code") }}
+            </div>
+            <div class="table-box">
+              {{ t("shortcodes.method") }}
+            </div>
+            <div class="table-box">
+              {{ t("shortcodes.url") }}
+            </div>
+            <div class="table-box">
+              {{ t("shortcodes.created_on") }}
+            </div>
+            <div class="table-box justify-center">
+              {{ t("shortcodes.actions") }}
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex max-h-sm w-full flex-col items-center justify-between divide-dividerLight overflow-y-scroll rounded border border-dividerLight lg:divide-y lg:rounded-t-none"
+        >
+          <ProfileShortcode
+            v-for="(shortcode, shortcodeIndex) in myShortcodes"
+            :key="`shortcode-${shortcodeIndex}`"
+            :shortcode="shortcode"
+            @delete-shortcode="deleteShortcode"
+          />
+          <HoppSmartIntersection
+            v-if="hasMoreShortcodes && myShortcodes.length > 0"
+            @intersecting="loadMoreShortcodes()"
+          >
+            <div v-if="adapterLoading" class="flex flex-col items-center py-3">
+              <HoppSmartSpinner />
+            </div>
+          </HoppSmartIntersection>
+        </div>
+      </div>
+      <div
+        v-if="!loading && adapterError"
+        class="flex flex-col items-center py-4"
+      >
+        <icon-lucide-help-circle class="svg-icons mb-4" />
+        {{ getErrorMessage(adapterError) }}
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect, computed } from "vue"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { platform } from "~/platform"
+
+import { onAuthEvent, onLoggedIn } from "@composables/auth"
+import { useReadonlyStream } from "@composables/stream"
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
+import { useColorMode } from "@composables/theming"
+import { usePageHead } from "@composables/head"
+
+import ShortcodeListAdapter from "~/helpers/shortcodes/ShortcodeListAdapter"
+import { deleteShortcode as backendDeleteShortcode } from "~/helpers/backend/mutations/Shortcode"
+
+const t = useI18n()
+const toast = useToast()
+const colorMode = useColorMode()
+
+usePageHead({
+  title: computed(() => t("navigation.profile")),
+})
+
+const currentUser = useReadonlyStream(
+  platform.auth.getCurrentUserStream(),
+  platform.auth.getCurrentUser()
+)
+
+const displayName = ref(currentUser.value?.displayName)
+watchEffect(() => (displayName.value = currentUser.value?.displayName))
+
+const emailAddress = ref(currentUser.value?.email)
+watchEffect(() => (emailAddress.value = currentUser.value?.email))
+
+const adapter = new ShortcodeListAdapter(true)
+const adapterLoading = useReadonlyStream(adapter.loading$, false)
+const adapterError = useReadonlyStream(adapter.error$, null)
+const myShortcodes = useReadonlyStream(adapter.shortcodes$, [])
+const hasMoreShortcodes = useReadonlyStream(adapter.hasMoreShortcodes$, true)
+
+const loading = computed(
+  () => adapterLoading.value && myShortcodes.value.length === 0
+)
+
+onLoggedIn(() => {
+  try {
+    adapter.initialize()
+  } catch (e) {}
+})
+
+onAuthEvent((ev) => {
+  if (ev.event === "logout" && adapter.isInitialized()) {
+    adapter.dispose()
+    return
+  }
+})
+
+const deleteShortcode = (codeID: string) => {
+  pipe(
+    backendDeleteShortcode(codeID),
+    TE.match(
+      (err: GQLError<string>) => {
+        toast.error(`${getErrorMessage(err)}`)
+      },
+      () => {
+        toast.success(`${t("shortcodes.deleted")}`)
+      }
+    )
+  )()
+}
+
+const loadMoreShortcodes = () => {
+  adapter.loadMore()
+}
+
+const getErrorMessage = (err: GQLError<string>) => {
+  if (err.type === "network_error") {
+    return t("error.network_error")
+  } else {
+    switch (err.error) {
+      case "shortcode/not_found":
+        return t("shortcodes.not_found")
+      default:
+        return t("error.something_went_wrong")
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-box {
+  @apply flex flex-1 items-center truncate px-4 py-2;
+}
+</style>
--- a/packages/hoppscotch-common/src/components/profile/UserDelete.vue
+++ b/packages/hoppscotch-common/src/components/profile/UserDelete.vue
@@ -26,7 +26,7 @@
        </div>
        <div
          v-else-if="myTeams.length"
-          class="bg-bannerInfo flex flex-col space-y-2 rounded-lg border border-red-500 p-4 text-secondaryDark"
+          class="flex flex-col space-y-2 rounded-lg border border-red-500 bg-error p-4 text-secondaryDark"
        >
          <h2 class="font-bold text-red-500">
            {{ t("error.danger_zone") }}
@@ -45,7 +45,7 @@
        </div>
        <div v-else>
          <div
-            class="bg-bannerInfo mb-4 flex flex-col space-y-2 rounded-lg border border-red-500 p-4 text-secondaryDark"
+            class="mb-4 flex flex-col space-y-2 rounded-lg border border-red-500 bg-error p-4 text-secondaryDark"
          >
            <h2 class="font-bold text-red-500">
              {{ t("error.danger_zone") }}
@@ -173,8 +173,13 @@ const deleteUserAccount = async () => {
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
+  } else {
+    switch (err.error) {
+      case "shortcode/not_found":
+        return t("shortcodes.not_found")
+      default:
+        return t("error.something_went_wrong")
+    }
  }
-
-  return t("error.something_went_wrong")
 }
 </script>
--- a/packages/hoppscotch-common/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-common/src/components/realtime/Communication.vue
@@ -33,12 +33,12 @@
          theme="popover"
          :on-shown="() => tippyActions.focus()"
        >
-          <HoppSmartSelectWrapper>
+          <span class="select-wrapper">
            <HoppButtonSecondary
              :label="contentType || t('state.none').toLowerCase()"
              class="ml-2 rounded-none pr-8"
            />
-          </HoppSmartSelectWrapper>
+          </span>
          <template #content="{ hide }">
            <div
              ref="tippyActions"
@@ -279,7 +279,6 @@ defineActionHandler("request.send-cancel", sendMessage)
 :deep(.cm-panels) {
  @apply top-upperSecondaryStickyFold #{!important};
 }
-
 .eventFeildShown :deep(.cm-panels),
 .cmResponsePrimaryStickyFold :deep(.cm-panels) {
  @apply top-upperTertiaryStickyFold #{!important};
--- a/packages/hoppscotch-common/src/components/realtime/ConnectionConfig.vue
+++ b/packages/hoppscotch-common/src/components/realtime/ConnectionConfig.vue
@@ -62,12 +62,12 @@
              {{ t("mqtt.lw_qos") }}
            </label>
            <tippy interactive trigger="click" theme="popover">
-              <HoppSmartSelectWrapper>
+              <span class="select-wrapper">
                <HoppButtonSecondary
                  class="ml-2 rounded-none pr-8"
                  :label="`${config.lwQos}`"
                />
-              </HoppSmartSelectWrapper>
+              </span>
              <template #content="{ hide }">
                <div class="flex flex-col" role="menu">
                  <HoppSmartItem
--- a/packages/hoppscotch-common/src/components/realtime/Log.vue
+++ b/packages/hoppscotch-common/src/components/realtime/Log.vue
@@ -35,8 +35,8 @@
            autoScrollEnabled ? t('action.turn_off') : t('action.turn_on')
          }`"
          :icon="IconChevronsDown"
-          :color="autoScrollEnabled ? 'green' : 'red'"
-          @click="autoScrollEnabled = !autoScrollEnabled"
+          :class="toggleAutoscrollColor"
+          @click="toggleAutoscroll()"
        />
      </div>
    </div>
@@ -60,7 +60,7 @@
 </template>

 <script setup lang="ts">
-import { ref, PropType, watch, Ref } from "vue"
+import { ref, PropType, computed, watch, Ref } from "vue"
 import IconTrash from "~icons/lucide/trash"
 import IconArrowUp from "~icons/lucide/arrow-up"
 import IconArrowDown from "~icons/lucide/arrow-down"
@@ -123,4 +123,12 @@ watch(
  }, 200),
  { flush: "post" }
 )
+
+const toggleAutoscroll = () => {
+  autoScrollEnabled.value = !autoScrollEnabled.value
+}
+
+const toggleAutoscrollColor = computed(() =>
+  autoScrollEnabled.value ? "text-green-500" : "text-red-500"
+)
 </script>
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.133 1h4.409a.5.5 0 0 1 .5.5v4.422c0 .026-.035.033-.045.01l-.048-.112a9.095 9.095 0 0 0-4.825-4.776c-.023-.01-.016-.044.01-.044Zm-8.588.275h-.5v1h.5c7.027 0 12.229 5.199 12.229 12.226v.5h1v-.5c0-7.58-5.65-13.226-13.229-13.226Zm.034 4.22h-.5v1h.5c2.361 0 4.348.837 5.744 2.238 1.395 1.401 2.227 3.395 2.227 5.758v.5h1v-.5c0-2.604-.921-4.859-2.52-6.463-1.596-1.605-3.845-2.532-6.45-2.532Zm-.528 8.996v-4.423c0-.041.033-.074.074-.074a4.923 4.923 0 0 1 4.923 4.922.074.074 0 0 1-.074.074H1.551a.5.5 0 0 1-.5-.5Z" clip-rule="evenodd"/></svg>