refactor: monorepo+pnpm (removed husky)

2021-09-10 00:28:28 +05:30
parent 917550ff4d
commit b28f82a881
445 changed files with 81301 additions and 63752 deletions
--- a/packages/hoppscotch-app/components/README.md
+++ b/packages/hoppscotch-app/components/README.md
@@ -0,0 +1,5 @@
+# COMPONENTS
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._
--- a/packages/hoppscotch-app/components/app/Announcement.vue
+++ b/packages/hoppscotch-app/components/app/Announcement.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="bg-error flex justify-between">
+    <span
+      class="
+        flex
+        py-2
+        px-4
+        transition
+        relative
+        items-center
+        justify-center
+        group
+      "
+    >
+      <i class="mr-2 material-icons">info_outline</i>
+      <span class="text-secondaryDark">
+        <span class="md:hidden">
+          {{ $t("helpers.offline_short") }}
+        </span>
+        <span class="hidden md:inline">
+          {{ $t("helpers.offline") }}
+        </span>
+      </span>
+    </span>
+  </div>
+</template>
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <div class="flex justify-between">
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
+          svg="sidebar"
+          :class="{ 'transform -rotate-180': !LEFT_SIDEBAR }"
+          @click.native="LEFT_SIDEBAR = !LEFT_SIDEBAR"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${
+            ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
+          } ${$t('layout.zen_mode')}`"
+          :svg="ZEN_MODE ? 'minimize' : 'maximize'"
+          :class="{
+            '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
+              ZEN_MODE,
+          }"
+          @click.native="ZEN_MODE = !ZEN_MODE"
+        />
+      </div>
+      <div class="flex">
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                svg="help-circle"
+                class="!rounded-none"
+                :label="$t('app.help')"
+              />
+            </template>
+            <div class="flex flex-col">
+              <SmartItem
+                svg="book"
+                :label="$t('app.documentation')"
+                to="https://docs.hoppscotch.io"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <SmartItem
+                svg="zap"
+                :label="$t('app.keyboard_shortcuts')"
+                @click.native="
+                  showShortcuts = true
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                svg="gift"
+                :label="$t('app.whats_new')"
+                to="https://docs.hoppscotch.io/changelog"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <SmartItem
+                svg="message-circle"
+                :label="$t('app.chat_with_us')"
+                @click.native="
+                  chatWithUs()
+                  $refs.options.tippy().hide()
+                "
+              />
+              <hr />
+              <SmartItem
+                svg="twitter"
+                :label="$t('app.twitter')"
+                to="https://hoppscotch.io/twitter"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <SmartItem
+                svg="user-plus"
+                :label="$t('app.invite')"
+                @click.native="
+                  showShare = true
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                svg="lock"
+                :label="$t('app.terms_and_privacy')"
+                to="https://docs.hoppscotch.io/privacy"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <!-- <SmartItem :label="$t('app.status')" /> -->
+              <div class="flex opacity-50 py-2 px-4">
+                {{ `${$t("app.name")} ${$t("app.version")}` }}
+              </div>
+            </div>
+          </tippy>
+        </span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          svg="zap"
+          :title="$t('app.shortcuts')"
+          @click.native="showShortcuts = true"
+        />
+        <ButtonSecondary
+          v-if="navigatorShare"
+          v-tippy="{ theme: 'tooltip' }"
+          svg="share-2"
+          :title="$t('request.share')"
+          @click.native="nativeShare()"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
+          svg="sidebar"
+          class="transform rotate-180"
+          :class="{ 'rotate-360': !RIGHT_SIDEBAR }"
+          @click.native="RIGHT_SIDEBAR = !RIGHT_SIDEBAR"
+        />
+      </div>
+    </div>
+    <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
+    <AppShare :show="showShare" @hide-modal="showShare = false" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { defineActionHandler } from "~/helpers/actions"
+import { showChat } from "~/helpers/support"
+import { useSetting } from "~/newstore/settings"
+
+export default defineComponent({
+  setup() {
+    const showShortcuts = ref(false)
+    const showShare = ref(false)
+
+    defineActionHandler("flyouts.keybinds.toggle", () => {
+      showShortcuts.value = !showShortcuts.value
+    })
+
+    defineActionHandler("modals.share.toggle", () => {
+      showShare.value = !showShare.value
+    })
+
+    return {
+      LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
+      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      ZEN_MODE: useSetting("ZEN_MODE"),
+
+      navigatorShare: !!navigator.share,
+
+      showShortcuts,
+      showShare,
+    }
+  },
+  watch: {
+    ZEN_MODE() {
+      this.LEFT_SIDEBAR = !this.ZEN_MODE
+    },
+  },
+  methods: {
+    nativeShare() {
+      if (navigator.share) {
+        navigator
+          .share({
+            title: "Hoppscotch",
+            text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
+            url: "https://hoppscotch.io",
+          })
+          .then(() => {})
+          .catch(console.error)
+      } else {
+        // fallback
+      }
+    },
+    chatWithUs() {
+      showChat()
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/app/Fuse.vue
+++ b/packages/hoppscotch-app/components/app/Fuse.vue
@@ -0,0 +1,38 @@
+<template>
+  <div key="outputHash">
+    <AppPowerSearchEntry
+      v-for="(shortcut, shortcutIndex) in searchResults"
+      :key="`shortcut-${shortcutIndex}`"
+      :ref="`item-${shortcutIndex}`"
+      :shortcut="shortcut.item"
+      @action="$emit('action', shortcut.item.action)"
+    />
+    <div
+      v-if="searchResults.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <span class="text-center">
+        {{ $t("state.nothing_found") }} "{{ search }}"
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "@nuxtjs/composition-api"
+import Fuse from "fuse.js"
+
+const props = defineProps<{
+  input: Record<string, any>[]
+  search: string
+}>()
+
+const options = {
+  keys: ["keys", "label", "action", "tags"],
+}
+
+const fuse = new Fuse(props.input, options)
+
+const searchResults = computed(() => fuse.search(props.search))
+</script>
--- a/packages/hoppscotch-app/components/app/GitHubStarButton.vue
+++ b/packages/hoppscotch-app/components/app/GitHubStarButton.vue
@@ -0,0 +1,36 @@
+<template>
+  <transition name="fade" appear>
+    <GithubButton
+      title="Star Hoppscotch"
+      href="https://github.com/hoppscotch/hoppscotch"
+      :data-color-scheme="
+        $colorMode.value != 'light'
+          ? $colorMode.value == 'black'
+            ? 'dark'
+            : 'dark_dimmed'
+          : 'light'
+      "
+      :data-show-count="true"
+      data-text="Star"
+      aria-label="Star Hoppscotch on GitHub"
+      :data-size="size"
+    />
+  </transition>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import GithubButton from "vue-github-button"
+
+export default defineComponent({
+  components: {
+    GithubButton,
+  },
+  props: {
+    size: {
+      type: String,
+      default: undefined,
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <header
+      class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
+    >
+      <div class="space-x-2 inline-flex items-center">
+        <ButtonSecondary
+          class="tracking-wide !font-bold !text-secondaryDark"
+          label="HOPPSCOTCH"
+          to="/"
+        />
+        <AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
+      </div>
+      <div class="space-x-2 inline-flex items-center">
+        <ButtonSecondary
+          id="installPWA"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('header.install_pwa')"
+          svg="download"
+          class="rounded"
+          @click.native="showInstallPrompt()"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${$t('app.search')} <kbd>/</kbd>`"
+          svg="search"
+          class="rounded"
+          @click.native="showSearch = true"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${$t('support.title')} <kbd>?</kbd>`"
+          svg="life-buoy"
+          class="rounded"
+          @click.native="showSupport = true"
+        />
+        <ButtonSecondary
+          v-if="currentUser === null"
+          svg="upload-cloud"
+          :label="$t('header.save_workspace')"
+          filled
+          class="hidden !font-semibold md:flex"
+          @click.native="showLogin = true"
+        />
+        <ButtonPrimary
+          v-if="currentUser === null"
+          :label="$t('header.login')"
+          @click.native="showLogin = true"
+        />
+        <span v-else class="px-2">
+          <tippy ref="user" interactive trigger="click" theme="popover" arrow>
+            <template #trigger>
+              <ProfilePicture
+                v-if="currentUser.photoURL"
+                v-tippy="{
+                  theme: 'tooltip',
+                }"
+                :url="currentUser.photoURL"
+                :alt="currentUser.displayName"
+                :title="currentUser.displayName"
+                indicator
+                :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
+              />
+              <ButtonSecondary
+                v-else
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('header.account')"
+                class="rounded"
+                svg="user"
+              />
+            </template>
+            <SmartItem
+              to="/settings"
+              svg="settings"
+              :label="$t('navigation.settings')"
+              @click.native="$refs.user.tippy().hide()"
+            />
+            <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
+          </tippy>
+        </span>
+      </div>
+    </header>
+    <AppAnnouncement v-if="!isOnLine" />
+    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
+    <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "@nuxtjs/composition-api"
+import intializePwa from "~/helpers/pwa"
+import { currentUser$ } from "~/helpers/fb/auth"
+import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { defineActionHandler } from "~/helpers/actions"
+
+export default defineComponent({
+  setup() {
+    const showSupport = ref(false)
+    const showSearch = ref(false)
+
+    defineActionHandler("modals.support.toggle", () => {
+      showSupport.value = !showSupport.value
+    })
+    defineActionHandler("modals.search.toggle", () => {
+      showSearch.value = !showSearch.value
+    })
+
+    return {
+      currentUser: useReadonlyStream(currentUser$, null),
+      showSupport,
+      showSearch,
+    }
+  },
+  data() {
+    return {
+      // Once the PWA code is initialized, this holds a method
+      // that can be called to show the user the installation
+      // prompt.
+      showInstallPrompt: null,
+      showLogin: false,
+      isOnLine: navigator.onLine,
+    }
+  },
+  async mounted() {
+    window.addEventListener("online", () => {
+      this.isOnLine = true
+    })
+    window.addEventListener("offline", () => {
+      this.isOnLine = false
+    })
+
+    // Initializes the PWA code - checks if the app is installed,
+    // etc.
+    this.showInstallPrompt = await intializePwa()
+
+    const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
+    if (!cookiesAllowed) {
+      this.$toast.show(this.$t("app.we_use_cookies").toString(), {
+        icon: "cookie",
+        duration: 0,
+        action: [
+          {
+            text: this.$t("action.learn_more").toString(),
+            onClick: (_, toastObject) => {
+              setLocalConfig("cookiesAllowed", "yes")
+              toastObject.goAway(0)
+              window
+                .open("https://docs.hoppscotch.io/privacy", "_blank")
+                .focus()
+            },
+          },
+          {
+            text: this.$t("action.dismiss").toString(),
+            onClick: (_, toastObject) => {
+              setLocalConfig("cookiesAllowed", "yes")
+              toastObject.goAway(0)
+            },
+          },
+        ],
+      })
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/app/Logo.vue
+++ b/packages/hoppscotch-app/components/app/Logo.vue
@@ -0,0 +1,33 @@
+<template>
+  <svg
+    class="logo"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M17 10.54C16.78 7.44 14.63 5 12 5s-4.78 2.44-5 5.54C4 11.23 2 12.5 2 14c0 2.21 4.5 4 10 4s10-1.79 10-4c0-1.5-2-2.77-5-3.46m-2.07 1.3c-1.9.21-3.96.21-5.86 0c-.04-.28-.07-.56-.07-.84c0-2.2 1.35-4 3-4s3 1.8 3 4c0 .28 0 .56-.07.84z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<style scoped lang="scss">
+.logo {
+  animation: 200ms appear;
+}
+
+@keyframes appear {
+  0% {
+    @apply opacity-0;
+  }
+  100% {
+    @apply opacity-100;
+  }
+}
+</style>
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearch.vue
@@ -0,0 +1,77 @@
+<template>
+  <SmartModal v-if="show" full-width @close="$emit('hide-modal')">
+    <template #body>
+      <input
+        id="command"
+        v-model="search"
+        v-focus
+        type="text"
+        autocomplete="off"
+        name="command"
+        :placeholder="$t('app.type_a_command_search').toString()"
+        class="
+          bg-transparent
+          border-b border-dividerLight
+          flex flex-shrink-0
+          text-secondaryDark text-base
+          p-6
+        "
+      />
+      <AppFuse
+        v-if="search"
+        :input="fuse"
+        :search="search"
+        @action="runAction"
+      />
+      <div
+        v-else
+        class="
+          divide-y divide-dividerLight
+          flex flex-col
+          space-y-4
+          flex-1
+          overflow-auto
+          hide-scrollbar
+        "
+      >
+        <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
+          <h5 class="my-2 text-secondaryLight py-2 px-6">
+            {{ $t(map.section) }}
+          </h5>
+          <AppPowerSearchEntry
+            v-for="(shortcut, shortcutIndex) in map.shortcuts"
+            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
+            :shortcut="shortcut"
+            @action="runAction"
+          />
+        </div>
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+import { HoppAction, invokeAction } from "~/helpers/actions"
+import { spotlight as mappings, fuse } from "~/helpers/shortcuts"
+
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const search = ref("")
+
+const hideModal = () => {
+  search.value = ""
+  emit("hide-modal")
+}
+
+const runAction = (command: HoppAction) => {
+  invokeAction(command)
+  hideModal()
+}
+</script>
--- a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="
+      cursor-pointer
+      flex
+      py-2
+      px-6
+      transition
+      items-center
+      group
+      hover:bg-primaryLight
+      focus:outline-none
+      focus-visible:bg-primaryLight
+    "
+    tabindex="0"
+    @click="$emit('action', shortcut.action)"
+    @keydown.enter="$emit('action', shortcut.action)"
+  >
+    <SmartIcon
+      class="
+        mr-4
+        opacity-75
+        transition
+        svg-icons
+        group-hover:opacity-100
+        group-focus:opacity-100
+      "
+      :name="shortcut.icon"
+    />
+    <span
+      class="
+        flex flex-1
+        mr-4
+        transition
+        group-hover:text-secondaryDark
+        group-focus:text-secondaryDark
+      "
+    >
+      {{ $t(shortcut.label) }}
+    </span>
+    <span
+      v-for="(key, keyIndex) in shortcut.keys"
+      :key="`key-${keyIndex}`"
+      class="shortcut-key"
+    >
+      {{ key }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  shortcut: Object
+}>()
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>
--- a/packages/hoppscotch-app/components/app/Section.vue
+++ b/packages/hoppscotch-app/components/app/Section.vue
@@ -0,0 +1,18 @@
+<template>
+  <section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
+    <slot></slot>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      default: "Section",
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/app/Share.vue
+++ b/packages/hoppscotch-app/components/app/Share.vue
@@ -0,0 +1,125 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('app.invite_your_friends')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <p class="text-secondaryLight mb-8 px-2">
+        {{ $t("app.invite_description") }}
+      </p>
+      <div class="flex flex-col space-y-2 px-2">
+        <div class="grid gap-4 grid-cols-3">
+          <a
+            v-for="(platform, index) in platforms"
+            :key="`platform-${index}`"
+            :href="platform.link"
+            target="_blank"
+            class="share-link"
+          >
+            <SmartIcon :name="platform.icon" class="h-6 w-6" />
+            <span class="mt-3">
+              {{ platform.name }}
+            </span>
+          </a>
+          <button class="share-link" @click="copyAppLink">
+            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
+            <span class="mt-3">
+              {{ $t("app.copy") }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  data() {
+    const url = "https://hoppscotch.io"
+    const text = "Hoppscotch - Open source API development ecosystem."
+    const description =
+      "Helps you create requests faster, saving precious time on development."
+    const subject =
+      "Checkout Hoppscotch - an open source API development ecosystem"
+    const summary = `Hi there!%0D%0A%0D%0AI thought you’ll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
+    const twitter = "hoppscotch_io"
+
+    return {
+      url: "https://hoppscotch.io",
+      copyIcon: "copy",
+      platforms: [
+        {
+          name: "Email",
+          icon: "mail",
+          link: `mailto:?subject=${subject}&body=${summary}`,
+        },
+        {
+          name: "Twitter",
+          icon: "brands/twitter",
+          link: `https://twitter.com/intent/tweet?text=${text} ${description}&url=${url}&via=${twitter}`,
+        },
+        {
+          name: "Facebook",
+          icon: "brands/facebook",
+          link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+        },
+        {
+          name: "Reddit",
+          icon: "brands/reddit",
+          link: `https://www.reddit.com/submit?url=${url}&title=${text}`,
+        },
+        {
+          name: "LinkedIn",
+          icon: "brands/linkedin",
+          link: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+        },
+      ],
+    }
+  },
+  methods: {
+    copyAppLink() {
+      copyToClipboard(this.url)
+      this.copyIcon = "check"
+      this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
+        icon: "content_paste",
+      })
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.share-link {
+  @apply border border-dividerLight;
+  @apply rounded;
+  @apply flex-col flex;
+  @apply p-4;
+  @apply items-center;
+  @apply justify-center;
+  @apply hover:(bg-primaryLight text-secondaryDark);
+  @apply focus:outline-none;
+  @apply focus-visible:border-divider;
+
+  svg {
+    @apply opacity-80;
+  }
+
+  &:hover {
+    svg {
+      @apply opacity-100;
+    }
+  }
+}
+</style>
--- a/packages/hoppscotch-app/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/components/app/Shortcuts.vue
@@ -0,0 +1,140 @@
+<template>
+  <AppSlideOver :show="show" @close="close()">
+    <template #content>
+      <div
+        class="
+          bg-primary
+          border-b border-dividerLight
+          flex
+          p-2
+          top-0
+          z-10
+          items-center
+          sticky
+          justify-between
+        "
+      >
+        <h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
+        <div class="flex">
+          <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
+        </div>
+      </div>
+      <div class="bg-primary border-b border-dividerLight">
+        <div class="flex flex-col my-4 mx-6">
+          <input
+            v-model="filterText"
+            v-focus
+            type="search"
+            autocomplete="off"
+            class="
+              bg-primaryLight
+              border border-dividerLight
+              rounded
+              flex
+              w-full
+              py-2
+              px-4
+              focus-visible:border-divider
+            "
+            :placeholder="$t('action.search')"
+          />
+        </div>
+      </div>
+      <div v-if="filterText">
+        <div
+          v-for="(map, mapIndex) in searchResults"
+          :key="`map-${mapIndex}`"
+          class="space-y-4 py-4 px-6"
+        >
+          <h1 class="font-semibold text-secondaryDark">
+            {{ $t(map.item.section) }}
+          </h1>
+          <AppShortcutsEntry
+            v-for="(shortcut, index) in map.item.shortcuts"
+            :key="`shortcut-${index}`"
+            :shortcut="shortcut"
+          />
+        </div>
+        <div
+          v-if="searchResults.length === 0"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">manage_search</i>
+          <span class="text-center">
+            {{ $t("state.nothing_found") }} "{{ filterText }}"
+          </span>
+        </div>
+      </div>
+      <div
+        v-else
+        class="
+          divide-y divide-dividerLight
+          flex flex-col flex-1
+          overflow-auto
+          hide-scrollbar
+        "
+      >
+        <div
+          v-for="(map, mapIndex) in mappings"
+          :key="`map-${mapIndex}`"
+          class="space-y-4 py-4 px-6"
+        >
+          <h1 class="font-semibold text-secondaryDark">
+            {{ $t(map.section) }}
+          </h1>
+          <AppShortcutsEntry
+            v-for="(shortcut, shortcutIndex) in map.shortcuts"
+            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
+            :shortcut="shortcut"
+          />
+        </div>
+      </div>
+    </template>
+  </AppSlideOver>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "@nuxtjs/composition-api"
+import Fuse from "fuse.js"
+import mappings from "~/helpers/shortcuts"
+
+defineProps<{
+  show: boolean
+}>()
+
+const options = {
+  keys: ["shortcuts.label"],
+}
+
+const fuse = new Fuse(mappings, options)
+
+const filterText = ref("")
+
+const searchResults = computed(() => fuse.search(filterText.value))
+
+const emit = defineEmits<{
+  (e: "close"): void
+}>()
+
+const close = () => {
+  filterText.value = ""
+  emit("close")
+}
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>
--- a/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
+++ b/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="flex items-center">
+    <span class="flex flex-1 mr-4">
+      {{ $t(shortcut.label) }}
+    </span>
+    <span
+      v-for="(key, index) in shortcut.keys"
+      :key="`key-${index}`"
+      class="shortcut-key"
+    >
+      {{ key }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  shortcut: Object
+}>()
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/packages/hoppscotch-app/components/app/Sidenav.vue
@@ -0,0 +1,133 @@
+<template>
+  <aside class="flex h-full justify-between md:flex-col">
+    <nav class="flex flex-nowrap md:flex-col">
+      <NuxtLink
+        v-for="(navigation, index) in primaryNavigation"
+        :key="`navigation-${index}`"
+        :to="localePath(navigation.target)"
+        class="nav-link"
+        tabindex="0"
+      >
+        <i v-if="navigation.icon" class="material-icons">
+          {{ navigation.icon }}
+        </i>
+        <div v-if="navigation.svg">
+          <SmartIcon :name="navigation.svg" class="svg-icons" />
+        </div>
+        <span v-if="LEFT_SIDEBAR">{{ navigation.title }}</span>
+        <tippy
+          v-if="!LEFT_SIDEBAR"
+          :placement="windowInnerWidth.x.value >= 768 ? 'right' : 'bottom'"
+          theme="tooltip"
+          :content="navigation.title"
+        />
+      </NuxtLink>
+    </nav>
+  </aside>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import useWindowSize from "~/helpers/utils/useWindowSize"
+import { useSetting } from "~/newstore/settings"
+
+export default defineComponent({
+  setup() {
+    return {
+      windowInnerWidth: useWindowSize(),
+      LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
+    }
+  },
+  data() {
+    return {
+      primaryNavigation: [
+        {
+          target: "index",
+          svg: "link-2",
+          title: this.$t("navigation.rest"),
+        },
+        {
+          target: "graphql",
+          svg: "graphql",
+          title: this.$t("navigation.graphql"),
+        },
+        {
+          target: "realtime",
+          svg: "globe",
+          title: this.$t("navigation.realtime"),
+        },
+        {
+          target: "documentation",
+          svg: "book-open",
+          title: this.$t("navigation.doc"),
+        },
+        {
+          target: "settings",
+          svg: "settings",
+          title: this.$t("navigation.settings"),
+        },
+      ],
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.nav-link {
+  @apply relative;
+  @apply p-4;
+  @apply flex flex-col flex-1;
+  @apply items-center;
+  @apply justify-center;
+  @apply hover:(bg-primaryDark text-secondaryDark);
+  @apply focus-visible:text-secondaryDark;
+
+  &::after {
+    @apply absolute;
+    @apply inset-x-0;
+    @apply md:inset-x-auto;
+    @apply md:inset-y-0;
+    @apply bottom-0;
+    @apply md:bottom-auto;
+    @apply md:left-0;
+    @apply z-2;
+    @apply h-0.5;
+    @apply md:h-full;
+    @apply w-full;
+    @apply md:w-0.5;
+
+    content: "";
+  }
+
+  &:focus::after {
+    @apply bg-divider;
+  }
+
+  .material-icons,
+  .svg-icons {
+    @apply opacity-75;
+  }
+
+  span {
+    @apply mt-2;
+    @apply font-font-medium;
+
+    font-size: calc(var(--body-font-size) - 0.062rem);
+  }
+
+  &.exact-active-link {
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover:text-secondaryDark;
+
+    .material-icons,
+    .svg-icons {
+      @apply opacity-100;
+    }
+
+    &::after {
+      @apply bg-accent;
+    }
+  }
+}
+</style>
--- a/packages/hoppscotch-app/components/app/SlideOver.vue
+++ b/packages/hoppscotch-app/components/app/SlideOver.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <transition v-if="show" name="fade" appear>
+      <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
+        <div
+          class="bg-primaryDark opacity-90 inset-0 absolute"
+          tabindex="0"
+          @click="close()"
+        ></div>
+      </div>
+    </transition>
+    <aside
+      class="
+        bg-primary
+        flex flex-col
+        h-full
+        max-w-full
+        transform
+        transition
+        top-0
+        ease-in-out
+        right-0
+        w-96
+        z-30
+        duration-300
+        fixed
+        overflow-auto
+      "
+      :class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
+    >
+      <slot name="content"></slot>
+    </aside>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(show) {
+        if (process.client) {
+          if (show) document.body.style.setProperty("overflow", "hidden")
+          else document.body.style.removeProperty("overflow")
+        }
+      },
+    },
+  },
+  mounted() {
+    document.addEventListener("keydown", (e) => {
+      if (e.keyCode === 27 && this.show) this.close()
+    })
+  },
+  methods: {
+    close() {
+      this.$emit("close")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/app/Support.vue
+++ b/packages/hoppscotch-app/components/app/Support.vue
@@ -0,0 +1,97 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('support.title')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col space-y-2">
+        <SmartItem
+          svg="book"
+          :label="$t('app.documentation')"
+          to="https://docs.hoppscotch.io"
+          :description="$t('support.documentation')"
+          info-icon="chevron_right"
+          active
+          blank
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          svg="zap"
+          :label="$t('app.keyboard_shortcuts')"
+          :description="$t('support.shortcuts')"
+          info-icon="chevron_right"
+          active
+          @click.native="
+            showShortcuts()
+            hideModal()
+          "
+        />
+        <SmartItem
+          svg="gift"
+          :label="$t('app.whats_new')"
+          to="https://docs.hoppscotch.io/changelog"
+          :description="$t('support.changelog')"
+          info-icon="chevron_right"
+          active
+          blank
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          svg="message-circle"
+          :label="$t('app.chat_with_us')"
+          :description="$t('support.chat')"
+          info-icon="chevron_right"
+          active
+          @click.native="
+            chatWithUs()
+            hideModal()
+          "
+        />
+        <SmartItem
+          svg="brands/discord"
+          :label="$t('app.join_discord_community')"
+          to="https://hoppscotch.io/discord"
+          blank
+          :description="$t('support.community')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          svg="brands/twitter"
+          :label="$t('app.twitter')"
+          to="https://hoppscotch.io/twitter"
+          blank
+          :description="$t('support.twitter')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { invokeAction } from "~/helpers/actions"
+import { showChat } from "~/helpers/support"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  methods: {
+    chatWithUs() {
+      showChat()
+    },
+    showShortcuts() {
+      invokeAction("flyouts.keybinds.toggle")
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/button/Primary.vue
+++ b/packages/hoppscotch-app/components/button/Primary.vue
@@ -0,0 +1,148 @@
+<template>
+  <SmartLink
+    :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
+    :exact="exact"
+    :blank="blank"
+    class="
+      font-bold
+      py-2
+      transition
+      inline-flex
+      items-center
+      justify-center
+      focus:outline-none
+      focus-visible:bg-accentDark
+    "
+    :class="[
+      color
+        ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
+        : `text-accentContrast bg-accent hover:bg-accentDark focus-visible:bg-accentDark`,
+      label ? 'px-4' : 'px-2',
+      rounded ? 'rounded-full' : 'rounded',
+      { 'opacity-75 cursor-not-allowed': disabled },
+      { 'pointer-events-none': loading },
+      { 'px-6 py-4 text-lg': large },
+      { 'shadow-lg hover:shadow-xl': shadow },
+      {
+        'text-white bg-gradient-to-tr from-gradientFrom via-gradientVia to-gradientTo':
+          gradient,
+      },
+      {
+        'border border-accent hover:border-accentDark focus-visible:border-accentDark':
+          outline,
+      },
+    ]"
+    :disabled="disabled"
+    :tabindex="loading ? '-1' : '0'"
+  >
+    <span
+      v-if="!loading"
+      class="inline-flex items-center justify-center whitespace-nowrap"
+      :class="{ 'flex-row-reverse': reverse }"
+    >
+      <i
+        v-if="icon"
+        class="material-icons"
+        :class="[
+          { '!text-2xl': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      >
+        {{ icon }}
+      </i>
+      <SmartIcon
+        v-if="svg"
+        :name="svg"
+        class="svg-icons"
+        :class="[
+          { '!h-6 !w-6': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      />
+      {{ label }}
+      <div v-if="shortcut.length" class="ml-2">
+        <kbd
+          v-for="(key, index) in shortcut"
+          :key="`key-${index}`"
+          class="bg-accentLight rounded ml-1 px-1 inline-flex"
+        >
+          {{ key }}
+        </kbd>
+      </div>
+    </span>
+    <SmartSpinner v-else />
+  </SmartLink>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    to: {
+      type: String,
+      default: "",
+    },
+    exact: {
+      type: Boolean,
+      default: true,
+    },
+    blank: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    svg: {
+      type: String,
+      default: "",
+    },
+    color: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    shadow: {
+      type: Boolean,
+      default: false,
+    },
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+    gradient: {
+      type: Boolean,
+      default: false,
+    },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    shortcut: {
+      type: Array,
+      default: () => [],
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/button/Secondary.vue
+++ b/packages/hoppscotch-app/components/button/Secondary.vue
@@ -0,0 +1,138 @@
+<template>
+  <SmartLink
+    :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
+    :exact="exact"
+    :blank="blank"
+    class="
+      font-medium
+      py-2
+      transition
+      inline-flex
+      items-center
+      justify-center
+      whitespace-nowrap
+      hover:bg-primaryDark
+      focus:outline-none
+      focus-visible:bg-primaryDark
+    "
+    :class="[
+      color
+        ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
+        : 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
+      label ? 'rounded px-4' : 'px-2',
+      { 'rounded-full': rounded },
+      { 'opacity-75 cursor-not-allowed': disabled },
+      { 'flex-row-reverse': reverse },
+      { 'px-6 py-4 text-lg': large },
+      {
+        'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
+          outline,
+      },
+      { 'bg-primaryDark': filled },
+    ]"
+    :disabled="disabled"
+    tabindex="0"
+  >
+    <i
+      v-if="icon"
+      class="material-icons"
+      :class="[
+        { '!text-2xl': large },
+        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+      ]"
+    >
+      {{ icon }}
+    </i>
+    <SmartIcon
+      v-if="svg"
+      :name="svg"
+      class="svg-icons"
+      :class="[
+        { '!h-6 !w-6': large },
+        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+      ]"
+    />
+    {{ label }}
+    <div v-if="shortcut.length" class="ml-2">
+      <kbd
+        v-for="(key, index) in shortcut"
+        :key="`key-${index}`"
+        class="
+          bg-dividerLight
+          rounded
+          text-secondaryLight
+          ml-1
+          px-1
+          inline-flex
+        "
+      >
+        {{ key }}
+      </kbd>
+    </div>
+  </SmartLink>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    to: {
+      type: String,
+      default: "",
+    },
+    exact: {
+      type: Boolean,
+      default: true,
+    },
+    blank: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    svg: {
+      type: String,
+      default: "",
+    },
+    color: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    shortcut: {
+      type: Array,
+      default: () => [],
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/Add.vue
+++ b/packages/hoppscotch-app/components/collections/Add.vue
@@ -0,0 +1,64 @@
+<template>
+  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelAdd"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="addNewCollection"
+        />
+        <label for="selectLabelAdd">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="addNewCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  data() {
+    return {
+      name: null,
+    }
+  },
+  methods: {
+    addNewCollection() {
+      if (!this.name) {
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
+      this.$emit("submit", this.name)
+      this.hideModal()
+    },
+    hideModal() {
+      this.name = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/AddFolder.vue
+++ b/packages/hoppscotch-app/components/collections/AddFolder.vue
@@ -0,0 +1,72 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.new')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelAddFolder"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="addFolder"
+        />
+        <label for="selectLabelAddFolder">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="addFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    folder: { type: Object, default: () => {} },
+    folderPath: { type: String, default: null },
+    collectionIndex: { type: Number, default: null },
+  },
+  data() {
+    return {
+      name: null,
+    }
+  },
+  methods: {
+    addFolder() {
+      if (!this.name) {
+        this.$toast.error(this.$t("folder.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
+      this.$emit("add-folder", {
+        name: this.name,
+        folder: this.folder,
+        path: this.folderPath || `${this.collectionIndex}`,
+      })
+      this.hideModal()
+    },
+    hideModal() {
+      this.name = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/ChooseType.vue
+++ b/packages/hoppscotch-app/components/collections/ChooseType.vue
@@ -0,0 +1,111 @@
+<template>
+  <div v-if="show">
+    <SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
+      <SmartTab
+        :id="'my-collections'"
+        :label="$t('collection.my_collections')"
+        :selected="true"
+      />
+      <SmartTab
+        v-if="currentUser && currentUser.eaInvited && !doc"
+        :id="'team-collections'"
+        :label="$t('collection.team_collections')"
+      >
+        <SmartIntersection @intersecting="onTeamSelectIntersect">
+          <div class="select-wrapper">
+            <select
+              id="team"
+              type="text"
+              autocomplete="off"
+              autofocus
+              class="
+                bg-transparent
+                border-t border-dividerLight
+                cursor-pointer
+                flex
+                font-medium
+                w-full
+                py-2
+                px-4
+                appearance-none
+                hover:bg-primaryDark
+              "
+              @change="updateSelectedTeam(myTeams[$event.target.value])"
+            >
+              <option
+                :key="undefined"
+                :value="undefined"
+                hidden
+                disabled
+                selected
+              >
+                {{ $t("collection.select_team") }}
+              </option>
+              <option
+                v-for="(team, index) in myTeams"
+                :key="`team-${index}`"
+                :value="index"
+              >
+                {{ team.name }}
+              </option>
+            </select>
+          </div>
+        </SmartIntersection>
+      </SmartTab>
+    </SmartTabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import gql from "graphql-tag"
+import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+
+export default defineComponent({
+  props: {
+    doc: Boolean,
+    show: Boolean,
+  },
+  setup() {
+    return {
+      currentUser: useReadonlyStream(currentUserInfo$, null),
+    }
+  },
+  data() {
+    return {
+      skipTeamsFetching: true,
+    }
+  },
+  apollo: {
+    myTeams: {
+      query: gql`
+        query GetMyTeams {
+          myTeams {
+            id
+            name
+            myRole
+          }
+        }
+      `,
+      pollInterval: 10000,
+      skip() {
+        return this.skipTeamsFetching
+      },
+    },
+  },
+  methods: {
+    onTeamSelectIntersect() {
+      // Load team data as soon as intersection
+      this.$apollo.queries.myTeams.refetch()
+      this.skipTeamsFetching = false
+    },
+    updateCollectionsType(tabID: string) {
+      this.$emit("update-collection-type", tabID)
+    },
+    updateSelectedTeam(team: any) {
+      this.$emit("update-selected-team", team)
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/Edit.vue
+++ b/packages/hoppscotch-app/components/collections/Edit.vue
@@ -0,0 +1,65 @@
+<template>
+  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelEdit"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="saveCollection"
+        />
+        <label for="selectLabelEdit">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    placeholderCollName: { type: String, default: null },
+  },
+  data() {
+    return {
+      name: null,
+    }
+  },
+  methods: {
+    saveCollection() {
+      if (!this.name) {
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
+      this.$emit("submit", this.name)
+      this.hideModal()
+    },
+    hideModal() {
+      this.name = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/EditFolder.vue
+++ b/packages/hoppscotch-app/components/collections/EditFolder.vue
@@ -0,0 +1,65 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.edit')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelEditFolder"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="editFolder"
+        />
+        <label for="selectLabelEditFolder">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="editFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  data() {
+    return {
+      name: null,
+    }
+  },
+  methods: {
+    editFolder() {
+      if (!this.name) {
+        this.$toast.error(this.$t("folder.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
+      this.$emit("submit", this.name)
+      this.hideModal()
+    },
+    hideModal() {
+      this.name = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/EditRequest.vue
+++ b/packages/hoppscotch-app/components/collections/EditRequest.vue
@@ -0,0 +1,64 @@
+<template>
+  <SmartModal v-if="show" :title="$t('modal.edit_request')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelEditReq"
+          v-model="requestUpdateData.name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="saveRequest"
+        />
+        <label for="selectLabelEditReq">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="saveRequest" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    placeholderReqName: { type: String, default: null },
+  },
+  data() {
+    return {
+      requestUpdateData: {
+        name: null,
+      },
+    }
+  },
+  methods: {
+    saveRequest() {
+      if (!this.requestUpdateData.name) {
+        this.$toast.error(this.$t("request.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
+      this.$emit("submit", this.requestUpdateData)
+      this.hideModal()
+    },
+    hideModal() {
+      this.requestUpdateData = { name: null }
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/ImportExport.vue
@@ -0,0 +1,559 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('modal.collections')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <ButtonSecondary
+        v-if="mode == 'import_from_my_collections'"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('action.go_back')"
+        class="rounded"
+        svg="arrow-left"
+        @click.native="
+          mode = 'import_export'
+          mySelectedCollectionID = undefined
+        "
+      />
+      <span>
+        <tippy
+          v-if="
+            mode == 'import_export' && collectionsType.type == 'my-collections'
+          "
+          ref="options"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('action.more')"
+              class="rounded"
+              svg="more-vertical"
+            />
+          </template>
+          <SmartItem
+            icon="assignment_returned"
+            :label="$t('import.from_gist')"
+            @click.native="
+              readCollectionGist
+              $refs.options.tippy().hide()
+            "
+          />
+          <span
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              !currentUser
+                ? $t('export.require_github')
+                : currentUser.provider !== 'github.com'
+                ? $t('export.require_github')
+                : null
+            "
+          >
+            <SmartItem
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              icon="assignment_turned_in"
+              :label="$t('export.create_secret_gist')"
+              @click.native="
+                createCollectionGist()
+                $refs.options.tippy().hide()
+              "
+            />
+          </span>
+        </tippy>
+      </span>
+    </template>
+    <template #body>
+      <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.replace_current')"
+          svg="file"
+          :label="$t('action.replace_json')"
+          @click.native="openDialogChooseFileToReplaceWith"
+        />
+        <input
+          ref="inputChooseFileToReplaceWith"
+          class="input"
+          type="file"
+          style="display: none"
+          accept="application/json"
+          @change="replaceWithJSON"
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.preserve_current')"
+          svg="folder-plus"
+          :label="$t('import.json')"
+          @click.native="openDialogChooseFileToImportFrom"
+        />
+        <input
+          ref="inputChooseFileToImportFrom"
+          class="input"
+          type="file"
+          style="display: none"
+          accept="application/json"
+          @change="importFromJSON"
+        />
+        <SmartItem
+          v-if="collectionsType.type == 'team-collections'"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.preserve_current')"
+          svg="user"
+          :label="$t('import.from_my_collections')"
+          @click.native="mode = 'import_from_my_collections'"
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          svg="download"
+          :label="$t('export.as_json')"
+          @click.native="exportJSON"
+        />
+      </div>
+      <div
+        v-if="mode == 'import_from_my_collections'"
+        class="flex flex-col px-2"
+      >
+        <div class="select-wrapper">
+          <select
+            type="text"
+            autocomplete="off"
+            class="select"
+            autofocus
+            @change="
+              ($event) => {
+                mySelectedCollectionID = $event.target.value
+              }
+            "
+          >
+            <option
+              :key="undefined"
+              :value="undefined"
+              hidden
+              disabled
+              selected
+            >
+              Select Collection
+            </option>
+            <option
+              v-for="(collection, index) in myCollections"
+              :key="`collection-${index}`"
+              :value="index"
+            >
+              {{ collection.name }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div v-if="mode == 'import_from_my_collections'">
+        <span>
+          <ButtonPrimary
+            :disabled="mySelectedCollectionID == undefined"
+            svg="folder-plus"
+            :label="$t('import.title')"
+            @click.native="importFromMyCollections"
+          />
+        </span>
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { currentUser$ } from "~/helpers/fb/auth"
+import * as teamUtils from "~/helpers/teams/utils"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  restCollections$,
+  setRESTCollections,
+  appendRESTCollections,
+} from "~/newstore/collections"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    collectionsType: { type: Object, default: () => {} },
+  },
+  setup() {
+    return {
+      myCollections: useReadonlyStream(restCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
+  data() {
+    return {
+      showJsonCode: false,
+      mode: "import_export",
+      mySelectedCollectionID: undefined,
+      collectionJson: "",
+    }
+  },
+  methods: {
+    async createCollectionGist() {
+      this.getJSONCollection()
+      await this.$axios
+        .$post(
+          "https://api.github.com/gists",
+          {
+            files: {
+              "hoppscotch-collections.json": {
+                content: this.collectionJson,
+              },
+            },
+          },
+          {
+            headers: {
+              Authorization: `token ${this.currentUser.accessToken}`,
+              Accept: "application/vnd.github.v3+json",
+            },
+          }
+        )
+        .then((res) => {
+          this.$toast.success(this.$t("export.gist_created"), {
+            icon: "done",
+          })
+          window.open(res.html_url)
+        })
+        .catch((e) => {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error_outline",
+          })
+          console.error(e)
+        })
+    },
+    async readCollectionGist() {
+      const gist = prompt(this.$t("import.gist_url"))
+      if (!gist) return
+      await this.$axios
+        .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
+          headers: {
+            Accept: "application/vnd.github.v3+json",
+          },
+        })
+        .then(({ files }) => {
+          const collections = JSON.parse(Object.values(files)[0].content)
+          setRESTCollections(collections)
+          this.fileImported()
+        })
+        .catch((e) => {
+          this.failedImport()
+          console.error(e)
+        })
+    },
+    hideModal() {
+      this.mode = "import_export"
+      this.mySelectedCollectionID = undefined
+      this.$emit("hide-modal")
+    },
+    openDialogChooseFileToReplaceWith() {
+      this.$refs.inputChooseFileToReplaceWith.click()
+    },
+    openDialogChooseFileToImportFrom() {
+      this.$refs.inputChooseFileToImportFrom.click()
+    },
+    replaceWithJSON() {
+      const reader = new FileReader()
+      reader.onload = ({ target }) => {
+        const content = target.result
+        let 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 if (
+          collections.info &&
+          collections.info.schema.includes("v2.1.0")
+        ) {
+          collections = [this.parsePostmanCollection(collections)]
+        } else {
+          this.failedImport()
+        }
+        if (this.collectionsType.type === "team-collections") {
+          teamUtils
+            .replaceWithJSON(
+              this.$apollo,
+              collections,
+              this.collectionsType.selectedTeam.id
+            )
+            .then((status) => {
+              if (status) {
+                this.fileImported()
+              } else {
+                this.failedImport()
+              }
+            })
+            .catch((e) => {
+              console.error(e)
+              this.failedImport()
+            })
+        } else {
+          setRESTCollections(collections)
+          this.fileImported()
+        }
+      }
+      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
+      this.$refs.inputChooseFileToReplaceWith.value = ""
+    },
+    importFromJSON() {
+      const reader = new FileReader()
+      reader.onload = ({ target }) => {
+        const content = target.result
+        let 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 if (
+          collections.info &&
+          collections.info.schema.includes("v2.1.0")
+        ) {
+          // replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
+          collections = JSON.parse(
+            content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>")
+          )
+          collections = [this.parsePostmanCollection(collections)]
+        } else {
+          this.failedImport()
+          return
+        }
+        if (this.collectionsType.type === "team-collections") {
+          teamUtils
+            .importFromJSON(
+              this.$apollo,
+              collections,
+              this.collectionsType.selectedTeam.id
+            )
+            .then((status) => {
+              if (status) {
+                this.$emit("update-team-collections")
+                this.fileImported()
+              } else {
+                this.failedImport()
+              }
+            })
+            .catch((e) => {
+              console.error(e)
+              this.failedImport()
+            })
+        } else {
+          appendRESTCollections(collections)
+          this.fileImported()
+        }
+      }
+      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
+      this.$refs.inputChooseFileToImportFrom.value = ""
+    },
+    importFromMyCollections() {
+      teamUtils
+        .importFromMyCollections(
+          this.$apollo,
+          this.mySelectedCollectionID,
+          this.collectionsType.selectedTeam.id
+        )
+        .then((success) => {
+          if (success) {
+            this.fileImported()
+            this.$emit("update-team-collections")
+          } else {
+            this.failedImport()
+          }
+        })
+        .catch((e) => {
+          console.error(e)
+          this.failedImport()
+        })
+    },
+    async getJSONCollection() {
+      if (this.collectionsType.type === "my-collections") {
+        this.collectionJson = JSON.stringify(this.myCollections, null, 2)
+      } else {
+        this.collectionJson = await teamUtils.exportAsJSON(
+          this.$apollo,
+          this.collectionsType.selectedTeam.id
+        )
+      }
+      return this.collectionJson
+    },
+    exportJSON() {
+      this.getJSONCollection()
+      const dataToWrite = this.collectionJson
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      }, 1000)
+    },
+    fileImported() {
+      this.$toast.success(this.$t("state.file_imported"), {
+        icon: "folder_shared",
+      })
+    },
+    failedImport() {
+      this.$toast.error(this.$t("import.failed"), {
+        icon: "error_outline",
+      })
+    },
+    parsePostmanCollection({ info, name, item }) {
+      const hoppscotchCollection = {
+        name: "",
+        folders: [],
+        requests: [],
+      }
+
+      hoppscotchCollection.name = info ? info.name : name
+
+      if (item && item.length > 0) {
+        for (const collectionItem of item) {
+          if (collectionItem.request) {
+            if (
+              Object.prototype.hasOwnProperty.call(
+                hoppscotchCollection,
+                "folders"
+              )
+            ) {
+              hoppscotchCollection.name = info ? info.name : name
+              hoppscotchCollection.requests.push(
+                this.parsePostmanRequest(collectionItem)
+              )
+            } else {
+              hoppscotchCollection.name = name || ""
+              hoppscotchCollection.requests.push(
+                this.parsePostmanRequest(collectionItem)
+              )
+            }
+          } else if (this.hasFolder(collectionItem)) {
+            hoppscotchCollection.folders.push(
+              this.parsePostmanCollection(collectionItem)
+            )
+          } else {
+            hoppscotchCollection.requests.push(
+              this.parsePostmanRequest(collectionItem)
+            )
+          }
+        }
+      }
+      return hoppscotchCollection
+    },
+    parsePostmanRequest({ name, request }) {
+      const pwRequest = {
+        url: "",
+        path: "",
+        method: "",
+        auth: "",
+        httpUser: "",
+        httpPassword: "",
+        passwordFieldType: "password",
+        bearerToken: "",
+        headers: [],
+        params: [],
+        bodyParams: [],
+        rawParams: "",
+        rawInput: false,
+        contentType: "",
+        requestType: "",
+        name: "",
+      }
+
+      pwRequest.name = name
+      if (request.url) {
+        const requestObjectUrl = request.url.raw.match(
+          /^(.+:\/\/[^/]+|{[^/]+})(\/[^?]+|).*$/
+        )
+        if (requestObjectUrl) {
+          pwRequest.url = requestObjectUrl[1]
+          pwRequest.path = requestObjectUrl[2] ? requestObjectUrl[2] : ""
+        }
+      }
+      pwRequest.method = request.method
+      const itemAuth = request.auth ? request.auth : ""
+      const authType = itemAuth ? itemAuth.type : ""
+      if (authType === "basic") {
+        pwRequest.auth = "Basic Auth"
+        pwRequest.httpUser =
+          itemAuth.basic[0].key === "username"
+            ? itemAuth.basic[0].value
+            : itemAuth.basic[1].value
+        pwRequest.httpPassword =
+          itemAuth.basic[0].key === "password"
+            ? itemAuth.basic[0].value
+            : itemAuth.basic[1].value
+      } else if (authType === "oauth2") {
+        pwRequest.auth = "OAuth 2.0"
+        pwRequest.bearerToken =
+          itemAuth.oauth2[0].key === "accessToken"
+            ? itemAuth.oauth2[0].value
+            : itemAuth.oauth2[1].value
+      } else if (authType === "bearer") {
+        pwRequest.auth = "Bearer Token"
+        pwRequest.bearerToken = itemAuth.bearer[0].value
+      }
+      const requestObjectHeaders = request.header
+      if (requestObjectHeaders) {
+        pwRequest.headers = requestObjectHeaders
+        for (const header of pwRequest.headers) {
+          delete header.name
+          delete header.type
+        }
+      }
+      if (request.url) {
+        const requestObjectParams = request.url.query
+        if (requestObjectParams) {
+          pwRequest.params = requestObjectParams
+          for (const param of pwRequest.params) {
+            delete param.disabled
+          }
+        }
+      }
+      if (request.body) {
+        if (request.body.mode === "urlencoded") {
+          const params = request.body.urlencoded
+          pwRequest.bodyParams = params || []
+          for (const param of pwRequest.bodyParams) {
+            delete param.type
+          }
+        } else if (request.body.mode === "raw") {
+          pwRequest.rawInput = true
+          pwRequest.rawParams = request.body.raw
+        }
+      }
+      return pwRequest
+    },
+    hasFolder(item) {
+      return Object.prototype.hasOwnProperty.call(item, "item")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-app/components/collections/SaveRequest.vue
@@ -0,0 +1,243 @@
+<template>
+  <SmartModal v-if="show" :title="$t('collection.save_as')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <div class="flex relative">
+          <input
+            id="selectLabelSaveReq"
+            v-model="requestName"
+            v-focus
+            class="input floating-input"
+            placeholder=" "
+            type="text"
+            autocomplete="off"
+            @keyup.enter="saveRequestAs"
+          />
+          <label for="selectLabelSaveReq">
+            {{ $t("request.name") }}
+          </label>
+        </div>
+        <label class="px-4 pt-4 pb-4">
+          {{ $t("collection.select_location") }}
+        </label>
+        <CollectionsGraphql
+          v-if="mode === 'graphql'"
+          :doc="false"
+          :show-coll-actions="false"
+          :picked="picked"
+          :saving-mode="true"
+          @select="onSelect"
+        />
+        <Collections
+          v-else
+          :picked="picked"
+          :save-request="true"
+          @select="onSelect"
+          @update-collection="collectionsType.type = $event"
+          @update-coll-type="onUpdateCollType"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveRequestAs"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import * as teamUtils from "~/helpers/teams/utils"
+import {
+  saveRESTRequestAs,
+  editRESTRequest,
+  editGraphqlRequest,
+  saveGraphqlRequestAs,
+} from "~/newstore/collections"
+import { getGQLSession, useGQLRequestName } from "~/newstore/GQLSession"
+import {
+  getRESTRequest,
+  useRESTRequestName,
+  setRESTSaveContext,
+} from "~/newstore/RESTSession"
+
+export default defineComponent({
+  props: {
+    // mode can be either "graphql" or "rest"
+    mode: { type: String, default: "rest" },
+    show: Boolean,
+  },
+  setup(props) {
+    return {
+      requestName:
+        props.mode === "rest" ? useRESTRequestName() : useGQLRequestName(),
+    }
+  },
+  data() {
+    return {
+      requestData: {
+        name: this.requestName,
+        collectionIndex: undefined,
+        folderName: undefined,
+        requestIndex: undefined,
+      },
+      collectionsType: {
+        type: "my-collections",
+        selectedTeam: undefined,
+      },
+      picked: null,
+    }
+  },
+  watch: {
+    "requestData.collectionIndex": function resetFolderAndRequestIndex() {
+      // if user has chosen some folder, than selected other collection, which doesn't have any folders
+      // than `requestUpdateData.folderName` won't be reseted
+      this.$data.requestData.folderName = undefined
+      this.$data.requestData.requestIndex = undefined
+    },
+    "requestData.folderName": function resetRequestIndex() {
+      this.$data.requestData.requestIndex = undefined
+    },
+    editingRequest({ name }) {
+      this.$data.requestData.name = name || this.$data.defaultRequestName
+    },
+  },
+  methods: {
+    onUpdateCollType(newCollType) {
+      this.collectionsType = newCollType
+    },
+    onSelect({ picked }) {
+      this.picked = picked
+    },
+    async saveRequestAs() {
+      if (!this.requestName) {
+        this.$toast.error(this.$t("error.empty_req_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
+      if (this.picked == null) {
+        this.$toast.error(this.$t("collection.select"), {
+          icon: "error_outline",
+        })
+        return
+      }
+
+      const requestUpdated =
+        this.mode === "rest" ? getRESTRequest() : getGQLSession()
+
+      // Filter out all REST file inputs
+      if (this.mode === "rest" && requestUpdated.bodyParams) {
+        requestUpdated.bodyParams = requestUpdated.bodyParams.map((param) =>
+          param?.value?.[0] instanceof File ? { ...param, value: "" } : param
+        )
+      }
+
+      if (this.picked.pickedType === "my-request") {
+        editRESTRequest(
+          this.picked.folderPath,
+          this.picked.requestIndex,
+          requestUpdated
+        )
+        setRESTSaveContext({
+          originLocation: "user-collection",
+          folderPath: this.picked.folderPath,
+          requestIndex: this.picked.requestIndex,
+        })
+      } else if (this.picked.pickedType === "my-folder") {
+        const insertionIndex = saveRESTRequestAs(
+          this.picked.folderPath,
+          requestUpdated
+        )
+        setRESTSaveContext({
+          originLocation: "user-collection",
+          folderPath: this.picked.folderPath,
+          requestIndex: insertionIndex,
+        })
+      } else if (this.picked.pickedType === "my-collection") {
+        const insertionIndex = saveRESTRequestAs(
+          `${this.picked.collectionIndex}`,
+          requestUpdated
+        )
+        setRESTSaveContext({
+          originLocation: "user-collection",
+          folderPath: `${this.picked.collectionIndex}`,
+          requestIndex: insertionIndex,
+        })
+      } else if (this.picked.pickedType === "teams-request") {
+        teamUtils.overwriteRequestTeams(
+          this.$apollo,
+          JSON.stringify(requestUpdated),
+          requestUpdated.name,
+          this.picked.requestID
+        )
+        setRESTSaveContext({
+          originLocation: "team-collection",
+          requestID: this.picked.requestID,
+        })
+      } else if (this.picked.pickedType === "teams-folder") {
+        const req = await teamUtils.saveRequestAsTeams(
+          this.$apollo,
+          JSON.stringify(requestUpdated),
+          requestUpdated.name,
+          this.collectionsType.selectedTeam.id,
+          this.picked.folderID
+        )
+
+        if (req && req.id) {
+          setRESTSaveContext({
+            originLocation: "team-collection",
+            requestID: req.id,
+            teamID: this.collectionsType.selectedTeam.id,
+            collectionID: this.picked.folderID,
+          })
+        }
+      } else if (this.picked.pickedType === "teams-collection") {
+        const req = await teamUtils.saveRequestAsTeams(
+          this.$apollo,
+          JSON.stringify(requestUpdated),
+          requestUpdated.name,
+          this.collectionsType.selectedTeam.id,
+          this.picked.collectionID
+        )
+
+        if (req && req.id) {
+          setRESTSaveContext({
+            originLocation: "team-collection",
+            requestID: req.id,
+            teamID: this.collectionsType.selectedTeam.id,
+            collectionID: this.picked.collectionID,
+          })
+        }
+      } else if (this.picked.pickedType === "gql-my-request") {
+        editGraphqlRequest(
+          this.picked.folderPath,
+          this.picked.requestIndex,
+          requestUpdated
+        )
+      } else if (this.picked.pickedType === "gql-my-folder") {
+        saveGraphqlRequestAs(this.picked.folderPath, requestUpdated)
+      } else if (this.picked.pickedType === "gql-my-collection") {
+        saveGraphqlRequestAs(`${this.picked.collectionIndex}`, requestUpdated)
+      }
+      this.$toast.success(this.$t("request.added"), {
+        icon: "post_add",
+      })
+
+      this.hideModal()
+    },
+    hideModal() {
+      this.picked = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/Add.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Add.vue
@@ -0,0 +1,74 @@
+<template>
+  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlAdd"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="addNewCollection"
+        />
+        <label for="selectLabelGqlAdd">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="addNewCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { addGraphqlCollection, makeCollection } from "~/newstore/collections"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  data() {
+    return {
+      name: null as string | null,
+    }
+  },
+  methods: {
+    addNewCollection() {
+      if (!this.name) {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
+        })
+        return
+      }
+
+      addGraphqlCollection(
+        makeCollection<HoppGQLRequest>({
+          name: this.name,
+          folders: [],
+          requests: [],
+        })
+      )
+
+      this.hideModal()
+    },
+    hideModal() {
+      this.name = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/AddFolder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/AddFolder.vue
@@ -0,0 +1,66 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.new')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlAddFolder"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="addFolder"
+        />
+        <label for="selectLabelGqlAddFolder">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="addFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    folderPath: { type: String, default: null },
+    collectionIndex: { type: Number, default: null },
+  },
+  data() {
+    return {
+      name: null,
+    }
+  },
+  methods: {
+    addFolder() {
+      // TODO: Blocking when name is null ?
+
+      this.$emit("add-folder", {
+        name: this.name,
+        path: this.folderPath || `${this.collectionIndex}`,
+      })
+      this.hideModal()
+    },
+    hideModal() {
+      this.name = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -0,0 +1,237 @@
+<template>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
+    <div
+      class="flex items-center group"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <span
+        class="cursor-pointer flex px-4 justify-center items-center"
+        @click="toggleShowChildren()"
+      >
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate"> {{ collection.name }} </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          svg="folder-plus"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="
+            $emit('add-folder', {
+              path: `${collectionIndex}`,
+            })
+          "
+        />
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                svg="more-vertical"
+              />
+            </template>
+            <SmartItem
+              svg="folder-plus"
+              :label="$t('folder.new')"
+              @click.native="
+                $emit('add-folder', {
+                  path: `${collectionIndex}`,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="edit"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-collection')
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="trash-2"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
+    </div>
+    <div v-if="showChildren || isFiltered">
+      <CollectionsGraphqlFolder
+        v-for="(folder, index) in collection.folders"
+        :key="`folder-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :folder="folder"
+        :folder-index="index"
+        :folder-path="`${collectionIndex}/${index}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :is-filtered="isFiltered"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <CollectionsGraphqlRequest
+        v-for="(request, index) in collection.requests"
+        :key="`request-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="-1"
+        :folder-name="collection.name"
+        :folder-path="`${collectionIndex}`"
+        :request-index="index"
+        :doc="doc"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <div
+        v-if="
+          collection.folders.length === 0 && collection.requests.length === 0
+        "
+        class="
+          border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-6
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+        <span class="text-center">
+          {{ $t("empty.collection") }}
+        </span>
+      </div>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_collection')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeCollection"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import {
+  removeGraphqlCollection,
+  moveGraphqlRequest,
+} from "~/newstore/collections"
+
+export default defineComponent({
+  props: {
+    picked: { type: Object, default: null },
+    // Whether the viewing context is related to picking (activates 'select' events)
+    savingMode: { type: Boolean, default: false },
+    collectionIndex: { type: Number, default: null },
+    collection: { type: Object, default: () => {} },
+    doc: Boolean,
+    isFiltered: Boolean,
+  },
+  data() {
+    return {
+      showChildren: false,
+      dragging: false,
+      selectedFolder: {},
+      confirmRemove: false,
+    }
+  },
+  computed: {
+    isSelected(): boolean {
+      return (
+        this.picked &&
+        this.picked.pickedType === "gql-my-collection" &&
+        this.picked.collectionIndex === this.collectionIndex
+      )
+    },
+    getCollectionIcon() {
+      if (this.isSelected) return "check-circle"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else return "folder"
+    },
+  },
+  methods: {
+    pick() {
+      this.$emit("select", {
+        picked: {
+          pickedType: "gql-my-collection",
+          collectionIndex: this.collectionIndex,
+        },
+      })
+    },
+    toggleShowChildren() {
+      if (this.savingMode) {
+        this.pick()
+      }
+
+      this.showChildren = !this.showChildren
+    },
+    removeCollection() {
+      // Cancel pick if picked collection is deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "gql-my-collection" &&
+        this.picked.collectionIndex === this.collectionIndex
+      ) {
+        this.$emit("select", { picked: null })
+      }
+      removeGraphqlCollection(this.collectionIndex)
+      this.$toast.success(this.$t("state.deleted").toString(), {
+        icon: "delete",
+      })
+    },
+    dropEvent({ dataTransfer }: any) {
+      this.dragging = !this.dragging
+
+      const folderPath = dataTransfer.getData("folderPath")
+      const requestIndex = dataTransfer.getData("requestIndex")
+
+      moveGraphqlRequest(folderPath, requestIndex, `${this.collectionIndex}`)
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/Edit.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Edit.vue
@@ -0,0 +1,72 @@
+<template>
+  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlEdit"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="saveCollection"
+        />
+        <label for="selectLabelGqlEdit">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { editGraphqlCollection } from "~/newstore/collections"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    editingCollection: { type: Object, default: () => {} },
+    editingCollectionIndex: { type: Number, default: null },
+  },
+  data() {
+    return {
+      name: null as string | null,
+    }
+  },
+  methods: {
+    saveCollection() {
+      if (!this.name) {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
+        })
+        return
+      }
+      const collectionUpdated = {
+        ...(this.editingCollection as any),
+        name: this.name,
+      }
+
+      editGraphqlCollection(this.editingCollectionIndex, collectionUpdated)
+      this.hideModal()
+    },
+    hideModal() {
+      this.name = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/EditFolder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/EditFolder.vue
@@ -0,0 +1,71 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.edit')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlEditFolder"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="editFolder"
+        />
+        <label for="selectLabelGqlEditFolder">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="editFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { editGraphqlFolder } from "~/newstore/collections"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    folder: { type: Object, default: () => {} },
+    folderPath: { type: String, default: null },
+  },
+  data() {
+    return {
+      name: "",
+    }
+  },
+  methods: {
+    editFolder() {
+      if (!this.name) {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
+        })
+        return
+      }
+      editGraphqlFolder(this.folderPath, {
+        ...(this.folder as any),
+        name: this.name,
+      })
+      this.hideModal()
+    },
+    hideModal() {
+      this.name = ""
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/EditRequest.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/EditRequest.vue
@@ -0,0 +1,74 @@
+<template>
+  <SmartModal v-if="show" :title="$t('modal.edit_request')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlEditReq"
+          v-model="requestUpdateData.name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="saveRequest"
+        />
+        <label for="selectLabelGqlEditReq">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="saveRequest" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { editGraphqlRequest } from "~/newstore/collections"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    folderPath: { type: String, default: null },
+    request: { type: Object as PropType<HoppGQLRequest>, default: () => {} },
+    requestIndex: { type: Number, default: null },
+  },
+  data() {
+    return {
+      requestUpdateData: {
+        name: null as any | null,
+      },
+    }
+  },
+  methods: {
+    saveRequest() {
+      if (!this.requestUpdateData.name) {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
+        })
+        return
+      }
+      const requestUpdated = {
+        ...this.$props.request,
+        name: this.$data.requestUpdateData.name || this.$props.request.name,
+      }
+
+      editGraphqlRequest(this.folderPath, this.requestIndex, requestUpdated)
+
+      this.hideModal()
+    },
+    hideModal() {
+      this.requestUpdateData = { name: null }
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
+    <div
+      class="flex items-center group"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <span
+        class="cursor-pointer flex px-4 justify-center items-center"
+        @click="toggleShowChildren()"
+      >
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate">
+          {{ folder.name ? folder.name : folder.title }}
+        </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          svg="folder-plus"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="$emit('add-folder', { folder, path: folderPath })"
+        />
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                svg="more-vertical"
+              />
+            </template>
+            <SmartItem
+              svg="folder-plus"
+              :label="$t('folder.new')"
+              @click.native="
+                $emit('add-folder', { folder, path: folderPath })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="edit"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-folder', { folder, folderPath })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="trash-2"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
+    </div>
+    <div v-if="showChildren || isFiltered">
+      <CollectionsGraphqlFolder
+        v-for="(subFolder, subFolderIndex) in folder.folders"
+        :key="`subFolder-${subFolderIndex}`"
+        class="border-l border-dividerLight ml-6"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :folder="subFolder"
+        :folder-index="subFolderIndex"
+        :folder-path="`${folderPath}/${subFolderIndex}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :is-filtered="isFiltered"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <CollectionsGraphqlRequest
+        v-for="(request, index) in folder.requests"
+        :key="`request-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="folderIndex"
+        :folder-path="folderPath"
+        :folder-name="folder.name"
+        :request-index="index"
+        :doc="doc"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <div
+        v-if="
+          folder.folders &&
+          folder.folders.length === 0 &&
+          folder.requests &&
+          folder.requests.length === 0
+        "
+        class="
+          border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-6
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+        <span class="text-center">
+          {{ $t("empty.folder") }}
+        </span>
+      </div>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_folder')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeFolder"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
+
+export default defineComponent({
+  name: "Folder",
+  props: {
+    picked: { type: Object, default: null },
+    // Whether the request is in a selectable mode (activates 'select' event)
+    savingMode: { type: Boolean, default: false },
+    folder: { type: Object, default: () => {} },
+    folderIndex: { type: Number, default: null },
+    collectionIndex: { type: Number, default: null },
+    folderPath: { type: String, default: null },
+    doc: Boolean,
+    isFiltered: Boolean,
+  },
+  data() {
+    return {
+      showChildren: false,
+      dragging: false,
+      confirmRemove: false,
+    }
+  },
+  computed: {
+    isSelected(): boolean {
+      return (
+        this.picked &&
+        this.picked.pickedType === "gql-my-folder" &&
+        this.picked.folderPath === this.folderPath
+      )
+    },
+    getCollectionIcon() {
+      if (this.isSelected) return "check-circle"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else return "folder"
+    },
+  },
+  methods: {
+    pick() {
+      this.$emit("select", {
+        picked: {
+          pickedType: "gql-my-folder",
+          folderPath: this.folderPath,
+        },
+      })
+    },
+    toggleShowChildren() {
+      if (this.savingMode) {
+        this.pick()
+      }
+
+      this.showChildren = !this.showChildren
+    },
+    removeFolder() {
+      // Cancel pick if the picked folder is deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "gql-my-folder" &&
+        this.picked.folderPath === this.folderPath
+      ) {
+        this.$emit("select", { picked: null })
+      }
+
+      removeGraphqlFolder(this.folderPath)
+      this.$toast.success(this.$t("state.deleted").toString(), {
+        icon: "delete",
+      })
+    },
+    dropEvent({ dataTransfer }: any) {
+      this.dragging = !this.dragging
+      const folderPath = dataTransfer.getData("folderPath")
+      const requestIndex = dataTransfer.getData("requestIndex")
+
+      moveGraphqlRequest(folderPath, requestIndex, this.folderPath)
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
@@ -0,0 +1,398 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('modal.collections')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
+        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('action.more')"
+              class="rounded"
+              svg="more-vertical"
+            />
+          </template>
+          <SmartItem
+            icon="assignment_returned"
+            :label="$t('import.from_gist')"
+            @click.native="
+              readCollectionGist
+              $refs.options.tippy().hide()
+            "
+          />
+          <span
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              !currentUser
+                ? $t('export.require_github')
+                : currentUser.provider !== 'github.com'
+                ? $t('export.require_github')
+                : null
+            "
+          >
+            <SmartItem
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              icon="assignment_turned_in"
+              :label="$t('export.create_secret_gist')"
+              @click.native="
+                createCollectionGist()
+                $refs.options.tippy().hide()
+              "
+            />
+          </span>
+        </tippy>
+      </span>
+    </template>
+    <template #body>
+      <div class="flex flex-col space-y-2">
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.replace_current')"
+          svg="file"
+          :label="$t('action.replace_json')"
+          @click.native="openDialogChooseFileToReplaceWith"
+        />
+        <input
+          ref="inputChooseFileToReplaceWith"
+          class="input"
+          type="file"
+          accept="application/json"
+          @change="replaceWithJSON"
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.preserve_current')"
+          svg="folder-plus"
+          :label="$t('import.json')"
+          @click.native="openDialogChooseFileToImportFrom"
+        />
+        <input
+          ref="inputChooseFileToImportFrom"
+          class="input"
+          type="file"
+          accept="application/json"
+          @change="importFromJSON"
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          svg="download"
+          :label="$t('export.as_json')"
+          @click.native="exportJSON"
+        />
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { currentUser$ } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  graphqlCollections$,
+  setGraphqlCollections,
+  appendGraphqlCollections,
+} from "~/newstore/collections"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  setup() {
+    return {
+      collections: useReadonlyStream(graphqlCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
+  computed: {
+    collectionJson() {
+      return JSON.stringify(this.collections, null, 2)
+    },
+  },
+  methods: {
+    async createCollectionGist() {
+      await this.$axios
+        .$post(
+          "https://api.github.com/gists",
+          {
+            files: {
+              "hoppscotch-collections.json": {
+                content: this.collectionJson,
+              },
+            },
+          },
+          {
+            headers: {
+              Authorization: `token ${this.currentUser.accessToken}`,
+              Accept: "application/vnd.github.v3+json",
+            },
+          }
+        )
+        .then((res) => {
+          this.$toast.success(this.$t("export.gist_created"), {
+            icon: "done",
+          })
+          window.open(res.html_url)
+        })
+        .catch((e) => {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error_outline",
+          })
+          console.error(e)
+        })
+    },
+    async readCollectionGist() {
+      const gist = prompt(this.$t("import.gist_url"))
+      if (!gist) return
+      await this.$axios
+        .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
+          headers: {
+            Accept: "application/vnd.github.v3+json",
+          },
+        })
+        .then(({ files }) => {
+          const collections = JSON.parse(Object.values(files)[0].content)
+          setGraphqlCollections(collections)
+          this.fileImported()
+        })
+        .catch((e) => {
+          this.failedImport()
+          console.error(e)
+        })
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    openDialogChooseFileToReplaceWith() {
+      this.$refs.inputChooseFileToReplaceWith.click()
+    },
+    openDialogChooseFileToImportFrom() {
+      this.$refs.inputChooseFileToImportFrom.click()
+    },
+    replaceWithJSON() {
+      const reader = new FileReader()
+      reader.onload = ({ target }) => {
+        const content = target.result
+        let 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 if (
+          collections.info &&
+          collections.info.schema.includes("v2.1.0")
+        ) {
+          collections = [this.parsePostmanCollection(collections)]
+        } else {
+          this.failedImport()
+          return
+        }
+        setGraphqlCollections(collections)
+        this.fileImported()
+      }
+      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
+      this.$refs.inputChooseFileToReplaceWith.value = ""
+    },
+    importFromJSON() {
+      const reader = new FileReader()
+      reader.onload = ({ target }) => {
+        const content = target.result
+        let 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 if (
+          collections.info &&
+          collections.info.schema.includes("v2.1.0")
+        ) {
+          // replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
+          collections = JSON.parse(
+            content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>")
+          )
+          collections = [this.parsePostmanCollection(collections)]
+        } else {
+          this.failedImport()
+          return
+        }
+        appendGraphqlCollections(collections)
+        this.fileImported()
+      }
+      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
+      this.$refs.inputChooseFileToImportFrom.value = ""
+    },
+    exportJSON() {
+      const dataToWrite = this.collectionJson
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      }, 1000)
+    },
+    fileImported() {
+      this.$toast.success(this.$t("state.file_imported"), {
+        icon: "folder_shared",
+      })
+    },
+    failedImport() {
+      this.$toast.error(this.$t("import.failed"), {
+        icon: "error_outline",
+      })
+    },
+    parsePostmanCollection({ info, name, item }) {
+      const hoppscotchCollection = {
+        name: "",
+        folders: [],
+        requests: [],
+      }
+
+      hoppscotchCollection.name = info ? info.name : name
+
+      if (item && item.length > 0) {
+        for (const collectionItem of item) {
+          if (collectionItem.request) {
+            if (
+              Object.prototype.hasOwnProperty.call(
+                hoppscotchCollection,
+                "folders"
+              )
+            ) {
+              hoppscotchCollection.name = info ? info.name : name
+              hoppscotchCollection.requests.push(
+                this.parsePostmanRequest(collectionItem)
+              )
+            } else {
+              hoppscotchCollection.name = name || ""
+              hoppscotchCollection.requests.push(
+                this.parsePostmanRequest(collectionItem)
+              )
+            }
+          } else if (this.hasFolder(collectionItem)) {
+            hoppscotchCollection.folders.push(
+              this.parsePostmanCollection(collectionItem)
+            )
+          } else {
+            hoppscotchCollection.requests.push(
+              this.parsePostmanRequest(collectionItem)
+            )
+          }
+        }
+      }
+      return hoppscotchCollection
+    },
+    parsePostmanRequest({ name, request }) {
+      const pwRequest = {
+        url: "",
+        path: "",
+        method: "",
+        auth: "",
+        httpUser: "",
+        httpPassword: "",
+        passwordFieldType: "password",
+        bearerToken: "",
+        headers: [],
+        params: [],
+        bodyParams: [],
+        rawParams: "",
+        rawInput: false,
+        contentType: "",
+        requestType: "",
+        name: "",
+      }
+
+      pwRequest.name = name
+      const requestObjectUrl = request.url.raw.match(
+        /^(.+:\/\/[^/]+|{[^/]+})(\/[^?]+|).*$/
+      )
+      if (requestObjectUrl) {
+        pwRequest.url = requestObjectUrl[1]
+        pwRequest.path = requestObjectUrl[2] ? requestObjectUrl[2] : ""
+      }
+      pwRequest.method = request.method
+      const itemAuth = request.auth ? request.auth : ""
+      const authType = itemAuth ? itemAuth.type : ""
+      if (authType === "basic") {
+        pwRequest.auth = "Basic Auth"
+        pwRequest.httpUser =
+          itemAuth.basic[0].key === "username"
+            ? itemAuth.basic[0].value
+            : itemAuth.basic[1].value
+        pwRequest.httpPassword =
+          itemAuth.basic[0].key === "password"
+            ? itemAuth.basic[0].value
+            : itemAuth.basic[1].value
+      } else if (authType === "oauth2") {
+        pwRequest.auth = "OAuth 2.0"
+        pwRequest.bearerToken =
+          itemAuth.oauth2[0].key === "accessToken"
+            ? itemAuth.oauth2[0].value
+            : itemAuth.oauth2[1].value
+      } else if (authType === "bearer") {
+        pwRequest.auth = "Bearer Token"
+        pwRequest.bearerToken = itemAuth.bearer[0].value
+      }
+      const requestObjectHeaders = request.header
+      if (requestObjectHeaders) {
+        pwRequest.headers = requestObjectHeaders
+        for (const header of pwRequest.headers) {
+          delete header.name
+          delete header.type
+        }
+      }
+      const requestObjectParams = request.url.query
+      if (requestObjectParams) {
+        pwRequest.params = requestObjectParams
+        for (const param of pwRequest.params) {
+          delete param.disabled
+        }
+      }
+      if (request.body) {
+        if (request.body.mode === "urlencoded") {
+          const params = request.body.urlencoded
+          pwRequest.bodyParams = params || []
+          for (const param of pwRequest.bodyParams) {
+            delete param.type
+          }
+        } else if (request.body.mode === "raw") {
+          pwRequest.rawInput = true
+          pwRequest.rawParams = request.body.raw
+        }
+      }
+      return pwRequest
+    },
+    hasFolder(item) {
+      return Object.prototype.hasOwnProperty.call(item, "item")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Request.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
+    <div
+      class="flex items-center group"
+      draggable="true"
+      @dragstart="dragStart"
+      @dragover.stop
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <span
+        class="
+          cursor-pointer
+          flex
+          px-2
+          w-16
+          justify-center
+          items-center
+          truncate
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="isSelected ? 'check-circle' : 'file'"
+        />
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <span class="truncate"> {{ request.name }} </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="!savingMode"
+          v-tippy="{ theme: 'tooltip' }"
+          svg="rotate-ccw"
+          :title="$t('action.restore')"
+          class="hidden group-hover:inline-flex"
+          @click.native="!doc ? selectRequest() : {}"
+        />
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                svg="more-vertical"
+              />
+            </template>
+            <SmartItem
+              svg="edit"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-request', {
+                  request,
+                  requestIndex,
+                  folderPath,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="trash-2"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_request')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeRequest"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { HoppGQLRequest, makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { removeGraphqlRequest } from "~/newstore/collections"
+import { setGQLSession } from "~/newstore/GQLSession"
+
+export default defineComponent({
+  props: {
+    // Whether the object is selected (show the tick mark)
+    picked: { type: Object, default: null },
+    // Whether the request is being saved (activate 'select' event)
+    savingMode: { type: Boolean, default: false },
+    request: { type: Object as PropType<HoppGQLRequest>, default: () => {} },
+    folderPath: { type: String, default: null },
+    requestIndex: { type: Number, default: null },
+    doc: Boolean,
+  },
+  data() {
+    return {
+      dragging: false,
+      confirmRemove: false,
+    }
+  },
+  computed: {
+    isSelected(): boolean {
+      return (
+        this.picked &&
+        this.picked.pickedType === "gql-my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === this.requestIndex
+      )
+    },
+  },
+  methods: {
+    pick() {
+      this.$emit("select", {
+        picked: {
+          pickedType: "gql-my-request",
+          folderPath: this.folderPath,
+          requestIndex: this.requestIndex,
+        },
+      })
+    },
+    selectRequest() {
+      if (this.savingMode) {
+        this.pick()
+      } else {
+        setGQLSession({
+          request: makeGQLRequest({
+            name: this.$props.request.name,
+            url: this.$props.request.url,
+            query: this.$props.request.query,
+            headers: this.$props.request.headers,
+            variables: this.$props.request.variables,
+          }),
+          schema: "",
+          response: "",
+        })
+      }
+    },
+    dragStart({ dataTransfer }: any) {
+      this.dragging = !this.dragging
+
+      dataTransfer.setData("folderPath", this.folderPath)
+      dataTransfer.setData("requestIndex", this.requestIndex)
+    },
+    removeRequest() {
+      // Cancel pick if the picked request is deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "gql-my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === this.requestIndex
+      ) {
+        this.$emit("select", { picked: null })
+      }
+
+      removeGraphqlRequest(this.folderPath, this.requestIndex)
+      this.$toast.success(this.$t("state.deleted").toString(), {
+        icon: "delete",
+      })
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/index.vue
@@ -0,0 +1,282 @@
+<template>
+  <AppSection
+    label="collections"
+    :class="{ 'rounded border border-divider': savingMode }"
+  >
+    <div
+      class="
+        divide-y divide-dividerLight
+        border-b border-dividerLight
+        flex flex-col
+        top-sidebarPrimaryStickyFold
+        z-10
+        sticky
+      "
+      :class="{ 'bg-primary': !savingMode }"
+    >
+      <input
+        v-if="showCollActions"
+        v-model="filterText"
+        type="search"
+        autocomplete="off"
+        :placeholder="$t('action.search')"
+        class="bg-transparent flex w-full py-2 px-4"
+      />
+      <div class="flex flex-1 justify-between">
+        <ButtonSecondary
+          svg="plus"
+          :label="$t('action.new')"
+          class="!rounded-none"
+          @click.native="displayModalAdd(true)"
+        />
+        <div class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            to="https://docs.hoppscotch.io/features/collections"
+            blank
+            :title="$t('app.wiki')"
+            svg="help-circle"
+          />
+          <ButtonSecondary
+            v-if="showCollActions"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('modal.import_export')"
+            svg="archive"
+            @click.native="displayModalImportExport(true)"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="flex-col">
+      <CollectionsGraphqlCollection
+        v-for="(collection, index) in filteredCollections"
+        :key="`collection-${index}`"
+        :picked="picked"
+        :name="collection.name"
+        :collection-index="index"
+        :collection="collection"
+        :doc="doc"
+        :is-filtered="filterText.length > 0"
+        :saving-mode="savingMode"
+        @edit-collection="editCollection(collection, index)"
+        @add-folder="addFolder($event)"
+        @edit-folder="editFolder($event)"
+        @edit-request="editRequest($event)"
+        @select-collection="$emit('use-collection', collection)"
+        @select="$emit('select', $event)"
+      />
+    </div>
+    <div
+      v-if="collections.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-4">
+        {{ $t("empty.collections") }}
+      </span>
+      <ButtonSecondary
+        :label="$t('add.new')"
+        filled
+        @click.native="displayModalAdd(true)"
+      />
+    </div>
+    <div
+      v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <span class="text-center">
+        {{ $t("state.nothing_found") }} "{{ filterText }}"
+      </span>
+    </div>
+    <CollectionsGraphqlAdd
+      :show="showModalAdd"
+      @hide-modal="displayModalAdd(false)"
+    />
+    <CollectionsGraphqlEdit
+      :show="showModalEdit"
+      :editing-collection="editingCollection"
+      :editing-collection-index="editingCollectionIndex"
+      @hide-modal="displayModalEdit(false)"
+    />
+    <CollectionsGraphqlAddFolder
+      :show="showModalAddFolder"
+      :folder-path="editingFolderPath"
+      @add-folder="onAddFolder($event)"
+      @hide-modal="displayModalAddFolder(false)"
+    />
+    <CollectionsGraphqlEditFolder
+      :show="showModalEditFolder"
+      :collection-index="editingCollectionIndex"
+      :folder="editingFolder"
+      :folder-index="editingFolderIndex"
+      :folder-path="editingFolderPath"
+      @hide-modal="displayModalEditFolder(false)"
+    />
+    <CollectionsGraphqlEditRequest
+      :show="showModalEditRequest"
+      :folder-path="editingFolderPath"
+      :request="editingRequest"
+      :request-index="editingRequestIndex"
+      @hide-modal="displayModalEditRequest(false)"
+    />
+    <CollectionsGraphqlImportExport
+      :show="showModalImportExport"
+      @hide-modal="displayModalImportExport(false)"
+    />
+  </AppSection>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import clone from "lodash/clone"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { graphqlCollections$, addGraphqlFolder } from "~/newstore/collections"
+
+export default defineComponent({
+  props: {
+    // Whether to activate the ability to pick items (activates 'select' events)
+    savingMode: { type: Boolean, default: false },
+    doc: { type: Boolean, default: false },
+    picked: { type: Object, default: null },
+    // Whether to show the 'New' and 'Import/Export' actions
+    showCollActions: { type: Boolean, default: true },
+  },
+  setup() {
+    return {
+      collections: useReadonlyStream(graphqlCollections$, []),
+    }
+  },
+  data() {
+    return {
+      showModalAdd: false,
+      showModalEdit: false,
+      showModalImportExport: false,
+      showModalAddFolder: false,
+      showModalEditFolder: false,
+      showModalEditRequest: false,
+      editingCollection: undefined,
+      editingCollectionIndex: undefined,
+      editingFolder: undefined,
+      editingFolderName: undefined,
+      editingFolderIndex: undefined,
+      editingFolderPath: undefined,
+      editingRequest: undefined,
+      editingRequestIndex: undefined,
+      filterText: "",
+    }
+  },
+  computed: {
+    filteredCollections() {
+      const collections = clone(this.collections)
+
+      if (!this.filterText) return collections
+
+      const filterText = this.filterText.toLowerCase()
+      const filteredCollections = []
+
+      for (const collection of collections) {
+        const filteredRequests = []
+        const filteredFolders = []
+        for (const request of collection.requests) {
+          if (request.name.toLowerCase().includes(filterText))
+            filteredRequests.push(request)
+        }
+        for (const folder of collection.folders) {
+          const filteredFolderRequests = []
+          for (const request of folder.requests) {
+            if (request.name.toLowerCase().includes(filterText))
+              filteredFolderRequests.push(request)
+          }
+          if (filteredFolderRequests.length > 0) {
+            const filteredFolder = Object.assign({}, folder)
+            filteredFolder.requests = filteredFolderRequests
+            filteredFolders.push(filteredFolder)
+          }
+        }
+
+        if (filteredRequests.length + filteredFolders.length > 0) {
+          const filteredCollection = Object.assign({}, collection)
+          filteredCollection.requests = filteredRequests
+          filteredCollection.folders = filteredFolders
+          filteredCollections.push(filteredCollection)
+        }
+      }
+
+      return filteredCollections
+    },
+  },
+  methods: {
+    displayModalAdd(shouldDisplay) {
+      this.showModalAdd = shouldDisplay
+    },
+    displayModalEdit(shouldDisplay) {
+      this.showModalEdit = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalImportExport(shouldDisplay) {
+      this.showModalImportExport = shouldDisplay
+    },
+    displayModalAddFolder(shouldDisplay) {
+      this.showModalAddFolder = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalEditFolder(shouldDisplay) {
+      this.showModalEditFolder = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalEditRequest(shouldDisplay) {
+      this.showModalEditRequest = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    editCollection(collection, collectionIndex) {
+      this.$data.editingCollection = collection
+      this.$data.editingCollectionIndex = collectionIndex
+      this.displayModalEdit(true)
+    },
+    onAddFolder({ name, path }) {
+      addGraphqlFolder(name, path)
+      this.displayModalAddFolder(false)
+    },
+    addFolder(payload) {
+      const { path } = payload
+      this.$data.editingFolderPath = path
+      this.displayModalAddFolder(true)
+    },
+    editFolder(payload) {
+      const { folder, folderPath } = payload
+      this.editingFolder = folder
+      this.editingFolderPath = folderPath
+      this.displayModalEditFolder(true)
+    },
+    editRequest(payload) {
+      const {
+        collectionIndex,
+        folderIndex,
+        folderName,
+        request,
+        requestIndex,
+        folderPath,
+      } = payload
+      this.$data.editingFolderPath = folderPath
+      this.$data.editingCollectionIndex = collectionIndex
+      this.$data.editingFolderIndex = folderIndex
+      this.$data.editingFolderName = folderName
+      this.$data.editingRequest = request
+      this.$data.editingRequestIndex = requestIndex
+      this.displayModalEditRequest(true)
+    },
+    resetSelectedData() {
+      this.$data.editingCollection = undefined
+      this.$data.editingCollectionIndex = undefined
+      this.$data.editingFolder = undefined
+      this.$data.editingFolderIndex = undefined
+      this.$data.editingRequest = undefined
+      this.$data.editingRequestIndex = undefined
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/packages/hoppscotch-app/components/collections/index.vue
@@ -0,0 +1,682 @@
+<template>
+  <AppSection
+    label="collections"
+    :class="{ 'rounded border border-divider': saveRequest }"
+  >
+    <div
+      class="
+        divide-y divide-dividerLight
+        bg-primary
+        border-b border-dividerLight
+        rounded-t
+        flex flex-col
+        top-0
+        z-10
+        sticky
+      "
+      :class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }"
+    >
+      <div v-if="!saveRequest" class="search-wrappe">
+        <input
+          v-model="filterText"
+          type="search"
+          autocomplete="off"
+          :placeholder="$t('action.search')"
+          class="bg-transparent flex w-full py-2 pr-2 pl-4"
+        />
+      </div>
+      <CollectionsChooseType
+        :collections-type="collectionsType"
+        :show="showTeamCollections"
+        :doc="doc"
+        @update-collection-type="updateCollectionType"
+        @update-selected-team="updateSelectedTeam"
+      />
+      <div class="flex flex-1 justify-between">
+        <ButtonSecondary
+          v-if="
+            collectionsType.type == 'team-collections' &&
+            (collectionsType.selectedTeam == undefined ||
+              collectionsType.selectedTeam.myRole == 'VIEWER')
+          "
+          v-tippy="{ theme: 'tooltip' }"
+          disabled
+          class="!rounded-none"
+          svg="plus"
+          :title="$t('team.no_access')"
+          :label="$t('action.new')"
+        />
+        <ButtonSecondary
+          v-else
+          svg="plus"
+          :label="$t('action.new')"
+          class="!rounded-none"
+          @click.native="displayModalAdd(true)"
+        />
+        <span class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            to="https://docs.hoppscotch.io/features/collections"
+            blank
+            :title="$t('app.wiki')"
+            svg="help-circle"
+          />
+          <ButtonSecondary
+            v-if="!saveRequest"
+            v-tippy="{ theme: 'tooltip' }"
+            :disabled="
+              collectionsType.type == 'team-collections' &&
+              collectionsType.selectedTeam == undefined
+            "
+            svg="archive"
+            :title="$t('modal.import_export')"
+            @click.native="displayModalImportExport(true)"
+          />
+        </span>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <component
+        :is="
+          collectionsType.type == 'my-collections'
+            ? 'CollectionsMyCollection'
+            : 'CollectionsTeamsCollection'
+        "
+        v-for="(collection, index) in filteredCollections"
+        :key="`collection-${index}`"
+        :collection-index="index"
+        :collection="collection"
+        :doc="doc"
+        :is-filtered="filterText.length > 0"
+        :selected="selected.some((coll) => coll == collection)"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :picked="picked"
+        @edit-collection="editCollection(collection, index)"
+        @add-folder="addFolder($event)"
+        @edit-folder="editFolder($event)"
+        @edit-request="editRequest($event)"
+        @update-team-collections="updateTeamCollections"
+        @select-collection="$emit('use-collection', collection)"
+        @unselect-collection="$emit('remove-collection', collection)"
+        @select="$emit('select', $event)"
+        @expand-collection="expandCollection"
+        @remove-collection="removeCollection"
+        @remove-request="removeRequest"
+      />
+    </div>
+    <div
+      v-if="filteredCollections.length === 0 && filterText.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-4">
+        {{ $t("empty.collections") }}
+      </span>
+      <ButtonSecondary
+        v-if="
+          collectionsType.type == 'team-collections' &&
+          (collectionsType.selectedTeam == undefined ||
+            collectionsType.selectedTeam.myRole == 'VIEWER')
+        "
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('team.no_access')"
+        :label="$t('add.new')"
+        filled
+      />
+      <ButtonSecondary
+        v-else
+        :label="$t('add.new')"
+        filled
+        @click.native="displayModalAdd(true)"
+      />
+    </div>
+    <div
+      v-if="filterText.length !== 0 && filteredCollections.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <span class="text-center">
+        {{ $t("state.nothing_found") }} "{{ filterText }}"
+      </span>
+    </div>
+    <CollectionsAdd
+      :show="showModalAdd"
+      @submit="addNewRootCollection"
+      @hide-modal="displayModalAdd(false)"
+    />
+    <CollectionsEdit
+      :show="showModalEdit"
+      :editing-coll-name="editingCollection ? editingCollection.name : ''"
+      :placeholder-coll-name="editingCollection ? editingCollection.name : ''"
+      @hide-modal="displayModalEdit(false)"
+      @submit="updateEditingCollection"
+    />
+    <CollectionsAddFolder
+      :show="showModalAddFolder"
+      :folder="editingFolder"
+      :folder-path="editingFolderPath"
+      @add-folder="onAddFolder($event)"
+      @hide-modal="displayModalAddFolder(false)"
+    />
+    <CollectionsEditFolder
+      :show="showModalEditFolder"
+      @submit="updateEditingFolder"
+      @hide-modal="displayModalEditFolder(false)"
+    />
+    <CollectionsEditRequest
+      :show="showModalEditRequest"
+      :placeholder-req-name="editingRequest ? editingRequest.name : ''"
+      @submit="updateEditingRequest"
+      @hide-modal="displayModalEditRequest(false)"
+    />
+    <CollectionsImportExport
+      :show="showModalImportExport"
+      :collections-type="collectionsType"
+      @hide-modal="displayModalImportExport(false)"
+      @update-team-collections="updateTeamCollections"
+    />
+  </AppSection>
+</template>
+
+<script>
+import gql from "graphql-tag"
+import cloneDeep from "lodash/cloneDeep"
+import { defineComponent } from "@nuxtjs/composition-api"
+import CollectionsMyCollection from "./my/Collection.vue"
+import CollectionsTeamsCollection from "./teams/Collection.vue"
+import { currentUser$ } from "~/helpers/fb/auth"
+import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
+import * as teamUtils from "~/helpers/teams/utils"
+import {
+  restCollections$,
+  addRESTCollection,
+  editRESTCollection,
+  addRESTFolder,
+  removeRESTCollection,
+  editRESTFolder,
+  removeRESTRequest,
+  editRESTRequest,
+} from "~/newstore/collections"
+import {
+  useReadonlyStream,
+  useStreamSubscriber,
+} from "~/helpers/utils/composables"
+
+export default defineComponent({
+  components: {
+    CollectionsMyCollection,
+    CollectionsTeamsCollection,
+  },
+  props: {
+    doc: Boolean,
+    selected: { type: Array, default: () => [] },
+    saveRequest: Boolean,
+    picked: { type: Object, default: () => {} },
+  },
+  setup() {
+    const { subscribeToStream } = useStreamSubscriber()
+
+    return {
+      subscribeTo: subscribeToStream,
+
+      collections: useReadonlyStream(restCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
+  data() {
+    return {
+      showModalAdd: false,
+      showModalEdit: false,
+      showModalImportExport: false,
+      showModalAddFolder: false,
+      showModalEditFolder: false,
+      showModalEditRequest: false,
+      editingCollection: undefined,
+      editingCollectionIndex: undefined,
+      editingFolder: undefined,
+      editingFolderName: undefined,
+      editingFolderIndex: undefined,
+      editingFolderPath: undefined,
+      editingRequest: undefined,
+      editingRequestIndex: undefined,
+      filterText: "",
+      collectionsType: {
+        type: "my-collections",
+        selectedTeam: undefined,
+      },
+      teamCollectionAdapter: new TeamCollectionAdapter(null),
+      teamCollectionsNew: [],
+    }
+  },
+  computed: {
+    showTeamCollections() {
+      if (this.currentUser == null) {
+        return false
+      }
+      return true
+    },
+    filteredCollections() {
+      const collections =
+        this.collectionsType.type === "my-collections"
+          ? this.collections
+          : this.teamCollectionsNew
+
+      if (!this.filterText) {
+        return collections
+      }
+
+      if (this.collectionsType.type === "team-collections") {
+        return []
+      }
+
+      const filterText = this.filterText.toLowerCase()
+      const filteredCollections = []
+
+      for (const collection of collections) {
+        const filteredRequests = []
+        const filteredFolders = []
+        for (const request of collection.requests) {
+          if (request.name.toLowerCase().includes(filterText))
+            filteredRequests.push(request)
+        }
+        for (const folder of this.collectionsType.type === "team-collections"
+          ? collection.children
+          : collection.folders) {
+          const filteredFolderRequests = []
+          for (const request of folder.requests) {
+            if (request.name.toLowerCase().includes(filterText))
+              filteredFolderRequests.push(request)
+          }
+          if (filteredFolderRequests.length > 0) {
+            const filteredFolder = Object.assign({}, folder)
+            filteredFolder.requests = filteredFolderRequests
+            filteredFolders.push(filteredFolder)
+          }
+        }
+
+        if (
+          filteredRequests.length + filteredFolders.length > 0 ||
+          collection.name.toLowerCase().includes(filterText)
+        ) {
+          const filteredCollection = Object.assign({}, collection)
+          filteredCollection.requests = filteredRequests
+          filteredCollection.folders = filteredFolders
+          filteredCollections.push(filteredCollection)
+        }
+      }
+
+      return filteredCollections
+    },
+  },
+  watch: {
+    "collectionsType.type": function emitstuff() {
+      this.$emit("update-collection", this.$data.collectionsType.type)
+    },
+    "collectionsType.selectedTeam"(value) {
+      if (value?.id) this.teamCollectionAdapter.changeTeamID(value.id)
+    },
+  },
+  mounted() {
+    this.subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
+      this.teamCollectionsNew = cloneDeep(colls)
+    })
+  },
+  methods: {
+    updateTeamCollections() {
+      // TODO: Remove this at some point
+    },
+    updateSelectedTeam(newSelectedTeam) {
+      this.collectionsType.selectedTeam = newSelectedTeam
+      this.$emit("update-coll-type", this.collectionsType)
+    },
+    updateCollectionType(newCollectionType) {
+      this.collectionsType.type = newCollectionType
+      this.$emit("update-coll-type", this.collectionsType)
+    },
+    // Intented to be called by the CollectionAdd modal submit event
+    addNewRootCollection(name) {
+      if (this.collectionsType.type === "my-collections") {
+        addRESTCollection({
+          name,
+          folders: [],
+          requests: [],
+        })
+      } else if (
+        this.collectionsType.type === "team-collections" &&
+        this.collectionsType.selectedTeam.myRole !== "VIEWER"
+      ) {
+        teamUtils
+          .createNewRootCollection(
+            this.$apollo,
+            name,
+            this.collectionsType.selectedTeam.id
+          )
+          .then(() => {
+            this.$toast.success(this.$t("collection.created"), {
+              icon: "done",
+            })
+          })
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
+            console.error(e)
+          })
+      }
+      this.displayModalAdd(false)
+    },
+    // Intented to be called by CollectionEdit modal submit event
+    updateEditingCollection(newName) {
+      if (!newName) {
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
+      if (this.collectionsType.type === "my-collections") {
+        const collectionUpdated = {
+          ...this.editingCollection,
+          name: newName,
+        }
+
+        editRESTCollection(this.editingCollectionIndex, collectionUpdated)
+      } else if (
+        this.collectionsType.type === "team-collections" &&
+        this.collectionsType.selectedTeam.myRole !== "VIEWER"
+      ) {
+        teamUtils
+          .renameCollection(this.$apollo, newName, this.editingCollection.id)
+          .then(() => {
+            this.$toast.success(this.$t("collection.renamed"), {
+              icon: "done",
+            })
+          })
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
+            console.error(e)
+          })
+      }
+      this.displayModalEdit(false)
+    },
+    // Intended to be called by CollectionEditFolder modal submit event
+    updateEditingFolder(name) {
+      if (this.collectionsType.type === "my-collections") {
+        editRESTFolder(this.editingFolderPath, { ...this.editingFolder, name })
+      } else if (
+        this.collectionsType.type === "team-collections" &&
+        this.collectionsType.selectedTeam.myRole !== "VIEWER"
+      ) {
+        teamUtils
+          .renameCollection(this.$apollo, name, this.editingFolder.id)
+          .then(() => {
+            this.$toast.success(this.$t("folder.renamed"), {
+              icon: "done",
+            })
+          })
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
+            console.error(e)
+          })
+      }
+
+      this.displayModalEditFolder(false)
+    },
+    // Intented to by called by CollectionsEditRequest modal submit event
+    updateEditingRequest(requestUpdateData) {
+      const requestUpdated = {
+        ...this.editingRequest,
+        name: requestUpdateData.name || this.editingRequest.name,
+      }
+
+      if (this.collectionsType.type === "my-collections") {
+        editRESTRequest(
+          this.editingFolderPath,
+          this.editingRequestIndex,
+          requestUpdated
+        )
+      } else if (
+        this.collectionsType.type === "team-collections" &&
+        this.collectionsType.selectedTeam.myRole !== "VIEWER"
+      ) {
+        const requestName = requestUpdateData.name || this.editingRequest.name
+        teamUtils
+          .updateRequest(
+            this.$apollo,
+            requestUpdated,
+            requestName,
+            this.editingRequestIndex
+          )
+          .then(() => {
+            this.$toast.success(this.$t("request.renamed"), {
+              icon: "done",
+            })
+            this.$emit("update-team-collections")
+          })
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
+            console.error(e)
+          })
+      }
+
+      this.displayModalEditRequest(false)
+    },
+    displayModalAdd(shouldDisplay) {
+      this.showModalAdd = shouldDisplay
+    },
+    displayModalEdit(shouldDisplay) {
+      this.showModalEdit = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalImportExport(shouldDisplay) {
+      this.showModalImportExport = shouldDisplay
+    },
+    displayModalAddFolder(shouldDisplay) {
+      this.showModalAddFolder = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalEditFolder(shouldDisplay) {
+      this.showModalEditFolder = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalEditRequest(shouldDisplay) {
+      this.showModalEditRequest = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    editCollection(collection, collectionIndex) {
+      this.$data.editingCollection = collection
+      this.$data.editingCollectionIndex = collectionIndex
+      this.displayModalEdit(true)
+    },
+    onAddFolder({ name, folder, path }) {
+      if (this.collectionsType.type === "my-collections") {
+        addRESTFolder(name, path)
+      } else if (this.collectionsType.type === "team-collections") {
+        if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
+          this.$apollo
+            .mutate({
+              mutation: gql`
+                mutation CreateChildCollection(
+                  $childTitle: String!
+                  $collectionID: String!
+                ) {
+                  createChildCollection(
+                    childTitle: $childTitle
+                    collectionID: $collectionID
+                  ) {
+                    id
+                  }
+                }
+              `,
+              // Parameters
+              variables: {
+                childTitle: name,
+                collectionID: folder.id,
+              },
+            })
+            .then(() => {
+              this.$toast.success(this.$t("folder.created"), {
+                icon: "done",
+              })
+              this.$emit("update-team-collections")
+            })
+            .catch((e) => {
+              this.$toast.error(this.$t("error.something_went_wrong"), {
+                icon: "error_outline",
+              })
+              console.error(e)
+            })
+        }
+      }
+
+      this.displayModalAddFolder(false)
+    },
+    addFolder(payload) {
+      const { folder, path } = payload
+      this.$data.editingFolder = folder
+      this.$data.editingFolderPath = path
+      this.displayModalAddFolder(true)
+    },
+    editFolder(payload) {
+      const { collectionIndex, folder, folderIndex, folderPath } = payload
+      this.$data.editingCollectionIndex = collectionIndex
+      this.$data.editingFolder = folder
+      this.$data.editingFolderIndex = folderIndex
+      this.$data.editingFolderPath = folderPath
+      this.$data.collectionsType = this.collectionsType
+      this.displayModalEditFolder(true)
+    },
+    editRequest(payload) {
+      const {
+        collectionIndex,
+        folderIndex,
+        folderName,
+        request,
+        requestIndex,
+        folderPath,
+      } = payload
+      this.$data.editingCollectionIndex = collectionIndex
+      this.$data.editingFolderIndex = folderIndex
+      this.$data.editingFolderName = folderName
+      this.$data.editingRequest = request
+      this.$data.editingRequestIndex = requestIndex
+      this.editingFolderPath = folderPath
+      this.$emit("select-request", requestIndex)
+      this.displayModalEditRequest(true)
+    },
+    resetSelectedData() {
+      this.$data.editingCollection = undefined
+      this.$data.editingCollectionIndex = undefined
+      this.$data.editingFolder = undefined
+      this.$data.editingFolderIndex = undefined
+      this.$data.editingRequest = undefined
+      this.$data.editingRequestIndex = undefined
+    },
+    expandCollection(collectionID) {
+      this.teamCollectionAdapter.expandCollection(collectionID)
+    },
+    removeCollection({ collectionsType, collectionIndex, collectionID }) {
+      if (collectionsType.type === "my-collections") {
+        // Cancel pick if picked collection is deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "my-collection" &&
+          this.picked.collectionIndex === collectionIndex
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
+        removeRESTCollection(collectionIndex)
+        this.$toast.success(this.$t("state.deleted"), {
+          icon: "delete",
+        })
+      } else if (collectionsType.type === "team-collections") {
+        // Cancel pick if picked collection is deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "teams-collection" &&
+          this.picked.collectionID === collectionID
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
+        if (collectionsType.selectedTeam.myRole !== "VIEWER") {
+          this.$apollo
+            .mutate({
+              // Query
+              mutation: gql`
+                mutation ($collectionID: String!) {
+                  deleteCollection(collectionID: $collectionID)
+                }
+              `,
+              // Parameters
+              variables: {
+                collectionID,
+              },
+            })
+            .then(() => {
+              this.$toast.success(this.$t("state.deleted"), {
+                icon: "delete",
+              })
+            })
+            .catch((e) => {
+              this.$toast.error(this.$t("error.something_went_wrong"), {
+                icon: "error_outline",
+              })
+              console.error(e)
+            })
+        }
+      }
+    },
+    removeRequest({ requestIndex, folderPath }) {
+      if (this.collectionsType.type === "my-collections") {
+        // Cancel pick if the picked item is being deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "my-request" &&
+          this.picked.folderPath === folderPath &&
+          this.picked.requestIndex === requestIndex
+        ) {
+          this.$emit("select", { picked: null })
+        }
+        removeRESTRequest(folderPath, requestIndex)
+        this.$toast.success(this.$t("state.deleted"), {
+          icon: "delete",
+        })
+      } else if (this.collectionsType.type === "team-collections") {
+        // Cancel pick if the picked item is being deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "teams-request" &&
+          this.picked.requestID === requestIndex
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
+        teamUtils
+          .deleteRequest(this.$apollo, requestIndex)
+          .then(() => {
+            this.$toast.success(this.$t("state.deleted"), {
+              icon: "delete",
+            })
+          })
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
+            console.error(e)
+          })
+      }
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
+    <div
+      class="flex items-center group"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <span
+        class="cursor-pointer flex px-4 justify-center items-center"
+        @click="toggleShowChildren()"
+      >
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate"> {{ collection.name }} </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="doc && !selected"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('import.title')"
+          svg="circle"
+          color="green"
+          @click.native="$emit('select-collection')"
+        />
+        <ButtonSecondary
+          v-if="doc && selected"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.remove')"
+          svg="check-circle"
+          color="green"
+          @click.native="$emit('unselect-collection')"
+        />
+        <ButtonSecondary
+          v-if="!doc"
+          v-tippy="{ theme: 'tooltip' }"
+          svg="folder-plus"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="
+            $emit('add-folder', {
+              folder: collection,
+              path: `${collectionIndex}`,
+            })
+          "
+        />
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                svg="more-vertical"
+              />
+            </template>
+            <SmartItem
+              svg="folder-plus"
+              :label="$t('folder.new')"
+              @click.native="
+                $emit('add-folder', {
+                  folder: collection,
+                  path: `${collectionIndex}`,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="edit"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-collection')
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="trash-2"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
+    </div>
+    <div v-if="showChildren || isFiltered">
+      <CollectionsMyFolder
+        v-for="(folder, index) in collection.folders"
+        :key="`folder-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :folder="folder"
+        :folder-index="index"
+        :folder-path="`${collectionIndex}/${index}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :is-filtered="isFiltered"
+        :picked="picked"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+        @remove-request="$emit('remove-request', $event)"
+      />
+      <CollectionsMyRequest
+        v-for="(request, index) in collection.requests"
+        :key="`request-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="-1"
+        :folder-name="collection.name"
+        :folder-path="collectionIndex.toString()"
+        :request-index="index"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :picked="picked"
+        @edit-request="editRequest($event)"
+        @select="$emit('select', $event)"
+        @remove-request="$emit('remove-request', $event)"
+      />
+      <div
+        v-if="
+          (collection.folders == undefined ||
+            collection.folders.length === 0) &&
+          (collection.requests == undefined || collection.requests.length === 0)
+        "
+        class="
+          border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-6
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+        <span class="text-center">
+          {{ $t("empty.collection") }}
+        </span>
+      </div>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_collection')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeCollection"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { moveRESTRequest } from "~/newstore/collections"
+
+export default defineComponent({
+  props: {
+    collectionIndex: { type: Number, default: null },
+    collection: { type: Object, default: () => {} },
+    doc: Boolean,
+    isFiltered: Boolean,
+    selected: Boolean,
+    saveRequest: Boolean,
+    collectionsType: { type: Object, default: () => {} },
+    picked: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      showChildren: false,
+      dragging: false,
+      selectedFolder: {},
+      confirmRemove: false,
+      prevCursor: "",
+      cursor: "",
+      pageNo: 0,
+    }
+  },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "my-collection" &&
+        this.picked.collectionIndex === this.collectionIndex
+      )
+    },
+    getCollectionIcon() {
+      if (this.isSelected) return "check-circle"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else return "folder"
+    },
+  },
+  methods: {
+    editRequest(event) {
+      this.$emit("edit-request", event)
+    },
+    toggleShowChildren() {
+      if (this.$props.saveRequest)
+        this.$emit("select", {
+          picked: {
+            pickedType: "my-collection",
+            collectionIndex: this.collectionIndex,
+          },
+        })
+
+      this.$emit("expand-collection", this.collection.id)
+      this.showChildren = !this.showChildren
+    },
+    removeCollection() {
+      this.$emit("remove-collection", {
+        collectionsType: this.collectionsType,
+        collectionIndex: this.collectionIndex,
+        collectionID: this.collection.id,
+      })
+    },
+    dropEvent({ dataTransfer }) {
+      this.dragging = !this.dragging
+      const folderPath = dataTransfer.getData("folderPath")
+      const requestIndex = dataTransfer.getData("requestIndex")
+      moveRESTRequest(folderPath, requestIndex, this.collectionIndex.toString())
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
+    <div
+      class="flex items-center group"
+      @dragover.prevent
+      @drop.prevent="dropEvent"
+      @dragover="dragging = true"
+      @drop="dragging = false"
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <span
+        class="cursor-pointer flex px-4 justify-center items-center"
+        @click="toggleShowChildren()"
+      >
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate">
+          {{ folder.name ? folder.name : folder.title }}
+        </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          svg="folder-plus"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="$emit('add-folder', { folder, path: folderPath })"
+        />
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                svg="more-vertical"
+              />
+            </template>
+            <SmartItem
+              svg="folder-plus"
+              :label="$t('folder.new')"
+              @click.native="
+                $emit('add-folder', { folder, path: folderPath })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="edit"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-folder', {
+                  folder,
+                  folderIndex,
+                  collectionIndex,
+                  folderPath,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="trash-2"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
+    </div>
+    <div v-if="showChildren || isFiltered">
+      <CollectionsMyFolder
+        v-for="(subFolder, subFolderIndex) in folder.folders"
+        :key="`subFolder-${subFolderIndex}`"
+        class="border-l border-dividerLight ml-6"
+        :folder="subFolder"
+        :folder-index="subFolderIndex"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :folder-path="`${folderPath}/${subFolderIndex}`"
+        :picked="picked"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @update-team-collections="$emit('update-team-collections')"
+        @select="$emit('select', $event)"
+        @remove-request="removeRequest"
+      />
+      <CollectionsMyRequest
+        v-for="(request, index) in folder.requests"
+        :key="`request-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="folderIndex"
+        :folder-name="folder.name"
+        :folder-path="folderPath"
+        :request-index="index"
+        :doc="doc"
+        :picked="picked"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+        @remove-request="removeRequest"
+      />
+      <div
+        v-if="
+          folder.folders &&
+          folder.folders.length === 0 &&
+          folder.requests &&
+          folder.requests.length === 0
+        "
+        class="
+          border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-6
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+        <span class="text-center">
+          {{ $t("empty.folder") }}
+        </span>
+      </div>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_folder')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeFolder"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import {
+  removeRESTFolder,
+  removeRESTRequest,
+  moveRESTRequest,
+} from "~/newstore/collections"
+
+export default defineComponent({
+  name: "Folder",
+  props: {
+    folder: { type: Object, default: () => {} },
+    folderIndex: { type: Number, default: null },
+    collectionIndex: { type: Number, default: null },
+    folderPath: { type: String, default: null },
+    doc: Boolean,
+    saveRequest: Boolean,
+    isFiltered: Boolean,
+    collectionsType: { type: Object, default: () => {} },
+    picked: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      showChildren: false,
+      dragging: false,
+      confirmRemove: false,
+      prevCursor: "",
+      cursor: "",
+    }
+  },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "my-folder" &&
+        this.picked.folderPath === this.folderPath
+      )
+    },
+    getCollectionIcon() {
+      if (this.isSelected) return "check-circle"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else return "folder"
+    },
+  },
+  methods: {
+    toggleShowChildren() {
+      if (this.$props.saveRequest)
+        this.$emit("select", {
+          picked: {
+            pickedType: "my-folder",
+            collectionIndex: this.collectionIndex,
+            folderName: this.folder.name,
+            folderPath: this.folderPath,
+          },
+        })
+      this.showChildren = !this.showChildren
+    },
+    removeFolder() {
+      // TODO: Bubble it up ?
+      // Cancel pick if picked folder was deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "my-folder" &&
+        this.picked.folderPath === this.folderPath
+      ) {
+        this.$emit("select", { picked: null })
+      }
+      removeRESTFolder(this.folderPath)
+      this.$toast.success(this.$t("state.deleted"), {
+        icon: "delete",
+      })
+    },
+    dropEvent({ dataTransfer }) {
+      this.dragging = !this.dragging
+      const folderPath = dataTransfer.getData("folderPath")
+      const requestIndex = dataTransfer.getData("requestIndex")
+      moveRESTRequest(folderPath, requestIndex, this.folderPath)
+    },
+    removeRequest({ requestIndex }) {
+      // TODO: Bubble it up to root ?
+      // Cancel pick if the picked item is being deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === requestIndex
+      ) {
+        this.$emit("select", { picked: null })
+      }
+      removeRESTRequest(this.folderPath, requestIndex)
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
+    <div
+      class="flex items-center group"
+      draggable="true"
+      @dragstart="dragStart"
+      @dragover.stop
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <span
+        class="
+          cursor-pointer
+          flex
+          px-2
+          w-16
+          justify-center
+          items-center
+          truncate
+        "
+        :class="getRequestLabelColor(request.method)"
+        @click="!doc ? selectRequest() : {}"
+      >
+        <SmartIcon
+          v-if="isSelected"
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          name="check-circle"
+        />
+        <span v-else class="truncate">
+          {{ request.method }}
+        </span>
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          items-center
+          group-hover:text-secondaryDark
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <span class="truncate"> {{ request.name }} </span>
+        <span
+          v-if="
+            active &&
+            active.originLocation === 'user-collection' &&
+            active.folderPath === folderPath &&
+            active.requestIndex === requestIndex
+          "
+          class="rounded-full bg-green-500 flex-shrink-0 h-1.5 mx-3 w-1.5"
+        ></span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="!saveRequest && !doc"
+          v-tippy="{ theme: 'tooltip' }"
+          svg="rotate-ccw"
+          :title="$t('action.restore')"
+          class="hidden group-hover:inline-flex"
+          @click.native="!doc ? selectRequest() : {}"
+        />
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                svg="more-vertical"
+              />
+            </template>
+            <SmartItem
+              svg="edit"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-request', {
+                  collectionIndex,
+                  folderIndex,
+                  folderName,
+                  request,
+                  requestIndex,
+                  folderPath,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="trash-2"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_request')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeRequest"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  restSaveContext$,
+  setRESTRequest,
+  setRESTSaveContext,
+} from "~/newstore/RESTSession"
+
+export default defineComponent({
+  props: {
+    request: { type: Object, default: () => {} },
+    collectionIndex: { type: Number, default: null },
+    folderIndex: { type: Number, default: null },
+    folderName: { type: String, default: null },
+    // eslint-disable-next-line vue/require-default-prop
+    requestIndex: [Number, String],
+    doc: Boolean,
+    saveRequest: Boolean,
+    collectionsType: { type: Object, default: () => {} },
+    folderPath: { type: String, default: null },
+    picked: { type: Object, default: () => {} },
+  },
+  setup() {
+    const active = useReadonlyStream(restSaveContext$, null)
+    return {
+      active,
+    }
+  },
+  data() {
+    return {
+      dragging: false,
+      requestMethodLabels: {
+        get: "text-green-500",
+        post: "text-yellow-500",
+        put: "text-blue-500",
+        delete: "text-red-500",
+        default: "text-gray-500",
+      },
+      confirmRemove: false,
+    }
+  },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === this.requestIndex
+      )
+    },
+  },
+  methods: {
+    selectRequest() {
+      if (
+        this.active &&
+        this.active.originLocation === "user-collection" &&
+        this.active.folderPath === this.folderPath &&
+        this.active.requestIndex === this.requestIndex
+      ) {
+        setRESTSaveContext(null)
+        return
+      }
+      if (this.$props.saveRequest)
+        this.$emit("select", {
+          picked: {
+            pickedType: "my-request",
+            collectionIndex: this.collectionIndex,
+            folderPath: this.folderPath,
+            folderName: this.folderName,
+            requestIndex: this.requestIndex,
+          },
+        })
+      else {
+        setRESTRequest(translateToNewRequest(this.request), {
+          originLocation: "user-collection",
+          folderPath: this.folderPath,
+          requestIndex: this.requestIndex,
+        })
+      }
+    },
+    dragStart({ dataTransfer }) {
+      this.dragging = !this.dragging
+      dataTransfer.setData("folderPath", this.folderPath)
+      dataTransfer.setData("requestIndex", this.requestIndex)
+    },
+    removeRequest() {
+      this.$emit("remove-request", {
+        collectionIndex: this.$props.collectionIndex,
+        folderName: this.$props.folderName,
+        folderPath: this.folderPath,
+        requestIndex: this.$props.requestIndex,
+      })
+    },
+    getRequestLabelColor(method) {
+      return (
+        this.requestMethodLabels[method.toLowerCase()] ||
+        this.requestMethodLabels.default
+      )
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center group">
+      <span
+        class="cursor-pointer flex px-4 justify-center items-center"
+        @click="toggleShowChildren()"
+      >
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate"> {{ collection.title }} </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="doc && !selected"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('import.title')"
+          svg="circle"
+          color="green"
+          @click.native="$emit('select-collection')"
+        />
+        <ButtonSecondary
+          v-if="doc && selected"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.remove')"
+          svg="check-circle"
+          color="green"
+          @click.native="$emit('unselect-collection')"
+        />
+        <ButtonSecondary
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          v-tippy="{ theme: 'tooltip' }"
+          svg="folder-plus"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="
+            $emit('add-folder', {
+              folder: collection,
+              path: `${collectionIndex}`,
+            })
+          "
+        />
+        <span>
+          <tippy
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                svg="more-vertical"
+              />
+            </template>
+            <SmartItem
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              svg="folder-plus"
+              :label="$t('folder.new')"
+              @click.native="
+                $emit('add-folder', {
+                  folder: collection,
+                  path: `${collectionIndex}`,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              svg="edit"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-collection')
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              svg="trash-2"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
+    </div>
+    <div v-if="showChildren || isFiltered">
+      <CollectionsTeamsFolder
+        v-for="(folder, index) in collection.children"
+        :key="`folder-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :folder="folder"
+        :folder-index="index"
+        :folder-path="`${collectionIndex}/${index}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :is-filtered="isFiltered"
+        :picked="picked"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+        @expand-collection="expandCollection"
+        @remove-request="removeRequest"
+      />
+      <CollectionsTeamsRequest
+        v-for="(request, index) in collection.requests"
+        :key="`request-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :request="request.request"
+        :collection-index="collectionIndex"
+        :folder-index="-1"
+        :folder-name="collection.name"
+        :request-index="request.id"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :picked="picked"
+        @edit-request="editRequest($event)"
+        @select="$emit('select', $event)"
+        @remove-request="removeRequest"
+      />
+      <div
+        v-if="
+          (collection.children == undefined ||
+            collection.children.length === 0) &&
+          (collection.requests == undefined || collection.requests.length === 0)
+        "
+        class="
+          border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-6
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+        <span class="text-center">
+          {{ $t("empty.collection") }}
+        </span>
+      </div>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_collection')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeCollection"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    collectionIndex: { type: Number, default: null },
+    collection: { type: Object, default: () => {} },
+    doc: Boolean,
+    isFiltered: Boolean,
+    selected: Boolean,
+    saveRequest: Boolean,
+    collectionsType: { type: Object, default: () => {} },
+    picked: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      showChildren: false,
+      selectedFolder: {},
+      confirmRemove: false,
+      prevCursor: "",
+      cursor: "",
+      pageNo: 0,
+    }
+  },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "teams-collection" &&
+        this.picked.collectionID === this.collection.id
+      )
+    },
+    getCollectionIcon() {
+      if (this.isSelected) return "check-circle"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else return "folder"
+    },
+  },
+  methods: {
+    editRequest(event) {
+      this.$emit("edit-request", event)
+      if (this.$props.saveRequest)
+        this.$emit("select", {
+          picked: {
+            pickedType: "teams-collection",
+            collectionID: this.collection.id,
+          },
+        })
+    },
+    toggleShowChildren() {
+      if (this.$props.saveRequest)
+        this.$emit("select", {
+          picked: {
+            pickedType: "teams-collection",
+            collectionID: this.collection.id,
+          },
+        })
+
+      this.$emit("expand-collection", this.collection.id)
+      this.showChildren = !this.showChildren
+    },
+    removeCollection() {
+      this.$emit("remove-collection", {
+        collectionsType: this.collectionsType,
+        collectionIndex: this.collectionIndex,
+        collectionID: this.collection.id,
+      })
+    },
+    expandCollection(collectionID) {
+      this.$emit("expand-collection", collectionID)
+    },
+    removeRequest({ collectionIndex, folderName, requestIndex }) {
+      this.$emit("remove-request", {
+        collectionIndex,
+        folderName,
+        requestIndex,
+      })
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center group">
+      <span
+        class="cursor-pointer flex px-4 justify-center items-center"
+        @click="toggleShowChildren()"
+      >
+        <SmartIcon
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          :name="getCollectionIcon"
+        />
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate">
+          {{ folder.name ? folder.name : folder.title }}
+        </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          v-tippy="{ theme: 'tooltip' }"
+          svg="folder-plus"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="$emit('add-folder', { folder, path: folderPath })"
+        />
+        <span>
+          <tippy
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                svg="more-vertical"
+              />
+            </template>
+            <SmartItem
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              svg="folder-plus"
+              :label="$t('folder.new')"
+              @click.native="
+                $emit('add-folder', { folder, path: folderPath })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              svg="edit"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-folder', {
+                  folder,
+                  folderIndex,
+                  collectionIndex,
+                  folderPath: '',
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              svg="trash-2"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
+    </div>
+    <div v-if="showChildren || isFiltered">
+      <CollectionsTeamsFolder
+        v-for="(subFolder, subFolderIndex) in folder.children"
+        :key="`subFolder-${subFolderIndex}`"
+        class="border-l border-dividerLight ml-6"
+        :folder="subFolder"
+        :folder-index="subFolderIndex"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :folder-path="`${folderPath}/${subFolderIndex}`"
+        :picked="picked"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @update-team-collections="$emit('update-team-collections')"
+        @select="$emit('select', $event)"
+        @expand-collection="expandCollection"
+        @remove-request="removeRequest"
+      />
+      <CollectionsTeamsRequest
+        v-for="(request, index) in folder.requests"
+        :key="`request-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :request="request.request"
+        :collection-index="collectionIndex"
+        :folder-index="folderIndex"
+        :folder-name="folder.name"
+        :request-index="request.id"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :picked="picked"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+        @remove-request="removeRequest"
+      />
+      <div
+        v-if="
+          (folder.children == undefined || folder.children.length === 0) &&
+          (folder.requests == undefined || folder.requests.length === 0)
+        "
+        class="
+          border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-6
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+        <span class="text-center">
+          {{ $t("empty.folder") }}
+        </span>
+      </div>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_folder')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeFolder"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import * as teamUtils from "~/helpers/teams/utils"
+
+export default defineComponent({
+  name: "Folder",
+  props: {
+    folder: { type: Object, default: () => {} },
+    folderIndex: { type: Number, default: null },
+    collectionIndex: { type: Number, default: null },
+    folderPath: { type: String, default: null },
+    doc: Boolean,
+    saveRequest: Boolean,
+    isFiltered: Boolean,
+    collectionsType: { type: Object, default: () => {} },
+    picked: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      showChildren: false,
+      confirmRemove: false,
+      prevCursor: "",
+      cursor: "",
+    }
+  },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "teams-folder" &&
+        this.picked.folderID === this.folder.id
+      )
+    },
+    getCollectionIcon() {
+      if (this.isSelected) return "check-circle"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else return "folder"
+    },
+  },
+  methods: {
+    toggleShowChildren() {
+      if (this.$props.saveRequest)
+        this.$emit("select", {
+          picked: {
+            pickedType: "teams-folder",
+            folderID: this.folder.id,
+          },
+        })
+
+      this.$emit("expand-collection", this.$props.folder.id)
+      this.showChildren = !this.showChildren
+    },
+    removeFolder() {
+      if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
+        // Cancel pick if picked collection folder was deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "teams-folder" &&
+          this.picked.folderID === this.folder.id
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
+        teamUtils
+          .deleteCollection(this.$apollo, this.folder.id)
+          .then(() => {
+            this.$toast.success(this.$t("state.deleted"), {
+              icon: "delete",
+            })
+            this.$emit("update-team-collections")
+          })
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
+            console.error(e)
+          })
+        this.$emit("update-team-collections")
+      }
+    },
+    expandCollection(collectionID) {
+      this.$emit("expand-collection", collectionID)
+    },
+    removeRequest({ collectionIndex, folderName, requestIndex }) {
+      this.$emit("remove-request", {
+        collectionIndex,
+        folderName,
+        requestIndex,
+      })
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center group">
+      <span
+        class="
+          cursor-pointer
+          flex
+          px-2
+          w-16
+          justify-center
+          items-center
+          truncate
+        "
+        :class="getRequestLabelColor(request.method)"
+        @click="!doc ? selectRequest() : {}"
+      >
+        <SmartIcon
+          v-if="isSelected"
+          class="svg-icons"
+          :class="{ 'text-green-500': isSelected }"
+          name="check-circle"
+        />
+        <span v-else>
+          {{ request.method }}
+        </span>
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          items-center
+          group-hover:text-secondaryDark
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <span class="truncate"> {{ request.name }} </span>
+        <span
+          v-if="
+            active &&
+            active.originLocation === 'team-collection' &&
+            active.requestID === requestIndex
+          "
+          class="rounded-full bg-green-500 flex-shrink-0 h-1.5 mx-3 w-1.5"
+        ></span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="!saveRequest && !doc"
+          v-tippy="{ theme: 'tooltip' }"
+          svg="rotate-ccw"
+          :title="$t('action.restore')"
+          class="hidden group-hover:inline-flex"
+          @click.native="!doc ? selectRequest() : {}"
+        />
+        <span>
+          <tippy
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                svg="more-vertical"
+              />
+            </template>
+            <SmartItem
+              svg="edit"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-request', {
+                  collectionIndex,
+                  folderIndex,
+                  folderName,
+                  request,
+                  requestIndex,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              svg="trash-2"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_request')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeRequest"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  restSaveContext$,
+  setRESTRequest,
+  setRESTSaveContext,
+} from "~/newstore/RESTSession"
+
+export default defineComponent({
+  props: {
+    request: { type: Object, default: () => {} },
+    collectionIndex: { type: Number, default: null },
+    folderIndex: { type: Number, default: null },
+    folderName: { type: String, default: null },
+    // eslint-disable-next-line vue/require-default-prop
+    requestIndex: [Number, String],
+    doc: Boolean,
+    saveRequest: Boolean,
+    collectionsType: { type: Object, default: () => {} },
+    picked: { type: Object, default: () => {} },
+  },
+  setup() {
+    const active = useReadonlyStream(restSaveContext$, null)
+    return {
+      active,
+    }
+  },
+  data() {
+    return {
+      requestMethodLabels: {
+        get: "text-green-500",
+        post: "text-yellow-500",
+        put: "text-blue-500",
+        delete: "text-red-500",
+        default: "text-gray-500",
+      },
+      confirmRemove: false,
+    }
+  },
+  computed: {
+    isSelected(): boolean {
+      return (
+        this.picked &&
+        this.picked.pickedType === "teams-request" &&
+        this.picked.requestID === this.requestIndex
+      )
+    },
+  },
+  methods: {
+    selectRequest() {
+      if (
+        this.active &&
+        this.active.originLocation === "team-collection" &&
+        this.active.requestID === this.requestIndex
+      ) {
+        setRESTSaveContext(null)
+        return
+      }
+      if (this.$props.saveRequest)
+        this.$emit("select", {
+          picked: {
+            pickedType: "teams-request",
+            requestID: this.requestIndex,
+          },
+        })
+      else
+        setRESTRequest(translateToNewRequest(this.request), {
+          originLocation: "team-collection",
+          requestID: this.requestIndex as string,
+        })
+    },
+    removeRequest() {
+      this.$emit("remove-request", {
+        collectionIndex: this.$props.collectionIndex,
+        folderName: this.$props.folderName,
+        requestIndex: this.$props.requestIndex,
+      })
+    },
+    getRequestLabelColor(method: any) {
+      return (
+        (this.requestMethodLabels as any)[method.toLowerCase()] ||
+        this.requestMethodLabels.default
+      )
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/docs/Collection.vue
+++ b/packages/hoppscotch-app/components/docs/Collection.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="collection">
+    <h2 class="heading">
+      <SmartIcon name="folder" class="svg-icons" />
+      {{ collection.name || $t("state.none") }}
+    </h2>
+    <span
+      v-for="(folder, index) in collection.folders"
+      :key="`folder-${index}`"
+      class="folder"
+    >
+      <DocsFolder :folder="folder" />
+    </span>
+    <div
+      v-for="(request, index) in collection.requests"
+      :key="`request-${index}`"
+    >
+      <DocsRequest :request="request" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    collection: { type: Object, default: () => {} },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.collection {
+  @apply flex flex-col flex-1;
+  @apply justify-center;
+  @apply p-4;
+
+  .material-icons {
+    @apply mr-4;
+  }
+}
+</style>
--- a/packages/hoppscotch-app/components/docs/Folder.vue
+++ b/packages/hoppscotch-app/components/docs/Folder.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="folder">
+    <h3 class="heading">
+      <SmartIcon name="folder-minus" class="svg-icons" />
+      {{ folder.name || $t("state.none") }}
+    </h3>
+    <div
+      v-for="(subFolder, index) in folder.folders"
+      :key="`subFolder-${index}`"
+    >
+      <DocsFolder :folder="subFolder" />
+    </div>
+    <div v-for="(request, index) in folder.requests" :key="`request-${index}`">
+      <DocsRequest :request="request" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    folder: { type: Object, default: () => {} },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.folder {
+  @apply flex flex-col flex-1;
+  @apply justify-center;
+  @apply p-4;
+  @apply mt-4;
+  @apply border-l border-divider;
+
+  .material-icons {
+    @apply mr-4;
+  }
+}
+</style>
--- a/packages/hoppscotch-app/components/docs/Request.vue
+++ b/packages/hoppscotch-app/components/docs/Request.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="request">
+    <h4 class="heading">
+      <SmartIcon name="file" class="svg-icons" />
+      {{ request.name || $t("state.none") }}
+    </h4>
+    <p v-if="request.url" class="doc-desc">
+      <span>
+        {{ $t("request.url") }}:
+        <code>{{ request.url || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.path" class="doc-desc">
+      <span>
+        {{ $t("request.path") }}:
+        <code>{{ request.path || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.method" class="doc-desc">
+      <span>
+        {{ $t("request.method") }}:
+        <code>{{ request.method || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.auth" class="doc-desc">
+      <span>
+        {{ $t("request.authorization") }}:
+        <code>{{ request.auth.authType || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.httpUser" class="doc-desc">
+      <span>
+        {{ $t("authorization.username") }}:
+        <code>{{ request.httpUser || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.httpPassword" class="doc-desc">
+      <span>
+        {{ $t("authorization.password") }}:
+        <code>{{ request.httpPassword || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.bearerToken" class="doc-desc">
+      <span>
+        {{ $t("authorization.token") }}:
+        <code>{{ request.bearerToken || $t("state.none") }}</code>
+      </span>
+    </p>
+    <h4 v-if="request.headers" class="heading">{{ $t("tab.headers") }}</h4>
+    <span v-if="request.headers">
+      <p
+        v-for="(header, index) in request.headers"
+        :key="`header-${index}`"
+        class="doc-desc"
+      >
+        <span>
+          {{ header.key || $t("state.none") }}:
+          <code>{{ header.value || $t("state.none") }}</code>
+        </span>
+      </p>
+    </span>
+    <h4 v-if="request.params" class="heading">
+      {{ $t("request.parameters") }}
+    </h4>
+    <span v-if="request.params">
+      <p
+        v-for="(parameter, index) in request.params"
+        :key="`parameter-${index}`"
+        class="doc-desc"
+      >
+        <span>
+          {{ parameter.key || $t("state.none") }}:
+          <code>{{ parameter.value || $t("state.none") }}</code>
+        </span>
+      </p>
+    </span>
+    <h4 v-if="request.bodyParams" class="heading">
+      {{ $t("request.payload") }}
+    </h4>
+    <span v-if="request.bodyParams">
+      <p
+        v-for="(payload, index) in request.bodyParams"
+        :key="`payload-${index}`"
+        class="doc-desc"
+      >
+        <span>
+          {{ payload.key || $t("state.none") }}:
+          <code>{{ payload.value || $t("state.none") }}</code>
+        </span>
+      </p>
+    </span>
+    <p v-if="request.rawParams" class="doc-desc">
+      <span>
+        {{ $t("request.parameters") }}:
+        <code>{{ request.rawParams || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.contentType" class="doc-desc">
+      <span>
+        {{ $t("request.content_type") }}:
+        <code>{{ request.contentType || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.requestType" class="doc-desc">
+      <span>
+        {{ $t("request.type") }}:
+        <code>{{ request.requestType || $t("state.none") }}</code>
+      </span>
+    </p>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    request: { type: Object, default: () => {} },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.request {
+  @apply flex flex-col flex-1;
+  @apply justify-center;
+  @apply p-4;
+  @apply mt-4;
+  @apply border border-divider;
+  @apply rounded;
+
+  h4 {
+    @apply mt-4;
+  }
+
+  .material-icons {
+    @apply mr-4;
+  }
+}
+
+.doc-desc {
+  @apply flex flex-col flex-1;
+  @apply justify-center;
+  @apply p-4;
+  @apply m-0;
+  @apply text-secondaryLight;
+  @apply border-b border-divider;
+
+  &:last-child {
+    @apply border-b-0;
+  }
+
+  .material-icons {
+    @apply mr-4;
+  }
+}
+</style>
--- a/packages/hoppscotch-app/components/environments/Add.vue
+++ b/packages/hoppscotch-app/components/environments/Add.vue
@@ -0,0 +1,65 @@
+<template>
+  <SmartModal v-if="show" :title="$t('environment.new')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelEnvAdd"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="addNewEnvironment"
+        />
+        <label for="selectLabelEnvAdd">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="addNewEnvironment"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { createEnvironment } from "~/newstore/environments"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  data() {
+    return {
+      name: null as string | null,
+    }
+  },
+  methods: {
+    addNewEnvironment() {
+      if (!this.name) {
+        this.$toast.error(this.$t("environment.invalid_name").toString(), {
+          icon: "error_outline",
+        })
+        return
+      }
+      createEnvironment(this.name)
+      this.hideModal()
+    },
+    hideModal() {
+      this.name = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/environments/Edit.vue
+++ b/packages/hoppscotch-app/components/environments/Edit.vue
@@ -0,0 +1,201 @@
+<template>
+  <SmartModal v-if="show" :title="$t('environment.edit')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <div class="flex relative">
+          <input
+            id="selectLabelEnvEdit"
+            v-model="name"
+            v-focus
+            class="input floating-input"
+            placeholder=" "
+            type="text"
+            autocomplete="off"
+            :disabled="editingEnvironmentIndex === 'Global'"
+            @keyup.enter="saveEnvironment"
+          />
+          <label for="selectLabelEnvEdit">
+            {{ $t("action.label") }}
+          </label>
+        </div>
+        <div class="flex flex-1 justify-between items-center">
+          <label for="variableList" class="p-4">
+            {{ $t("environment.variable_list") }}
+          </label>
+          <div class="flex">
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('action.clear_all')"
+              :svg="clearIcon"
+              class="rounded"
+              @click.native="clearContent()"
+            />
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              svg="plus"
+              :title="$t('add.new')"
+              class="rounded"
+              @click.native="addEnvironmentVariable"
+            />
+          </div>
+        </div>
+        <div class="divide-y divide-dividerLight border-divider border rounded">
+          <div
+            v-for="(variable, index) in vars"
+            :key="`variable-${index}`"
+            class="divide-x divide-dividerLight flex"
+          >
+            <input
+              v-model="variable.key"
+              class="bg-transparent flex flex-1 py-2 px-4"
+              :placeholder="$t('count.variable', { count: index + 1 })"
+              :name="'param' + index"
+            />
+            <input
+              v-model="variable.value"
+              class="bg-transparent flex flex-1 py-2 px-4"
+              :placeholder="$t('count.value', { count: index + 1 })"
+              :name="'value' + index"
+            />
+            <div class="flex">
+              <ButtonSecondary
+                id="variable"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.remove')"
+                svg="trash"
+                color="red"
+                @click.native="removeEnvironmentVariable(index)"
+              />
+            </div>
+          </div>
+          <div
+            v-if="vars.length === 0"
+            class="
+              flex flex-col
+              text-secondaryLight
+              p-4
+              items-center
+              justify-center
+            "
+          >
+            <SmartIcon class="opacity-75 pb-2" name="layers" />
+            <span class="text-center pb-4">
+              {{ $t("empty.environments") }}
+            </span>
+            <ButtonSecondary
+              :label="$t('add.new')"
+              filled
+              @click.native="addEnvironmentVariable"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveEnvironment"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script lang="ts">
+import clone from "lodash/clone"
+import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
+import {
+  Environment,
+  getEnviroment,
+  getGlobalVariables,
+  setGlobalEnvVariables,
+  updateEnvironment,
+} from "~/newstore/environments"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    editingEnvironmentIndex: {
+      type: [Number, String] as PropType<number | "Global" | null>,
+      default: null,
+    },
+  },
+  setup(props) {
+    const workingEnv = computed(() => {
+      if (props.editingEnvironmentIndex === null) return null
+
+      if (props.editingEnvironmentIndex === "Global") {
+        return {
+          name: "Global",
+          variables: getGlobalVariables(),
+        } as Environment
+      } else {
+        return getEnviroment(props.editingEnvironmentIndex)
+      }
+    })
+
+    return {
+      workingEnv,
+    }
+  },
+  data() {
+    return {
+      name: null as string | null,
+      vars: [] as { key: string; value: string }[],
+      clearIcon: "trash-2",
+    }
+  },
+  watch: {
+    show() {
+      this.name = this.workingEnv?.name ?? null
+      this.vars = clone(this.workingEnv?.variables ?? [])
+    },
+  },
+  methods: {
+    clearContent() {
+      this.vars = []
+      this.clearIcon = "check"
+      this.$toast.success(this.$t("state.cleared").toString(), {
+        icon: "clear_all",
+      })
+      setTimeout(() => (this.clearIcon = "trash-2"), 1000)
+    },
+    addEnvironmentVariable() {
+      this.vars.push({
+        key: "",
+        value: "",
+      })
+    },
+    removeEnvironmentVariable(index: number) {
+      this.vars.splice(index, 1)
+    },
+    saveEnvironment() {
+      if (!this.name) {
+        this.$toast.error(this.$t("environment.invalid_name").toString(), {
+          icon: "error_outline",
+        })
+        return
+      }
+
+      const environmentUpdated: Environment = {
+        name: this.name,
+        variables: this.vars,
+      }
+
+      if (this.editingEnvironmentIndex === "Global")
+        setGlobalEnvVariables(environmentUpdated.variables)
+      else updateEnvironment(this.editingEnvironmentIndex!, environmentUpdated)
+      this.hideModal()
+    },
+    hideModal() {
+      this.name = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/environments/Environment.vue
+++ b/packages/hoppscotch-app/components/environments/Environment.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="flex items-center group">
+    <span
+      class="cursor-pointer flex px-4 justify-center items-center"
+      @click="$emit('edit-environment')"
+    >
+      <SmartIcon class="svg-icons" name="layers" />
+    </span>
+    <span
+      class="
+        cursor-pointer
+        flex flex-1
+        min-w-0
+        py-2
+        pr-2
+        transition
+        group-hover:text-secondaryDark
+      "
+      @click="$emit('edit-environment')"
+    >
+      <span class="truncate">
+        {{ environment.name }}
+      </span>
+    </span>
+    <span>
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('action.more')"
+            svg="more-vertical"
+          />
+        </template>
+        <SmartItem
+          svg="edit"
+          :label="$t('action.edit')"
+          @click.native="
+            $emit('edit-environment')
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          v-if="!(environmentIndex === 'Global')"
+          svg="trash-2"
+          color="red"
+          :label="$t('action.delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
+      </tippy>
+    </span>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_environment')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeEnvironment"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { deleteEnvironment } from "~/newstore/environments"
+
+export default defineComponent({
+  props: {
+    environment: { type: Object, default: () => {} },
+    environmentIndex: {
+      type: [Number, String] as PropType<number | "Global">,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      confirmRemove: false,
+    }
+  },
+  methods: {
+    removeEnvironment() {
+      if (this.environmentIndex !== "Global")
+        deleteEnvironment(this.environmentIndex)
+      this.$toast.success(this.$t("state.deleted").toString(), {
+        icon: "delete",
+      })
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-app/components/environments/ImportExport.vue
@@ -0,0 +1,247 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('environment.title')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
+        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('action.more')"
+              class="rounded"
+              svg="more-vertical"
+            />
+          </template>
+          <SmartItem
+            icon="assignment_returned"
+            :label="$t('import.from_gist')"
+            @click.native="
+              readEnvironmentGist
+              $refs.options.tippy().hide()
+            "
+          />
+          <span
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              !currentUser
+                ? $t('export.require_github')
+                : currentUser.provider !== 'github.com'
+                ? $t('export.require_github')
+                : null
+            "
+          >
+            <SmartItem
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              icon="assignment_turned_in"
+              :label="$t('export.create_secret_gist')"
+              @click.native="
+                createEnvironmentGist
+                $refs.options.tippy().hide()
+              "
+            />
+          </span>
+        </tippy>
+      </span>
+    </template>
+    <template #body>
+      <div class="flex flex-col space-y-2">
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.replace_current')"
+          svg="file"
+          :label="$t('action.replace_json')"
+          @click.native="openDialogChooseFileToReplaceWith"
+        />
+        <input
+          ref="inputChooseFileToReplaceWith"
+          class="input"
+          type="file"
+          accept="application/json"
+          @change="replaceWithJSON"
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.preserve_current')"
+          svg="folder-plus"
+          :label="$t('import.json')"
+          @click.native="openDialogChooseFileToImportFrom"
+        />
+        <input
+          ref="inputChooseFileToImportFrom"
+          class="input"
+          type="file"
+          accept="application/json"
+          @change="importFromJSON"
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          svg="download"
+          :label="$t('export.as_json')"
+          @click.native="exportJSON"
+        />
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { currentUser$ } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  environments$,
+  replaceEnvironments,
+  appendEnvironments,
+} from "~/newstore/environments"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  setup() {
+    return {
+      environments: useReadonlyStream(environments$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
+  computed: {
+    environmentJson() {
+      return JSON.stringify(this.environments, null, 2)
+    },
+  },
+  methods: {
+    async createEnvironmentGist() {
+      await this.$axios
+        .$post(
+          "https://api.github.com/gists",
+          {
+            files: {
+              "hoppscotch-environments.json": {
+                content: this.environmentJson,
+              },
+            },
+          },
+          {
+            headers: {
+              Authorization: `token ${this.currentUser.accessToken}`,
+              Accept: "application/vnd.github.v3+json",
+            },
+          }
+        )
+        .then((res) => {
+          this.$toast.success(this.$t("export.gist_created"), {
+            icon: "done",
+          })
+          window.open(res.html_url)
+        })
+        .catch((e) => {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error_outline",
+          })
+          console.error(e)
+        })
+    },
+    async readEnvironmentGist() {
+      const gist = prompt(this.$t("import.gist_url"))
+      if (!gist) return
+      await this.$axios
+        .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
+          headers: {
+            Accept: "application/vnd.github.v3+json",
+          },
+        })
+        .then(({ files }) => {
+          const environments = JSON.parse(Object.values(files)[0].content)
+          replaceEnvironments(environments)
+          this.fileImported()
+        })
+        .catch((e) => {
+          this.failedImport()
+          console.error(e)
+        })
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    openDialogChooseFileToReplaceWith() {
+      this.$refs.inputChooseFileToReplaceWith.click()
+    },
+    openDialogChooseFileToImportFrom() {
+      this.$refs.inputChooseFileToImportFrom.click()
+    },
+    replaceWithJSON() {
+      const reader = new FileReader()
+      reader.onload = ({ target }) => {
+        const content = target.result
+        const environments = JSON.parse(content)
+        replaceEnvironments(environments)
+      }
+      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
+      this.fileImported()
+      this.$refs.inputChooseFileToReplaceWith.value = ""
+    },
+    importFromJSON() {
+      const reader = new FileReader()
+      reader.onload = ({ target }) => {
+        const content = target.result
+        const importFileObj = JSON.parse(content)
+        if (
+          importFileObj._postman_variable_scope === "environment" ||
+          importFileObj._postman_variable_scope === "globals"
+        ) {
+          this.importFromPostman(importFileObj)
+        } else {
+          this.importFromHoppscotch(importFileObj)
+        }
+      }
+      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
+      this.$refs.inputChooseFileToImportFrom.value = ""
+    },
+    importFromHoppscotch(environments) {
+      appendEnvironments(environments)
+      this.fileImported()
+    },
+    importFromPostman({ name, values }) {
+      const environment = { name, variables: [] }
+      values.forEach(({ key, value }) =>
+        environment.variables.push({ key, value })
+      )
+      const environments = [environment]
+      this.importFromHoppscotch(environments)
+    },
+    exportJSON() {
+      const dataToWrite = this.environmentJson
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      }, 1000)
+    },
+    fileImported() {
+      this.$toast.success(this.$t("state.file_imported"), {
+        icon: "folder_shared",
+      })
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/environments/index.vue
+++ b/packages/hoppscotch-app/components/environments/index.vue
@@ -0,0 +1,184 @@
+<template>
+  <AppSection :label="$t('environment.title')">
+    <div
+      class="
+        bg-primary
+        rounded-t
+        flex flex-col
+        top-sidebarPrimaryStickyFold
+        z-10
+        sticky
+      "
+    >
+      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <span
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('environment.select')"
+            class="
+              bg-transparent
+              border-b border-dividerLight
+              flex-1
+              select-wrapper
+            "
+          >
+            <ButtonSecondary
+              v-if="selectedEnvironmentIndex !== -1"
+              :label="environments[selectedEnvironmentIndex].name"
+              class="rounded-none flex-1 pr-8"
+            />
+            <ButtonSecondary
+              v-else
+              :label="$t('environment.no_environment')"
+              class="rounded-none flex-1 pr-8"
+            />
+          </span>
+        </template>
+        <SmartItem
+          :label="$t('environment.no_environment')"
+          :info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
+          :active-info-icon="selectedEnvironmentIndex === -1"
+          @click.native="
+            selectedEnvironmentIndex = -1
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          v-for="(gen, index) in environments"
+          :key="`gen-${index}`"
+          :label="gen.name"
+          :info-icon="index === selectedEnvironmentIndex ? 'done' : ''"
+          :active-info-icon="index === selectedEnvironmentIndex"
+          @click.native="
+            selectedEnvironmentIndex = index
+            $refs.options.tippy().hide()
+          "
+        />
+      </tippy>
+      <div class="border-b border-dividerLight flex flex-1 justify-between">
+        <ButtonSecondary
+          svg="plus"
+          :label="$t('action.new')"
+          class="!rounded-none"
+          @click.native="displayModalAdd(true)"
+        />
+        <div class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            to="https://docs.hoppscotch.io/features/environments"
+            blank
+            :title="$t('app.wiki')"
+            svg="help-circle"
+          />
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            svg="archive"
+            :title="$t('modal.import_export')"
+            @click.native="displayModalImportExport(true)"
+          />
+        </div>
+      </div>
+    </div>
+    <EnvironmentsAdd
+      :show="showModalAdd"
+      @hide-modal="displayModalAdd(false)"
+    />
+    <EnvironmentsEdit
+      :show="showModalEdit"
+      :editing-environment-index="editingEnvironmentIndex"
+      @hide-modal="displayModalEdit(false)"
+    />
+    <EnvironmentsImportExport
+      :show="showModalImportExport"
+      @hide-modal="displayModalImportExport(false)"
+    />
+    <div class="flex flex-col">
+      <EnvironmentsEnvironment
+        environment-index="Global"
+        :environment="globalEnvironment"
+        class="border-b border-dashed border-dividerLight"
+        @edit-environment="editEnvironment('Global')"
+      />
+      <EnvironmentsEnvironment
+        v-for="(environment, index) in environments"
+        :key="`environment-${index}`"
+        :environment-index="index"
+        :environment="environment"
+        @edit-environment="editEnvironment(index)"
+      />
+    </div>
+    <div
+      v-if="environments.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-4">
+        {{ $t("empty.environments") }}
+      </span>
+      <ButtonSecondary
+        :label="$t('add.new')"
+        filled
+        @click.native="displayModalAdd(true)"
+      />
+    </div>
+  </AppSection>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "@nuxtjs/composition-api"
+import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
+import {
+  environments$,
+  setCurrentEnvironment,
+  selectedEnvIndex$,
+  globalEnv$,
+} from "~/newstore/environments"
+
+export default defineComponent({
+  setup() {
+    const globalEnv = useReadonlyStream(globalEnv$, [])
+
+    const globalEnvironment = computed(() => ({
+      name: "Global",
+      variables: globalEnv.value,
+    }))
+
+    return {
+      environments: useReadonlyStream(environments$, []),
+      globalEnvironment,
+      selectedEnvironmentIndex: useStream(
+        selectedEnvIndex$,
+        -1,
+        setCurrentEnvironment
+      ),
+    }
+  },
+  data() {
+    return {
+      showModalImportExport: false,
+      showModalAdd: false,
+      showModalEdit: false,
+      editingEnvironmentIndex: undefined as number | "Global" | undefined,
+    }
+  },
+  methods: {
+    displayModalAdd(shouldDisplay: boolean) {
+      this.showModalAdd = shouldDisplay
+    },
+    displayModalEdit(shouldDisplay: boolean) {
+      this.showModalEdit = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalImportExport(shouldDisplay: boolean) {
+      this.showModalImportExport = shouldDisplay
+    },
+    editEnvironment(environmentIndex: number | "Global") {
+      this.$data.editingEnvironmentIndex = environmentIndex
+      this.displayModalEdit(true)
+    },
+    resetSelectedData() {
+      this.$data.editingEnvironmentIndex = undefined
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/firebase/Login.vue
+++ b/packages/hoppscotch-app/components/firebase/Login.vue
@@ -0,0 +1,281 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('auth.login_to_hoppscotch')"
+    dialog
+    @close="hideModal"
+  >
+    <template #body>
+      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
+        <SmartItem
+          :loading="signingInWithGitHub"
+          svg="auth/github"
+          :label="$t('auth.continue_with_github')"
+          @click.native="signInWithGithub"
+        />
+        <SmartItem
+          :loading="signingInWithGoogle"
+          svg="auth/google"
+          :label="$t('auth.continue_with_google')"
+          @click.native="signInWithGoogle"
+        />
+        <SmartItem
+          icon="mail"
+          :label="$t('auth.continue_with_email')"
+          @click.native="mode = 'email'"
+        />
+      </div>
+      <div v-if="mode === 'email'" class="flex flex-col space-y-2">
+        <div class="flex items-center relative">
+          <input
+            id="email"
+            v-model="form.email"
+            v-focus
+            class="input floating-input"
+            placeholder=" "
+            type="email"
+            name="email"
+            autocomplete="off"
+            required
+            spellcheck="false"
+            autofocus
+            @keyup.enter="signInWithEmail"
+          />
+          <label for="email">
+            {{ $t("auth.email") }}
+          </label>
+        </div>
+        <ButtonPrimary
+          :loading="signingInWithEmail"
+          :disabled="
+            form.email.length !== 0
+              ? emailRegex.test(form.email)
+                ? false
+                : true
+              : true
+          "
+          type="button"
+          :label="$t('auth.send_magic_link')"
+          @click.native="signInWithEmail"
+        />
+      </div>
+      <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
+        <div class="flex flex-col max-w-md justify-center items-center">
+          <SmartIcon class="h-6 text-accent w-6" name="inbox" />
+          <h3 class="my-2 text-center text-lg">
+            {{ $t("auth.we_sent_magic_link") }}
+          </h3>
+          <p class="text-center">
+            {{
+              $t("auth.we_sent_magic_link_description", { email: form.email })
+            }}
+          </p>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <p v-if="mode === 'sign-in'" class="text-secondaryLight">
+        By signing in, you are agreeing to our
+        <SmartAnchor
+          class="link"
+          to="https://docs.hoppscotch.io/terms"
+          blank
+          label="Terms of Service"
+        />
+        and
+        <SmartAnchor
+          class="link"
+          to="https://docs.hoppscotch.io/privacy"
+          blank
+          label="Privacy Policy"
+        />.
+      </p>
+      <p v-if="mode === 'email'" class="text-secondaryLight">
+        <SmartAnchor
+          class="link"
+          :label="`← \xA0 ${$t('auth.all_sign_in_options')}`"
+          @click.native="mode = 'sign-in'"
+        />
+      </p>
+      <p
+        v-if="mode === 'email-sent'"
+        class="flex flex-1 text-secondaryLight justify-between"
+      >
+        <SmartAnchor
+          class="link"
+          :label="`← \xA0 ${$t('auth.re_enter_email')}`"
+          @click.native="mode = 'email'"
+        />
+        <SmartAnchor
+          class="link"
+          :label="$t('action.dismiss')"
+          @click.native="hideModal"
+        />
+      </p>
+    </template>
+  </SmartModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import {
+  signInUserWithGoogle,
+  signInUserWithGithub,
+  setProviderInfo,
+  currentUser$,
+  signInWithEmail,
+  linkWithFBCredential,
+  getGithubCredentialFromResult,
+} from "~/helpers/fb/auth"
+import { setLocalConfig } from "~/newstore/localpersistence"
+import { useStreamSubscriber } from "~/helpers/utils/composables"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  setup() {
+    const { subscribeToStream } = useStreamSubscriber()
+
+    return {
+      subscribeToStream,
+    }
+  },
+  data() {
+    return {
+      form: {
+        email: "",
+      },
+      signingInWithGoogle: false,
+      signingInWithGitHub: false,
+      signingInWithEmail: false,
+      emailRegex:
+        /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
+      mode: "sign-in",
+    }
+  },
+  mounted() {
+    this.subscribeToStream(currentUser$, (user) => {
+      if (user) this.hideModal()
+    })
+  },
+  methods: {
+    showLoginSuccess() {
+      this.$toast.success(this.$t("auth.login_success").toString(), {
+        icon: "vpn_key",
+      })
+    },
+    async signInWithGoogle() {
+      this.signingInWithGoogle = true
+
+      try {
+        await signInUserWithGoogle()
+        this.showLoginSuccess()
+      } catch (e) {
+        console.error(e)
+        // An error happened.
+        if (e.code === "auth/account-exists-with-different-credential") {
+          // Step 2.
+          // User's email already exists.
+          // The pending Google credential.
+          const pendingCred = e.credential
+          this.$toast.info(`${this.$t("auth.account_exists")}`, {
+            icon: "vpn_key",
+            duration: 0,
+            closeOnSwipe: false,
+            action: {
+              text: this.$t("action.yes").toString(),
+              onClick: async (_, toastObject) => {
+                const { user } = await signInUserWithGithub()
+                await linkWithFBCredential(user, pendingCred)
+
+                this.showLoginSuccess()
+
+                toastObject.goAway(0)
+              },
+            },
+          })
+        } else {
+          this.$toast.error(this.$t("error.something_went_wrong").toString(), {
+            icon: "error_outline",
+          })
+        }
+      }
+
+      this.signingInWithGoogle = false
+    },
+    async signInWithGithub() {
+      this.signingInWithGitHub = true
+
+      try {
+        const result = await signInUserWithGithub()
+        const credential = getGithubCredentialFromResult(result)!
+        const token = credential.accessToken
+
+        setProviderInfo(result.providerId!, token!)
+
+        this.showLoginSuccess()
+      } catch (e) {
+        console.error(e)
+        // An error happened.
+        if (e.code === "auth/account-exists-with-different-credential") {
+          // Step 2.
+          // User's email already exists.
+          // The pending Google credential.
+          const pendingCred = e.credential
+          this.$toast.info(`${this.$t("auth.account_exists")}`, {
+            icon: "vpn_key",
+            duration: 0,
+            closeOnSwipe: false,
+            action: {
+              text: this.$t("action.yes").toString(),
+              onClick: async (_, toastObject) => {
+                const { user } = await signInUserWithGoogle()
+                await linkWithFBCredential(user, pendingCred)
+
+                this.showLoginSuccess()
+
+                toastObject.goAway(0)
+              },
+            },
+          })
+        } else {
+          this.$toast.error(this.$t("error.something_went_wrong").toString(), {
+            icon: "error_outline",
+          })
+        }
+      }
+
+      this.signingInWithGitHub = false
+    },
+    async signInWithEmail() {
+      this.signingInWithEmail = true
+
+      const actionCodeSettings = {
+        url: `${process.env.BASE_URL}/enter`,
+        handleCodeInApp: true,
+      }
+      await signInWithEmail(this.form.email, actionCodeSettings)
+        .then(() => {
+          this.mode = "email-sent"
+          setLocalConfig("emailForSignIn", this.form.email)
+        })
+        .catch((e) => {
+          console.error(e)
+          this.$toast.error(e.message, {
+            icon: "error_outline",
+          })
+          this.signingInWithEmail = false
+        })
+        .finally(() => {
+          this.signingInWithEmail = false
+        })
+    },
+    hideModal() {
+      this.mode = "sign-in"
+      this.$toast.clear()
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/firebase/Logout.vue
+++ b/packages/hoppscotch-app/components/firebase/Logout.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="flex">
+    <SmartItem
+      svg="log-out"
+      :label="$t('auth.logout')"
+      @click.native="
+        $emit('confirm-logout')
+        confirmLogout = true
+      "
+    />
+    <SmartConfirmModal
+      :show="confirmLogout"
+      :title="$t('confirm.logout')"
+      @hide-modal="confirmLogout = false"
+      @resolve="logout"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { signOutUser } from "~/helpers/fb/auth"
+
+export default defineComponent({
+  data() {
+    return {
+      confirmLogout: false,
+    }
+  },
+  methods: {
+    async logout() {
+      try {
+        await signOutUser()
+        this.$toast.success(this.$t("auth.logged_out").toString(), {
+          icon: "vpn_key",
+        })
+      } catch (e) {
+        console.error(e)
+        this.$toast.error(this.$t("error.something_went_wrong").toString(), {
+          icon: "error_outline",
+        })
+      }
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/graphql/Field.vue
+++ b/packages/hoppscotch-app/components/graphql/Field.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
+      {{ fieldName }}
+      <span v-if="fieldArgs.length > 0">
+        (
+        <span v-for="(field, index) in fieldArgs" :key="`field-${index}`">
+          {{ field.name }}:
+          <GraphqlTypeLink
+            :gql-type="field.type"
+            :jump-type-callback="jumpTypeCallback"
+          />
+          <span v-if="index !== fieldArgs.length - 1">, </span>
+        </span>
+        ) </span
+      >:
+      <GraphqlTypeLink
+        :gql-type="gqlField.type"
+        :jump-type-callback="jumpTypeCallback"
+      />
+    </div>
+    <div
+      v-if="gqlField.description"
+      class="text-secondaryLight py-2 field-desc"
+    >
+      {{ gqlField.description }}
+    </div>
+    <div
+      v-if="gqlField.isDeprecated"
+      class="
+        rounded
+        bg-yellow-200
+        my-1
+        text-black
+        py-1
+        px-2
+        inline-block
+        field-deprecated
+      "
+    >
+      {{ $t("state.deprecated") }}
+    </div>
+    <div v-if="fieldArgs.length > 0">
+      <h5 class="my-2">Arguments:</h5>
+      <div class="border-divider border-l-2 pl-4">
+        <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
+          <span>
+            {{ field.name }}:
+            <GraphqlTypeLink
+              :gql-type="field.type"
+              :jump-type-callback="jumpTypeCallback"
+            />
+          </span>
+          <div
+            v-if="field.description"
+            class="text-secondaryLight py-2 field-desc"
+          >
+            {{ field.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    gqlField: { type: Object, default: () => {} },
+    jumpTypeCallback: { type: Function, default: () => {} },
+    isHighlighted: { type: Boolean, default: false },
+  },
+  computed: {
+    fieldName() {
+      return this.gqlField.name
+    },
+
+    fieldArgs() {
+      return this.gqlField.args || []
+    },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.field-highlighted {
+  @apply border-b-2 border-accent;
+}
+
+.field-title {
+  @apply select-text;
+}
+</style>
--- a/packages/hoppscotch-app/components/graphql/QueryEditor.vue
+++ b/packages/hoppscotch-app/components/graphql/QueryEditor.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="opacity-0 show-if-initialized" :class="{ initialized }">
+    <pre ref="editor" :class="styles"></pre>
+  </div>
+</template>
+
+<script>
+import ace from "ace-builds"
+import "ace-builds/webpack-resolver"
+import "ace-builds/src-noconflict/ext-language_tools"
+import "ace-builds/src-noconflict/mode-graphqlschema"
+import * as gql from "graphql"
+import { getAutocompleteSuggestions } from "graphql-language-service-interface"
+import { defineComponent } from "@nuxtjs/composition-api"
+import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
+import debounce from "~/helpers/utils/debounce"
+
+export default defineComponent({
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    onRunGQLQuery: {
+      type: Function,
+      default: () => {},
+    },
+    options: {
+      type: Object,
+      default: () => {},
+    },
+    styles: {
+      type: String,
+      default: "",
+    },
+  },
+
+  data() {
+    return {
+      initialized: false,
+      editor: null,
+      cacheValue: "",
+      validationSchema: null,
+    }
+  },
+
+  computed: {
+    appFontSize() {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        "--body-font-size"
+      )
+    },
+  },
+
+  watch: {
+    value(value) {
+      if (value !== this.cacheValue) {
+        this.editor.session.setValue(value, 1)
+        this.cacheValue = value
+      }
+    },
+    theme() {
+      this.initialized = false
+      this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+        this.$nextTick().then(() => {
+          this.initialized = true
+        })
+      })
+    },
+    options(value) {
+      this.editor.setOptions(value)
+    },
+  },
+
+  mounted() {
+    defineGQLLanguageMode(ace)
+
+    const langTools = ace.require("ace/ext/language_tools")
+
+    const editor = ace.edit(this.$refs.editor, {
+      mode: `ace/mode/gql-query`,
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      ...this.options,
+    })
+
+    // Set the theme and show the editor only after it's been set to prevent FOUC.
+    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+      this.$nextTick().then(() => {
+        this.initialized = true
+      })
+    })
+
+    // Set the theme and show the editor only after it's been set to prevent FOUC.
+    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+      this.$nextTick().then(() => {
+        this.initialized = true
+      })
+    })
+
+    editor.setFontSize(this.appFontSize)
+
+    const completer = {
+      getCompletions: (
+        editor,
+        _session,
+        { row, column },
+        _prefix,
+        callback
+      ) => {
+        if (this.validationSchema) {
+          const completions = getAutocompleteSuggestions(
+            this.validationSchema,
+            editor.getValue(),
+            {
+              line: row,
+              character: column,
+            }
+          )
+
+          callback(
+            null,
+            completions.map(({ label, detail }) => ({
+              name: label,
+              value: label,
+              score: 1.0,
+              meta: detail,
+            }))
+          )
+        } else {
+          callback(null, [])
+        }
+      },
+    }
+
+    langTools.setCompleters([completer])
+
+    if (this.value) editor.setValue(this.value, 1)
+
+    this.editor = editor
+    this.cacheValue = this.value
+
+    editor.commands.addCommand({
+      name: "runGQLQuery",
+      exec: () => this.onRunGQLQuery(this.editor.getValue()),
+      bindKey: {
+        mac: "cmd-enter",
+        win: "ctrl-enter",
+      },
+    })
+
+    editor.commands.addCommand({
+      name: "prettifyGQLQuery",
+      exec: () => this.prettifyQuery(),
+      bindKey: {
+        mac: "cmd-p",
+        win: "ctrl-p",
+      },
+    })
+
+    editor.on("change", () => {
+      const content = editor.getValue()
+      this.$emit("input", content)
+      this.parseContents(content)
+      this.cacheValue = content
+    })
+
+    this.parseContents(this.value)
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+
+  methods: {
+    prettifyQuery() {
+      try {
+        this.$emit("update-query", gql.print(gql.parse(this.editor.getValue())))
+      } catch (e) {
+        this.$toast.error(this.$t("error.gql_prettify_invalid_query"), {
+          icon: "error_outline",
+        })
+      }
+    },
+
+    defineTheme() {
+      if (this.theme) {
+        return this.theme
+      }
+      const strip = (str) =>
+        str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
+      return strip(
+        window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue("--editor-theme")
+      )
+    },
+
+    setValidationSchema(schema) {
+      this.validationSchema = schema
+      this.parseContents(this.cacheValue)
+    },
+
+    parseContents: debounce(function (content) {
+      if (content !== "") {
+        try {
+          const doc = gql.parse(content)
+
+          if (this.validationSchema) {
+            this.editor.session.setAnnotations(
+              gql
+                .validate(this.validationSchema, doc)
+                .map(({ locations, message }) => ({
+                  row: locations[0].line - 1,
+                  column: locations[0].column - 1,
+                  text: message,
+                  type: "error",
+                }))
+            )
+          }
+        } catch (e) {
+          this.editor.session.setAnnotations([
+            {
+              row: e.locations[0].line - 1,
+              column: e.locations[0].column - 1,
+              text: e.message,
+              type: "error",
+            },
+          ])
+        }
+      } else {
+        this.editor.session.setAnnotations([])
+      }
+    }, 2000),
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.show-if-initialized {
+  &.initialized {
+    @apply opacity-100;
+  }
+
+  & > * {
+    @apply transition-none;
+  }
+}
+</style>
--- a/packages/hoppscotch-app/components/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/graphql/Request.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="bg-primary flex p-4 top-0 z-10 sticky">
+    <div class="space-x-2 flex-1 inline-flex">
+      <input
+        id="url"
+        v-model="url"
+        v-focus
+        type="url"
+        autocomplete="off"
+        spellcheck="false"
+        class="
+          bg-primaryLight
+          border border-divider
+          rounded
+          text-secondaryDark
+          w-full
+          py-2
+          px-4
+          hover:border-dividerDark
+          focus-visible:bg-transparent focus-visible:border-dividerDark
+        "
+        :placeholder="$t('request.url')"
+        @keyup.enter="onConnectClick"
+      />
+      <ButtonPrimary
+        id="get"
+        name="get"
+        :label="!connected ? $t('action.connect') : $t('action.disconnect')"
+        class="w-32"
+        @click.native="onConnectClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
+import { GQLConnection } from "~/helpers/GQLConnection"
+import { getCurrentStrategyID } from "~/helpers/network"
+import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
+import { gqlHeaders$, gqlURL$, setGQLURL } from "~/newstore/GQLSession"
+
+export default defineComponent({
+  props: {
+    conn: {
+      type: Object as PropType<GQLConnection>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const connected = useReadonlyStream(props.conn.connected$, false)
+    const headers = useReadonlyStream(gqlHeaders$, [])
+
+    const url = useStream(gqlURL$, "", setGQLURL)
+
+    const onConnectClick = () => {
+      if (!connected.value) {
+        props.conn.connect(url.value, headers.value as any)
+
+        logHoppRequestRunToAnalytics({
+          platform: "graphql-schema",
+          strategy: getCurrentStrategyID(),
+        })
+      } else {
+        props.conn.disconnect()
+      }
+    }
+
+    return {
+      url,
+      connected,
+      onConnectClick,
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -0,0 +1,555 @@
+<template>
+  <div>
+    <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
+      <SmartTab :id="'query'" :label="$t('tab.query')" :selected="true">
+        <AppSection label="query">
+          <div
+            class="
+              bg-primary
+              border-b border-dividerLight
+              flex flex-1
+              top-upperSecondaryStickyFold
+              pl-4
+              z-10
+              sticky
+              items-center
+              justify-between
+              gqlRunQuery
+            "
+          >
+            <label class="font-semibold text-secondaryLight">
+              {{ $t("request.query") }}
+            </label>
+            <div class="flex">
+              <ButtonSecondary
+                :label="$t('request.run')"
+                svg="play"
+                class="rounded-none !text-accent"
+                @click.native="runQuery()"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io"
+                blank
+                :title="$t('app.wiki')"
+                svg="help-circle"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.copy')"
+                :svg="copyQueryIcon"
+                @click.native="copyQuery"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="`${$t(
+                  'action.prettify'
+                )} <kbd>${getSpecialKey()}</kbd><kbd>P</kbd>`"
+                :svg="prettifyQueryIcon"
+                @click.native="prettifyQuery"
+              />
+              <ButtonSecondary
+                ref="saveRequest"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('request.save')"
+                svg="folder-plus"
+                @click.native="saveRequest"
+              />
+            </div>
+          </div>
+          <GraphqlQueryEditor
+            ref="queryEditor"
+            v-model="gqlQueryString"
+            :on-run-g-q-l-query="runQuery"
+            :options="{
+              maxLines: Infinity,
+              minLines: 16,
+              autoScrollEditorIntoView: true,
+              showPrintMargin: false,
+              useWorker: false,
+            }"
+            styles="border-b border-dividerLight"
+            @update-query="updateQuery"
+          />
+        </AppSection>
+      </SmartTab>
+
+      <SmartTab :id="'variables'" :label="$t('tab.variables')">
+        <AppSection label="variables">
+          <div
+            class="
+              bg-primary
+              border-b border-dividerLight
+              flex flex-1
+              top-upperSecondaryStickyFold
+              pl-4
+              z-10
+              sticky
+              items-center
+              justify-between
+            "
+          >
+            <label class="font-semibold text-secondaryLight">
+              {{ $t("request.variables") }}
+            </label>
+            <div class="flex">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io"
+                blank
+                :title="$t('app.wiki')"
+                svg="help-circle"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.copy')"
+                :svg="copyVariablesIcon"
+                @click.native="copyVariables"
+              />
+            </div>
+          </div>
+          <SmartAceEditor
+            ref="variableEditor"
+            v-model="variableString"
+            :lang="'json'"
+            :options="{
+              maxLines: Infinity,
+              minLines: 16,
+              autoScrollEditorIntoView: true,
+              showPrintMargin: false,
+              useWorker: false,
+            }"
+            styles="border-b border-dividerLight"
+          />
+        </AppSection>
+      </SmartTab>
+
+      <SmartTab :id="'headers'" :label="$t('tab.headers')">
+        <AppSection label="headers">
+          <div
+            class="
+              bg-primary
+              border-b border-dividerLight
+              flex flex-1
+              top-upperSecondaryStickyFold
+              pl-4
+              z-10
+              sticky
+              items-center
+              justify-between
+            "
+          >
+            <label class="font-semibold text-secondaryLight">
+              {{ $t("tab.headers") }}
+            </label>
+            <div class="flex">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io"
+                blank
+                :title="$t('app.wiki')"
+                svg="help-circle"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.clear_all')"
+                svg="trash-2"
+                :disabled="bulkMode"
+                @click.native="headers = []"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('state.bulk_mode')"
+                svg="edit"
+                :class="{ '!text-accent': bulkMode }"
+                @click.native="bulkMode = !bulkMode"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('add.new')"
+                svg="plus"
+                :disabled="bulkMode"
+                @click.native="addRequestHeader"
+              />
+            </div>
+          </div>
+          <div v-if="bulkMode" class="flex">
+            <textarea-autosize
+              v-model="bulkHeaders"
+              v-focus
+              name="bulk-parameters"
+              class="
+                bg-transparent
+                border-b border-dividerLight
+                flex
+                font-mono
+                flex-1
+                py-2
+                px-4
+                whitespace-pre
+                resize-y
+                overflow-auto
+              "
+              rows="10"
+              :placeholder="$t('state.bulk_mode_placeholder')"
+            />
+          </div>
+          <div v-else>
+            <div
+              v-for="(header, index) in headers"
+              :key="`header-${index}`"
+              class="
+                divide-x divide-dividerLight
+                border-b border-dividerLight
+                flex
+              "
+            >
+              <SmartAutoComplete
+                :placeholder="$t('count.header', { count: index + 1 })"
+                :source="commonHeaders"
+                :spellcheck="false"
+                :value="header.key"
+                autofocus
+                styles="
+                  bg-transparent
+                  flex
+                  flex-1
+                  py-1
+                  px-4
+                  truncate
+                  focus:outline-none
+                "
+                @input="
+                  updateGQLHeader(index, {
+                    key: $event,
+                    value: header.value,
+                    active: header.active,
+                  })
+                "
+              />
+              <input
+                class="bg-transparent flex flex-1 py-2 px-4"
+                :placeholder="$t('count.value', { count: index + 1 })"
+                :name="`value ${index}`"
+                :value="header.value"
+                autofocus
+                @change="
+                  updateGQLHeader(index, {
+                    key: header.key,
+                    value: $event.target.value,
+                    active: header.active,
+                  })
+                "
+              />
+              <span>
+                <ButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="
+                    header.hasOwnProperty('active')
+                      ? header.active
+                        ? $t('action.turn_off')
+                        : $t('action.turn_on')
+                      : $t('action.turn_off')
+                  "
+                  :svg="
+                    header.hasOwnProperty('active')
+                      ? header.active
+                        ? 'check-circle'
+                        : 'circle'
+                      : 'check-circle'
+                  "
+                  color="green"
+                  @click.native="
+                    updateGQLHeader(index, {
+                      key: header.key,
+                      value: header.value,
+                      active: !header.active,
+                    })
+                  "
+                />
+              </span>
+              <span>
+                <ButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('action.remove')"
+                  svg="trash"
+                  color="red"
+                  @click.native="removeRequestHeader(index)"
+                />
+              </span>
+            </div>
+            <div
+              v-if="headers.length === 0"
+              class="
+                flex flex-col
+                text-secondaryLight
+                p-4
+                items-center
+                justify-center
+              "
+            >
+              <span class="text-center pb-4">
+                {{ $t("empty.headers") }}
+              </span>
+              <ButtonSecondary
+                :label="$t('add.new')"
+                filled
+                svg="plus"
+                @click.native="addRequestHeader"
+              />
+            </div>
+          </div>
+        </AppSection>
+      </SmartTab>
+    </SmartTabs>
+
+    <CollectionsSaveRequest
+      mode="graphql"
+      :show="showSaveRequestModal"
+      @hide-modal="hideRequestModal"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  PropType,
+  ref,
+  useContext,
+  watch,
+} from "@nuxtjs/composition-api"
+import clone from "lodash/clone"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import {
+  useNuxt,
+  useReadonlyStream,
+  useStream,
+} from "~/helpers/utils/composables"
+import {
+  addGQLHeader,
+  gqlHeaders$,
+  gqlQuery$,
+  gqlResponse$,
+  gqlURL$,
+  gqlVariables$,
+  removeGQLHeader,
+  setGQLHeaders,
+  setGQLQuery,
+  setGQLResponse,
+  setGQLVariables,
+  updateGQLHeader,
+} from "~/newstore/GQLSession"
+import { commonHeaders } from "~/helpers/headers"
+import { GQLConnection } from "~/helpers/GQLConnection"
+import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
+import { getCurrentStrategyID } from "~/helpers/network"
+import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
+
+export default defineComponent({
+  props: {
+    conn: {
+      type: Object as PropType<GQLConnection>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const {
+      $toast,
+      app: { i18n },
+    } = useContext()
+    const t = i18n.t.bind(i18n)
+    const nuxt = useNuxt()
+
+    const bulkMode = ref(false)
+    const bulkHeaders = ref("")
+
+    watch(bulkHeaders, () => {
+      try {
+        const transformation = bulkHeaders.value.split("\n").map((item) => ({
+          key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+          value: item.substring(item.indexOf(":") + 1).trim(),
+          active: !item.trim().startsWith("//"),
+        }))
+        setGQLHeaders(transformation)
+      } catch (e) {
+        $toast.error(t("error.something_went_wrong").toString(), {
+          icon: "error_outline",
+        })
+        console.error(e)
+      }
+    })
+
+    const url = useReadonlyStream(gqlURL$, "")
+    const gqlQueryString = useStream(gqlQuery$, "", setGQLQuery)
+    const variableString = useStream(gqlVariables$, "", setGQLVariables)
+    const headers = useStream(gqlHeaders$, [], setGQLHeaders)
+
+    const queryEditor = ref<any | null>(null)
+
+    const copyQueryIcon = ref("copy")
+    const prettifyQueryIcon = ref("align-left")
+    const copyVariablesIcon = ref("copy")
+
+    const showSaveRequestModal = ref(false)
+
+    const schema = useReadonlyStream(props.conn.schemaString$, "")
+
+    watch(
+      headers,
+      () => {
+        if (
+          (headers.value[headers.value.length - 1]?.key !== "" ||
+            headers.value[headers.value.length - 1]?.value !== "") &&
+          headers.value.length
+        )
+          addRequestHeader()
+      },
+      { deep: true }
+    )
+
+    onMounted(() => {
+      if (!headers.value?.length) {
+        addRequestHeader()
+      }
+    })
+
+    const copyQuery = () => {
+      copyToClipboard(gqlQueryString.value)
+      copyQueryIcon.value = "check"
+      setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
+    }
+
+    const response = useStream(gqlResponse$, "", setGQLResponse)
+
+    const runQuery = async () => {
+      const startTime = Date.now()
+
+      nuxt.value.$loading.start()
+      response.value = t("state.loading").toString()
+
+      try {
+        const runURL = clone(url.value)
+        const runHeaders = clone(headers.value)
+        const runQuery = clone(gqlQueryString.value)
+        const runVariables = clone(variableString.value)
+
+        const responseText = await props.conn.runQuery(
+          runURL,
+          runHeaders,
+          runQuery,
+          runVariables
+        )
+        const duration = Date.now() - startTime
+
+        nuxt.value.$loading.finish()
+
+        response.value = JSON.stringify(JSON.parse(responseText), null, 2)
+
+        addGraphqlHistoryEntry(
+          makeGQLHistoryEntry({
+            request: makeGQLRequest({
+              name: "",
+              url: runURL,
+              query: runQuery,
+              headers: runHeaders,
+              variables: runVariables,
+            }),
+            response: response.value,
+            star: false,
+          })
+        )
+
+        $toast.success(t("state.finished_in", { duration }).toString(), {
+          icon: "done",
+        })
+      } catch (e: any) {
+        response.value = `${e}. ${t("error.check_console_details")}`
+        nuxt.value.$loading.finish()
+
+        $toast.error(`${e} ${t("error.f12_details").toString()}`, {
+          icon: "error_outline",
+        })
+        console.error(e)
+      }
+
+      logHoppRequestRunToAnalytics({
+        platform: "graphql-query",
+        strategy: getCurrentStrategyID(),
+      })
+    }
+
+    const hideRequestModal = () => {
+      showSaveRequestModal.value = false
+    }
+
+    const prettifyQuery = () => {
+      queryEditor.value.prettifyQuery()
+      prettifyQueryIcon.value = "check"
+      setTimeout(() => (prettifyQueryIcon.value = "align-left"), 1000)
+    }
+
+    const saveRequest = () => {
+      showSaveRequestModal.value = true
+    }
+
+    // Why ?
+    const updateQuery = (updatedQuery: string) => {
+      gqlQueryString.value = updatedQuery
+    }
+
+    const copyVariables = () => {
+      copyToClipboard(variableString.value)
+      copyVariablesIcon.value = "check"
+      setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
+    }
+
+    const addRequestHeader = () => {
+      addGQLHeader({
+        key: "",
+        value: "",
+        active: true,
+      })
+    }
+
+    const removeRequestHeader = (index: number) => {
+      removeGQLHeader(index)
+    }
+
+    return {
+      gqlQueryString,
+      variableString,
+      headers,
+      copyQueryIcon,
+      prettifyQueryIcon,
+      copyVariablesIcon,
+
+      queryEditor,
+
+      showSaveRequestModal,
+      hideRequestModal,
+
+      schema,
+
+      copyQuery,
+      runQuery,
+      prettifyQuery,
+      saveRequest,
+      updateQuery,
+      copyVariables,
+      addRequestHeader,
+      removeRequestHeader,
+
+      getSpecialKey: getPlatformSpecialKey,
+
+      commonHeaders,
+      updateGQLHeader,
+      bulkMode,
+      bulkHeaders,
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/components/graphql/Response.vue
@@ -0,0 +1,188 @@
+<template>
+  <AppSection ref="response" label="response">
+    <div
+      v-if="responseString"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        pl-4
+        top-0
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("response.title") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          ref="downloadResponse"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          :svg="downloadResponseIcon"
+          @click.native="downloadResponse"
+        />
+        <ButtonSecondary
+          ref="copyResponseButton"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.copy')"
+          :svg="copyResponseIcon"
+          @click.native="copyResponse"
+        />
+      </div>
+    </div>
+    <SmartAceEditor
+      v-if="responseString"
+      :value="responseString"
+      :lang="'json'"
+      :lint="false"
+      :options="{
+        maxLines: Infinity,
+        minLines: 16,
+        autoScrollEditorIntoView: true,
+        readOnly: true,
+        showPrintMargin: false,
+        useWorker: false,
+      }"
+      styles="border-b border-dividerLight"
+    />
+    <div
+      v-else
+      class="
+        flex flex-col flex-1
+        text-secondaryLight
+        p-4
+        items-center
+        justify-center
+      "
+    >
+      <div class="flex space-x-2 pb-4">
+        <div class="flex flex-col space-y-4 items-end">
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.request.send_request") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.show_all") }}
+          </span>
+          <!-- <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.command_menu") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.help_menu") }}
+          </span> -->
+        </div>
+        <div class="flex flex-col space-y-4">
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">G</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">K</span>
+          </div>
+          <!-- <div class="flex">
+            <span class="shortcut-key">/</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">?</span>
+          </div> -->
+        </div>
+      </div>
+      <ButtonSecondary
+        :label="$t('app.documentation')"
+        to="https://docs.hoppscotch.io"
+        svg="external-link"
+        blank
+        outline
+        reverse
+      />
+    </div>
+  </AppSection>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  PropType,
+  ref,
+  useContext,
+} from "@nuxtjs/composition-api"
+import { GQLConnection } from "~/helpers/GQLConnection"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { gqlResponse$ } from "~/newstore/GQLSession"
+
+export default defineComponent({
+  props: {
+    conn: {
+      type: Object as PropType<GQLConnection>,
+      required: true,
+    },
+  },
+  setup() {
+    const {
+      $toast,
+      app: { i18n },
+    } = useContext()
+    const t = i18n.t.bind(i18n)
+
+    const responseString = useReadonlyStream(gqlResponse$, "")
+
+    const downloadResponseIcon = ref("download")
+    const copyResponseIcon = ref("copy")
+
+    const copyResponse = () => {
+      copyToClipboard(responseString.value!)
+      copyResponseIcon.value = "check"
+      setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
+    }
+
+    const downloadResponse = () => {
+      const dataToWrite = responseString.value
+      const file = new Blob([dataToWrite!], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      downloadResponseIcon.value = "check"
+      $toast.success(t("state.download_started").toString(), {
+        icon: "downloading",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+        downloadResponseIcon.value = "download"
+      }, 1000)
+    }
+
+    return {
+      responseString,
+
+      downloadResponseIcon,
+      copyResponseIcon,
+
+      downloadResponse,
+      copyResponse,
+
+      getSpecialKey: getPlatformSpecialKey,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue
@@ -0,0 +1,470 @@
+<template>
+  <aside>
+    <SmartTabs styles="sticky bg-primary z-10 top-0">
+      <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
+        <AppSection label="docs">
+          <div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
+            <input
+              v-model="graphqlFieldsFilterText"
+              type="search"
+              autocomplete="off"
+              :placeholder="$t('action.search')"
+              class="bg-transparent flex w-full p-4 py-2"
+            />
+            <div class="flex">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io/quickstart/graphql"
+                blank
+                :title="$t('app.wiki')"
+                svg="help-circle"
+              />
+            </div>
+          </div>
+          <SmartTabs
+            ref="gqlTabs"
+            styles="border-t border-dividerLight bg-primary sticky z-10 top-sidebarSecondaryStickyFold"
+          >
+            <div class="gqlTabs">
+              <SmartTab
+                v-if="queryFields.length > 0"
+                :id="'queries'"
+                :label="$t('tab.queries')"
+                :selected="true"
+                class="divide-y divide-dividerLight"
+              >
+                <GraphqlField
+                  v-for="(field, index) in filteredQueryFields"
+                  :key="`field-${index}`"
+                  :gql-field="field"
+                  :jump-type-callback="handleJumpToType"
+                  class="p-4"
+                />
+              </SmartTab>
+              <SmartTab
+                v-if="mutationFields.length > 0"
+                :id="'mutations'"
+                :label="$t('graphql.mutations')"
+                class="divide-y divide-dividerLight"
+              >
+                <GraphqlField
+                  v-for="(field, index) in filteredMutationFields"
+                  :key="`field-${index}`"
+                  :gql-field="field"
+                  :jump-type-callback="handleJumpToType"
+                  class="p-4"
+                />
+              </SmartTab>
+              <SmartTab
+                v-if="subscriptionFields.length > 0"
+                :id="'subscriptions'"
+                :label="$t('graphql.subscriptions')"
+                class="divide-y divide-dividerLight"
+              >
+                <GraphqlField
+                  v-for="(field, index) in filteredSubscriptionFields"
+                  :key="`field-${index}`"
+                  :gql-field="field"
+                  :jump-type-callback="handleJumpToType"
+                  class="p-4"
+                />
+              </SmartTab>
+              <SmartTab
+                v-if="graphqlTypes.length > 0"
+                :id="'types'"
+                ref="typesTab"
+                :label="$t('tab.types')"
+                class="divide-y divide-dividerLight"
+              >
+                <GraphqlType
+                  v-for="(type, index) in filteredGraphqlTypes"
+                  :key="`type-${index}`"
+                  :gql-type="type"
+                  :gql-types="graphqlTypes"
+                  :is-highlighted="isGqlTypeHighlighted(type)"
+                  :highlighted-fields="getGqlTypeHighlightedFields(type)"
+                  :jump-type-callback="handleJumpToType"
+                />
+              </SmartTab>
+            </div>
+          </SmartTabs>
+          <div
+            v-if="
+              queryFields.length === 0 &&
+              mutationFields.length === 0 &&
+              subscriptionFields.length === 0 &&
+              graphqlTypes.length === 0
+            "
+            class="
+              flex flex-col
+              text-secondaryLight
+              p-4
+              items-center
+              justify-center
+            "
+          >
+            <i class="opacity-75 pb-2 material-icons">link</i>
+            <span class="text-center">
+              {{ $t("empty.schema") }}
+            </span>
+          </div>
+        </AppSection>
+      </SmartTab>
+
+      <SmartTab :id="'history'" :label="$t('tab.history')">
+        <History
+          ref="graphqlHistoryComponent"
+          :page="'graphql'"
+          @useHistory="handleUseHistory"
+        />
+      </SmartTab>
+
+      <SmartTab :id="'collections'" :label="$t('tab.collections')">
+        <CollectionsGraphql />
+      </SmartTab>
+
+      <SmartTab :id="'schema'" :label="`Schema`">
+        <AppSection ref="schema" label="schema">
+          <div
+            v-if="schemaString"
+            class="
+              bg-primary
+              flex flex-1
+              top-sidebarPrimaryStickyFold
+              pl-4
+              z-10
+              sticky
+              items-center
+              justify-between
+            "
+          >
+            <label class="font-semibold text-secondaryLight">
+              {{ $t("graphql.schema") }}
+            </label>
+            <div class="flex">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io/quickstart/graphql"
+                blank
+                :title="$t('app.wiki')"
+                svg="help-circle"
+              />
+              <ButtonSecondary
+                ref="downloadSchema"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.download_file')"
+                :svg="downloadSchemaIcon"
+                @click.native="downloadSchema"
+              />
+              <ButtonSecondary
+                ref="copySchemaCode"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.copy')"
+                :svg="copySchemaIcon"
+                @click.native="copySchema"
+              />
+            </div>
+          </div>
+          <SmartAceEditor
+            v-if="schemaString"
+            v-model="schemaString"
+            :lang="'graphqlschema'"
+            :options="{
+              maxLines: Infinity,
+              minLines: 16,
+              autoScrollEditorIntoView: true,
+              readOnly: true,
+              showPrintMargin: false,
+              useWorker: false,
+            }"
+            styles="border-b border-dividerLight"
+          />
+          <div
+            v-else
+            class="
+              flex flex-col
+              text-secondaryLight
+              p-4
+              items-center
+              justify-center
+            "
+          >
+            <i class="opacity-75 pb-2 material-icons">link</i>
+            <span class="text-center">
+              {{ $t("empty.schema") }}
+            </span>
+          </div>
+        </AppSection>
+      </SmartTab>
+    </SmartTabs>
+  </aside>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  PropType,
+  ref,
+  useContext,
+} from "@nuxtjs/composition-api"
+import { GraphQLField, GraphQLType } from "graphql"
+import { map } from "rxjs/operators"
+import { GQLConnection } from "~/helpers/GQLConnection"
+import { GQLHeader } from "~/helpers/types/HoppGQLRequest"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  setGQLHeaders,
+  setGQLQuery,
+  setGQLResponse,
+  setGQLURL,
+  setGQLVariables,
+} from "~/newstore/GQLSession"
+
+function isTextFoundInGraphqlFieldObject(
+  text: string,
+  field: GraphQLField<any, any>
+) {
+  const normalizedText = text.toLowerCase()
+
+  const isFilterTextFoundInDescription = field.description
+    ? field.description.toLowerCase().includes(normalizedText)
+    : false
+  const isFilterTextFoundInName = field.name
+    .toLowerCase()
+    .includes(normalizedText)
+
+  return isFilterTextFoundInDescription || isFilterTextFoundInName
+}
+
+function getFilteredGraphqlFields(
+  filterText: string,
+  fields: GraphQLField<any, any>[]
+) {
+  if (!filterText) return fields
+
+  return fields.filter((field) =>
+    isTextFoundInGraphqlFieldObject(filterText, field)
+  )
+}
+
+function getFilteredGraphqlTypes(filterText: string, types: GraphQLType[]) {
+  if (!filterText) return types
+
+  return types.filter((type) => {
+    const isFilterTextMatching = isTextFoundInGraphqlFieldObject(
+      filterText,
+      type as any
+    )
+
+    if (isFilterTextMatching) {
+      return true
+    }
+
+    const isFilterTextMatchingAtLeastOneField = Object.values(
+      (type as any)._fields || {}
+    ).some((field) => isTextFoundInGraphqlFieldObject(filterText, field as any))
+
+    return isFilterTextMatchingAtLeastOneField
+  })
+}
+
+function resolveRootType(type: GraphQLType) {
+  let t: any = type
+  while (t.ofType) t = t.ofType
+  return t
+}
+
+type GQLHistoryEntry = {
+  url: string
+  headers: GQLHeader[]
+  query: string
+  response: string
+  variables: string
+}
+
+export default defineComponent({
+  props: {
+    conn: {
+      type: Object as PropType<GQLConnection>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const {
+      $toast,
+      app: { i18n },
+    } = useContext()
+    const t = i18n.t.bind(i18n)
+
+    const queryFields = useReadonlyStream(
+      props.conn.queryFields$.pipe(map((x) => x ?? [])),
+      []
+    )
+    const mutationFields = useReadonlyStream(
+      props.conn.mutationFields$.pipe(map((x) => x ?? [])),
+      []
+    )
+    const subscriptionFields = useReadonlyStream(
+      props.conn.subscriptionFields$.pipe(map((x) => x ?? [])),
+      []
+    )
+    const graphqlTypes = useReadonlyStream(
+      props.conn.graphqlTypes$.pipe(map((x) => x ?? [])),
+      []
+    )
+
+    const downloadSchemaIcon = ref("download")
+    const copySchemaIcon = ref("copy")
+
+    const graphqlFieldsFilterText = ref("")
+
+    const gqlTabs = ref<any | null>(null)
+    const typesTab = ref<any | null>(null)
+
+    const filteredQueryFields = computed(() => {
+      return getFilteredGraphqlFields(
+        graphqlFieldsFilterText.value,
+        queryFields.value as any
+      )
+    })
+
+    const filteredMutationFields = computed(() => {
+      return getFilteredGraphqlFields(
+        graphqlFieldsFilterText.value,
+        mutationFields.value as any
+      )
+    })
+
+    const filteredSubscriptionFields = computed(() => {
+      return getFilteredGraphqlFields(
+        graphqlFieldsFilterText.value,
+        subscriptionFields.value as any
+      )
+    })
+
+    const filteredGraphqlTypes = computed(() => {
+      return getFilteredGraphqlTypes(
+        graphqlFieldsFilterText.value,
+        graphqlTypes.value as any
+      )
+    })
+
+    const isGqlTypeHighlighted = (gqlType: GraphQLType) => {
+      if (!graphqlFieldsFilterText.value) return false
+
+      return isTextFoundInGraphqlFieldObject(
+        graphqlFieldsFilterText.value,
+        gqlType as any
+      )
+    }
+
+    const getGqlTypeHighlightedFields = (gqlType: GraphQLType) => {
+      if (!graphqlFieldsFilterText.value) return []
+
+      const fields = Object.values((gqlType as any)._fields || {})
+      if (!fields || fields.length === 0) return []
+
+      return fields.filter((field) =>
+        isTextFoundInGraphqlFieldObject(
+          graphqlFieldsFilterText.value,
+          field as any
+        )
+      )
+    }
+
+    const handleJumpToType = async (type: GraphQLType) => {
+      gqlTabs.value.selectTab(typesTab.value)
+      await nextTick()
+
+      const rootTypeName = resolveRootType(type).name
+
+      const target = document.getElementById(`type_${rootTypeName}`)
+      if (target) {
+        gqlTabs.value.$el
+          .querySelector(".gqlTabs")
+          .scrollTo({ top: target.offsetTop, behavior: "smooth" })
+      }
+    }
+    const schemaString = useReadonlyStream(
+      props.conn.schemaString$.pipe(map((x) => x ?? "")),
+      ""
+    )
+
+    const downloadSchema = () => {
+      const dataToWrite = JSON.stringify(schemaString.value, null, 2)
+      const file = new Blob([dataToWrite], { type: "application/graphql" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${
+        url.split("/").pop()!.split("#")[0].split("?")[0]
+      }.graphql`
+      document.body.appendChild(a)
+      a.click()
+      downloadSchemaIcon.value = "check"
+      $toast.success(t("state.download_started").toString(), {
+        icon: "downloading",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+        downloadSchemaIcon.value = "download"
+      }, 1000)
+    }
+
+    const copySchema = () => {
+      if (!schemaString.value) return
+
+      copyToClipboard(schemaString.value)
+      copySchemaIcon.value = "check"
+      setTimeout(() => (copySchemaIcon.value = "copy"), 1000)
+    }
+
+    const handleUseHistory = (entry: GQLHistoryEntry) => {
+      const url = entry.url
+      const headers = entry.headers
+      const gqlQueryString = entry.query
+      const variableString = entry.variables
+      const responseText = entry.response
+
+      setGQLURL(url)
+      setGQLHeaders(headers)
+      setGQLQuery(gqlQueryString)
+      setGQLVariables(variableString)
+      setGQLResponse(responseText)
+      props.conn.reset()
+    }
+
+    return {
+      queryFields,
+      mutationFields,
+      subscriptionFields,
+      graphqlTypes,
+      schemaString,
+
+      graphqlFieldsFilterText,
+
+      filteredQueryFields,
+      filteredMutationFields,
+      filteredSubscriptionFields,
+      filteredGraphqlTypes,
+
+      isGqlTypeHighlighted,
+      getGqlTypeHighlightedFields,
+
+      gqlTabs,
+      typesTab,
+      handleJumpToType,
+
+      downloadSchema,
+      downloadSchemaIcon,
+      copySchemaIcon,
+      copySchema,
+      handleUseHistory,
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/graphql/Type.vue
+++ b/packages/hoppscotch-app/components/graphql/Type.vue
@@ -0,0 +1,107 @@
+<template>
+  <div :id="`type_${gqlType.name}`" class="p-4">
+    <div class="type-title" :class="{ 'text-accent': isHighlighted }">
+      <span v-if="isInput" class="text-accent">input </span>
+      <span v-else-if="isInterface" class="text-accent">interface </span>
+      <span v-else-if="isEnum" class="text-accent">enum </span>
+      {{ gqlType.name }}
+    </div>
+    <div v-if="gqlType.description" class="text-secondaryLight py-2 type-desc">
+      {{ gqlType.description }}
+    </div>
+    <div v-if="interfaces.length > 0">
+      <h5 class="my-2">Interfaces:</h5>
+      <div
+        v-for="(gqlInterface, index) in interfaces"
+        :key="`gqlInterface-${index}`"
+      >
+        <GraphqlTypeLink
+          :gql-type="gqlInterface"
+          :jump-type-callback="jumpTypeCallback"
+          class="border-divider border-l-2 pl-4"
+        />
+      </div>
+    </div>
+    <div v-if="children.length > 0" class="mb-2">
+      <h5 class="my-2">Children:</h5>
+      <GraphqlTypeLink
+        v-for="(child, index) in children"
+        :key="`child-${index}`"
+        :gql-type="child"
+        :jump-type-callback="jumpTypeCallback"
+        class="border-divider border-l-2 pl-4"
+      />
+    </div>
+    <div v-if="gqlType.getFields">
+      <h5 class="my-2">Fields:</h5>
+      <GraphqlField
+        v-for="(field, index) in gqlType.getFields()"
+        :key="`field-${index}`"
+        class="border-divider border-l-2 pl-4"
+        :gql-field="field"
+        :is-highlighted="isFieldHighlighted({ field })"
+        :jump-type-callback="jumpTypeCallback"
+      />
+    </div>
+    <div v-if="isEnum">
+      <h5 class="my-2">Values:</h5>
+      <div
+        v-for="(value, index) in gqlType.getValues()"
+        :key="`value-${index}`"
+        class="border-divider border-l-2 pl-4"
+        v-text="value.name"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import {
+  GraphQLEnumType,
+  GraphQLInputObjectType,
+  GraphQLInterfaceType,
+} from "graphql"
+
+export default defineComponent({
+  props: {
+    // eslint-disable-next-line vue/require-default-prop, vue/require-prop-types
+    gqlType: {},
+    gqlTypes: { type: Array, default: () => [] },
+    jumpTypeCallback: { type: Function, default: () => {} },
+    isHighlighted: { type: Boolean, default: false },
+    highlightedFields: { type: Array, default: () => [] },
+  },
+  computed: {
+    isInput() {
+      return this.gqlType instanceof GraphQLInputObjectType
+    },
+    isInterface() {
+      return this.gqlType instanceof GraphQLInterfaceType
+    },
+    isEnum() {
+      return this.gqlType instanceof GraphQLEnumType
+    },
+    interfaces() {
+      return (this.gqlType.getInterfaces && this.gqlType.getInterfaces()) || []
+    },
+    children() {
+      return this.gqlTypes.filter(
+        (type) =>
+          type.getInterfaces && type.getInterfaces().includes(this.gqlType)
+      )
+    },
+  },
+  methods: {
+    isFieldHighlighted({ field }) {
+      return !!this.highlightedFields.find(({ name }) => name === field.name)
+    },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.type-highlighted {
+  @apply text-accent;
+}
+</style>
--- a/packages/hoppscotch-app/components/graphql/TypeLink.vue
+++ b/packages/hoppscotch-app/components/graphql/TypeLink.vue
@@ -0,0 +1,44 @@
+<template>
+  <span
+    :class="isScalar ? 'text-secondaryLight' : 'cursor-pointer text-accent'"
+    @click="jumpToType"
+  >
+    {{ typeString }}
+  </span>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { GraphQLScalarType } from "graphql"
+
+export default defineComponent({
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    gqlType: null,
+    // (typeName: string) => void
+    // eslint-disable-next-line vue/require-default-prop
+    jumpTypeCallback: Function,
+  },
+
+  computed: {
+    typeString() {
+      return this.gqlType.toString()
+    },
+    isScalar() {
+      return this.resolveRootType(this.gqlType) instanceof GraphQLScalarType
+    },
+  },
+
+  methods: {
+    jumpToType() {
+      if (this.isScalar) return
+      this.jumpTypeCallback(this.gqlType)
+    },
+    resolveRootType(type) {
+      let t = type
+      while (t.ofType != null) t = t.ofType
+      return t
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/graphql/tests/Field.spec.js
+++ b/packages/hoppscotch-app/components/graphql/tests/Field.spec.js
@@ -0,0 +1,169 @@
+import { shallowMount } from "@vue/test-utils"
+import field from "../Field"
+
+const gqlField = {
+  name: "testField",
+  args: [
+    {
+      name: "arg1",
+      type: "Arg1Type",
+    },
+    {
+      name: "arg2",
+      type: "Arg2type",
+    },
+  ],
+  type: "FieldType",
+  description: "TestDescription",
+}
+
+const factory = (props) =>
+  shallowMount(field, {
+    propsData: props,
+    stubs: {
+      GraphqlTypeLink: {
+        template: "<span>Typelink</span>",
+      },
+    },
+    mocks: {
+      $t: (text) => text,
+    },
+  })
+
+describe("field", () => {
+  test("mounts properly if props are given", () => {
+    const wrapper = factory({
+      gqlField,
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("field title is set correctly for fields with no args", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: undefined,
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField : Typelink")
+  })
+
+  test("field title is correctly given for fields with single arg", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: [
+          {
+            name: "arg1",
+            type: "Arg1Type",
+          },
+        ],
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField ( arg1: Typelink ) : Typelink")
+  })
+
+  test("field title is correctly given for fields with multiple args", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: [
+          {
+            name: "arg1",
+            type: "Arg1Type",
+          },
+        ],
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField ( arg1: Typelink ) : Typelink")
+  })
+
+  test("all typelinks are passed the jump callback", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: [
+          {
+            name: "arg1",
+            type: "Arg1Type",
+          },
+          {
+            name: "arg2",
+            type: "Arg2Type",
+          },
+        ],
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField ( arg1: Typelink , arg2: Typelink ) : Typelink")
+  })
+
+  test("description is rendered when it is present", () => {
+    const wrapper = factory({
+      gqlField,
+    })
+
+    expect(wrapper.find(".field-desc").text()).toEqual("TestDescription")
+  })
+
+  test("description not rendered when it is not present", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        description: undefined,
+      },
+    })
+
+    expect(wrapper.find(".field-desc").exists()).toEqual(false)
+  })
+
+  test("deprecation warning is displayed when field is deprecated", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        isDeprecated: true,
+      },
+    })
+
+    expect(wrapper.find(".field-deprecated").exists()).toEqual(true)
+  })
+
+  test("deprecation warning is not displayed wwhen field is not deprecated", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        isDeprecated: false,
+      },
+    })
+
+    expect(wrapper.find(".field-deprecated").exists()).toEqual(false)
+  })
+})
--- a/packages/hoppscotch-app/components/graphql/tests/Type.spec.js
+++ b/packages/hoppscotch-app/components/graphql/tests/Type.spec.js
@@ -0,0 +1,241 @@
+import { shallowMount } from "@vue/test-utils"
+import {
+  GraphQLEnumType,
+  GraphQLInputObjectType,
+  GraphQLInterfaceType,
+  GraphQLObjectType,
+} from "graphql"
+import type from "../Type"
+
+const gqlType = {
+  name: "TestType",
+  description: "TestDescription",
+  getFields: () => [{ name: "field1" }, { name: "field2" }],
+}
+
+const factory = (props) =>
+  shallowMount(type, {
+    mocks: {
+      $t: (text) => text,
+    },
+    propsData: { gqlTypes: [], ...props },
+    stubs: ["GraphqlField", "GraphqlTypeLink"],
+  })
+
+describe("type", () => {
+  test("mounts properly when props are passed", () => {
+    const wrapper = factory({
+      gqlType,
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("title of the type is rendered properly", () => {
+    const wrapper = factory({
+      gqlType,
+    })
+
+    expect(wrapper.find(".type-title").text()).toEqual("TestType")
+  })
+
+  test("description of the type is rendered properly if present", () => {
+    const wrapper = factory({
+      gqlType,
+    })
+
+    expect(wrapper.find(".type-desc").text()).toEqual("TestDescription")
+  })
+
+  test("description of the type is not rendered if not present", () => {
+    const wrapper = factory({
+      gqlType: {
+        ...gqlType,
+        description: undefined,
+      },
+    })
+
+    expect(wrapper.find(".type-desc").exists()).toEqual(false)
+  })
+
+  test("fields are not rendered if not present", () => {
+    const wrapper = factory({
+      gqlType: {
+        ...gqlType,
+        getFields: undefined,
+      },
+    })
+    expect(wrapper.find("GraphqlField-stub").exists()).toEqual(false)
+  })
+
+  test("all fields are rendered if present with props passed properly", () => {
+    const wrapper = factory({
+      gqlType: {
+        ...gqlType,
+      },
+    })
+
+    expect(wrapper.findAll("GraphqlField-stub").length).toEqual(2)
+  })
+
+  test("prepends 'input' to type name for Input Types", () => {
+    const testType = new GraphQLInputObjectType({
+      name: "TestType",
+      fields: {},
+    })
+
+    const wrapper = factory({
+      gqlType: testType,
+    })
+
+    expect(wrapper.find(".type-title").text().startsWith("input")).toEqual(true)
+  })
+
+  test("prepends 'interface' to type name for Interface Types", () => {
+    const testType = new GraphQLInterfaceType({
+      name: "TestType",
+      fields: {},
+    })
+
+    const wrapper = factory({
+      gqlType: testType,
+    })
+
+    expect(wrapper.find(".type-title").text().startsWith("interface")).toEqual(
+      true
+    )
+  })
+
+  test("prepends 'enum' to type name for Enum Types", () => {
+    const testType = new GraphQLEnumType({
+      name: "TestType",
+      values: {},
+    })
+
+    const wrapper = factory({
+      gqlType: testType,
+    })
+
+    expect(wrapper.find(".type-title").text().startsWith("enum")).toEqual(true)
+  })
+
+  test("'interfaces' computed property returns all the related interfaces", () => {
+    const testInterfaceA = new GraphQLInterfaceType({
+      name: "TestInterfaceA",
+      fields: {},
+    })
+    const testInterfaceB = new GraphQLInterfaceType({
+      name: "TestInterfaceB",
+      fields: {},
+    })
+
+    const type = new GraphQLObjectType({
+      name: "TestType",
+      interfaces: [testInterfaceA, testInterfaceB],
+      fields: {},
+    })
+
+    const wrapper = factory({
+      gqlType: type,
+    })
+
+    expect(wrapper.vm.interfaces).toEqual(
+      expect.arrayContaining([testInterfaceA, testInterfaceB])
+    )
+  })
+
+  test("'interfaces' computed property returns an empty array if there are no interfaces", () => {
+    const type = new GraphQLObjectType({
+      name: "TestType",
+      fields: {},
+    })
+
+    const wrapper = factory({
+      gqlType: type,
+    })
+
+    expect(wrapper.vm.interfaces).toEqual([])
+  })
+
+  test("'interfaces' computed property returns an empty array if the type is an enum", () => {
+    const type = new GraphQLEnumType({
+      name: "TestType",
+      values: {},
+    })
+
+    const wrapper = factory({
+      gqlType: type,
+    })
+
+    expect(wrapper.vm.interfaces).toEqual([])
+  })
+
+  test("'children' computed property returns all the types implementing an interface", () => {
+    const testInterface = new GraphQLInterfaceType({
+      name: "TestInterface",
+      fields: {},
+    })
+
+    const typeA = new GraphQLObjectType({
+      name: "TypeA",
+      interfaces: [testInterface],
+      fields: {},
+    })
+
+    const typeB = new GraphQLObjectType({
+      name: "TypeB",
+      interfaces: [testInterface],
+      fields: {},
+    })
+
+    const wrapper = factory({
+      gqlType: testInterface,
+      gqlTypes: [testInterface, typeA, typeB],
+    })
+
+    expect(wrapper.vm.children).toEqual(expect.arrayContaining([typeA, typeB]))
+  })
+
+  test("'children' computed property returns an empty array if there are no types implementing the interface", () => {
+    const testInterface = new GraphQLInterfaceType({
+      name: "TestInterface",
+      fields: {},
+    })
+
+    const typeA = new GraphQLObjectType({
+      name: "TypeA",
+      fields: {},
+    })
+
+    const typeB = new GraphQLObjectType({
+      name: "TypeB",
+      fields: {},
+    })
+
+    const wrapper = factory({
+      gqlType: testInterface,
+      gqlTypes: [testInterface, typeA, typeB],
+    })
+
+    expect(wrapper.vm.children).toEqual([])
+  })
+
+  test("'children' computed property returns an empty array if the type is an enum", () => {
+    const testInterface = new GraphQLInterfaceType({
+      name: "TestInterface",
+      fields: {},
+    })
+
+    const testType = new GraphQLEnumType({
+      name: "TestEnum",
+      values: {},
+    })
+
+    const wrapper = factory({
+      gqlType: testType,
+      gqlTypes: [testInterface, testType],
+    })
+
+    expect(wrapper.vm.children).toEqual([])
+  })
+})
--- a/packages/hoppscotch-app/components/graphql/tests/TypeLink.spec.js
+++ b/packages/hoppscotch-app/components/graphql/tests/TypeLink.spec.js
@@ -0,0 +1,58 @@
+import { shallowMount } from "@vue/test-utils"
+import { GraphQLInt } from "graphql"
+import typelink from "../TypeLink.vue"
+
+const factory = (props) =>
+  shallowMount(typelink, {
+    propsData: props,
+  })
+
+const gqlType = {
+  toString: () => "TestType",
+}
+
+describe("typelink", () => {
+  test("mounts properly when valid props are given", () => {
+    const wrapper = factory({
+      gqlType,
+      jumpTypeCallback: jest.fn(),
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("jumpToTypeCallback is called when the link is clicked", async () => {
+    const callback = jest.fn()
+
+    const wrapper = factory({
+      gqlType,
+      jumpTypeCallback: callback,
+    })
+
+    await wrapper.trigger("click")
+
+    expect(callback).toHaveBeenCalledTimes(1)
+  })
+
+  test("jumpToType callback is not called if the root type is a scalar", async () => {
+    const callback = jest.fn()
+
+    const wrapper = factory({
+      gqlType: GraphQLInt,
+      jumpTypeCallback: callback,
+    })
+
+    await wrapper.trigger("click")
+
+    expect(callback).not.toHaveBeenCalled()
+  })
+
+  test("link text is the type string", () => {
+    const wrapper = factory({
+      gqlType,
+      jumpTypeCallback: jest.fn(),
+    })
+
+    expect(wrapper.text()).toBe("TestType")
+  })
+})
--- a/packages/hoppscotch-app/components/history/tests/GraphqlCard.sample
+++ b/packages/hoppscotch-app/components/history/tests/GraphqlCard.sample
@@ -0,0 +1,107 @@
+import { mount } from "@vue/test-utils"
+import GraphqlCard from "../graphql/Card"
+
+const factory = (props) => {
+  return mount(GraphqlCard, {
+    propsData: props,
+    mocks: {
+      $t: (text) => text,
+    },
+    directives: {
+      tooltip() {
+        /* stub */
+      },
+      closePopover() {
+        /* stub */
+      },
+    },
+  })
+}
+
+const url = "https://dummydata.com"
+const query = `query getUser($uid: String!) {
+  user(uid: $uid) {
+    name
+  }
+}`
+
+describe("GraphqlCard", () => {
+  test("Mounts properly if props are given", () => {
+    const wrapper = factory({
+      entry: {
+        type: "graphql",
+        url,
+        query,
+        star: false,
+      },
+    })
+    expect(wrapper).toBeTruthy()
+  })
+
+  // test("toggle-star emitted on clicking on star button", async () => {
+  //   const wrapper = factory({
+  //     entry: {
+  //       type: "graphql",
+  //       url,
+  //       query,
+  //       star: true,
+  //     },
+  //   })
+  //   await wrapper.find("button[data-testid='star_button']").trigger("click")
+  //   expect(wrapper.emitted("toggle-star")).toBeTruthy()
+  // })
+
+  test("query expands on clicking the show more button", async () => {
+    const wrapper = factory({
+      entry: {
+        type: "graphql",
+        url,
+        query,
+        star: true,
+      },
+    })
+    expect(wrapper.vm.query).toStrictEqual([
+      `query getUser($uid: String!) {`,
+      `  user(uid: $uid) {`,
+      `...`,
+    ])
+    await wrapper.find("button[data-testid='query_expand']").trigger("click")
+    expect(wrapper.vm.query).toStrictEqual([
+      `query getUser($uid: String!) {`,
+      `  user(uid: $uid) {`,
+      `    name`,
+      `  }`,
+      `}`,
+    ])
+  })
+
+  // test("use-entry emit on clicking the restore button", async () => {
+  //   const wrapper = factory({
+  //     entry: {
+  //       type: "graphql",
+  //       url,
+  //       query,
+  //       star: true,
+  //     },
+  //   })
+  //   await wrapper
+  //     .find("button[data-testid='restore_history_entry']")
+  //     .trigger("click")
+  //   expect(wrapper.emitted("use-entry")).toBeTruthy()
+  // })
+
+  // test("delete-entry emit on clicking the delete button", async () => {
+  //   const wrapper = factory({
+  //     entry: {
+  //       type: "graphql",
+  //       url,
+  //       query,
+  //       star: true,
+  //     },
+  //   })
+  //   await wrapper
+  //     .find("button[data-testid=delete_history_entry]")
+  //     .trigger("click")
+  //   expect(wrapper.emitted("delete-entry")).toBeTruthy()
+  // })
+})
--- a/packages/hoppscotch-app/components/history/tests/RestCard.sample
+++ b/packages/hoppscotch-app/components/history/tests/RestCard.sample
@@ -0,0 +1,56 @@
+import { mount } from "@vue/test-utils"
+import RestCard from "../rest/Card"
+
+const factory = (props) => {
+  return mount(RestCard, {
+    propsData: props,
+    mocks: {
+      $t: (text) => text,
+    },
+    directives: {
+      tooltip() {
+        /* stub */
+      },
+      closePopover() {
+        /* stub */
+      },
+    },
+  })
+}
+
+const url = "https://dummydata.com/get"
+const entry = {
+  type: "rest",
+  url,
+  method: "GET",
+  status: 200,
+  star: false,
+}
+describe("RestCard", () => {
+  test("Mounts properly if props are given", () => {
+    const wrapper = factory({ entry })
+    expect(wrapper).toBeTruthy()
+  })
+
+  // test("toggle-star emitted on clicking on star button", async () => {
+  //   const wrapper = factory({ entry })
+  //   await wrapper.find("button[data-testid='star_button']").trigger("click")
+  //   expect(wrapper.emitted("toggle-star")).toBeTruthy()
+  // })
+
+  // test("use-entry emit on clicking the restore button", async () => {
+  //   const wrapper = factory({ entry })
+  //   await wrapper
+  //     .find("button[data-testid='restore_history_entry']")
+  //     .trigger("click")
+  //   expect(wrapper.emitted("use-entry")).toBeTruthy()
+  // })
+
+  // test("delete-entry emit on clicking the delete button", async () => {
+  //   const wrapper = factory({ entry })
+  //   await wrapper
+  //     .find("button[data-testid=delete_history_entry]")
+  //     .trigger("click")
+  //   expect(wrapper.emitted("delete-entry")).toBeTruthy()
+  // })
+})
--- a/packages/hoppscotch-app/components/history/graphql/Card.vue
+++ b/packages/hoppscotch-app/components/history/graphql/Card.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="flex flex-col group">
+    <div class="flex items-center">
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          pl-4
+          transition
+          group-hover:text-secondaryDark
+        "
+        data-testid="restore_history_entry"
+        @click="useEntry"
+      >
+        <span class="truncate">
+          {{ entry.request.url }}
+        </span>
+      </span>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        svg="trash"
+        color="red"
+        :title="$t('action.remove')"
+        class="hidden group-hover:inline-flex"
+        data-testid="delete_history_entry"
+        @click.native="$emit('delete-entry')"
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="expand ? $t('hide.more') : $t('show.more')"
+        :svg="expand ? 'minimize-2' : 'maximize-2'"
+        class="hidden group-hover:inline-flex"
+        @click.native="expand = !expand"
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="!entry.star ? $t('add.star') : $t('remove.star')"
+        :svg="entry.star ? 'star-solid' : 'star'"
+        color="yellow"
+        :class="{ 'group-hover:inline-flex hidden': !entry.star }"
+        data-testid="star_button"
+        @click.native="$emit('toggle-star')"
+      />
+    </div>
+    <div class="flex flex-col">
+      <span
+        v-for="(line, index) in query"
+        :key="`line-${index}`"
+        class="cursor-pointer text-secondaryLight px-4 whitespace-pre truncate"
+        data-testid="restore_history_entry"
+        @click="useEntry"
+        >{{ line }}</span
+      >
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+} from "@nuxtjs/composition-api"
+import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { setGQLSession } from "~/newstore/GQLSession"
+import { GQLHistoryEntry } from "~/newstore/history"
+
+export default defineComponent({
+  props: {
+    entry: { type: Object as PropType<GQLHistoryEntry>, default: () => {} },
+    showMore: Boolean,
+  },
+  setup(props) {
+    const expand = ref(false)
+
+    const query = computed(() =>
+      expand.value
+        ? (props.entry.request.query.split("\n") as string[])
+        : (props.entry.request.query
+            .split("\n")
+            .slice(0, 2)
+            .concat(["..."]) as string[])
+    )
+
+    const useEntry = () => {
+      setGQLSession({
+        request: makeGQLRequest({
+          name: props.entry.request.name,
+          url: props.entry.request.url,
+          headers: props.entry.request.headers,
+          query: props.entry.request.query,
+          variables: props.entry.request.variables,
+        }),
+        schema: "",
+        response: props.entry.response,
+      })
+    }
+
+    return {
+      expand,
+      query,
+      useEntry,
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/history/index.vue
+++ b/packages/hoppscotch-app/components/history/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <AppSection label="history">
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex
+        top-sidebarPrimaryStickyFold
+        z-10
+        sticky
+      "
+    >
+      <input
+        v-model="filterText"
+        type="search"
+        autocomplete="off"
+        class="bg-transparent flex w-full p-4 py-2"
+        :placeholder="$t('action.search')"
+      />
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/history"
+          blank
+          :title="$t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          data-testid="clear_history"
+          :disabled="history.length === 0"
+          svg="trash-2"
+          :title="$t('action.clear_all')"
+          @click.native="confirmRemove = true"
+        />
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <div v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
+        <HistoryRestCard
+          v-if="page == 'rest'"
+          :id="index"
+          :entry="entry"
+          :show-more="showMore"
+          @toggle-star="toggleStar(entry)"
+          @delete-entry="deleteHistory(entry)"
+          @use-entry="useHistory(entry)"
+        />
+        <HistoryGraphqlCard
+          v-if="page == 'graphql'"
+          :entry="entry"
+          :show-more="showMore"
+          @toggle-star="toggleStar(entry)"
+          @delete-entry="deleteHistory(entry)"
+          @use-entry="useHistory(entry)"
+        />
+      </div>
+    </div>
+    <div
+      v-if="!(filteredHistory.length !== 0 || history.length === 0)"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <span class="text-center">
+        {{ $t("state.nothing_found") }} "{{ filterText }}"
+      </span>
+    </div>
+    <div
+      v-if="history.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">schedule</i>
+      <span class="text-center">
+        {{ $t("empty.history") }}
+      </span>
+    </div>
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="$t('confirm.remove_history')"
+      @hide-modal="confirmRemove = false"
+      @resolve="clearHistory"
+    />
+  </AppSection>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  restHistory$,
+  graphqlHistory$,
+  clearRESTHistory,
+  clearGraphqlHistory,
+  toggleGraphqlHistoryEntryStar,
+  toggleRESTHistoryEntryStar,
+  deleteGraphqlHistoryEntry,
+  deleteRESTHistoryEntry,
+  RESTHistoryEntry,
+  GQLHistoryEntry,
+} from "~/newstore/history"
+import { setRESTRequest } from "~/newstore/RESTSession"
+
+export default defineComponent({
+  props: {
+    page: { type: String as PropType<"rest" | "graphql">, default: null },
+  },
+  setup(props) {
+    return {
+      history: useReadonlyStream<RESTHistoryEntry[] | GQLHistoryEntry[]>(
+        props.page === "rest" ? restHistory$ : graphqlHistory$,
+        []
+      ),
+    }
+  },
+  data() {
+    return {
+      filterText: "",
+      showMore: false,
+      confirmRemove: false,
+    }
+  },
+  computed: {
+    filteredHistory(): any[] {
+      const filteringHistory = this.history as Array<
+        RESTHistoryEntry | GQLHistoryEntry
+      >
+
+      return filteringHistory.filter(
+        (entry: RESTHistoryEntry | GQLHistoryEntry) => {
+          const filterText = this.filterText.toLowerCase()
+          return Object.keys(entry).some((key) => {
+            let value = entry[key as keyof typeof entry]
+            if (value) {
+              value = typeof value !== "string" ? value.toString() : value
+              return value.toLowerCase().includes(filterText)
+            }
+            return false
+          })
+        }
+      )
+    },
+  },
+  methods: {
+    clearHistory() {
+      if (this.page === "rest") clearRESTHistory()
+      else clearGraphqlHistory()
+      this.$toast.success(this.$t("state.history_deleted").toString(), {
+        icon: "delete",
+      })
+    },
+    useHistory(entry: any) {
+      if (this.page === "rest") setRESTRequest(entry.request)
+    },
+    deleteHistory(entry: any) {
+      if (this.page === "rest") deleteRESTHistoryEntry(entry)
+      else deleteGraphqlHistoryEntry(entry)
+      this.$toast.success(this.$t("state.deleted").toString(), {
+        icon: "delete",
+      })
+    },
+    toggleStar(entry: any) {
+      if (this.page === "rest") toggleRESTHistoryEntryStar(entry)
+      else toggleGraphqlHistoryEntryStar(entry)
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/history/rest/Card.vue
+++ b/packages/hoppscotch-app/components/history/rest/Card.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="flex items-center group">
+    <span
+      class="cursor-pointer flex px-2 w-16 justify-center items-center truncate"
+      :class="entryStatus.className"
+      data-testid="restore_history_entry"
+      :title="duration"
+      @click="$emit('use-entry')"
+    >
+      {{ entry.request.method }}
+    </span>
+    <span
+      class="
+        cursor-pointer
+        flex flex-1
+        min-w-0
+        py-2
+        pr-2
+        transition
+        group-hover:text-secondaryDark
+      "
+      data-testid="restore_history_entry"
+      :title="duration"
+      @click="$emit('use-entry')"
+    >
+      <span class="truncate">
+        {{ entry.request.endpoint }}
+      </span>
+    </span>
+    <ButtonSecondary
+      v-tippy="{ theme: 'tooltip' }"
+      svg="trash"
+      color="red"
+      :title="$t('action.remove')"
+      class="hidden group-hover:inline-flex"
+      data-testid="delete_history_entry"
+      @click.native="$emit('delete-entry')"
+    />
+    <ButtonSecondary
+      v-tippy="{ theme: 'tooltip' }"
+      :title="!entry.star ? $t('add.star') : $t('remove.star')"
+      :class="{ 'group-hover:inline-flex hidden': !entry.star }"
+      :svg="entry.star ? 'star-solid' : 'star'"
+      color="yellow"
+      data-testid="star_button"
+      @click.native="$emit('toggle-star')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  useContext,
+} from "@nuxtjs/composition-api"
+import findStatusGroup from "~/helpers/findStatusGroup"
+import { RESTHistoryEntry } from "~/newstore/history"
+
+export default defineComponent({
+  props: {
+    entry: { type: Object as PropType<RESTHistoryEntry>, default: () => {} },
+    showMore: Boolean,
+  },
+  setup(props) {
+    const {
+      app: { i18n },
+    } = useContext()
+    const $t = i18n.t.bind(i18n)
+
+    const duration = computed(() => {
+      if (props.entry.responseMeta.duration) {
+        const responseDuration = props.entry.responseMeta.duration
+        if (!responseDuration) return ""
+
+        return responseDuration > 0
+          ? `${$t("request.duration").toString()}: ${responseDuration}ms`
+          : $t("error.no_duration").toString()
+      } else return $t("error.no_duration").toString()
+    })
+
+    const entryStatus = computed(() => {
+      const foundStatusGroup = findStatusGroup(
+        props.entry.responseMeta.statusCode
+      )
+      return (
+        foundStatusGroup || {
+          className: "",
+        }
+      )
+    })
+
+    return {
+      duration,
+      entryStatus,
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -0,0 +1,352 @@
+<template>
+  <div>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <span class="flex items-center">
+        <label class="font-semibold text-secondaryLight">
+          {{ $t("authorization.type") }}
+        </label>
+        <tippy
+          ref="authTypeOptions"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                class="rounded-none ml-2 pr-8"
+                :label="authName"
+              />
+            </span>
+          </template>
+          <SmartItem
+            label="None"
+            @click.native="
+              authType = 'none'
+              $refs.authTypeOptions.tippy().hide()
+            "
+          />
+          <SmartItem
+            label="Basic Auth"
+            @click.native="
+              authType = 'basic'
+              $refs.authTypeOptions.tippy().hide()
+            "
+          />
+          <SmartItem
+            label="Bearer Token"
+            @click.native="
+              authType = 'bearer'
+              $refs.authTypeOptions.tippy().hide()
+            "
+          />
+          <SmartItem
+            label="OAuth 2.0"
+            @click.native="
+              authType = 'oauth-2'
+              $refs.authTypeOptions.tippy().hide()
+            "
+          />
+        </tippy>
+      </span>
+      <div class="flex">
+        <!-- <SmartToggle
+          :on="!URLExcludes.auth"
+          @change="setExclude('auth', !$event)"
+        >
+          {{ $t("authorization.include_in_url") }}
+        </SmartToggle> -->
+        <SmartToggle
+          :on="authActive"
+          class="px-2"
+          @change="authActive = !authActive"
+        >
+          {{ $t("state.enabled") }}
+        </SmartToggle>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/authorization"
+          blank
+          :title="$t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.clear')"
+          svg="trash-2"
+          @click.native="clearContent"
+        />
+      </div>
+    </div>
+    <div
+      v-if="authType === 'none'"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-4">
+        {{ $t("empty.authorization") }}
+      </span>
+      <ButtonSecondary
+        outline
+        :label="$t('app.documentation')"
+        to="https://docs.hoppscotch.io"
+        blank
+        svg="external-link"
+        reverse
+      />
+    </div>
+    <div v-if="authType === 'basic'" class="border-b border-dividerLight flex">
+      <div class="border-r border-dividerLight w-2/3">
+        <div
+          class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        >
+          <SmartEnvInput
+            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+            v-model="basicUsername"
+            class="bg-transparent flex flex-1 py-1 px-4"
+            :placeholder="$t('authorization.username')"
+          />
+          <input
+            v-else
+            id="http_basic_user"
+            v-model="basicUsername"
+            class="bg-transparent flex flex-1 py-2 px-4"
+            :placeholder="$t('authorization.username')"
+            name="http_basic_user"
+          />
+        </div>
+        <div
+          class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        >
+          <SmartEnvInput
+            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+            v-model="basicPassword"
+            class="bg-transparent flex flex-1 py-1 px-4"
+            :placeholder="$t('authorization.password')"
+          />
+          <input
+            v-else
+            id="http_basic_passwd"
+            v-model="basicPassword"
+            class="bg-transparent flex flex-1 py-2 px-4"
+            :placeholder="$t('authorization.password')"
+            name="http_basic_passwd"
+            :type="passwordFieldType"
+          />
+          <span>
+            <ButtonSecondary
+              :svg="passwordFieldType === 'text' ? 'eye' : 'eye-off'"
+              @click.native="switchVisibility"
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        class="
+          bg-primary
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="p-2">
+          <div class="text-secondaryLight pb-2">
+            {{ $t("helpers.authorization") }}
+          </div>
+          <SmartAnchor
+            class="link"
+            :label="`${$t('authorization.learn')} \xA0 →`"
+            to="https://docs.hoppscotch.io/"
+            blank
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="authType === 'bearer'" class="border-b border-dividerLight flex">
+      <div class="border-r border-dividerLight w-2/3">
+        <div
+          class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        >
+          <SmartEnvInput
+            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+            v-model="bearerToken"
+            class="bg-transparent flex flex-1 py-1 px-4"
+            placeholder="Token"
+          />
+          <input
+            v-else
+            id="bearer_token"
+            v-model="bearerToken"
+            class="bg-transparent flex flex-1 py-2 px-4"
+            placeholder="Token"
+            name="bearer_token"
+          />
+        </div>
+      </div>
+      <div
+        class="
+          bg-primary
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="p-2">
+          <div class="text-secondaryLight pb-2">
+            {{ $t("helpers.authorization") }}
+          </div>
+          <SmartAnchor
+            class="link"
+            :label="`${$t('authorization.learn')} \xA0 →`"
+            to="https://docs.hoppscotch.io/"
+            blank
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="authType === 'oauth-2'"
+      class="border-b border-dividerLight flex"
+    >
+      <div class="border-r border-dividerLight w-2/3">
+        <div
+          class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        >
+          <SmartEnvInput
+            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+            v-model="oauth2Token"
+            class="bg-transparent flex flex-1 py-1 px-4"
+            placeholder="Token"
+          />
+          <input
+            v-else
+            id="oauth2_token"
+            v-model="oauth2Token"
+            class="bg-transparent flex flex-1 py-2 px-4"
+            placeholder="Token"
+            name="oauth2_token"
+          />
+        </div>
+        <HttpOAuth2Authorization />
+      </div>
+      <div
+        class="
+          bg-primary
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="p-2">
+          <div class="text-secondaryLight pb-2">
+            {{ $t("helpers.authorization") }}
+          </div>
+          <SmartAnchor
+            class="link"
+            :label="`${$t('authorization.learn')} \xA0 →`"
+            to="https://docs.hoppscotch.io/"
+            blank
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, Ref, ref } from "@nuxtjs/composition-api"
+import {
+  HoppRESTAuthBasic,
+  HoppRESTAuthBearer,
+  HoppRESTAuthOAuth2,
+} from "~/helpers/types/HoppRESTAuth"
+import { pluckRef, useStream } from "~/helpers/utils/composables"
+import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
+import { useSetting } from "~/newstore/settings"
+
+export default defineComponent({
+  setup() {
+    const auth = useStream(
+      restAuth$,
+      { authType: "none", authActive: true },
+      setRESTAuth
+    )
+
+    const authType = pluckRef(auth, "authType")
+    const authName = computed(() => {
+      if (authType.value === "basic") return "Basic Auth"
+      else if (authType.value === "bearer") return "Bearer"
+      else if (authType.value === "oauth-2") return "OAuth 2.0"
+      else return "None"
+    })
+    const authActive = pluckRef(auth, "authActive")
+
+    const basicUsername = pluckRef(auth as Ref<HoppRESTAuthBasic>, "username")
+    const basicPassword = pluckRef(auth as Ref<HoppRESTAuthBasic>, "password")
+
+    const bearerToken = pluckRef(auth as Ref<HoppRESTAuthBearer>, "token")
+
+    const oauth2Token = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "token")
+
+    const URLExcludes = useSetting("URL_EXCLUDES")
+
+    const passwordFieldType = ref("password")
+
+    const clearContent = () => {
+      auth.value = {
+        authType: "none",
+        authActive: true,
+      }
+    }
+
+    const switchVisibility = () => {
+      if (passwordFieldType.value === "text")
+        passwordFieldType.value = "password"
+      else passwordFieldType.value = "text"
+    }
+
+    return {
+      auth,
+      authType,
+      authName,
+      authActive,
+      basicUsername,
+      basicPassword,
+      bearerToken,
+      oauth2Token,
+      URLExcludes,
+      passwordFieldType,
+      clearContent,
+      switchVisibility,
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/http/Body.vue
+++ b/packages/hoppscotch-app/components/http/Body.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <span class="flex items-center">
+        <label class="font-semibold text-secondaryLight">
+          {{ $t("request.content_type") }}
+        </label>
+        <tippy
+          ref="contentTypeOptions"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                :label="contentType || $t('state.none').toLowerCase()"
+                class="rounded-none ml-2 pr-8"
+              />
+            </span>
+          </template>
+          <SmartItem
+            :label="$t('state.none').toLowerCase()"
+            :info-icon="contentType === null ? 'done' : ''"
+            :active-info-icon="contentType === null"
+            @click.native="
+              contentType = null
+              $refs.contentTypeOptions.tippy().hide()
+            "
+          />
+          <SmartItem
+            v-for="(contentTypeItem, index) in validContentTypes"
+            :key="`contentTypeItem-${index}`"
+            :label="contentTypeItem"
+            :info-icon="contentTypeItem === contentType ? 'done' : ''"
+            :active-info-icon="contentTypeItem === contentType"
+            @click.native="
+              contentType = contentTypeItem
+              $refs.contentTypeOptions.tippy().hide()
+            "
+          />
+        </tippy>
+      </span>
+    </div>
+    <HttpBodyParameters v-if="contentType === 'multipart/form-data'" />
+    <HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
+    <div
+      v-if="contentType == null"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-4">
+        {{ $t("empty.body") }}
+      </span>
+      <ButtonSecondary
+        outline
+        :label="$t('app.documentation')"
+        to="https://docs.hoppscotch.io"
+        blank
+        svg="external-link"
+        reverse
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { useStream } from "~/helpers/utils/composables"
+import { restContentType$, setRESTContentType } from "~/newstore/RESTSession"
+import { knownContentTypes } from "~/helpers/utils/contenttypes"
+
+export default defineComponent({
+  setup() {
+    return {
+      validContentTypes: Object.keys(knownContentTypes),
+
+      contentType: useStream(restContentType$, null, setRESTContentType),
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -0,0 +1,314 @@
+<template>
+  <AppSection label="bodyParameters">
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperTertiaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("request.body") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/body"
+          blank
+          :title="$t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.clear_all')"
+          svg="trash-2"
+          @click.native="clearContent"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('add.new')"
+          svg="plus"
+          @click.native="addBodyParam"
+        />
+      </div>
+    </div>
+    <div
+      v-for="(param, index) in bodyParams"
+      :key="`param-${index}`"
+      class="divide-x divide-dividerLight border-b border-dividerLight flex"
+    >
+      <SmartEnvInput
+        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+        v-model="param.key"
+        :placeholder="$t('count.parameter', { count: index + 1 })"
+        styles="
+          bg-transparent
+          flex
+          flex-1
+          py-1
+          px-4
+        "
+        @change="
+          updateBodyParam(index, {
+            key: $event,
+            value: param.value,
+            active: param.active,
+            isFile: param.isFile,
+          })
+        "
+      />
+      <input
+        v-else
+        class="bg-transparent flex flex-1 py-2 px-4"
+        :placeholder="$t('count.parameter', { count: index + 1 })"
+        :name="'param' + index"
+        :value="param.key"
+        autofocus
+        @change="
+          updateBodyParam(index, {
+            key: $event.target.value,
+            value: param.value,
+            active: param.active,
+            isFile: param.isFile,
+          })
+        "
+      />
+      <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
+        <div class="space-x-2 file-chips-wrapper">
+          <SmartDeletableChip
+            v-for="(file, fileIndex) in param.value"
+            :key="`param-${index}-file-${fileIndex}`"
+            @chip-delete="chipDelete(index, fileIndex)"
+          >
+            {{ file.name }}
+          </SmartDeletableChip>
+        </div>
+      </div>
+      <span v-else class="flex flex-1">
+        <SmartEnvInput
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+          v-model="param.value"
+          :placeholder="$t('count.value', { count: index + 1 })"
+          styles="
+            bg-transparent
+            flex
+            flex-1
+            py-1
+            px-4
+          "
+          @change="
+            updateBodyParam(index, {
+              key: param.key,
+              value: $event,
+              active: param.active,
+              isFile: param.isFile,
+            })
+          "
+        />
+        <input
+          v-else
+          class="bg-transparent flex flex-1 py-2 px-4"
+          :placeholder="$t('count.value', { count: index + 1 })"
+          :name="'value' + index"
+          :value="param.value"
+          @change="
+            updateBodyParam(index, {
+              key: param.key,
+              value: $event.target.value,
+              active: param.active,
+              isFile: param.isFile,
+            })
+          "
+        />
+      </span>
+      <span>
+        <label for="attachment" class="p-0">
+          <ButtonSecondary
+            class="w-full"
+            svg="paperclip"
+            @click.native="$refs.attachment[index].click()"
+          />
+        </label>
+        <input
+          ref="attachment"
+          class="input"
+          name="attachment"
+          type="file"
+          multiple
+          @change="setRequestAttachment(index, param, $event)"
+        />
+      </span>
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? $t('action.turn_off')
+                : $t('action.turn_on')
+              : $t('action.turn_off')
+          "
+          :svg="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? 'check-circle'
+                : 'circle'
+              : 'check-circle'
+          "
+          color="green"
+          @click.native="
+            updateBodyParam(index, {
+              key: param.key,
+              value: param.value,
+              active: param.hasOwnProperty('active') ? !param.active : false,
+              isFile: param.isFile,
+            })
+          "
+        />
+      </span>
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.remove')"
+          svg="trash"
+          color="red"
+          @click.native="deleteBodyParam(index)"
+        />
+      </span>
+    </div>
+    <div
+      v-if="bodyParams.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-4">
+        {{ $t("empty.body") }}
+      </span>
+      <ButtonSecondary
+        :label="$t('add.new')"
+        filled
+        svg="plus"
+        @click.native="addBodyParam"
+      />
+    </div>
+  </AppSection>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, Ref, watch } from "@nuxtjs/composition-api"
+import { FormDataKeyValue } from "~/helpers/types/HoppRESTRequest"
+import { pluckRef } from "~/helpers/utils/composables"
+import {
+  addFormDataEntry,
+  deleteAllFormDataEntries,
+  deleteFormDataEntry,
+  updateFormDataEntry,
+  useRESTRequestBody,
+} from "~/newstore/RESTSession"
+import { useSetting } from "~/newstore/settings"
+
+export default defineComponent({
+  setup() {
+    const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref<
+      FormDataKeyValue[]
+    >
+
+    const addBodyParam = () => {
+      addFormDataEntry({ key: "", value: "", active: true, isFile: false })
+    }
+
+    const updateBodyParam = (index: number, entry: FormDataKeyValue) => {
+      updateFormDataEntry(index, entry)
+    }
+
+    const deleteBodyParam = (index: number) => {
+      deleteFormDataEntry(index)
+    }
+
+    const clearContent = () => {
+      deleteAllFormDataEntries()
+    }
+
+    const chipDelete = (paramIndex: number, fileIndex: number) => {
+      const entry = bodyParams.value[paramIndex]
+      if (entry.isFile) {
+        entry.value.splice(fileIndex, 1)
+        if (entry.value.length === 0) {
+          updateFormDataEntry(paramIndex, {
+            ...entry,
+            isFile: false,
+            value: "",
+          })
+          return
+        }
+      }
+
+      updateFormDataEntry(paramIndex, entry)
+    }
+
+    const setRequestAttachment = (
+      index: number,
+      entry: FormDataKeyValue,
+      event: InputEvent
+    ) => {
+      const fileEntry: FormDataKeyValue = {
+        ...entry,
+        isFile: true,
+        value: Array.from((event.target as HTMLInputElement).files!),
+      }
+      updateFormDataEntry(index, fileEntry)
+    }
+
+    watch(
+      bodyParams,
+      () => {
+        if (
+          bodyParams.value.length > 0 &&
+          (bodyParams.value[bodyParams.value.length - 1].key !== "" ||
+            bodyParams.value[bodyParams.value.length - 1].value !== "")
+        )
+          addBodyParam()
+      },
+      { deep: true }
+    )
+
+    onMounted(() => {
+      if (!bodyParams.value?.length) {
+        addBodyParam()
+      }
+    })
+
+    return {
+      bodyParams,
+      addBodyParam,
+      updateBodyParam,
+      deleteBodyParam,
+      clearContent,
+      setRequestAttachment,
+      chipDelete,
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.file-chips-container {
+  @apply flex flex-1;
+  @apply whitespace-nowrap;
+  @apply overflow-auto;
+  @apply bg-transparent;
+
+  .file-chips-wrapper {
+    @apply flex;
+    @apply px-4;
+    @apply py-1;
+    @apply w-0;
+  }
+}
+</style>
--- a/packages/hoppscotch-app/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-app/components/http/CodegenModal.vue
@@ -0,0 +1,128 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="t('request.generate_code')"
+    @close="hideModal"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <label for="requestType" class="px-4 pb-4">
+          {{ $t("request.choose_language") }}
+        </label>
+        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                :label="codegens.find((x) => x.id === codegenType).name"
+                outline
+                class="flex-1 pr-8"
+              />
+            </span>
+          </template>
+          <SmartItem
+            v-for="(gen, index) in codegens"
+            :key="`gen-${index}`"
+            :label="gen.name"
+            :info-icon="gen.id === codegenType ? 'done' : ''"
+            :active-info-icon="gen.id === codegenType"
+            @click.native="
+              () => {
+                codegenType = gen.id
+                options.tippy().hide()
+              }
+            "
+          />
+        </tippy>
+        <div class="flex flex-1 justify-between">
+          <label for="generatedCode" class="px-4 pt-4 pb-4">
+            {{ t("request.generated_code") }}
+          </label>
+        </div>
+        <SmartAceEditor
+          v-if="codegenType"
+          ref="generatedCode"
+          :value="requestCode"
+          :lang="codegens.find((x) => x.id === codegenType).language"
+          :options="{
+            maxLines: 16,
+            minLines: 8,
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+          styles="border rounded border-dividerLight"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <ButtonPrimary
+        ref="copyRequestCode"
+        :label="t('action.copy')"
+        :svg="copyIcon"
+        @click.native="copyRequestCode"
+      />
+      <ButtonSecondary :label="t('action.dismiss')" @click.native="hideModal" />
+    </template>
+  </SmartModal>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { codegens, generateCodegenContext } from "~/helpers/codegen/codegen"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
+import { getCurrentEnvironment } from "~/newstore/environments"
+import { getRESTRequest } from "~/newstore/RESTSession"
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
+const options = ref<any | null>(null)
+
+const request = ref(getRESTRequest())
+const codegenType = ref("curl")
+const copyIcon = ref("copy")
+
+const requestCode = computed(() => {
+  const effectiveRequest = getEffectiveRESTRequest(
+    request.value as any,
+    getCurrentEnvironment()
+  )
+
+  return codegens
+    .find((x) => x.id === codegenType.value)!
+    .generator(generateCodegenContext(effectiveRequest))
+})
+
+watch(
+  () => props.show,
+  (goingToShow) => {
+    if (goingToShow) {
+      request.value = getRESTRequest()
+    }
+  }
+)
+
+const hideModal = () => emit("hide-modal")
+
+const copyRequestCode = () => {
+  copyToClipboard(requestCode.value)
+  copyIcon.value = "check"
+  $toast.success(t("state.copied_to_clipboard").toString(), {
+    icon: "content_paste",
+  })
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
+}
+</script>
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -0,0 +1,288 @@
+<template>
+  <AppSection label="headers">
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("request.header_list") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/headers"
+          blank
+          :title="$t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.clear_all')"
+          svg="trash-2"
+          :disabled="bulkMode"
+          @click.native="clearContent"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.bulk_mode')"
+          svg="edit"
+          :class="{ '!text-accent': bulkMode }"
+          @click.native="bulkMode = !bulkMode"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('add.new')"
+          svg="plus"
+          :disabled="bulkMode"
+          @click.native="addHeader"
+        />
+      </div>
+    </div>
+    <div v-if="bulkMode" class="flex">
+      <textarea-autosize
+        v-model="bulkHeaders"
+        v-focus
+        name="bulk-headers"
+        class="
+          bg-transparent
+          border-b border-dividerLight
+          flex
+          font-mono
+          flex-1
+          py-2
+          px-4
+          whitespace-pre
+          resize-y
+          overflow-auto
+        "
+        rows="10"
+        :placeholder="$t('state.bulk_mode_placeholder')"
+      />
+    </div>
+    <div v-else>
+      <div
+        v-for="(header, index) in headers$"
+        :key="`header-${index}`"
+        class="divide-x divide-dividerLight border-b border-dividerLight flex"
+      >
+        <SmartAutoComplete
+          :placeholder="$t('count.header', { count: index + 1 })"
+          :source="commonHeaders"
+          :spellcheck="false"
+          :value="header.key"
+          autofocus
+          styles="
+            bg-transparent
+            flex
+            flex-1
+            py-1
+            px-4
+            truncate
+          "
+          :class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
+          @input="
+            updateHeader(index, {
+              key: $event,
+              value: header.value,
+              active: header.active,
+            })
+          "
+        />
+        <SmartEnvInput
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+          v-model="header.value"
+          :placeholder="$t('count.value', { count: index + 1 })"
+          styles="
+            bg-transparent
+            flex
+            flex-1
+            py-1
+            px-4
+          "
+          @change="
+            updateHeader(index, {
+              key: header.key,
+              value: $event,
+              active: header.active,
+            })
+          "
+        />
+        <input
+          v-else
+          class="bg-transparent flex flex-1 py-2 px-4"
+          :placeholder="$t('count.value', { count: index + 1 })"
+          :name="'value' + index"
+          :value="header.value"
+          @change="
+            updateHeader(index, {
+              key: header.key,
+              value: $event.target.value,
+              active: header.active,
+            })
+          "
+        />
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              header.hasOwnProperty('active')
+                ? header.active
+                  ? $t('action.turn_off')
+                  : $t('action.turn_on')
+                : $t('action.turn_off')
+            "
+            :svg="
+              header.hasOwnProperty('active')
+                ? header.active
+                  ? 'check-circle'
+                  : 'circle'
+                : 'check-circle'
+            "
+            color="green"
+            @click.native="
+              updateHeader(index, {
+                key: header.key,
+                value: header.value,
+                active: header.hasOwnProperty('active')
+                  ? !header.active
+                  : false,
+              })
+            "
+          />
+        </span>
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('action.remove')"
+            svg="trash"
+            color="red"
+            @click.native="deleteHeader(index)"
+          />
+        </span>
+      </div>
+      <div
+        v-if="headers$.length === 0"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <span class="text-center pb-4">
+          {{ $t("empty.headers") }}
+        </span>
+        <ButtonSecondary
+          filled
+          :label="$t('add.new')"
+          svg="plus"
+          @click.native="addHeader"
+        />
+      </div>
+    </div>
+  </AppSection>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  useContext,
+  watch,
+} from "@nuxtjs/composition-api"
+import {
+  restHeaders$,
+  addRESTHeader,
+  updateRESTHeader,
+  deleteRESTHeader,
+  deleteAllRESTHeaders,
+  setRESTHeaders,
+} from "~/newstore/RESTSession"
+import { commonHeaders } from "~/helpers/headers"
+import { useSetting } from "~/newstore/settings"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
+
+export default defineComponent({
+  setup() {
+    const {
+      $toast,
+      app: { i18n },
+    } = useContext()
+    const t = i18n.t.bind(i18n)
+
+    const bulkMode = ref(false)
+    const bulkHeaders = ref("")
+
+    watch(bulkHeaders, () => {
+      try {
+        const transformation = bulkHeaders.value.split("\n").map((item) => ({
+          key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+          value: item.substring(item.indexOf(":") + 1).trim(),
+          active: !item.trim().startsWith("//"),
+        }))
+        setRESTHeaders(transformation)
+      } catch (e) {
+        $toast.error(t("error.something_went_wrong").toString(), {
+          icon: "error_outline",
+        })
+        console.error(e)
+      }
+    })
+
+    return {
+      headers$: useReadonlyStream(restHeaders$, []),
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+      bulkMode,
+      bulkHeaders,
+    }
+  },
+  data() {
+    return {
+      commonHeaders,
+    }
+  },
+  watch: {
+    headers$: {
+      handler(newValue) {
+        if (
+          (newValue[newValue.length - 1]?.key !== "" ||
+            newValue[newValue.length - 1]?.value !== "") &&
+          newValue.length
+        )
+          this.addHeader()
+      },
+      deep: true,
+    },
+  },
+  // mounted() {
+  //   if (!this.headers$?.length) {
+  //     this.addHeader()
+  //   }
+  // },
+  methods: {
+    addHeader() {
+      addRESTHeader({ key: "", value: "", active: true })
+    },
+    updateHeader(index: number, item: HoppRESTHeader) {
+      updateRESTHeader(index, item)
+    },
+    deleteHeader(index: number) {
+      deleteRESTHeader(index)
+    },
+    clearContent() {
+      deleteAllRESTHeaders()
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-app/components/http/ImportCurl.vue
@@ -0,0 +1,137 @@
+<template>
+  <SmartModal v-if="show" :title="$t('import.curl')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <textarea-autosize
+          id="import-curl"
+          v-model="curl"
+          class="font-mono textarea floating-input"
+          autofocus
+          rows="8"
+          placeholder=" "
+        />
+        <label for="import-curl">
+          {{ $t("request.enter_curl") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('import.title')"
+          @click.native="handleImport"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import parseCurlCommand from "~/helpers/curlparser"
+import {
+  HoppRESTHeader,
+  HoppRESTParam,
+  makeRESTRequest,
+} from "~/helpers/types/HoppRESTRequest"
+import { setRESTRequest } from "~/newstore/RESTSession"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  emits: ["hide-modal"],
+  data() {
+    return {
+      curl: "",
+    }
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    handleImport() {
+      const text = this.curl
+      try {
+        const parsedCurl = parseCurlCommand(text)
+        const { origin, pathname } = new URL(
+          parsedCurl.url.replace(/"/g, "").replace(/'/g, "")
+        )
+        const endpoint = origin + pathname
+        const headers: HoppRESTHeader[] = []
+        const params: HoppRESTParam[] = []
+        if (parsedCurl.query) {
+          for (const key of Object.keys(parsedCurl.query)) {
+            const val = parsedCurl.query[key]!
+
+            if (Array.isArray(val)) {
+              val.forEach((value) => {
+                params.push({
+                  key,
+                  value,
+                  active: true,
+                })
+              })
+            } else {
+              params.push({
+                key,
+                value: val!,
+                active: true,
+              })
+            }
+          }
+        }
+        if (parsedCurl.headers) {
+          for (const key of Object.keys(parsedCurl.headers)) {
+            headers.push({
+              key,
+              value: parsedCurl.headers[key],
+              active: true,
+            })
+          }
+        }
+        const method = parsedCurl.method.toUpperCase()
+        // let rawInput = false
+        // let rawParams: any | null = null
+
+        // if (parsedCurl.data) {
+        //   rawInput = true
+        //   rawParams = parsedCurl.data
+        // }
+
+        this.showCurlImportModal = false
+
+        setRESTRequest(
+          makeRESTRequest({
+            name: "Untitled request",
+            endpoint,
+            method,
+            params,
+            headers,
+            preRequestScript: "",
+            testScript: "",
+            auth: {
+              authType: "none",
+              authActive: true,
+            },
+            body: {
+              contentType: "application/json",
+              body: "",
+            },
+          })
+        )
+      } catch (e) {
+        console.error(e)
+        this.$toast.error(this.$t("error.curl_invalid_format").toString(), {
+          icon: "error_outline",
+        })
+      }
+      this.hideModal()
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="flex flex-col">
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
+      <input
+        id="oidcDiscoveryURL"
+        v-model="oidcDiscoveryURL"
+        class="bg-transparent flex flex-1 py-2 px-4"
+        placeholder="OpenID Connect Discovery URL"
+        name="oidcDiscoveryURL"
+      />
+    </div>
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
+      <input
+        id="authURL"
+        v-model="authURL"
+        class="bg-transparent flex flex-1 py-2 px-4"
+        placeholder="Authentication URL"
+        name="authURL"
+      />
+    </div>
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
+      <input
+        id="accessTokenURL"
+        v-model="accessTokenURL"
+        class="bg-transparent flex flex-1 py-2 px-4"
+        placeholder="Access Token URL"
+        name="accessTokenURL"
+      />
+    </div>
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
+      <input
+        id="clientID"
+        v-model="clientID"
+        class="bg-transparent flex flex-1 py-2 px-4"
+        placeholder="Client ID"
+        name="clientID"
+      />
+    </div>
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
+      <input
+        id="scope"
+        v-model="scope"
+        class="bg-transparent flex flex-1 py-2 px-4"
+        placeholder="Scope"
+        name="scope"
+      />
+    </div>
+    <div class="p-2">
+      <ButtonSecondary
+        filled
+        :label="$t('authorization.generate_token')"
+        @click.native="handleAccessTokenRequest()"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Ref, useContext } from "@nuxtjs/composition-api"
+import { pluckRef, useStream } from "~/helpers/utils/composables"
+import { HoppRESTAuthOAuth2 } from "~/helpers/types/HoppRESTAuth"
+import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
+import { tokenRequest } from "~/helpers/oauth"
+
+export default {
+  setup() {
+    const {
+      $toast,
+      app: { i18n },
+    } = useContext()
+    const $t = i18n.t.bind(i18n)
+
+    const auth = useStream(
+      restAuth$,
+      { authType: "none", authActive: true },
+      setRESTAuth
+    )
+
+    const oidcDiscoveryURL = pluckRef(
+      auth as Ref<HoppRESTAuthOAuth2>,
+      "oidcDiscoveryURL"
+    )
+
+    const authURL = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "authURL")
+
+    const accessTokenURL = pluckRef(
+      auth as Ref<HoppRESTAuthOAuth2>,
+      "accessTokenURL"
+    )
+
+    const clientID = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "clientID")
+
+    const scope = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "scope")
+
+    const handleAccessTokenRequest = async () => {
+      if (
+        oidcDiscoveryURL.value === "" &&
+        (authURL.value === "" || accessTokenURL.value === "")
+      ) {
+        $toast.error($t("complete_config_urls").toString(), {
+          icon: "error",
+        })
+        return
+      }
+      try {
+        const tokenReqParams = {
+          grantType: "code",
+          oidcDiscoveryUrl: oidcDiscoveryURL.value,
+          authUrl: authURL.value,
+          accessTokenUrl: accessTokenURL.value,
+          clientId: clientID.value,
+          scope: scope.value,
+        }
+        await tokenRequest(tokenReqParams)
+      } catch (e) {
+        $toast.error(e, {
+          icon: "code",
+        })
+      }
+    }
+
+    return {
+      oidcDiscoveryURL,
+      authURL,
+      accessTokenURL,
+      clientID,
+      scope,
+      handleAccessTokenRequest,
+    }
+  },
+}
+</script>
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -0,0 +1,291 @@
+<template>
+  <AppSection label="parameters">
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("request.parameter_list") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/parameters"
+          blank
+          :title="$t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.clear_all')"
+          svg="trash-2"
+          :disabled="bulkMode"
+          @click.native="clearContent"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.bulk_mode')"
+          svg="edit"
+          :class="{ '!text-accent': bulkMode }"
+          @click.native="bulkMode = !bulkMode"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('add.new')"
+          svg="plus"
+          :disabled="bulkMode"
+          @click.native="addParam"
+        />
+      </div>
+    </div>
+    <div v-if="bulkMode" class="flex">
+      <textarea-autosize
+        v-model="bulkParams"
+        v-focus
+        name="bulk-parameters"
+        class="
+          bg-transparent
+          border-b border-dividerLight
+          flex
+          font-mono font-medium
+          flex-1
+          py-2
+          px-4
+          whitespace-pre
+          resize-y
+          overflow-auto
+        "
+        rows="10"
+        :placeholder="$t('state.bulk_mode_placeholder')"
+      />
+    </div>
+    <div v-else>
+      <div
+        v-for="(param, index) in params$"
+        :key="`param-${index}`"
+        class="divide-x divide-dividerLight border-b border-dividerLight flex"
+      >
+        <SmartEnvInput
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+          v-model="param.key"
+          :placeholder="$t('count.parameter', { count: index + 1 })"
+          styles="
+            bg-transparent
+            flex
+            flex-1
+            py-1
+            px-4
+          "
+          @change="
+            updateParam(index, {
+              key: $event,
+              value: param.value,
+              active: param.active,
+            })
+          "
+        />
+        <input
+          v-else
+          class="bg-transparent flex flex-1 py-2 px-4"
+          :placeholder="$t('count.parameter', { count: index + 1 })"
+          :name="'param' + index"
+          :value="param.key"
+          autofocus
+          @change="
+            updateParam(index, {
+              key: $event.target.value,
+              value: param.value,
+              active: param.active,
+            })
+          "
+        />
+        <SmartEnvInput
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+          v-model="param.value"
+          :placeholder="$t('count.value', { count: index + 1 })"
+          styles="
+            bg-transparent
+            flex
+            flex-1
+            py-1
+            px-4
+          "
+          @change="
+            updateParam(index, {
+              key: param.key,
+              value: $event,
+              active: param.active,
+            })
+          "
+        />
+        <input
+          v-else
+          class="bg-transparent flex flex-1 py-2 px-4"
+          :placeholder="$t('count.value', { count: index + 1 })"
+          :name="'value' + index"
+          :value="param.value"
+          @change="
+            updateParam(index, {
+              key: param.key,
+              value: $event.target.value,
+              active: param.active,
+            })
+          "
+        />
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              param.hasOwnProperty('active')
+                ? param.active
+                  ? $t('action.turn_off')
+                  : $t('action.turn_on')
+                : $t('action.turn_off')
+            "
+            :svg="
+              param.hasOwnProperty('active')
+                ? param.active
+                  ? 'check-circle'
+                  : 'circle'
+                : 'check-circle'
+            "
+            color="green"
+            @click.native="
+              updateParam(index, {
+                key: param.key,
+                value: param.value,
+                active: param.hasOwnProperty('active') ? !param.active : false,
+              })
+            "
+          />
+        </span>
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('action.remove')"
+            svg="trash"
+            color="red"
+            @click.native="deleteParam(index)"
+          />
+        </span>
+      </div>
+      <div
+        v-if="params$.length === 0"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <span class="text-center pb-4">
+          {{ $t("empty.parameters") }}
+        </span>
+        <ButtonSecondary
+          :label="$t('add.new')"
+          svg="plus"
+          filled
+          @click.native="addParam"
+        />
+      </div>
+    </div>
+  </AppSection>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  useContext,
+  watch,
+} from "@nuxtjs/composition-api"
+import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  restParams$,
+  addRESTParam,
+  updateRESTParam,
+  deleteRESTParam,
+  deleteAllRESTParams,
+  setRESTParams,
+} from "~/newstore/RESTSession"
+import { useSetting } from "~/newstore/settings"
+
+export default defineComponent({
+  setup() {
+    const {
+      $toast,
+      app: { i18n },
+    } = useContext()
+    const t = i18n.t.bind(i18n)
+
+    const bulkMode = ref(false)
+    const bulkParams = ref("")
+
+    watch(bulkParams, () => {
+      try {
+        const transformation = bulkParams.value.split("\n").map((item) => ({
+          key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+          value: item.substring(item.indexOf(":") + 1).trim(),
+          active: !item.trim().startsWith("//"),
+        }))
+        setRESTParams(transformation)
+      } catch (e) {
+        $toast.error(t("error.something_went_wrong").toString(), {
+          icon: "error_outline",
+        })
+        console.error(e)
+      }
+    })
+
+    return {
+      params$: useReadonlyStream(restParams$, []),
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+      bulkMode,
+      bulkParams,
+    }
+  },
+  watch: {
+    params$: {
+      handler(newValue) {
+        if (
+          (newValue[newValue.length - 1]?.key !== "" ||
+            newValue[newValue.length - 1]?.value !== "") &&
+          newValue.length
+        )
+          this.addParam()
+      },
+      deep: true,
+    },
+  },
+  // mounted() {
+  //   if (!this.params$?.length) {
+  //     this.addParam()
+  //   }
+  // },
+  methods: {
+    addParam() {
+      addRESTParam({ key: "", value: "", active: true })
+    },
+    updateParam(index: number, item: HoppRESTParam) {
+      updateRESTParam(index, item)
+    },
+    deleteParam(index: number) {
+      deleteRESTParam(index)
+    },
+    clearContent() {
+      deleteAllRESTParams()
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/components/http/PreRequestScript.vue
@@ -0,0 +1,112 @@
+<template>
+  <AppSection id="script" :label="$t('preRequest.script')">
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("preRequest.javascript_code") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/pre-request-script"
+          blank
+          :title="$t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.clear')"
+          svg="trash-2"
+          @click.native="clearContent"
+        />
+      </div>
+    </div>
+    <div class="border-b border-dividerLight flex">
+      <div class="border-r border-dividerLight w-2/3">
+        <SmartJsEditor
+          v-model="preRequestScript"
+          :options="{
+            maxLines: Infinity,
+            minLines: 16,
+            autoScrollEditorIntoView: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+          complete-mode="pre"
+        />
+      </div>
+      <div
+        class="
+          bg-primary
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.pre_request_script") }}
+        </div>
+        <SmartAnchor
+          :label="$t('preRequest.learn')"
+          to="https://docs.hoppscotch.io/features/pre-request-script"
+          blank
+        />
+        <h4 class="font-bold text-secondaryLight pt-6">
+          {{ $t("preRequest.snippets") }}
+        </h4>
+        <div class="flex flex-col pt-4">
+          <TabSecondary
+            v-for="(snippet, index) in snippets"
+            :key="`snippet-${index}`"
+            :label="snippet.name"
+            active
+            @click.native="useSnippet(snippet.script)"
+          />
+        </div>
+      </div>
+    </div>
+  </AppSection>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { usePreRequestScript } from "~/newstore/RESTSession"
+import preRequestScriptSnippets from "~/helpers/preRequestScriptSnippets"
+
+export default defineComponent({
+  setup() {
+    const preRequestScript = usePreRequestScript()
+
+    const useSnippet = (script: string) => {
+      preRequestScript.value += script
+    }
+
+    const clearContent = () => {
+      preRequestScript.value = ""
+    }
+
+    return {
+      preRequestScript,
+      snippets: preRequestScriptSnippets,
+      useSnippet,
+      clearContent,
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/components/http/RawBody.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperTertiaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("request.raw_body") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/body"
+          blank
+          :title="$t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.clear')"
+          svg="trash-2"
+          @click.native="clearContent('rawParams', $event)"
+        />
+        <ButtonSecondary
+          v-if="contentType && contentType.endsWith('json')"
+          ref="prettifyRequest"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.prettify')"
+          :svg="prettifyIcon"
+          @click.native="prettifyRequestBody"
+        />
+        <label for="payload">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('import.json')"
+            svg="file-plus"
+            @click.native="$refs.payload.click()"
+          />
+        </label>
+        <input
+          ref="payload"
+          class="input"
+          name="payload"
+          type="file"
+          @change="uploadPayload"
+        />
+      </div>
+    </div>
+    <div class="relative">
+      <SmartAceEditor
+        v-model="rawParamsBody"
+        :lang="rawInputEditorLang"
+        :options="{
+          maxLines: Infinity,
+          minLines: 16,
+          autoScrollEditorIntoView: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+        styles="border-b border-dividerLight"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { getEditorLangForMimeType } from "~/helpers/editorutils"
+import { pluckRef } from "~/helpers/utils/composables"
+import { useRESTRequestBody } from "~/newstore/RESTSession"
+
+export default defineComponent({
+  props: {
+    contentType: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    return {
+      rawParamsBody: pluckRef(useRESTRequestBody(), "body"),
+      prettifyIcon: "align-left",
+    }
+  },
+  computed: {
+    rawInputEditorLang() {
+      return getEditorLangForMimeType(this.contentType)
+    },
+  },
+  methods: {
+    clearContent() {
+      this.rawParamsBody = ""
+    },
+    uploadPayload() {
+      const file = this.$refs.payload.files[0]
+      if (file !== undefined && file !== null) {
+        const reader = new FileReader()
+        reader.onload = ({ target }) => {
+          this.rawParamsBody = target.result
+        }
+        reader.readAsText(file)
+        this.$toast.success(this.$t("state.file_imported"), {
+          icon: "attach_file",
+        })
+      } else {
+        this.$toast.error(this.$t("action.choose_file"), {
+          icon: "attach_file",
+        })
+      }
+      this.$refs.payload.value = ""
+    },
+    prettifyRequestBody() {
+      try {
+        const jsonObj = JSON.parse(this.rawParamsBody)
+        this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
+        this.prettifyIcon = "check"
+        setTimeout(() => (this.prettifyIcon = "align-left"), 1000)
+      } catch (e) {
+        console.error(e)
+        this.$toast.error(`${this.$t("error.json_prettify_invalid_body")}`, {
+          icon: "error_outline",
+        })
+      }
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -0,0 +1,443 @@
+<template>
+  <div
+    class="
+      bg-primary
+      flex
+      space-x-2
+      p-4
+      top-0
+      z-10
+      sticky
+      overflow-x-auto
+      hide-scrollbar
+    "
+  >
+    <div class="flex flex-1">
+      <div class="flex relative">
+        <label for="method">
+          <tippy
+            ref="methodOptions"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <span class="select-wrapper">
+                <input
+                  id="method"
+                  class="
+                    bg-primaryLight
+                    border border-divider
+                    rounded-l
+                    cursor-pointer
+                    flex
+                    font-semibold
+                    text-secondaryDark
+                    py-2
+                    px-4
+                    w-28
+                    hover:border-dividerDark
+                    focus-visible:bg-transparent
+                    focus-visible:border-dividerDark
+                  "
+                  :value="newMethod"
+                  :readonly="!isCustomMethod"
+                  :placeholder="$t('request.method')"
+                  @input="onSelectMethod($event.target.value)"
+                />
+              </span>
+            </template>
+            <SmartItem
+              v-for="(method, index) in methods"
+              :key="`method-${index}`"
+              :label="method"
+              @click.native="onSelectMethod(method)"
+            />
+          </tippy>
+        </label>
+      </div>
+      <div class="flex flex-1">
+        <SmartEnvInput
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+          v-model="newEndpoint"
+          :placeholder="$t('request.url')"
+          styles="
+            bg-primaryLight
+            border border-divider
+            flex
+            flex-1
+            rounded-r
+            text-secondaryDark
+            min-w-32
+            py-1
+            px-4
+            hover:border-dividerDark
+            focus-visible:border-dividerDark
+            focus-visible:bg-transparent
+          "
+          @enter="newSendRequest()"
+        />
+        <input
+          v-else
+          id="url"
+          v-model="newEndpoint"
+          v-focus
+          class="
+            bg-primaryLight
+            border border-divider
+            rounded-r
+            flex
+            text-secondaryDark
+            w-full
+            min-w-32
+            py-2
+            px-4
+            hover:border-dividerDark
+            focus-visible:bg-transparent focus-visible:border-dividerDark
+          "
+          name="url"
+          type="text"
+          autocomplete="off"
+          spellcheck="false"
+          :placeholder="$t('request.url')"
+          autofocus
+          @keyup.enter="newSendRequest()"
+        />
+      </div>
+    </div>
+    <div class="flex">
+      <ButtonPrimary
+        id="send"
+        class="rounded-r-none flex-1 min-w-22"
+        :label="!loading ? $t('action.send') : $t('action.cancel')"
+        @click.native="!loading ? newSendRequest() : cancelRequest()"
+      />
+      <span class="flex">
+        <tippy
+          ref="sendOptions"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
+          </template>
+          <SmartItem
+            :label="$t('import.curl')"
+            svg="terminal"
+            @click.native="
+              () => {
+                showCurlImportModal = !showCurlImportModal
+                sendOptions.tippy().hide()
+              }
+            "
+          />
+          <SmartItem
+            :label="$t('show.code')"
+            svg="code"
+            @click.native="
+              () => {
+                showCodegenModal = !showCodegenModal
+                sendOptions.tippy().hide()
+              }
+            "
+          />
+          <SmartItem
+            ref="clearAll"
+            :label="$t('action.clear_all')"
+            svg="rotate-ccw"
+            @click.native="
+              () => {
+                clearContent()
+                sendOptions.tippy().hide()
+              }
+            "
+          />
+        </tippy>
+      </span>
+      <ButtonSecondary
+        class="rounded-r-none ml-2"
+        :label="$t('request.save')"
+        filled
+        svg="save"
+        @click.native="saveRequest()"
+      />
+      <span class="flex">
+        <tippy
+          ref="saveOptions"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <ButtonSecondary svg="chevron-down" filled class="rounded-r" />
+          </template>
+          <input
+            id="request-name"
+            v-model="requestName"
+            :placeholder="$t('request.name')"
+            name="request-name"
+            type="text"
+            autocomplete="off"
+            class="mb-2 input"
+            @keyup.enter="saveOptions.tippy().hide()"
+          />
+          <SmartItem
+            ref="copyRequest"
+            :label="$t('request.copy_link')"
+            :svg="hasNavigatorShare ? 'share-2' : 'copy'"
+            @click.native="
+              () => {
+                copyRequest()
+                saveOptions.tippy().hide()
+              }
+            "
+          />
+          <SmartItem
+            ref="saveRequest"
+            :label="$t('request.save_as')"
+            svg="folder-plus"
+            @click.native="
+              () => {
+                showSaveRequestModal = true
+                saveOptions.tippy().hide()
+              }
+            "
+          />
+        </tippy>
+      </span>
+    </div>
+    <HttpImportCurl
+      :show="showCurlImportModal"
+      @hide-modal="showCurlImportModal = false"
+    />
+    <HttpCodegenModal
+      :show="showCodegenModal"
+      @hide-modal="showCodegenModal = false"
+    />
+    <CollectionsSaveRequest
+      mode="rest"
+      :show="showSaveRequestModal"
+      @hide-modal="showSaveRequestModal = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
+import {
+  updateRESTResponse,
+  restEndpoint$,
+  setRESTEndpoint,
+  restMethod$,
+  updateRESTMethod,
+  resetRESTRequest,
+  useRESTRequestName,
+  getRESTSaveContext,
+  getRESTRequest,
+} from "~/newstore/RESTSession"
+import { editRESTRequest } from "~/newstore/collections"
+import { runRESTRequest$ } from "~/helpers/RequestRunner"
+import {
+  useStreamSubscriber,
+  useStream,
+  useNuxt,
+} from "~/helpers/utils/composables"
+import { defineActionHandler } from "~/helpers/actions"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useSetting } from "~/newstore/settings"
+import { overwriteRequestTeams } from "~/helpers/teams/utils"
+import { apolloClient } from "~/helpers/apollo"
+
+const methods = [
+  "GET",
+  "POST",
+  "PUT",
+  "PATCH",
+  "DELETE",
+  "HEAD",
+  "CONNECT",
+  "OPTIONS",
+  "TRACE",
+  "CUSTOM",
+]
+
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const nuxt = useNuxt()
+const t = i18n.t.bind(i18n)
+const { subscribeToStream } = useStreamSubscriber()
+
+const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
+const newMethod = useStream(restMethod$, "", updateRESTMethod)
+
+const loading = ref(false)
+
+const showCurlImportModal = ref(false)
+const showCodegenModal = ref(false)
+const showSaveRequestModal = ref(false)
+
+const hasNavigatorShare = !!navigator.share
+
+// Template refs
+const methodOptions = ref<any | null>(null)
+const saveOptions = ref<any | null>(null)
+const sendOptions = ref<any | null>(null)
+
+// Update Nuxt Loading bar
+watch(loading, () => {
+  if (loading.value) {
+    nuxt.value.$loading.start()
+  } else {
+    nuxt.value.$loading.finish()
+  }
+})
+
+const newSendRequest = () => {
+  loading.value = true
+
+  subscribeToStream(
+    runRESTRequest$(),
+    (responseState) => {
+      if (loading.value) {
+        // Check exists because, loading can be set to false
+        // when cancelled
+        updateRESTResponse(responseState)
+      }
+    },
+    () => {
+      loading.value = false
+    },
+    () => {
+      loading.value = false
+    }
+  )
+}
+
+const cancelRequest = () => {
+  loading.value = false
+  updateRESTResponse(null)
+}
+
+const updateMethod = (method: string) => {
+  updateRESTMethod(method)
+}
+
+const onSelectMethod = (method: string) => {
+  updateMethod(method)
+  // Vue-tippy has no typescript support yet
+  methodOptions.value.tippy().hide()
+}
+
+const clearContent = () => {
+  resetRESTRequest()
+}
+
+const copyRequest = () => {
+  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: window.location.href,
+      })
+      .then(() => {})
+      .catch(() => {})
+  } else {
+    copyToClipboard(window.location.href)
+    $toast.success(t("state.copied_to_clipboard").toString(), {
+      icon: "content_paste",
+    })
+  }
+}
+
+const cycleUpMethod = () => {
+  const currentIndex = methods.indexOf(newMethod.value)
+  if (currentIndex === -1) {
+    // Most probs we are in CUSTOM mode
+    // Cycle up from CUSTOM is PATCH
+    updateMethod("PATCH")
+  } else if (currentIndex === 0) {
+    updateMethod("CUSTOM")
+  } else {
+    updateMethod(methods[currentIndex - 1])
+  }
+}
+
+const cycleDownMethod = () => {
+  const currentIndex = methods.indexOf(newMethod.value)
+  if (currentIndex === -1) {
+    // Most probs we are in CUSTOM mode
+    // Cycle down from CUSTOM is GET
+    updateMethod("GET")
+  } else if (currentIndex === methods.length - 1) {
+    updateMethod("GET")
+  } else {
+    updateMethod(methods[currentIndex + 1])
+  }
+}
+
+const saveRequest = () => {
+  const saveCtx = getRESTSaveContext()
+  if (!saveCtx) {
+    showSaveRequestModal.value = true
+    return
+  }
+
+  if (saveCtx.originLocation === "user-collection") {
+    editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
+  } else if (saveCtx.originLocation === "team-collection") {
+    const req = getRESTRequest()
+
+    // TODO: handle error case (NOTE: overwriteRequestTeams is async)
+    try {
+      overwriteRequestTeams(
+        apolloClient,
+        JSON.stringify(req),
+        req.name,
+        saveCtx.requestID
+      )
+    } catch (error) {
+      showSaveRequestModal.value = true
+      return
+    }
+  }
+  $toast.success(t("request.saved").toString(), {
+    icon: "playlist_add_check",
+  })
+}
+
+defineActionHandler("request.send-cancel", () => {
+  if (!loading.value) newSendRequest()
+  else cancelRequest()
+})
+defineActionHandler("request.reset", clearContent)
+defineActionHandler("request.copy-link", copyRequest)
+defineActionHandler("request.method.next", cycleDownMethod)
+defineActionHandler("request.method.prev", cycleUpMethod)
+defineActionHandler("request.save", saveRequest)
+defineActionHandler(
+  "request.save-as",
+  () => (showSaveRequestModal.value = true)
+)
+defineActionHandler("request.method.get", () => updateMethod("GET"))
+defineActionHandler("request.method.post", () => updateMethod("POST"))
+defineActionHandler("request.method.put", () => updateMethod("PUT"))
+defineActionHandler("request.method.delete", () => updateMethod("DELETE"))
+defineActionHandler("request.method.head", () => updateMethod("HEAD"))
+
+const isCustomMethod = computed(() => {
+  return newMethod.value === "CUSTOM" || !methods.includes(newMethod.value)
+})
+
+const requestName = useRESTRequestName()
+
+const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
+</script>
--- a/packages/hoppscotch-app/components/http/Response.vue
+++ b/packages/hoppscotch-app/components/http/Response.vue
@@ -0,0 +1,36 @@
+<template>
+  <AppSection label="response">
+    <HttpResponseMeta :response="response" />
+    <LensesResponseBodyRenderer
+      v-if="!loading && hasResponse"
+      :response="response"
+    />
+  </AppSection>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "@nuxtjs/composition-api"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { restResponse$ } from "~/newstore/RESTSession"
+
+export default defineComponent({
+  setup() {
+    const response = useReadonlyStream(restResponse$, null)
+
+    const hasResponse = computed(
+      () =>
+        response.value?.type === "success" || response.value?.type === "fail"
+    )
+
+    const loading = computed(
+      () => response.value === null || response.value.type === "loading"
+    )
+
+    return {
+      hasResponse,
+      response,
+      loading,
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/components/http/ResponseMeta.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="bg-primary flex p-4 top-0 z-10 sticky items-center">
+    <div
+      v-if="response == null"
+      class="
+        flex flex-col flex-1
+        text-secondaryLight
+        items-center
+        justify-center
+      "
+    >
+      <div class="flex space-x-2 pb-4">
+        <div class="flex flex-col space-y-4 items-end">
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.request.send_request") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.show_all") }}
+          </span>
+          <!-- <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.command_menu") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.help_menu") }}
+          </span> -->
+        </div>
+        <div class="flex flex-col space-y-4">
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">G</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">K</span>
+          </div>
+          <!-- <div class="flex">
+            <span class="shortcut-key">/</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">?</span>
+          </div> -->
+        </div>
+      </div>
+      <ButtonSecondary
+        :label="$t('app.documentation')"
+        to="https://docs.hoppscotch.io"
+        svg="external-link"
+        blank
+        outline
+        reverse
+      />
+    </div>
+    <div v-else class="flex flex-col flex-1">
+      <div v-if="response.type === 'loading'">
+        <i class="animate-spin material-icons"> refresh </i>
+      </div>
+      <div
+        v-if="response.type === 'network_fail'"
+        class="
+          flex flex-col flex-1
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">cloud_off</i>
+        <span class="text-center pb-2">
+          {{ $t("error.network_fail") }}
+        </span>
+        <span class="text-center pb-4">
+          {{ $t("helpers.network_fail") }}
+        </span>
+        <ButtonSecondary
+          outline
+          :label="$t('action.learn_more')"
+          to="https://docs.hoppscotch.io"
+          blank
+          svg="external-link"
+          reverse
+        />
+      </div>
+      <div
+        v-if="response.type === 'success' || 'fail'"
+        :class="statusCategory.className"
+        class="font-semibold space-x-4"
+      >
+        <span v-if="response.statusCode">
+          <span class="text-secondary"> {{ $t("response.status") }}: </span>
+          {{ response.statusCode || $t("state.waiting_send_request") }}
+        </span>
+        <span v-if="response.meta && response.meta.responseDuration">
+          <span class="text-secondary"> {{ $t("response.time") }}: </span>
+          {{ `${response.meta.responseDuration} ms` }}
+        </span>
+        <span v-if="response.meta && response.meta.responseSize">
+          <span class="text-secondary"> {{ $t("response.size") }}: </span>
+          {{ `${response.meta.responseSize} B` }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import findStatusGroup from "~/helpers/findStatusGroup"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+
+export default defineComponent({
+  props: {
+    response: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  computed: {
+    statusCategory() {
+      return findStatusGroup(this.response.statusCode)
+    },
+  },
+  methods: {
+    getSpecialKey: getPlatformSpecialKey,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>
--- a/packages/hoppscotch-app/components/http/TestResult.vue
+++ b/packages/hoppscotch-app/components/http/TestResult.vue
@@ -0,0 +1,104 @@
+<template>
+  <AppSection :label="$t('test.results')">
+    <div
+      v-if="
+        testResults &&
+        (testResults.expectResults.length || testResults.tests.length)
+      "
+    >
+      <div
+        class="
+          bg-primary
+          border-dividerLight border-b
+          flex flex-1
+          top-lowerSecondaryStickyFold
+          pl-4
+          z-10
+          sticky
+          items-center
+          justify-between
+        "
+      >
+        <label class="font-semibold text-secondaryLight">
+          {{ $t("test.report") }}
+        </label>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.clear')"
+          svg="trash-2"
+          @click.native="clearContent()"
+        />
+      </div>
+      <div class="divide-dividerLight border-dividerLight border-b divide-y-4">
+        <div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
+          <HttpTestResultEntry
+            v-for="(result, index) in testResults.tests"
+            :key="`result-${index}`"
+            :test-results="result"
+          />
+        </div>
+        <div
+          v-if="testResults.expectResults"
+          class="divide-dividerLight divide-y"
+        >
+          <HttpTestResultReport
+            v-if="testResults.expectResults.length"
+            :test-results="testResults"
+          />
+          <div
+            v-for="(result, index) in testResults.expectResults"
+            :key="`result-${index}`"
+            class="flex py-2 px-4 items-center"
+          >
+            <i
+              class="mr-4 material-icons"
+              :class="
+                result.status === 'pass' ? 'text-green-500' : 'text-red-500'
+              "
+            >
+              {{ result.status === "pass" ? "check" : "close" }}
+            </i>
+            <span v-if="result.message" class="text-secondaryDark">
+              {{ result.message }}
+            </span>
+            <span class="text-secondaryLight">
+              {{
+                ` \xA0 — \xA0test ${
+                  result.status === "pass" ? $t("passed") : $t("failed")
+                }`
+              }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-2">
+        {{ $t("empty.tests") }}
+      </span>
+      <span class="text-center pb-4">
+        {{ $t("helpers.tests") }}
+      </span>
+      <ButtonSecondary
+        outline
+        :label="$t('action.learn_more')"
+        to="https://docs.hoppscotch.io"
+        blank
+        svg="external-link"
+        reverse
+      />
+    </div>
+  </AppSection>
+</template>
+
+<script setup lang="ts">
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
+
+const testResults = useReadonlyStream(restTestResults$, null)
+
+const clearContent = () => setRESTTestResults(null)
+</script>
--- a/packages/hoppscotch-app/components/http/TestResultEntry.vue
+++ b/packages/hoppscotch-app/components/http/TestResultEntry.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <span
+      v-if="testResults.description"
+      class="flex font-bold text-secondaryDark py-2 px-4 items-center"
+    >
+      {{ testResults.description }}
+    </span>
+    <div v-if="testResults.expectResults" class="divide-y divide-dividerLight">
+      <HttpTestResultReport
+        v-if="testResults.expectResults.length"
+        :test-results="testResults"
+      />
+      <div
+        v-for="(result, index) in testResults.expectResults"
+        :key="`result-${index}`"
+        class="flex py-2 px-4 items-center"
+      >
+        <i
+          class="mr-4 material-icons"
+          :class="result.status === 'pass' ? 'text-green-500' : 'text-red-500'"
+        >
+          {{ result.status === "pass" ? "check" : "close" }}
+        </i>
+        <span v-if="result.message" class="text-secondaryDark">
+          {{ result.message }}
+        </span>
+        <span class="text-secondaryLight">
+          {{
+            ` \xA0 — \xA0test ${
+              result.status === "pass" ? $t("passed") : $t("failed")
+            }`
+          }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from "@nuxtjs/composition-api"
+import { HoppTestResult } from "~/helpers/types/HoppTestResult"
+
+defineProps({
+  testResults: {
+    type: Object as PropType<HoppTestResult>,
+    required: true,
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/http/TestResultReport.vue
+++ b/packages/hoppscotch-app/components/http/TestResultReport.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex p-2 items-center">
+    <SmartProgressRing
+      class="text-red-500"
+      :radius="16"
+      :stroke="4"
+      :progress="(failedTests / totalTests) * 100"
+    />
+    <div class="ml-2">
+      <span v-if="failedTests" class="text-red-500">
+        {{ failedTests }} failing,
+      </span>
+      <span v-if="passedTests" class="text-green-500">
+        {{ passedTests }} successful,
+      </span>
+      <span> out of {{ totalTests }} tests. </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from "@nuxtjs/composition-api"
+import { HoppTestResult } from "~/helpers/types/HoppTestResult"
+
+const props = defineProps({
+  testResults: {
+    type: Object as PropType<HoppTestResult>,
+    required: true,
+  },
+})
+
+const totalTests = computed(() => props.testResults.expectResults.length)
+const failedTests = computed(
+  () =>
+    props.testResults.expectResults.filter(
+      (result: { status: string }) => result.status === "fail"
+    ).length
+)
+const passedTests = computed(
+  () =>
+    props.testResults.expectResults.filter(
+      (result: { status: string }) => result.status === "pass"
+    ).length
+)
+</script>
--- a/packages/hoppscotch-app/components/http/Tests.vue
+++ b/packages/hoppscotch-app/components/http/Tests.vue
@@ -0,0 +1,100 @@
+<template>
+  <AppSection id="script" :label="$t('test.script')">
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("test.javascript_code") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/tests"
+          blank
+          :title="$t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.clear')"
+          svg="trash-2"
+          @click.native="clearContent"
+        />
+      </div>
+    </div>
+    <div class="border-b border-dividerLight flex">
+      <div class="border-r border-dividerLight w-2/3">
+        <SmartJsEditor
+          v-model="testScript"
+          :options="{
+            maxLines: Infinity,
+            minLines: 16,
+            autoScrollEditorIntoView: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+          complete-mode="test"
+        />
+      </div>
+      <div
+        class="
+          bg-primary
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.post_request_tests") }}
+        </div>
+        <SmartAnchor
+          :label="$t('test.learn')"
+          to="https://docs.hoppscotch.io/features/tests"
+          blank
+        />
+        <h4 class="font-bold text-secondaryLight pt-6">
+          {{ $t("test.snippets") }}
+        </h4>
+        <div class="flex flex-col pt-4">
+          <TabSecondary
+            v-for="(snippet, index) in testSnippets"
+            :key="`snippet-${index}`"
+            :label="snippet.name"
+            active
+            @click.native="useSnippet(snippet.script)"
+          />
+        </div>
+      </div>
+    </div>
+  </AppSection>
+</template>
+
+<script setup lang="ts">
+import { useTestScript } from "~/newstore/RESTSession"
+import testSnippets from "~/helpers/testSnippets"
+
+const testScript = useTestScript()
+
+const useSnippet = (script: string) => {
+  testScript.value += script
+}
+
+const clearContent = () => {
+  testScript.value = ""
+}
+</script>
--- a/packages/hoppscotch-app/components/landing/CTA.vue
+++ b/packages/hoppscotch-app/components/landing/CTA.vue
@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="
+      bg-primaryLight
+      rounded
+      flex
+      grid
+      p-4
+      gap-4
+      grid-cols-1
+      md:grid-cols-2
+      lg:grid-cols-3
+    "
+  >
+    <div
+      v-for="(cta, index) in ctas"
+      :key="`cta-${index}`"
+      class="flex-col p-8 inline-flex"
+    >
+      <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
+      <div class="flex-grow">
+        <h2 class="mt-4 text-lg text-secondaryDark mb-2 transition">
+          {{ cta.title }}
+        </h2>
+        <p>
+          {{ cta.description }}
+        </p>
+        <p class="mt-2">
+          <SmartLink :to="cta.link.target" class="link" blank>
+            {{ cta.link.title }}
+            <SmartIcon name="chevron-right" class="svg-icons" />
+          </SmartLink>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  data() {
+    return {
+      ctas: [
+        {
+          icon: "layers",
+          title: "Feature",
+          description:
+            "Get up and running with Kooli in as little as 10 minutes.",
+          link: {
+            title: "Feature",
+            target: "https://docs.hoppscotch.io/api",
+          },
+        },
+        {
+          icon: "local_library",
+          title: "Feature",
+          description:
+            "Explore and start integrating Kooli's products and tools.",
+          link: {
+            title: "Feature",
+            target: "https://docs.hoppscotch.io/guides",
+          },
+        },
+        {
+          icon: "local_library",
+          title: "Feature",
+          description:
+            "Explore and start integrating Kooli's products and tools.",
+          link: {
+            title: "Feature",
+            target: "https://docs.hoppscotch.io/guides",
+          },
+        },
+      ],
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/landing/Features.vue
+++ b/packages/hoppscotch-app/components/landing/Features.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="flex flex-col p-4">
+    <div class="flex flex-col items-center">
+      <p class="my-4 text-center text-accent tracking-widest">FEATURES</p>
+    </div>
+    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+      <div
+        v-for="(feature, index) in features"
+        :key="`feature-${index}`"
+        class="flex-col p-8 inline-flex"
+      >
+        <i class="text-accent text-4xl material-icons">{{ feature.icon }}</i>
+        <div class="flex-grow">
+          <h2 class="mt-4 text-lg text-secondaryDark mb-2 transition">
+            {{ feature.title }}
+          </h2>
+          <p>
+            {{ feature.description }}
+          </p>
+          <p class="mt-2">
+            <NuxtLink :to="feature.link.target" class="link">
+              {{ feature.link.title }}
+              <SmartIcon name="chevron-right" class="svg-icons" />
+            </NuxtLink>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  data() {
+    return {
+      features: [
+        {
+          icon: "offline_bolt",
+          title: "Feature",
+          description:
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
+          link: { title: "Learn more", target: "/settings" },
+        },
+        {
+          icon: "stars",
+          title: "Feature",
+          description:
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
+          link: { title: "Learn more", target: "/settings" },
+        },
+        {
+          icon: "supervised_user_circle",
+          title: "Feature",
+          description:
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
+          link: { title: "Learn more", target: "/settings" },
+        },
+        {
+          icon: "build_circle",
+          title: "Feature",
+          description:
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
+          link: { title: "Learn more", target: "/settings" },
+        },
+        {
+          icon: "monetization_on",
+          title: "Feature",
+          description:
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
+          link: { title: "Learn more", target: "/settings" },
+        },
+        {
+          icon: "group_work",
+          title: "Feature",
+          description:
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam vel vero quia tenetur obcaecati. Distinctio nesciunt obcaecati deserunt.",
+          link: { title: "Learn more", target: "/settings" },
+        },
+      ],
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/landing/Footer.vue
+++ b/packages/hoppscotch-app/components/landing/Footer.vue
@@ -0,0 +1,166 @@
+<template>
+  <footer class="flex flex-col p-6">
+    <nav class="grid gap-4 grid-cols-2 md:grid-cols-4">
+      <div class="flex flex-col space-y-2">
+        <h4 class="my-2">Hoppscotch</h4>
+        <ul class="space-y-4">
+          <li>
+            <SmartChangeLanguage />
+          </li>
+          <li>
+            <SmartColorModePicker />
+          </li>
+        </ul>
+      </div>
+      <div class="flex flex-col space-y-2">
+        <h4 class="my-2">Solutions</h4>
+        <ul class="space-y-2">
+          <li
+            v-for="(item, index) in navigation.solutions"
+            :key="`item-${index}`"
+          >
+            <SmartAnchor
+              :label="item.name"
+              :to="item.link"
+              class="footer-nav"
+            />
+          </li>
+        </ul>
+      </div>
+      <div class="flex flex-col space-y-2">
+        <h4 class="my-2">Platform</h4>
+        <ul class="space-y-2">
+          <li
+            v-for="(item, index) in navigation.platform"
+            :key="`item-${index}`"
+          >
+            <SmartAnchor
+              :label="item.name"
+              :to="item.link"
+              class="footer-nav"
+            />
+          </li>
+        </ul>
+      </div>
+      <div class="flex flex-col space-y-2">
+        <h4 class="my-2">Company</h4>
+        <ul class="space-y-2">
+          <li
+            v-for="(item, index) in navigation.company"
+            :key="`item-${index}`"
+          >
+            <SmartAnchor
+              :label="item.name"
+              :to="item.link"
+              class="footer-nav"
+            />
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </footer>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  data() {
+    return {
+      navigation: {
+        solutions: [
+          {
+            name: "RESTful",
+            link: "/",
+          },
+          {
+            name: "WebSocket",
+            link: "/realtime",
+          },
+          {
+            name: "SSE",
+            link: "/realtime",
+          },
+          {
+            name: "Socket.IO",
+            link: "/realtime",
+          },
+          {
+            name: "MQTT",
+            link: "/realtime",
+          },
+          {
+            name: "GraphQL",
+            link: "/graphql",
+          },
+        ],
+        platform: [
+          {
+            name: "API Designing",
+            link: "/",
+          },
+          {
+            name: "API Development",
+            link: "/",
+          },
+          {
+            name: "API Testing",
+            link: "/",
+          },
+          {
+            name: "API Deployment",
+            link: "/",
+          },
+          {
+            name: "API Documentation",
+            link: "/documentation",
+          },
+          {
+            name: "Integrations",
+            link: "/",
+          },
+        ],
+        company: [
+          {
+            name: "About",
+            link: "/",
+          },
+          {
+            name: "Careers",
+            link: "/careers",
+          },
+          {
+            name: "Support",
+            link: "/",
+          },
+          {
+            name: "Contact",
+            link: "/",
+          },
+          {
+            name: "Blog",
+            link: "https://blog.hoppscotch.io",
+          },
+          {
+            name: "Community",
+            link: "/",
+          },
+          {
+            name: "Open Source",
+            link: "https://github.com/hoppscotch",
+          },
+        ],
+      },
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.footer-nav {
+  @apply px-2 py-1;
+  @apply -mx-2 -my-1;
+  @apply hover:text-secondaryDark;
+  @apply focus-visible:text-secondaryDark;
+}
+</style>
--- a/packages/hoppscotch-app/components/landing/Hero.vue
+++ b/packages/hoppscotch-app/components/landing/Hero.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="flex flex-col p-6 relative">
+    <div class="flex flex-col mt-16 items-center justify-center">
+      <h2
+        class="
+          font-bold
+          text-accent text-center
+          leading-none
+          tracking-tighter
+          text-4xl
+          md:text-6xl
+          lg:text-8xl
+        "
+      >
+        Open Source
+      </h2>
+      <h3
+        class="
+          font-extrabold
+          my-4
+          text-center text-secondaryDark
+          leading-none
+          tracking-tighter
+          text-3xl
+          md:text-4xl
+          lg:text-5xl
+        "
+      >
+        API Development Ecosystem
+      </h3>
+      <p class="my-4 text-lg text-center max-w-2xl">
+        Thousands of developers and companies build, ship, and maintain their
+        APIs on Hoppscotch — the transparent and most flexible API development
+        ecosystem in the world.
+      </p>
+      <div class="flex space-x-4 my-8 justify-center items-center">
+        <ButtonPrimary
+          label="Get Started"
+          svg="arrow-right"
+          reverse
+          large
+          @click.native="showLogin = true"
+        />
+        <ButtonSecondary
+          to="https://github.com/hoppscotch/hoppscotch"
+          blank
+          filled
+          outline
+          label="GitHub"
+          svg="github"
+          large
+          :shortcut="['30k Stars']"
+        />
+      </div>
+      <LandingStats />
+      <LandingScreenshot />
+    </div>
+    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  data() {
+    return {
+      showLogin: false,
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/landing/Screenshot.vue
+++ b/packages/hoppscotch-app/components/landing/Screenshot.vue
@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="
+      bg-gradient-to-r
+      from-gradientFrom
+      via-gradientVia
+      to-gradientTo
+      flex flex-col
+      items-center
+      justify-center
+    "
+  >
+    <img
+      src="https://tiny.cc/hoppscotch_screenshot_1"
+      alt="Screenshot"
+      class="rounded-lg ring-dividerLight mt-8 max-w-5/6 ring-4"
+    />
+  </div>
+</template>
--- a/packages/hoppscotch-app/components/landing/Stats.vue
+++ b/packages/hoppscotch-app/components/landing/Stats.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex space-x-16 p-6">
+    <div v-for="(stat, index) in stats" :key="`stat-${index}`">
+      <span class="text-xl">
+        {{ stat.count }}<span class="text-secondaryLight">+</span>
+      </span>
+      <br />
+      <span class="text-sm">
+        {{ stat.audience }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  data() {
+    return {
+      stats: [
+        { count: "350k", audience: "Developers" },
+        { count: "5k", audience: "Organizations" },
+        { count: "1m", audience: "Requests" },
+      ],
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/landing/Users.vue
+++ b/packages/hoppscotch-app/components/landing/Users.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="bg-primaryLight rounded flex flex-col mx-6 p-4">
+    <div class="flex flex-col items-center">
+      <p class="my-4 text-center tracking-widest">EMPOWERING DEVELOPERS FROM</p>
+    </div>
+    <div class="grid gap-4 grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+      <div
+        v-for="(user, index) in users"
+        :key="`user-${index}`"
+        class="flex-col px-4 inline-flex items-center justify-center"
+      >
+        <img
+          :src="`/images/users/${user.image}`"
+          alt="Profile picture"
+          loading="lazy"
+          class="flex-col object-contain object-center h-24 w-24 inline-flex"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  data() {
+    return {
+      users: [
+        { title: "Accenture", image: "accenture.svg" },
+        { title: "ByteDance", image: "bytedance.svg" },
+        { title: "Decathlon", image: "decathlon.svg" },
+        { title: "GitHub", image: "github.svg" },
+        { title: "Gojek", image: "gojek.svg" },
+        { title: "Google", image: "google.svg" },
+        { title: "Microsoft", image: "microsoft.svg" },
+        { title: "PayTM", image: "paytm.svg" },
+        { title: "Twilio", image: "twilio.svg" },
+        { title: "Udemy", image: "udemy.svg" },
+        { title: "Zendesk", image: "zendesk.svg" },
+        { title: "Zoho", image: "zoho.svg" },
+      ],
+    }
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("request.header_list") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="headers"
+          ref="copyHeaders"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.copy')"
+          :svg="copyIcon"
+          @click.native="copyHeaders"
+        />
+      </div>
+    </div>
+    <div
+      v-for="(header, index) in headers"
+      :key="`header-${index}`"
+      class="
+        divide-x divide-dividerLight
+        border-b border-dividerLight
+        flex
+        group
+      "
+    >
+      <span
+        class="
+          flex flex-1
+          min-w-0
+          py-2
+          px-4
+          transition
+          group-hover:text-secondaryDark
+        "
+      >
+        <span class="rounded select-all truncate">
+          {{ header.key }}
+        </span>
+      </span>
+      <span
+        class="
+          flex flex-1
+          min-w-0
+          py-2
+          px-4
+          transition
+          group-hover:text-secondaryDark
+        "
+      >
+        <span class="rounded select-all truncate">
+          {{ header.value }}
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+
+export default defineComponent({
+  props: {
+    headers: { type: Array, default: () => [] },
+  },
+  data() {
+    return {
+      copyIcon: "copy",
+    }
+  },
+  methods: {
+    copyHeaders() {
+      copyToClipboard(JSON.stringify(this.headers))
+      this.copyIcon = "check"
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
+        icon: "content_paste",
+      })
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
@@ -0,0 +1,51 @@
+<template>
+  <SmartTabs styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold">
+    <SmartTab
+      v-for="(lens, index) in validLenses"
+      :id="lens.renderer"
+      :key="`lens-${index}`"
+      :label="$t(lens.lensName)"
+      :selected="index === 0"
+    >
+      <component :is="lens.renderer" :response="response" />
+    </SmartTab>
+    <SmartTab
+      v-if="headerLength"
+      id="headers"
+      :label="$t('response.headers')"
+      :info="headerLength.toString()"
+    >
+      <LensesHeadersRenderer :headers="response.headers" />
+    </SmartTab>
+    <SmartTab id="results" :label="$t('test.results')">
+      <HttpTestResult />
+    </SmartTab>
+  </SmartTabs>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
+
+export default defineComponent({
+  components: {
+    // Lens Renderers
+    ...getLensRenderers(),
+  },
+  props: {
+    response: { type: Object, default: () => {} },
+  },
+  computed: {
+    headerLength() {
+      if (!this.response || !this.response.headers) return 0
+
+      return Object.keys(this.response.headers).length
+    },
+    validLenses() {
+      if (!this.response) return []
+
+      return getSuitableLenses(this.response)
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("response.body") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="response.body"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            previewEnabled ? $t('hide.preview') : $t('response.preview_html')
+          "
+          :svg="!previewEnabled ? 'eye' : 'eye-off'"
+          @click.native.prevent="togglePreview"
+        />
+        <ButtonSecondary
+          v-if="response.body"
+          ref="downloadResponse"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          :svg="downloadIcon"
+          @click.native="downloadResponse"
+        />
+        <ButtonSecondary
+          v-if="response.body"
+          ref="copyResponse"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.copy')"
+          :svg="copyIcon"
+          @click.native="copyResponse"
+        />
+      </div>
+    </div>
+    <div class="relative">
+      <SmartAceEditor
+        :value="responseBodyText"
+        :lang="'html'"
+        :options="{
+          maxLines: Infinity,
+          minLines: 16,
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+        styles="border-b border-dividerLight"
+      />
+      <iframe
+        ref="previewFrame"
+        :class="{ hidden: !previewEnabled }"
+        class="covers-response"
+        src="about:blank"
+      ></iframe>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+
+export default defineComponent({
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      downloadIcon: "download",
+      copyIcon: "copy",
+      previewEnabled: false,
+    }
+  },
+  methods: {
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: "text/html" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      this.downloadIcon = "check"
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+        this.downloadIcon = "download"
+      }, 1000)
+    },
+    copyResponse() {
+      copyToClipboard(this.responseBodyText)
+      this.copyIcon = "check"
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
+        icon: "content_paste",
+      })
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
+    },
+    togglePreview() {
+      this.previewEnabled = !this.previewEnabled
+      if (this.previewEnabled) {
+        if (
+          this.$refs.previewFrame.getAttribute("data-previewing-url") ===
+          this.url
+        )
+          return
+        // Use DOMParser to parse document HTML.
+        const previewDocument = new DOMParser().parseFromString(
+          this.responseBodyText,
+          "text/html"
+        )
+        // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+        previewDocument.head.innerHTML =
+          `<base href="${this.url}">` + previewDocument.head.innerHTML
+        // Finally, set the iframe source to the resulting HTML.
+        this.$refs.previewFrame.srcdoc =
+          previewDocument.documentElement.outerHTML
+        this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
+      }
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.covers-response {
+  @apply absolute;
+  @apply inset-0;
+  @apply bg-white;
+  @apply h-full;
+  @apply w-full;
+  @apply border;
+  @apply border-dividerLight;
+}
+</style>
--- a/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("response.body") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="response.body"
+          ref="downloadResponse"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          :svg="downloadIcon"
+          @click.native="downloadResponse"
+        />
+      </div>
+    </div>
+    <div class="flex relative">
+      <img
+        class="border-b border-dividerLight flex max-w-full flex-1"
+        :src="imageSource"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    response: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      imageSource: "",
+      downloadIcon: "download",
+    }
+  },
+  computed: {
+    responseType() {
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
+        .split(";")[0]
+        .toLowerCase()
+    },
+  },
+  watch: {
+    response: {
+      immediate: true,
+      handler() {
+        this.imageSource = ""
+
+        const buf = this.response.body
+        const bytes = new Uint8Array(buf)
+        const blob = new Blob([bytes.buffer])
+
+        const reader = new FileReader()
+        reader.onload = ({ target }) => {
+          this.imageSource = target.result
+        }
+        reader.readAsDataURL(blob)
+      },
+    },
+  },
+  mounted() {
+    this.imageSource = ""
+
+    const buf = this.response.body
+    const bytes = new Uint8Array(buf)
+    const blob = new Blob([bytes.buffer])
+
+    const reader = new FileReader()
+    reader.onload = ({ target }) => {
+      this.imageSource = target.result
+    }
+    reader.readAsDataURL(blob)
+  },
+  methods: {
+    downloadResponse() {
+      const dataToWrite = this.response.body
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      this.downloadIcon = "check"
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+        this.downloadIcon = "download"
+      }, 1000)
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("response.body") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="response.body"
+          ref="downloadResponse"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          :svg="downloadIcon"
+          @click.native="downloadResponse"
+        />
+        <ButtonSecondary
+          v-if="response.body"
+          ref="copyResponse"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.copy')"
+          :svg="copyIcon"
+          @click.native="copyResponse"
+        />
+      </div>
+    </div>
+    <div class="relative">
+      <SmartAceEditor
+        :value="jsonBodyText"
+        :lang="'json'"
+        :provide-outline="true"
+        :options="{
+          maxLines: Infinity,
+          minLines: 16,
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+        styles="border-b border-dividerLight"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+
+export default defineComponent({
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      downloadIcon: "download",
+      copyIcon: "copy",
+    }
+  },
+  computed: {
+    jsonBodyText() {
+      try {
+        return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
+      } catch (e) {
+        // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
+        return this.responseBodyText
+      }
+    },
+    responseType() {
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
+        .split(";")[0]
+        .toLowerCase()
+    },
+  },
+  methods: {
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      this.downloadIcon = "check"
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+        this.downloadIcon = "download"
+      }, 1000)
+    },
+    copyResponse() {
+      copyToClipboard(this.responseBodyText)
+      this.copyIcon = "check"
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
+        icon: "content_paste",
+      })
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("response.body") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="response.body"
+          ref="downloadResponse"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          :svg="downloadIcon"
+          @click.native="downloadResponse"
+        />
+        <ButtonSecondary
+          v-if="response.body"
+          ref="copyResponse"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.copy')"
+          :svg="copyIcon"
+          @click.native="copyResponse"
+        />
+      </div>
+    </div>
+    <div class="relative">
+      <SmartAceEditor
+        :value="responseBodyText"
+        :lang="'plain_text'"
+        :options="{
+          maxLines: Infinity,
+          minLines: 16,
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+        styles="border-b border-dividerLight"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+
+export default defineComponent({
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      downloadIcon: "download",
+      copyIcon: "copy",
+    }
+  },
+  computed: {
+    responseType() {
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
+        .split(";")[0]
+        .toLowerCase()
+    },
+  },
+  methods: {
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      this.downloadIcon = "check"
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+        this.downloadIcon = "download"
+      }, 1000)
+    },
+    copyResponse() {
+      copyToClipboard(this.responseBodyText)
+      this.copyIcon = "check"
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
+        icon: "content_paste",
+      })
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
+    },
+  },
+})
+</script>
--- a/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("response.body") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="response.body"
+          ref="downloadResponse"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          :svg="downloadIcon"
+          @click.native="downloadResponse"
+        />
+        <ButtonSecondary
+          v-if="response.body"
+          ref="copyResponse"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.copy')"
+          :svg="copyIcon"
+          @click.native="copyResponse"
+        />
+      </div>
+    </div>
+    <div class="relative">
+      <SmartAceEditor
+        :value="responseBodyText"
+        :lang="'xml'"
+        :options="{
+          maxLines: Infinity,
+          minLines: 16,
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+        styles="border-b border-dividerLight"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+
+export default defineComponent({
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      copyIcon: "copy",
+      downloadIcon: "download",
+    }
+  },
+  computed: {
+    responseType() {
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
+        .split(";")[0]
+        .toLowerCase()
+    },
+  },
+  methods: {
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      this.downloadIcon = "check"
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+        this.downloadIcon = "download"
+      }, 1000)
+    },
+    copyResponse() {
+      copyToClipboard(this.responseBodyText)
+      this.copyIcon = "check"
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
+        icon: "content_paste",
+      })
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
+    },
+  },
+})
+</script>
--- a/Show More
+++ b/Show More