From b55439ce44a1c200cf0ea568da7daaf56f241549 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 2 Jul 2021 16:30:08 +0000
Subject: [PATCH] feat: tooltip and popover components

---
 assets/scss/styles.scss                       | 198 +-----------------
 assets/scss/themes.scss                       |  12 +-
 components/app/Extensions.vue                 |   6 +-
 components/app/Footer.vue                     |  53 -----
 components/app/Header.vue                     | 167 ++++++++-------
 components/app/Sidenav.vue                    |   2 +-
 components/collections/ImportExport.vue       |  92 ++++----
 components/collections/graphql/Collection.vue |  81 ++++---
 components/collections/graphql/Folder.vue     |  70 +++----
 .../collections/graphql/ImportExport.vue      |  82 ++++----
 components/collections/graphql/Request.vue    |  66 +++---
 components/collections/index.vue              |   5 +-
 components/collections/my/Collection.vue      |  86 ++++----
 components/collections/my/Folder.vue          |  84 ++++----
 components/collections/my/Request.vue         |  72 +++----
 components/collections/teams/Collection.vue   | 100 ++++-----
 components/collections/teams/Folder.vue       |  98 +++++----
 components/collections/teams/Request.vue      |  75 ++++---
 components/environments/Edit.vue              |   6 +-
 components/environments/Environment.vue       |  48 ++---
 components/environments/ImportExport.vue      |  82 ++++----
 components/firebase/Login.vue                 |   6 +-
 components/firebase/Logout.vue                |   2 +-
 components/history/graphql/Card.vue           |  76 +++----
 components/history/index.vue                  |   9 +-
 components/history/rest/Card.vue              |  70 ++++---
 components/http/BodyParameters.vue            |   9 +-
 components/http/CodegenModal.vue              |  47 ++---
 components/http/Headers.vue                   |   9 +-
 components/http/Parameters.vue                |   9 +-
 components/http/RawBody.vue                   |   9 +-
 components/http/TokenList.vue                 |   9 +-
 components/landing/CTA.vue                    |  77 +++++++
 components/landing/Features.vue               |  28 +--
 components/landing/Footer.vue                 |  15 +-
 components/landing/Globe.vue                  |  46 +++-
 components/landing/Hero.vue                   |  16 +-
 components/landing/Package.vue                | 142 -------------
 components/landing/Users.vue                  |   2 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |  12 +-
 .../lenses/renderers/ImageLensRenderer.vue    |   3 +-
 .../lenses/renderers/JSONLensRenderer.vue     |   9 +-
 .../lenses/renderers/RawLensRenderer.vue      |   9 +-
 .../lenses/renderers/XMLLensRenderer.vue      |   9 +-
 components/realtime/Socketio.vue              |   3 +-
 components/realtime/Websocket.vue             |   6 +-
 components/smart/AccentModePicker.vue         |   3 +-
 components/smart/ChangeLanguage.vue           |   5 +-
 components/smart/ColorModePicker.vue          |   7 +-
 components/smart/HideMenu.vue                 |   3 +-
 components/teams/Edit.vue                     | 152 ++++++--------
 components/teams/Team.vue                     |  79 +++----
 layouts/default.vue                           |   1 +
 nuxt.config.js                                |  10 +-
 package-lock.json                             |  39 ----
 package.json                                  |   1 -
 pages/api.vue                                 | 144 +++++++------
 pages/doc.vue                                 |   9 +-
 pages/graphql.vue                             |  36 ++--
 pages/index.vue                               |   4 +-
 pages/settings.vue                            |   9 +-
 plugins/v-tippy.js                            |   5 +-
 plugins/v-tooltip.js                          |   9 -
 63 files changed, 1172 insertions(+), 1461 deletions(-)
 delete mode 100644 components/app/Footer.vue
 create mode 100644 components/landing/CTA.vue
 delete mode 100644 components/landing/Package.vue
 delete mode 100644 plugins/v-tooltip.js

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 829e5f117..d86420c4b 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -46,9 +46,6 @@ body {
   @apply text-secondary;
   @apply font-medium;
   @apply select-none;
-  @apply transition-colors;
-  @apply ease-in-out;
-  @apply duration-150;
   @apply overflow-x-hidden;
 
   -webkit-tap-highlight-color: transparent;
@@ -63,8 +60,7 @@ body.sticky-footer footer {
 .page-leave-active,
 .layout-enter-active,
 .layout-leave-active {
-  @apply transition-opacity;
-  @apply duration-150;
+  @apply transition;
 }
 
 .page-enter,
@@ -139,9 +135,6 @@ h3.heading {
 
 p {
   @apply text-sm;
-  @apply transition;
-  @apply ease-in-out;
-  @apply duration-150;
 }
 
 hr {
@@ -168,168 +161,28 @@ hr {
   }
 
   &[x-placement^="top"] .tippy-tooltip .tippy-arrow {
-    border-top-color: var(--color-primary-light);
+    border-top-color: var(--primary-light-color);
   }
 
   &[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
-    border-bottom-color: var(--color-primary-light);
+    border-bottom-color: var(--primary-light-color);
   }
 
   &[x-placement^="left"] .tippy-tooltip .tippy-arrow {
-    border-left-color: var(--color-primary-light);
+    border-left-color: var(--primary-light-color);
   }
 
   &[x-placement^="right"] .tippy-tooltip .tippy-arrow {
-    border-right-color: var(--color-primary-light);
+    border-right-color: var(--primary-light-color);
   }
 }
 
-[arrow] > div {
+.tippy-content > div {
   @apply flex;
-  @apply w-full;
-}
-
-.tooltip {
-  @apply z-50;
-  @apply outline-none;
-
-  .tooltip-inner {
-    @apply rounded-lg;
-    @apply px-4;
-    @apply py-2;
-    @apply text-xs text-secondary;
-    @apply font-medium;
-    @apply shadow-lg;
-    @apply transition;
-    @apply ease-in-out;
-    @apply duration-150;
-    @apply bg-tooltip;
-  }
-
-  .tooltip-arrow {
-    @apply h-0;
-    @apply w-0;
-    @apply border-solid border-tooltip;
-    @apply absolute;
-    @apply m-2;
-    @apply z-30;
-    @apply transition;
-    @apply ease-in-out;
-    @apply duration-150;
-  }
-
-  &[x-placement^="top"] {
-    @apply mb-0;
-
-    .tooltip-arrow {
-      @apply mt-0 mb-0;
-
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -5px;
-      left: calc(50% - 5px);
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    @apply mt-0;
-
-    .tooltip-arrow {
-      @apply mt-0 mb-0;
-
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -5px;
-      left: calc(50% - 5px);
-    }
-  }
-
-  &[x-placement^="right"] {
-    @apply ml-0;
-
-    .tooltip-arrow {
-      @apply ml-0 mr-0;
-
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -5px;
-      top: calc(50% - 5px);
-    }
-  }
-
-  &[x-placement^="left"] {
-    @apply mr-0;
-
-    .tooltip-arrow {
-      @apply ml-0 mr-0;
-
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -5px;
-      top: calc(50% - 5px);
-    }
-  }
-
-  &.popover {
-    .wrapper {
-      min-height: auto;
-    }
-
-    .popover-inner {
-      @apply bg-tooltip;
-      @apply text-secondary;
-      @apply text-base;
-      @apply p-2;
-      @apply rounded-lg;
-      @apply overflow-auto;
-      @apply shadow-lg;
-
-      max-height: 256px;
-      min-width: 128px;
-
-      button {
-        @apply flex-1;
-        @apply m-0;
-        @apply p-2;
-        @apply justify-start;
-        @apply text-left;
-      }
-
-      div {
-        @apply flex;
-        @apply items-stretch;
-        @apply flex-col;
-      }
-    }
-
-    .popover-arrow {
-      @apply border-tooltip;
-    }
-  }
-
-  &[aria-hidden="true"] {
-    @apply invisible;
-    @apply opacity-0;
-    @apply transition-opacity;
-    @apply ease-in-out;
-    @apply duration-150;
-  }
-
-  &[aria-hidden="false"] {
-    @apply visible;
-    @apply opacity-100;
-    @apply transition-opacity;
-    @apply ease-in-out;
-    @apply duration-150;
-  }
+  @apply flex-col;
+  @apply max-h-64;
+  @apply overflow-y-auto;
+  @apply items-stretch;
 }
 
 .info:not(.toasted) {
@@ -350,9 +203,6 @@ hr {
   @apply bg-accent;
   @apply text-primary;
   @apply font-bold;
-  @apply transition;
-  @apply ease-in-out;
-  @apply duration-150;
   @apply fill-current;
   @apply outline-none;
   @apply border-none;
@@ -462,9 +312,6 @@ pre {
   @apply bg-primaryDark;
   @apply text-secondary;
   @apply font-mono;
-  @apply transition;
-  @apply ease-in-out;
-  @apply duration-150;
   @apply select-text;
   @apply resize-y;
   @apply outline-none;
@@ -563,9 +410,6 @@ input[type="checkbox"] {
       @apply items-center;
       @apply justify-center;
       @apply text-transparent;
-      @apply transition;
-      @apply ease-in-out;
-      @apply duration-150;
 
       content: "\2714";
       height: 16px;
@@ -599,25 +443,6 @@ label {
   @apply p-4;
   @apply text-secondaryLight;
   @apply text-sm;
-  @apply transition;
-  @apply ease-in-out;
-  @apply duration-150;
-}
-
-ul,
-ol {
-  @apply flex;
-}
-
-ul li,
-ol li {
-  @apply inline-flex;
-  @apply flex-col flex-nowrap flex-1;
-  @apply justify-center;
-
-  &.shrink {
-    @apply flex-grow-0;
-  }
 }
 
 .row-wrapper {
@@ -685,9 +510,6 @@ ol li {
   &.show {
     @apply flex;
     @apply fixed;
-    @apply transition;
-    @apply ease-in-out;
-    @apply duration-150;
     @apply shadow-lg;
     @apply rounded-lg;
 
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 57e77bdf3..8cbfbd525 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -41,11 +41,11 @@
   // Dark Text color
   --secondary-dark-color: theme("colors.gray.700");
   // Border color
-  --divider-color: rgba(0, 0, 0, 0.1);
+  --divider-color: theme("colors.gray.200");
   // Error color
-  --error-color: rgba(0, 0, 0, 0.1);
+  --error-color: theme("colors.gray.700");
   // Tooltip color
-  --tooltip-color: rgba(255, 255, 255, 1);
+  --tooltip-color: theme("colors.gray.50");
   // Editor theme
   --editor-theme: "iplastic";
 }
@@ -214,15 +214,15 @@
   @include greenTheme;
 }
 
-:root.light {
+:root.light-mode {
   @include lightTheme;
 }
 
-:root.dark {
+:root.dark-mode {
   @include darkTheme;
 }
 
-:root.black {
+:root.black-mode {
   @include blackTheme;
 }
 
diff --git a/components/app/Extensions.vue b/components/app/Extensions.vue
index 102da6fc7..d7904b2fa 100644
--- a/components/app/Extensions.vue
+++ b/components/app/Extensions.vue
@@ -32,7 +32,8 @@
             <span>Firefox</span>
             <span
               v-if="hasFirefoxExtInstalled"
-              v-tooltip="$t('installed')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('installed')"
               class="icon button"
             >
               <i class="material-icons">done</i>
@@ -60,7 +61,8 @@
             <span>Chrome</span>
             <span
               v-if="hasChromeExtInstalled"
-              v-tooltip="$t('installed')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('installed')"
               class="icon button"
             >
               <i class="material-icons">done</i>
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
deleted file mode 100644
index 8f42cb425..000000000
--- a/components/app/Footer.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <footer class="footer">
-    <div class="flex justify-between items-center flex-1">
-      <span class="flex text-xs font-mono" style="align-items: start"> </span>
-      <span class="flex text-xs font-mono" style="align-items: start">
-        <a href="mailto:support@hoppscotch.io" target="_blank" rel="noopener">
-          <button class="icon button">
-            <i class="material-icons text-xl">email</i>
-            <span>
-              {{ $t("contact_us") }}
-            </span>
-          </button>
-        </a>
-        <v-popover>
-          <button v-tooltip="$t('choose_language')" class="icon button">
-            <i class="material-icons text-xl">translate</i>
-            <span>
-              {{ $i18n.locales.find(({ code }) => code === $i18n.locale).name }}
-            </span>
-          </button>
-          <template #popover>
-            <div v-for="locale in availableLocales" :key="locale.code">
-              <nuxt-link :to="switchLocalePath(locale.code)">
-                <button v-close-popover class="icon button">
-                  {{ locale.name }}
-                </button>
-              </nuxt-link>
-            </div>
-          </template>
-        </v-popover>
-      </span>
-    </div>
-  </footer>
-</template>
-
-<script>
-export default {
-  computed: {
-    availableLocales() {
-      return this.$i18n.locales.filter(({ code }) => code !== this.$i18n.locale)
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-.footer-link {
-  @apply flex-shrink-0;
-  @apply my-2 mx-4;
-  @apply text-secondaryLight text-sm;
-  @apply hover:text-secondary;
-}
-</style>
diff --git a/components/app/Header.vue b/components/app/Header.vue
index c6c140d08..5bf7def75 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -9,7 +9,8 @@
     <div class="flex">
       <button
         id="installPWA"
-        v-tooltip="$t('install_pwa')"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('install_pwa')"
         class="icon button"
         @click.prevent="showInstallPrompt()"
       >
@@ -21,7 +22,12 @@
         aria-label="GitHub"
         rel="noopener"
       >
-        <button v-tooltip="'GitHub'" class="icon button" aria-label="GitHub">
+        <button
+          v-tippy="{ theme: 'tooltip' }"
+          title="GitHub"
+          class="icon button"
+          aria-label="GitHub"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -34,94 +40,95 @@
           </svg>
         </button>
       </a>
-      <v-popover v-if="currentUser === null">
-        <button v-tooltip="$t('login_with')" class="icon button">
-          <i class="material-icons">login</i>
-        </button>
-        <template #popover>
-          <FirebaseLogin @show-email="showEmail = true" />
+
+      <tippy v-if="currentUser === null" trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('login_with')"
+            class="icon button"
+          >
+            <i class="material-icons">login</i>
+          </button>
         </template>
-      </v-popover>
-      <v-popover v-else>
-        <button
-          v-tooltip="
+        <FirebaseLogin @show-email="showEmail = true" />
+      </tippy>
+      <tippy v-else trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-tippy="{ theme: 'tooltip' }"
+            title="
             (currentUser.displayName ||
               '<label><i>Name not found</i></label>') +
             '<br>' +
             (currentUser.email || '<label><i>Email not found</i></label>')
           "
+            class="icon button"
+            aria-label="Account"
+          >
+            <img
+              v-if="currentUser.photoURL"
+              :src="currentUser.photoURL"
+              class="w-6 h-6 rounded-full material-icons"
+              alt="Profile image"
+            />
+            <i v-else class="material-icons">account_circle</i>
+          </button>
+        </template>
+        <div>
+          <nuxt-link :to="localePath('settings')">
+            <button class="icon button">
+              <i class="material-icons">settings</i>
+              <span>
+                {{ $t("settings") }}
+              </span>
+            </button>
+          </nuxt-link>
+        </div>
+        <div>
+          <FirebaseLogout />
+        </div>
+      </tippy>
+      <tippy trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            class="icon button"
+          >
+            <i class="material-icons">drag_indicator</i>
+          </button>
+        </template>
+        <button class="icon button" @click="showExtensions = true">
+          <i class="material-icons">extension</i>
+          <span>{{ $t("extensions") }}</span>
+        </button>
+        <button class="icon button" @click="showShortcuts = true">
+          <i class="material-icons">keyboard</i>
+          <span>{{ $t("shortcuts") }}</span>
+        </button>
+        <button
           class="icon button"
-          aria-label="Account"
+          onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
         >
-          <img
-            v-if="currentUser.photoURL"
-            :src="currentUser.photoURL"
-            class="w-6 h-6 rounded-full material-icons"
-            alt="Profile image"
-          />
-          <i v-else class="material-icons">account_circle</i>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+            <path
+              d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-3.594-1.555c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 3.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.557z"
+            />
+          </svg>
+          <span>Tweet</span>
         </button>
-        <template #popover>
-          <div>
-            <nuxt-link v-close-popover :to="localePath('settings')">
-              <button class="icon button">
-                <i class="material-icons">settings</i>
-                <span>
-                  {{ $t("settings") }}
-                </span>
-              </button>
-            </nuxt-link>
-          </div>
-          <div>
-            <FirebaseLogout />
-          </div>
-        </template>
-      </v-popover>
-      <v-popover>
-        <button v-tooltip="$t('more')" class="icon button">
-          <i class="material-icons">drag_indicator</i>
+        <button
+          v-if="navigatorShare"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('more')"
+          class="icon button"
+          @click="nativeShare"
+        >
+          <i class="material-icons">share</i>
+          <span>Share</span>
         </button>
-        <template #popover>
-          <button
-            v-close-popover
-            class="icon button"
-            @click="showExtensions = true"
-          >
-            <i class="material-icons">extension</i>
-            <span>{{ $t("extensions") }}</span>
-          </button>
-          <button
-            v-close-popover
-            class="icon button"
-            @click="showShortcuts = true"
-          >
-            <i class="material-icons">keyboard</i>
-            <span>{{ $t("shortcuts") }}</span>
-          </button>
-          <button
-            v-close-popover
-            class="icon button"
-            onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-              <path
-                d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-3.594-1.555c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 3.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.557z"
-              />
-            </svg>
-            <span>Tweet</span>
-          </button>
-          <button
-            v-if="navigatorShare"
-            v-close-popover
-            v-tooltip="$t('more')"
-            class="icon button"
-            @click="nativeShare"
-          >
-            <i class="material-icons">share</i>
-            <span>Share</span>
-          </button>
-        </template>
-      </v-popover>
+      </tippy>
     </div>
     <AppExtensions
       :show="showExtensions"
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index df7c03ee1..3cce26b68 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -27,7 +27,7 @@ export default {
     return {
       primaryNavigation: [
         { target: "index", icon: "home", title: "Home" },
-        { target: "api", icon: "home", title: "APIs" },
+        { target: "api", icon: "apps", title: "APIs" },
         { target: "realtime", icon: "language", title: "Realtime" },
         { target: "graphql", icon: "code", title: "GraphQL" },
         { target: "doc", icon: "book", title: "Docs" },
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index f3306965c..80979cb3b 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -5,7 +5,8 @@
       <div>
         <button
           v-if="mode == 'import_from_my_collections'"
-          v-tooltip.left="'Back'"
+          v-tippy="{ theme: 'tooltip' }"
+          title="Back"
           class="tooltip-target icon button"
           @click="
             mode = 'import_export'
@@ -14,55 +15,56 @@
         >
           <i class="material-icons">arrow_back</i>
         </button>
-        <v-popover
+
+        <tippy
           v-if="
             mode == 'import_export' && collectionsType.type == 'my-collections'
           "
+          trigger="click"
+          theme="popover"
+          arrow
         >
-          <button
-            v-tooltip.left="$t('more')"
-            class="tooltip-target icon button"
-          >
-            <i class="material-icons">more_vert</i>
-          </button>
-          <template #popover>
-            <div>
-              <button
-                v-close-popover
-                class="icon button"
-                @click="readCollectionGist"
-              >
-                <i class="material-icons">assignment_returned</i>
-                <span>{{ $t("import_from_gist") }}</span>
-              </button>
-            </div>
-            <div
-              v-tooltip.bottom="{
+          <template #trigger>
+            <button
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('more')"
+              class="tooltip-target icon button"
+            >
+              <i class="material-icons">more_vert</i>
+            </button>
+          </template>
+          <div>
+            <button class="icon button" @click="readCollectionGist">
+              <i class="material-icons">assignment_returned</i>
+              <span>{{ $t("import_from_gist") }}</span>
+            </button>
+          </div>
+          <div
+            v-tippy="{ theme: 'tooltip' }"
+            title="{
                 content: !currentUser
                   ? $t('login_with_github_to') + $t('create_secret_gist')
                   : currentUser.provider !== 'github.com'
                   ? $t('login_with_github_to') + $t('create_secret_gist')
                   : null,
               }"
+          >
+            <button
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              class="icon button"
+              @click="createCollectionGist"
             >
-              <button
-                v-close-popover
-                :disabled="
-                  !currentUser
-                    ? true
-                    : currentUser.provider !== 'github.com'
-                    ? true
-                    : false
-                "
-                class="icon button"
-                @click="createCollectionGist"
-              >
-                <i class="material-icons">assignment_turned_in</i>
-                <span>{{ $t("create_secret_gist") }}</span>
-              </button>
-            </div>
-          </template>
-        </v-popover>
+              <i class="material-icons">assignment_turned_in</i>
+              <span>{{ $t("create_secret_gist") }}</span>
+            </button>
+          </div>
+        </tippy>
         <button class="icon button" @click="hideModal">
           <i class="material-icons">close</i>
         </button>
@@ -71,7 +73,8 @@
     <template #body>
       <div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
         <button
-          v-tooltip="$t('replace_current')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('replace_current')"
           class="icon button"
           @click="openDialogChooseFileToReplaceWith"
         >
@@ -87,7 +90,8 @@
           />
         </button>
         <button
-          v-tooltip="$t('preserve_current')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('preserve_current')"
           class="icon button"
           @click="openDialogChooseFileToImportFrom"
         >
@@ -104,7 +108,8 @@
         </button>
         <button
           v-if="collectionsType.type == 'team-collections'"
-          v-tooltip="$t('preserve_current')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('preserve_current')"
           class="icon button"
           @click="mode = 'import_from_my_collections'"
         >
@@ -112,7 +117,8 @@
           <span>{{ $t("import_from_my_collections") }}</span>
         </button>
         <button
-          v-tooltip="$t('download_file')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('download_file')"
           class="icon button"
           @click="exportJSON"
         >
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index 6b47c0048..967df5122 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -30,56 +30,49 @@
       <div>
         <button
           v-if="doc"
-          v-tooltip.left="$t('import')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('import')"
           class="icon button"
           @click="$emit('select-collection')"
         >
           <i class="material-icons">topic</i>
         </button>
-        <v-popover>
-          <button
-            v-tooltip.left="$t('more')"
-            class="tooltip-target icon button"
-          >
-            <i class="material-icons">more_vert</i>
-          </button>
-          <template #popover>
-            <div>
-              <button
-                v-close-popover
-                class="icon button"
-                @click="
-                  $emit('add-folder', {
-                    path: `${collectionIndex}`,
-                  })
-                "
-              >
-                <i class="material-icons">create_new_folder</i>
-                <span>{{ $t("new_folder") }}</span>
-              </button>
-            </div>
-            <div>
-              <button
-                v-close-popover
-                class="icon button"
-                @click="$emit('edit-collection')"
-              >
-                <i class="material-icons">create</i>
-                <span>{{ $t("edit") }}</span>
-              </button>
-            </div>
-            <div>
-              <button
-                v-close-popover
-                class="icon button"
-                @click="confirmRemove = true"
-              >
-                <i class="material-icons">delete</i>
-                <span>{{ $t("delete") }}</span>
-              </button>
-            </div>
+        <tippy trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <button
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('more')"
+              class="tooltip-target icon button"
+            >
+              <i class="material-icons">more_vert</i>
+            </button>
           </template>
-        </v-popover>
+          <div>
+            <button
+              class="icon button"
+              @click="
+                $emit('add-folder', {
+                  path: `${collectionIndex}`,
+                })
+              "
+            >
+              <i class="material-icons">create_new_folder</i>
+              <span>{{ $t("new_folder") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon button" @click="$emit('edit-collection')">
+              <i class="material-icons">create</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon button" @click="confirmRemove = true">
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </tippy>
       </div>
     </div>
     <div v-show="showChildren || isFiltered">
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 5d7f61917..ee302cefe 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -28,43 +28,41 @@
           <span>{{ folder.name }}</span>
         </button>
       </div>
-      <v-popover>
-        <button v-tooltip.left="$t('more')" class="tooltip-target icon button">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template #popover>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="$emit('add-folder', { folder, path: folderPath })"
-            >
-              <i class="material-icons">create_new_folder</i>
-              <span>{{ $t("new_folder") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="$emit('edit-folder', { folder, folderPath })"
-            >
-              <i class="material-icons">edit</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="confirmRemove = true"
-            >
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
+      <tippy trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
+          </button>
         </template>
-      </v-popover>
+        <div>
+          <button
+            class="icon button"
+            @click="$emit('add-folder', { folder, path: folderPath })"
+          >
+            <i class="material-icons">create_new_folder</i>
+            <span>{{ $t("new_folder") }}</span>
+          </button>
+        </div>
+        <div>
+          <button
+            class="icon button"
+            @click="$emit('edit-folder', { folder, folderPath })"
+          >
+            <i class="material-icons">edit</i>
+            <span>{{ $t("edit") }}</span>
+          </button>
+        </div>
+        <div>
+          <button class="icon button" @click="confirmRemove = true">
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
       <ul class="flex-col">
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 2174a9b4d..04c4c3440 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -3,51 +3,48 @@
     <template #header>
       <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
       <div>
-        <v-popover>
-          <button
-            v-tooltip.left="$t('more')"
-            class="tooltip-target icon button"
-          >
-            <i class="material-icons">more_vert</i>
-          </button>
-          <template #popover>
-            <div>
-              <button
-                v-close-popover
-                class="icon button"
-                @click="readCollectionGist"
-              >
-                <i class="material-icons">assignment_returned</i>
-                <span>{{ $t("import_from_gist") }}</span>
-              </button>
-            </div>
-            <div
-              v-tooltip.bottom="{
+        <tippy trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <button
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('more')"
+              class="tooltip-target icon button"
+            >
+              <i class="material-icons">more_vert</i>
+            </button>
+          </template>
+          <div>
+            <button class="icon button" @click="readCollectionGist">
+              <i class="material-icons">assignment_returned</i>
+              <span>{{ $t("import_from_gist") }}</span>
+            </button>
+          </div>
+          <div
+            v-tippy="{ theme: 'tooltip' }"
+            title="{
                 content: !currentUser
                   ? $t('login_with_github_to') + $t('create_secret_gist')
                   : currentUser.provider !== 'github.com'
                   ? $t('login_with_github_to') + $t('create_secret_gist')
                   : null,
               }"
+          >
+            <button
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              class="icon button"
+              @click="createCollectionGist"
             >
-              <button
-                v-close-popover
-                :disabled="
-                  !currentUser
-                    ? true
-                    : currentUser.provider !== 'github.com'
-                    ? true
-                    : false
-                "
-                class="icon button"
-                @click="createCollectionGist"
-              >
-                <i class="material-icons">assignment_turned_in</i>
-                <span>{{ $t("create_secret_gist") }}</span>
-              </button>
-            </div>
-          </template>
-        </v-popover>
+              <i class="material-icons">assignment_turned_in</i>
+              <span>{{ $t("create_secret_gist") }}</span>
+            </button>
+          </div>
+        </tippy>
         <button class="icon button" @click="hideModal">
           <i class="material-icons">close</i>
         </button>
@@ -56,7 +53,8 @@
     <template #body>
       <div class="flex flex-col items-start p-2">
         <button
-          v-tooltip="$t('replace_current')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('replace_current')"
           class="icon button"
           @click="openDialogChooseFileToReplaceWith"
         >
@@ -72,7 +70,8 @@
           />
         </button>
         <button
-          v-tooltip="$t('preserve_current')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('preserve_current')"
           class="icon button"
           @click="openDialogChooseFileToImportFrom"
         >
@@ -88,7 +87,8 @@
           />
         </button>
         <button
-          v-tooltip="$t('download_file')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('download_file')"
           class="icon button"
           @click="exportJSON"
         >
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index 55585e1e3..5c88cd31a 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -13,7 +13,8 @@
     >
       <div>
         <button
-          v-tooltip="!doc ? $t('use_request') : ''"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="!doc ? $t('use_request') : ''"
           class="icon button"
           @click="!doc ? selectRequest() : {}"
         >
@@ -25,39 +26,38 @@
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover>
-        <button v-tooltip="$t('more')" class="tooltip-target icon button">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template #popover>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="
-                $emit('edit-request', {
-                  request,
-                  requestIndex,
-                  folderPath,
-                })
-              "
-            >
-              <i class="material-icons">edit</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="confirmRemove = true"
-            >
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
+      <tippy trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
+          </button>
         </template>
-      </v-popover>
+        <div>
+          <button
+            class="icon button"
+            @click="
+              $emit('edit-request', {
+                request,
+                requestIndex,
+                folderPath,
+              })
+            "
+          >
+            <i class="material-icons">edit</i>
+            <span>{{ $t("edit") }}</span>
+          </button>
+        </div>
+        <div>
+          <button class="icon button" @click="confirmRemove = true">
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </tippy>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 15f379cb8..2a3519cd9 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -65,7 +65,10 @@
         @click="displayModalAdd(true)"
       >
         <i class="material-icons">add</i>
-        <div v-tooltip.left="$t('disable_new_collection')">
+        <div
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('disable_new_collection')"
+        >
           <span>{{ $t("new") }}</span>
         </div>
       </button>
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index ae204a093..17629f258 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -30,7 +30,8 @@
       <div>
         <button
           v-if="doc && !selected"
-          v-tooltip.left="$t('import')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('import')"
           class="icon button"
           @click="$emit('select-collection')"
         >
@@ -38,57 +39,50 @@
         </button>
         <button
           v-if="doc && selected"
-          v-tooltip.left="$t('delete')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
           class="icon button"
           @click="$emit('unselect-collection')"
         >
           <i class="material-icons">check_box</i>
         </button>
-        <v-popover>
-          <button
-            v-tooltip.left="$t('more')"
-            class="tooltip-target icon button"
-          >
-            <i class="material-icons">more_vert</i>
-          </button>
-          <template #popover>
-            <div>
-              <button
-                v-close-popover
-                class="icon button"
-                @click="
-                  $emit('add-folder', {
-                    folder: collection,
-                    path: `${collectionIndex}`,
-                  })
-                "
-              >
-                <i class="material-icons">create_new_folder</i>
-                <span>{{ $t("new_folder") }}</span>
-              </button>
-            </div>
-            <div>
-              <button
-                v-close-popover
-                class="icon button"
-                @click="$emit('edit-collection')"
-              >
-                <i class="material-icons">create</i>
-                <span>{{ $t("edit") }}</span>
-              </button>
-            </div>
-            <div>
-              <button
-                v-close-popover
-                class="icon button"
-                @click="confirmRemove = true"
-              >
-                <i class="material-icons">delete</i>
-                <span>{{ $t("delete") }}</span>
-              </button>
-            </div>
+        <tippy trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <button
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('more')"
+              class="tooltip-target icon button"
+            >
+              <i class="material-icons">more_vert</i>
+            </button>
           </template>
-        </v-popover>
+          <div>
+            <button
+              class="icon button"
+              @click="
+                $emit('add-folder', {
+                  folder: collection,
+                  path: `${collectionIndex}`,
+                })
+              "
+            >
+              <i class="material-icons">create_new_folder</i>
+              <span>{{ $t("new_folder") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon button" @click="$emit('edit-collection')">
+              <i class="material-icons">create</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon button" @click="confirmRemove = true">
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </tippy>
       </div>
     </div>
     <div v-show="showChildren || isFiltered">
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 065afc6f0..8b86d1a04 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -27,50 +27,48 @@
           <span>{{ folder.name ? folder.name : folder.title }}</span>
         </button>
       </div>
-      <v-popover>
-        <button v-tooltip.left="$t('more')" class="tooltip-target icon button">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template #popover>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="$emit('add-folder', { folder, path: folderPath })"
-            >
-              <i class="material-icons">create_new_folder</i>
-              <span>{{ $t("new_folder") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="
-                $emit('edit-folder', {
-                  folder,
-                  folderIndex,
-                  collectionIndex,
-                  folderPath,
-                })
-              "
-            >
-              <i class="material-icons">edit</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="confirmRemove = true"
-            >
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
+      <tippy trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
+          </button>
         </template>
-      </v-popover>
+        <div>
+          <button
+            class="icon button"
+            @click="$emit('add-folder', { folder, path: folderPath })"
+          >
+            <i class="material-icons">create_new_folder</i>
+            <span>{{ $t("new_folder") }}</span>
+          </button>
+        </div>
+        <div>
+          <button
+            class="icon button"
+            @click="
+              $emit('edit-folder', {
+                folder,
+                folderIndex,
+                collectionIndex,
+                folderPath,
+              })
+            "
+          >
+            <i class="material-icons">edit</i>
+            <span>{{ $t("edit") }}</span>
+          </button>
+        </div>
+        <div>
+          <button class="icon button" @click="confirmRemove = true">
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
       <ul class="flex-col">
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 090ffed51..13791a268 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -13,7 +13,8 @@
     >
       <div>
         <button
-          v-tooltip="!doc ? $t('use_request') : ''"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="!doc ? $t('use_request') : ''"
           class="icon button"
           @click="!doc ? selectRequest() : {}"
         >
@@ -27,42 +28,41 @@
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover>
-        <button v-tooltip="$t('more')" class="tooltip-target icon button">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template #popover>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="
-                $emit('edit-request', {
-                  collectionIndex,
-                  folderIndex,
-                  folderName,
-                  request,
-                  requestIndex,
-                  folderPath,
-                })
-              "
-            >
-              <i class="material-icons">edit</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="confirmRemove = true"
-            >
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
+      <tippy trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
+          </button>
         </template>
-      </v-popover>
+        <div>
+          <button
+            class="icon button"
+            @click="
+              $emit('edit-request', {
+                collectionIndex,
+                folderIndex,
+                folderName,
+                request,
+                requestIndex,
+                folderPath,
+              })
+            "
+          >
+            <i class="material-icons">edit</i>
+            <span>{{ $t("edit") }}</span>
+          </button>
+        </div>
+        <div>
+          <button class="icon button" @click="confirmRemove = true">
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </tippy>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 08f88ae91..2828a0217 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -19,7 +19,8 @@
       <div>
         <button
           v-if="doc && !selected"
-          v-tooltip.left="$t('import')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('import')"
           class="icon button"
           @click="$emit('select-collection')"
         >
@@ -27,61 +28,60 @@
         </button>
         <button
           v-if="doc && selected"
-          v-tooltip.left="$t('delete')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
           class="icon button"
           @click="$emit('unselect-collection')"
         >
           <i class="material-icons">check_box</i>
         </button>
-        <v-popover>
-          <button
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-            v-tooltip.left="$t('more')"
-            class="tooltip-target icon button"
-          >
-            <i class="material-icons">more_vert</i>
-          </button>
-          <template #popover>
-            <div>
-              <button
-                v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-                v-close-popover
-                class="icon button"
-                @click="
-                  $emit('add-folder', {
-                    folder: collection,
-                    path: `${collectionIndex}`,
-                  })
-                "
-              >
-                <i class="material-icons">create_new_folder</i>
-                <span>{{ $t("new_folder") }}</span>
-              </button>
-            </div>
-            <div>
-              <button
-                v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-                v-close-popover
-                class="icon button"
-                @click="$emit('edit-collection')"
-              >
-                <i class="material-icons">create</i>
-                <span>{{ $t("edit") }}</span>
-              </button>
-            </div>
-            <div>
-              <button
-                v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-                v-close-popover
-                class="icon button"
-                @click="confirmRemove = true"
-              >
-                <i class="material-icons">delete</i>
-                <span>{{ $t("delete") }}</span>
-              </button>
-            </div>
+        <tippy trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <button
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('more')"
+              class="tooltip-target icon button"
+            >
+              <i class="material-icons">more_vert</i>
+            </button>
           </template>
-        </v-popover>
+          <div>
+            <button
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              class="icon button"
+              @click="
+                $emit('add-folder', {
+                  folder: collection,
+                  path: `${collectionIndex}`,
+                })
+              "
+            >
+              <i class="material-icons">create_new_folder</i>
+              <span>{{ $t("new_folder") }}</span>
+            </button>
+          </div>
+          <div>
+            <button
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              class="icon button"
+              @click="$emit('edit-collection')"
+            >
+              <i class="material-icons">create</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              class="icon button"
+              @click="confirmRemove = true"
+            >
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </tippy>
       </div>
     </div>
     <div v-show="showChildren || isFiltered">
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 1d65bf305..d17cf4665 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -18,57 +18,55 @@
           <span>{{ folder.name ? folder.name : folder.title }}</span>
         </button>
       </div>
-      <v-popover>
-        <button
-          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-          v-tooltip.left="$t('more')"
-          class="tooltip-target icon button"
-        >
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template #popover>
-          <div>
-            <button
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              v-close-popover
-              class="icon button"
-              @click="$emit('add-folder', { folder, path: folderPath })"
-            >
-              <i class="material-icons">create_new_folder</i>
-              <span>{{ $t("new_folder") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              v-close-popover
-              class="icon button"
-              @click="
-                $emit('edit-folder', {
-                  folder,
-                  folderIndex,
-                  collectionIndex,
-                  folderPath: '',
-                })
-              "
-            >
-              <i class="material-icons">edit</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              v-close-popover
-              class="icon button"
-              @click="confirmRemove = true"
-            >
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
+      <tippy trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
+          </button>
         </template>
-      </v-popover>
+        <div>
+          <button
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            class="icon button"
+            @click="$emit('add-folder', { folder, path: folderPath })"
+          >
+            <i class="material-icons">create_new_folder</i>
+            <span>{{ $t("new_folder") }}</span>
+          </button>
+        </div>
+        <div>
+          <button
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            class="icon button"
+            @click="
+              $emit('edit-folder', {
+                folder,
+                folderIndex,
+                collectionIndex,
+                folderPath: '',
+              })
+            "
+          >
+            <i class="material-icons">edit</i>
+            <span>{{ $t("edit") }}</span>
+          </button>
+        </div>
+        <div>
+          <button
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            class="icon button"
+            @click="confirmRemove = true"
+          >
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
       <ul class="flex-col">
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 610e4afab..0e09cf505 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -3,7 +3,8 @@
     <div class="transition duration-150 ease-in-out row-wrapper">
       <div>
         <button
-          v-tooltip="!doc ? $t('use_request') : ''"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="!doc ? $t('use_request') : ''"
           class="icon button"
           @click="!doc ? selectRequest() : {}"
         >
@@ -17,45 +18,41 @@
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover>
-        <button
-          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-          v-tooltip="$t('more')"
-          class="tooltip-target icon button"
-        >
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template #popover>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="
-                $emit('edit-request', {
-                  collectionIndex,
-                  folderIndex,
-                  folderName,
-                  request,
-                  requestIndex,
-                })
-              "
-            >
-              <i class="material-icons">edit</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="confirmRemove = true"
-            >
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
+      <tippy trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
+          </button>
         </template>
-      </v-popover>
+        <div>
+          <button
+            class="icon button"
+            @click="
+              $emit('edit-request', {
+                collectionIndex,
+                folderIndex,
+                folderName,
+                request,
+                requestIndex,
+              })
+            "
+          >
+            <i class="material-icons">edit</i>
+            <span>{{ $t("edit") }}</span>
+          </button>
+        </div>
+        <div>
+          <button class="icon button" @click="confirmRemove = true">
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </tippy>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index f3387b6d6..cc3d37126 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -22,7 +22,8 @@
         <label for="variableList">{{ $t("env_variable_list") }}</label>
         <div>
           <button
-            v-tooltip.bottom="$t('clear')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('clear')"
             class="icon button"
             @click="clearContent($event)"
           >
@@ -63,7 +64,8 @@
           <li>
             <button
               id="variable"
-              v-tooltip.bottom="$t('delete')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
               class="icon button"
               @click="removeEnvironmentVariable(index)"
             >
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index e2beac9eb..a027f071d 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -7,33 +7,29 @@
           <span>{{ environment.name }}</span>
         </button>
       </div>
-      <v-popover>
-        <button v-tooltip.left="$t('more')" class="tooltip-target icon button">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template #popover>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="$emit('edit-environment')"
-            >
-              <i class="material-icons">create</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              class="icon button"
-              @click="confirmRemove = true"
-            >
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
+      <tippy trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
+          </button>
         </template>
-      </v-popover>
+        <div>
+          <button class="icon button" @click="$emit('edit-environment')">
+            <i class="material-icons">create</i>
+            <span>{{ $t("edit") }}</span>
+          </button>
+        </div>
+        <div>
+          <button class="icon button" @click="confirmRemove = true">
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </tippy>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 91b673fb2..4d72a4878 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -5,51 +5,48 @@
         {{ $t("import_export") }} {{ $t("environments") }}
       </h3>
       <div>
-        <v-popover>
-          <button
-            v-tooltip.left="$t('more')"
-            class="tooltip-target icon button"
-          >
-            <i class="material-icons">more_vert</i>
-          </button>
-          <template #popover>
-            <div>
-              <button
-                v-close-popover
-                class="icon button"
-                @click="readEnvironmentGist"
-              >
-                <i class="material-icons">assignment_returned</i>
-                <span>{{ $t("import_from_gist") }}</span>
-              </button>
-            </div>
-            <div
-              v-tooltip.bottom="{
+        <tippy trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <button
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('more')"
+              class="tooltip-target icon button"
+            >
+              <i class="material-icons">more_vert</i>
+            </button>
+          </template>
+          <div>
+            <button class="icon button" @click="readEnvironmentGist">
+              <i class="material-icons">assignment_returned</i>
+              <span>{{ $t("import_from_gist") }}</span>
+            </button>
+          </div>
+          <div
+            v-tippy="{ theme: 'tooltip' }"
+            title="{
                 content: !currentUser
                   ? $t('login_with_github_to') + $t('create_secret_gist')
                   : currentUser.provider !== 'github.com'
                   ? $t('login_with_github_to') + $t('create_secret_gist')
                   : null,
               }"
+          >
+            <button
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              class="icon button"
+              @click="createEnvironmentGist"
             >
-              <button
-                v-close-popover
-                :disabled="
-                  !currentUser
-                    ? true
-                    : currentUser.provider !== 'github.com'
-                    ? true
-                    : false
-                "
-                class="icon button"
-                @click="createEnvironmentGist"
-              >
-                <i class="material-icons">assignment_turned_in</i>
-                <span>{{ $t("create_secret_gist") }}</span>
-              </button>
-            </div>
-          </template>
-        </v-popover>
+              <i class="material-icons">assignment_turned_in</i>
+              <span>{{ $t("create_secret_gist") }}</span>
+            </button>
+          </div>
+        </tippy>
         <button class="icon button" @click="hideModal">
           <i class="material-icons">close</i>
         </button>
@@ -58,7 +55,8 @@
     <template #body>
       <div class="flex flex-col items-start p-2">
         <button
-          v-tooltip="$t('replace_current')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('replace_current')"
           class="icon button"
           @click="openDialogChooseFileToReplaceWith"
         >
@@ -74,7 +72,8 @@
           />
         </button>
         <button
-          v-tooltip="$t('preserve_current')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('preserve_current')"
           class="icon button"
           @click="openDialogChooseFileToImportFrom"
         >
@@ -90,7 +89,8 @@
           />
         </button>
         <button
-          v-tooltip="$t('download_file')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('download_file')"
           class="icon button"
           @click="exportJSON"
         >
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 95ab50912..6532eb18d 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <button v-close-popover class="icon button" @click="signInWithGoogle">
+      <button class="icon button" @click="signInWithGoogle">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -16,7 +16,7 @@
       </button>
     </div>
     <div>
-      <button v-close-popover class="icon button" @click="signInWithGithub">
+      <button class="icon button" @click="signInWithGithub">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -31,7 +31,7 @@
       </button>
     </div>
     <div>
-      <button v-close-popover class="icon button" @click="$emit('show-email')">
+      <button class="icon button" @click="$emit('show-email')">
         <i class="material-icons">mail</i>
         <span>{{ $t("email") }}</span>
       </button>
diff --git a/components/firebase/Logout.vue b/components/firebase/Logout.vue
index e273ad817..fdc0d0727 100644
--- a/components/firebase/Logout.vue
+++ b/components/firebase/Logout.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button v-close-popover class="icon button" @click="logout">
+    <button class="icon button" @click="logout">
       <i class="material-icons">exit_to_app</i>
       <span>{{ $t("logout") }}</span>
     </button>
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index d0d10ac99..9da23390e 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -14,7 +14,8 @@
         />
       </li>
       <button
-        v-tooltip="{
+        v-tippy="{ theme: 'tooltip' }"
+        title="{
           content: !entry.star ? $t('add_star') : $t('remove_star'),
         }"
         data-testid="star_button"
@@ -27,7 +28,8 @@
         </i>
       </button>
       <button
-        v-tooltip="{
+        v-tippy="{ theme: 'tooltip' }"
+        title="{
           content: expand ? $t('hide_more') : $t('show_more'),
         }"
         data-testid="query_expand"
@@ -38,41 +40,40 @@
           {{ expand ? "unfold_less" : "unfold_more" }}
         </i>
       </button>
-      <v-popover>
-        <button
-          v-tooltip="$t('options')"
-          data-testid="options"
-          class="tooltip-target icon button"
-        >
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template #popover>
-          <div>
-            <button
-              v-close-popover
-              data-testid="restore_history_entry"
-              class="icon button"
-              :aria-label="$t('restore')"
-              @click="$emit('use-entry')"
-            >
-              <i class="material-icons">restore</i>
-              <span>{{ $t("restore") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              data-testid="delete_history_entry"
-              class="icon button"
-              :aria-label="$t('delete')"
-              @click="$emit('delete-entry')"
-            >
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
+      <tippy trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('options')"
+            data-testid="options"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
+          </button>
         </template>
-      </v-popover>
+        <div>
+          <button
+            data-testid="restore_history_entry"
+            class="icon button"
+            :aria-label="$t('restore')"
+            @click="$emit('use-entry')"
+          >
+            <i class="material-icons">restore</i>
+            <span>{{ $t("restore") }}</span>
+          </button>
+        </div>
+        <div>
+          <button
+            data-testid="delete_history_entry"
+            class="icon button"
+            :aria-label="$t('delete')"
+            @click="$emit('delete-entry')"
+          >
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </tippy>
     </div>
     <div class="show-on-large-screen">
       <li data-testid="'query'">
@@ -91,7 +92,8 @@
       <div v-if="showMore" class="show-on-large-screen">
         <li>
           <input
-            v-tooltip="entry.date"
+            v-tippy="{ theme: 'tooltip' }"
+            title="entry.date"
             :aria-label="$t('time')"
             type="text"
             readonly
diff --git a/components/history/index.vue b/components/history/index.vue
index f7b9987f4..3b08eb0a2 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -54,7 +54,8 @@
           <span>{{ $t("clear_all") }}</span>
         </button>
         <button
-          v-tooltip="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
+          v-tippy="{ theme: 'tooltip' }"
+          title="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
           class="icon button"
           @click="toggleCollapse()"
         >
@@ -69,7 +70,8 @@
         </p>
         <div>
           <button
-            v-tooltip="$t('yes')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('yes')"
             data-testid="confirm_clear_history"
             class="icon button"
             @click="clearHistory"
@@ -77,7 +79,8 @@
             <i class="material-icons">done</i>
           </button>
           <button
-            v-tooltip="$t('no')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('no')"
             data-testid="reject_clear_history"
             class="icon button"
             @click="disableHistoryClearing"
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 150731f15..2c1d88ba3 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -22,7 +22,8 @@
       </li>
       <span>
         <button
-          v-tooltip="{
+          v-tippy="{ theme: 'tooltip' }"
+          title="{
             content: !entry.star ? $t('add_star') : $t('remove_star'),
           }"
           data-testid="star_button"
@@ -38,7 +39,7 @@
       <!-- <li>
             <button
               class="icon button"
-              v-tooltip="{
+              v-tippy="{ theme: 'tooltip' }" title="{
                 content: !entry.usesScripts
                   ? 'No pre-request script'
                   : 'Used pre-request script'
@@ -49,37 +50,39 @@
               </i>
             </button>
           </li> -->
-      <v-popover>
-        <button v-tooltip="$t('options')" class="tooltip-target icon button">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template #popover>
-          <div>
-            <button
-              v-close-popover
-              data-testid="restore_history_entry"
-              class="icon button"
-              :aria-label="$t('edit')"
-              @click="$emit('use-entry')"
-            >
-              <i class="material-icons">restore</i>
-              <span>{{ $t("restore") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              data-testid="delete_history_entry"
-              class="icon button"
-              :aria-label="$t('delete')"
-              @click="$emit('delete-entry')"
-            >
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
+      <tippy trigger="click" theme="popover" arrow>
+        <template #trigger>
+          <button
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('options')"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
+          </button>
         </template>
-      </v-popover>
+        <div>
+          <button
+            data-testid="restore_history_entry"
+            class="icon button"
+            :aria-label="$t('edit')"
+            @click="$emit('use-entry')"
+          >
+            <i class="material-icons">restore</i>
+            <span>{{ $t("restore") }}</span>
+          </button>
+        </div>
+        <div>
+          <button
+            data-testid="delete_history_entry"
+            class="icon button"
+            :aria-label="$t('delete')"
+            @click="$emit('delete-entry')"
+          >
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </tippy>
     </div>
     <div class="show-on-large-screen">
       <li>
@@ -97,7 +100,8 @@
       <div v-if="showMore" class="show-on-large-screen">
         <li>
           <input
-            v-tooltip="entry.date"
+            v-tippy="{ theme: 'tooltip' }"
+            title="entry.date"
             :aria-label="$t('time')"
             type="text"
             readonly
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 03b3407b2..bc30a2710 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -6,7 +6,8 @@
           <label for="reqParamList">{{ $t("request_body") }}</label>
           <div>
             <button
-              v-tooltip.bottom="$t('clear')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('clear')"
               class="icon button"
               @click="clearContent('bodyParams', $event)"
             >
@@ -68,7 +69,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="{
+            v-tippy="{ theme: 'tooltip' }"
+            title="{
               content: param.hasOwnProperty('active')
                 ? param.active
                   ? $t('turn_off')
@@ -113,7 +115,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="$t('delete')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('delete')"
             class="icon button"
             @click="removeRequestBodyParam(index)"
           >
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index a35c416b0..ae645fb32 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -11,38 +11,35 @@
     <template #body>
       <label for="requestType">{{ $t("choose_language") }}</label>
       <span class="select-wrapper">
-        <v-popover>
-          <pre v-if="requestType">{{
-            codegens.find((x) => x.id === requestType).name
-          }}</pre>
-          <input
-            v-else
-            id="requestType"
-            v-model="requestType"
-            :placeholder="$t('choose_language')"
-            class="input cursor-pointer"
-            readonly
-            autofocus
-          />
-          <template #popover>
-            <div v-for="gen in codegens" :key="gen.id">
-              <button
-                v-close-popover
-                class="icon button"
-                @click="requestType = gen.id"
-              >
-                {{ gen.name }}
-              </button>
-            </div>
+        <tippy trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <pre v-if="requestType">{{
+              codegens.find((x) => x.id === requestType).name
+            }}</pre>
+            <input
+              v-else
+              id="requestType"
+              v-model="requestType"
+              :placeholder="$t('choose_language')"
+              class="input cursor-pointer"
+              readonly
+              autofocus
+            />
           </template>
-        </v-popover>
+          <div v-for="gen in codegens" :key="gen.id">
+            <button class="icon button" @click="requestType = gen.id">
+              {{ gen.name }}
+            </button>
+          </div>
+        </tippy>
       </span>
       <div class="row-wrapper">
         <label for="generatedCode">{{ $t("generated_code") }}</label>
         <div>
           <button
             ref="copyRequestCode"
-            v-tooltip="$t('copy_code')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('copy_code')"
             class="icon button"
             @click="copyRequestCode"
           >
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 5d68fb9c6..6884eb303 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -6,7 +6,8 @@
           <label for="headerList">{{ $t("header_list") }}</label>
           <div>
             <button
-              v-tooltip.bottom="$t('clear')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('clear')"
               class="icon button"
               @click="clearContent('headers', $event)"
             >
@@ -63,7 +64,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="{
+            v-tippy="{ theme: 'tooltip' }"
+            title="{
               content: header.hasOwnProperty('active')
                 ? header.active
                   ? $t('turn_off')
@@ -93,7 +95,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="$t('delete')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('delete')"
             class="icon button"
             @click="removeRequestHeader(index)"
           >
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index d8f54969f..5c683be41 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -6,7 +6,8 @@
           <label for="paramList">{{ $t("parameter_list") }}</label>
           <div>
             <button
-              v-tooltip.bottom="$t('clear')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('clear')"
               class="icon button"
               @click="clearContent('parameters', $event)"
             >
@@ -82,7 +83,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="{
+            v-tippy="{ theme: 'tooltip' }"
+            title="{
               content: param.hasOwnProperty('active')
                 ? param.active
                   ? $t('turn_off')
@@ -112,7 +114,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="$t('delete')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('delete')"
             class="icon button"
             @click="removeRequestParam(index)"
           >
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 072ef00fb..8aa30c2b5 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -8,7 +8,8 @@
             <button
               v-if="rawInput && contentType.endsWith('json')"
               ref="prettifyRequest"
-              v-tooltip="$t('prettify_body')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('prettify_body')"
               class="icon button"
               @click="prettifyRequestBody"
             >
@@ -16,7 +17,8 @@
             </button>
             <label for="payload" class="p-0">
               <button
-                v-tooltip="$t('import_json')"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('import_json')"
                 class="icon button"
                 @click="$refs.payload.click()"
               >
@@ -31,7 +33,8 @@
               @change="uploadPayload"
             />
             <button
-              v-tooltip.bottom="$t('clear')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('clear')"
               class="icon button"
               @click="clearContent('rawParams', $event)"
             >
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index b24312f19..ba1938843 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -13,7 +13,8 @@
         <label>{{ $t("token_list") }}</label>
         <div v-if="tokens.length != 0">
           <button
-            v-tooltip.bottom="$t('clear')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('clear')"
             class="icon button"
             @click="clearContent('tokens', $event)"
           >
@@ -41,7 +42,8 @@
         <div class="row-wrapper">
           <li>
             <button
-              v-tooltip.bottom="$t('use_token')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('use_token')"
               class="icon button"
               @click="useOAuthToken(token.value)"
             >
@@ -50,7 +52,8 @@
           </li>
           <li>
             <button
-              v-tooltip.bottom="$t('delete')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
               class="icon button"
               @click="removeOAuthToken(index)"
             >
diff --git a/components/landing/CTA.vue b/components/landing/CTA.vue
new file mode 100644
index 000000000..8405482d1
--- /dev/null
+++ b/components/landing/CTA.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="flex p-4 bg-primaryLight rounded">
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <div
+        v-for="(cta, index) in ctas"
+        :key="`cta-${index}`"
+        class="inline-flex flex-col p-8"
+      >
+        <i class="text-3xl material-icons text-accent">{{ cta.icon }}</i>
+        <div class="flex-grow">
+          <h2
+            class="
+              mt-4
+              mb-2
+              text-lg
+              font-semibold
+              transition
+              text-secondaryDark
+            "
+          >
+            {{ cta.title }}
+          </h2>
+          <p>
+            {{ cta.description }}
+          </p>
+          <p class="mt-2">
+            <SmartLink :to="cta.link.target" class="link" blank>
+              {{ cta.link.title }}
+              <i class="material-icons">chevron_right</i>
+            </SmartLink>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ctas: [
+        {
+          icon: "layers",
+          title: "API Documentation",
+          description:
+            "Get up and running with Kooli in as little as 10 minutes.",
+          link: {
+            title: "API reference",
+            target: "https://docs.kooli.tech/api",
+          },
+        },
+        {
+          icon: "local_library",
+          title: "Guides",
+          description:
+            "Explore and start integrating Kooli's products and tools.",
+          link: {
+            title: "Guides and resources",
+            target: "https://docs.kooli.tech/guides",
+          },
+        },
+        {
+          icon: "local_library",
+          title: "Guides",
+          description:
+            "Explore and start integrating Kooli's products and tools.",
+          link: {
+            title: "Guides and resources",
+            target: "https://docs.kooli.tech/guides",
+          },
+        },
+      ],
+    }
+  },
+}
+</script>
diff --git a/components/landing/Features.vue b/components/landing/Features.vue
index b519cf144..39f6ef977 100644
--- a/components/landing/Features.vue
+++ b/components/landing/Features.vue
@@ -4,38 +4,14 @@
       <p class="my-4 font-semibold tracking-widest text-center text-accent">
         FEATURES
       </p>
-      <h3
-        class="
-          max-w-xl
-          mt-4
-          mb-8
-          text-4xl
-          font-bold
-          leading-tight
-          tracking-tight
-          text-center
-          transition
-          text-secondaryDark
-        "
-      >
-        A technology-first approach to payments and finance
-      </h3>
     </div>
     <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
       <div
         v-for="(feature, index) in features"
         :key="`feature-${index}`"
-        class="
-          inline-flex
-          flex-col
-          p-8
-          transition
-          border
-          rounded-lg
-          border-divider
-        "
+        class="inline-flex flex-col p-8"
       >
-        <i class="text-3xl material-icons text-accent">{{ feature.icon }}</i>
+        <i class="text-4xl material-icons text-accent">{{ feature.icon }}</i>
         <div class="flex-grow">
           <h2
             class="
diff --git a/components/landing/Footer.vue b/components/landing/Footer.vue
index 2211aa4cd..3cdde4006 100644
--- a/components/landing/Footer.vue
+++ b/components/landing/Footer.vue
@@ -1,18 +1,11 @@
 <template>
-  <footer class="flex flex-col px-8 py-16">
+  <footer class="flex flex-col p-4">
     <nav class="grid grid-cols-2 gap-4 md:grid-cols-4">
       <div class="flex flex-col space-y-2">
-        <SmartLink
-          :to="
-            !$store.state.authUser
-              ? localePath('/')
-              : localePath(`/${$store.state.login}`)
-          "
-          class="my-2"
-        >
+        <span>
           <AppLogo class="h-8" />
-        </SmartLink>
-        <span> Kooli </span>
+        </span>
+        <span class="font-bold"> Hoppscotch </span>
         <SmartChangeLanguage />
         <ul class="space-y-2">
           <li>
diff --git a/components/landing/Globe.vue b/components/landing/Globe.vue
index b4f6c6d54..d0d2f4aba 100644
--- a/components/landing/Globe.vue
+++ b/components/landing/Globe.vue
@@ -12,23 +12,47 @@ export default {
   data() {
     return {
       globe: null,
-      cube: null,
       renderer: null,
       scene: null,
       camera: null,
-      tbControls: null,
-      arcsData: [...Array(40).keys()].map(() => ({
+      arcsData: [...Array(20).keys()].map(() => ({
         startLat: (Math.random() - 0.5) * 180,
         startLng: (Math.random() - 0.5) * 360,
         endLat: (Math.random() - 0.5) * 180,
         endLng: (Math.random() - 0.5) * 360,
-        color: ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
-          Math.round(Math.random() * 3)
+        color: [
+          ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
+            Math.round(Math.random() * 3)
+          ],
+          ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
+            Math.round(Math.random() * 3)
+          ],
         ],
       })),
     }
   },
 
+  // computed: {
+  //   labelsData() {
+  //     const labelsData = []
+  //     this.arcsData.forEach(
+  //       ({ startLat, startLng, endLat, endLng, color }, linkIdx) =>
+  //         [
+  //           [startLat, startLng],
+  //           [endLat, endLng],
+  //         ].forEach(([lat, lng], edgeIdx) =>
+  //           labelsData.push({
+  //             lat,
+  //             lng,
+  //             color: color[edgeIdx],
+  //             text: `${linkIdx} ${edgeIdx ? "tgt" : "src"}`,
+  //           })
+  //         )
+  //     )
+  //     return labelsData
+  //   },
+  // },
+
   mounted() {
     this.init()
     this.animate()
@@ -52,17 +76,27 @@ export default {
       this.globe = new ThreeGlobe()
         .globeImageUrl(texture)
         .atmosphereColor("#aaaaaa")
+        // arcs layer
         .arcsData(this.arcsData)
         .arcColor("color")
         .arcDashLength(1)
-        .arcDashGap(5)
+        .arcDashGap(() => Math.random())
         .arcStroke(1)
         .arcDashInitialGap(() => Math.random() * 5)
         .arcDashAnimateTime(2000)
+        // hex layer
         .hexPolygonsData(geojson.features)
         .hexPolygonResolution(3)
         .hexPolygonMargin(0.5)
         .hexPolygonColor(() => `#aaaaaa`)
+      // labels layer
+      // .labelsData(this.labelsData)
+      // .labelLat("lat")
+      // .labelLng("lng")
+      // .labelText("text")
+      // .labelColor("color")
+      // .labelSize(1.5)
+      // .labelDotRadius(0.5)
 
       this.renderer = new THREE.WebGLRenderer({
         alpha: true,
diff --git a/components/landing/Hero.vue b/components/landing/Hero.vue
index 4db0cc9f1..fe633c0e5 100644
--- a/components/landing/Hero.vue
+++ b/components/landing/Hero.vue
@@ -6,9 +6,9 @@
           leading-none
           tracking-tighter
           font-semibold
-          text-accent text-5xl
-          md:text-6xl
-          lg:text-8xl
+          text-accent text-4xl
+          md:text-5xl
+          lg:text-6xl
         "
       >
         Open Source
@@ -16,7 +16,7 @@
       <h3
         class="
           text-3xl
-          my-8
+          my-4
           font-mono
           text-secondaryDark
           md:text-4xl
@@ -32,7 +32,13 @@
         in the world.
       </p>
       <div class="my-8 flex items-center">
-        <button class="button rounded text-xl">Get Started</button>
+        <ButtonPrimary
+          label="Dashboard"
+          icon="chevron_right"
+          class="my-4"
+          large
+          reverse
+        />
       </div>
     </div>
     <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
diff --git a/components/landing/Package.vue b/components/landing/Package.vue
deleted file mode 100644
index 3446b2596..000000000
--- a/components/landing/Package.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <div class="flex flex-col p-4">
-    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-      <div
-        class="inline-flex flex-col transition border rounded-lg border-divider"
-      >
-        <div class="flex flex-col p-8">
-          <p class="font-semibold tracking-widest text-accent">API</p>
-          <h3
-            class="
-              max-w-xl
-              my-4
-              text-4xl
-              font-semibold
-              leading-tight
-              tracking-tight
-              transition
-              text-secondaryDark
-            "
-          >
-            Powerful and easy-to-use APIs
-          </h3>
-          <p class="my-4 text-lg md:w-4/5">
-            We agonize over the right abstractions so your teams don’t need to
-            stitch together disparate systems or spend months integrating
-            payments functionality.
-          </p>
-          <div class="flex mt-4">
-            <ButtonPrimary
-              to="https://docs.kooli.tech/guides"
-              label="Read the docs"
-              icon="chevron_right"
-              reverse
-            />
-          </div>
-        </div>
-        <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-          <div
-            v-for="(api, index) in apis"
-            :key="`api-${index}`"
-            class="inline-flex flex-col p-8"
-          >
-            <i class="text-3xl material-icons text-accent">{{ api.icon }}</i>
-            <div class="flex-grow">
-              <h2
-                class="
-                  mt-4
-                  mb-2
-                  text-lg
-                  font-semibold
-                  transition
-                  text-secondaryDark
-                "
-              >
-                {{ api.title }}
-              </h2>
-              <p>
-                {{ api.description }}
-              </p>
-              <p class="mt-2">
-                <SmartLink :to="api.link.target" class="link">
-                  {{ api.link.title }}
-                  <i class="material-icons">chevron_right</i>
-                </SmartLink>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="
-          inline-flex
-          flex-col
-          p-4
-          transition
-          border
-          rounded-lg
-          border-divider
-          bg-primaryLight
-        "
-      >
-        <div class="flex">
-          <div class="w-3 h-3 mr-2 bg-red-500 rounded-full"></div>
-          <div class="w-3 h-3 mr-2 bg-yellow-500 rounded-full"></div>
-          <div class="w-3 h-3 bg-green-500 rounded-full"></div>
-        </div>
-        <div class="flex flex-1 p-4 overflow-auto whitespace-pre">
-          <pre>
-/*
- ** TailwindCSS Configuration File
- **
- ** Docs: https://tailwindcss.com/docs/configuration
- ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
- */
-module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
-  experimental: "all",
-  dark: "class",
-  corePlugins: {
-    float: false,
-    clear: false,
-    transitionDelay: false,
-    skew: false,
-  },
-}
-          </pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      apis: [
-        {
-          icon: "layers",
-          title: "Tools for every stack",
-          description:
-            "We offer client and server libraries in everything from React, PHP to .NET and iOS.",
-          link: {
-            title: "See libraries",
-            target: "https://docs.kooli.tech/api",
-          },
-        },
-        {
-          icon: "extension",
-          title: "Prebuilt integrations",
-          description:
-            "Use integrations for systems like Shopify, PayPal, and more.",
-          link: { title: "Explore partners", target: "/about/integrations" },
-        },
-      ],
-    }
-  },
-}
-</script>
diff --git a/components/landing/Users.vue b/components/landing/Users.vue
index 0295d2097..3949546e0 100644
--- a/components/landing/Users.vue
+++ b/components/landing/Users.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col p-4 mx-4 bg-primaryLight my-16 rounded">
+  <div class="flex flex-col p-4 mx-4 bg-primaryLight rounded">
     <div class="flex flex-col items-center">
       <p class="my-4 font-semibold tracking-widest text-center">
         EMPOWERING DEVELOPERS FROM
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index da0046632..601816b89 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -6,7 +6,8 @@
         <button
           v-if="response.body"
           ref="ToggleExpandResponse"
-          v-tooltip="{
+          v-tippy="{ theme: 'tooltip' }"
+          title="{
             content: !expandResponse
               ? $t('expand_response')
               : $t('collapse_response'),
@@ -20,7 +21,8 @@
         </button>
         <button
           v-if="response.body"
-          v-tooltip="{
+          v-tippy="{ theme: 'tooltip' }"
+          title="{
             content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
           }"
           class="icon button"
@@ -33,7 +35,8 @@
         <button
           v-if="response.body"
           ref="downloadResponse"
-          v-tooltip="$t('download_file')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('download_file')"
           class="icon button"
           @click="downloadResponse"
         >
@@ -42,7 +45,8 @@
         <button
           v-if="response.body"
           ref="copyResponse"
-          v-tooltip="$t('copy_response')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('copy_response')"
           class="icon button"
           @click="copyResponse"
         >
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index bb88e7ce4..e901b1858 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -6,7 +6,8 @@
         <button
           v-if="response.body"
           ref="downloadResponse"
-          v-tooltip="$t('download_file')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('download_file')"
           class="icon button"
           @click="downloadResponse"
         >
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 9f446fd4e..449078667 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -6,7 +6,8 @@
         <button
           v-if="response.body"
           ref="ToggleExpandResponse"
-          v-tooltip="{
+          v-tippy="{ theme: 'tooltip' }"
+          title="{
             content: !expandResponse
               ? $t('expand_response')
               : $t('collapse_response'),
@@ -21,7 +22,8 @@
         <button
           v-if="response.body && canDownloadResponse"
           ref="downloadResponse"
-          v-tooltip="$t('download_file')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('download_file')"
           class="icon button"
           @click="downloadResponse"
         >
@@ -30,7 +32,8 @@
         <button
           v-if="response.body"
           ref="copyResponse"
-          v-tooltip="$t('copy_response')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('copy_response')"
           class="icon button"
           @click="copyResponse"
         >
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 77dd8d5ba..9de249d59 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -6,7 +6,8 @@
         <button
           v-if="response.body"
           ref="ToggleExpandResponse"
-          v-tooltip="{
+          v-tippy="{ theme: 'tooltip' }"
+          title="{
             content: !expandResponse
               ? $t('expand_response')
               : $t('collapse_response'),
@@ -21,7 +22,8 @@
         <button
           v-if="response.body && canDownloadResponse"
           ref="downloadResponse"
-          v-tooltip="$t('download_file')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('download_file')"
           class="icon button"
           @click="downloadResponse"
         >
@@ -30,7 +32,8 @@
         <button
           v-if="response.body"
           ref="copyResponse"
-          v-tooltip="$t('copy_response')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('copy_response')"
           class="icon button"
           @click="copyResponse"
         >
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 861d81f0d..55542c8fb 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -6,7 +6,8 @@
         <button
           v-if="response.body"
           ref="ToggleExpandResponse"
-          v-tooltip="{
+          v-tippy="{ theme: 'tooltip' }"
+          title="{
             content: !expandResponse
               ? $t('expand_response')
               : $t('collapse_response'),
@@ -21,7 +22,8 @@
         <button
           v-if="response.body"
           ref="downloadResponse"
-          v-tooltip="$t('download_file')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('download_file')"
           class="icon button"
           @click="downloadResponse"
         >
@@ -30,7 +32,8 @@
         <button
           v-if="response.body"
           ref="copyResponse"
-          v-tooltip="$t('copy_response')"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('copy_response')"
           class="icon button"
           @click="copyResponse"
         >
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 40e72eadd..c4dd46f35 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -100,7 +100,8 @@
         <div v-if="index + 1 !== communication.inputs.length">
           <li>
             <button
-              v-tooltip.bottom="$t('delete')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
               class="icon button"
               @click="removeCommunicationInput({ index })"
             >
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index c4e7cf12b..a116d482f 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -67,7 +67,8 @@
         <div>
           <li>
             <button
-              v-tooltip.bottom="{
+              v-tippy="{ theme: 'tooltip' }"
+              title="{
                 content: protocol.hasOwnProperty('active')
                   ? protocol.active
                     ? $t('turn_off')
@@ -96,7 +97,8 @@
         <div>
           <li>
             <button
-              v-tooltip.bottom="$t('delete')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
               class="icon button"
               @click="deleteProtocol({ index })"
             >
diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index a296c11b6..4d580c747 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -14,7 +14,8 @@
       <span
         v-for="(color, index) of accentColors"
         :key="`color-${index}`"
-        v-tooltip="capitalized(color)"
+        v-tippy="{ theme: 'tooltip' }"
+        title="capitalized(color)"
         class="
           inline-flex
           items-center
diff --git a/components/smart/ChangeLanguage.vue b/components/smart/ChangeLanguage.vue
index 98d446001..2b498fb12 100644
--- a/components/smart/ChangeLanguage.vue
+++ b/components/smart/ChangeLanguage.vue
@@ -9,10 +9,7 @@
       :animate-fill="false"
     >
       <template #trigger>
-        <button
-          v-tippy="{ animateFill: false, theme: 'tooltip' }"
-          :title="$t('choose_language')"
-        >
+        <button v-tippy="{ theme: 'tooltip' }" :title="$t('choose_language')">
           <span class="mr-2 text-lg">
             {{
               $i18n.locales.find(({ code }) => code == $i18n.locale).country
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 52b236743..7ec0a1c75 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col">
     <label>
-      <ColorScheme placeholder="..." tag="span">
+      <!-- <ColorScheme placeholder="..." tag="span">
         {{ $t("background") }}:
         {{
           $colorMode.preference.charAt(0).toUpperCase() +
@@ -10,13 +10,14 @@
         <span v-if="$colorMode.preference === 'system'">
           ({{ $colorMode.value }} mode detected)
         </span>
-      </ColorScheme>
+      </ColorScheme> -->
     </label>
     <div>
       <span
         v-for="(color, index) of colors"
         :key="`color-${index}`"
-        v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
         class="
           inline-flex
           items-center
diff --git a/components/smart/HideMenu.vue b/components/smart/HideMenu.vue
index 00352fcde..209b0ba89 100644
--- a/components/smart/HideMenu.vue
+++ b/components/smart/HideMenu.vue
@@ -1,6 +1,7 @@
 <template>
   <div
-    v-tooltip="$t(active ? 'hide_sidebar' : 'show_sidebar')"
+    v-tippy="{ theme: 'tooltip' }"
+    :title="$t(active ? 'hide_sidebar' : 'show_sidebar')"
     class="
       absolute
       hidden
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 768922ead..7abcf2306 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -57,55 +57,50 @@
         </li>
         <li>
           <span class="select-wrapper">
-            <v-popover>
-              <input
-                class="input"
-                :placeholder="$t('permissions')"
-                :name="'value' + index"
-                :value="
-                  typeof member.role === 'string'
-                    ? member.role
-                    : JSON.stringify(member.role)
-                "
-                readonly
-              />
-              <template #popover>
-                <div>
-                  <button
-                    v-close-popover
-                    class="icon button"
-                    @click="updateRole(index, 'OWNER')"
-                  >
-                    OWNER
-                  </button>
-                </div>
-                <div>
-                  <button
-                    v-close-popover
-                    class="icon button"
-                    @click="updateRole(index, 'EDITOR')"
-                  >
-                    EDITOR
-                  </button>
-                </div>
-                <div>
-                  <button
-                    v-close-popover
-                    class="icon button"
-                    @click="updateRole(index, 'VIEWER')"
-                  >
-                    VIEWER
-                  </button>
-                </div>
+            <tippy trigger="click" theme="popover" arrow>
+              <template #trigger>
+                <input
+                  class="input"
+                  :placeholder="$t('permissions')"
+                  :name="'value' + index"
+                  :value="
+                    typeof member.role === 'string'
+                      ? member.role
+                      : JSON.stringify(member.role)
+                  "
+                  readonly
+                />
               </template>
-            </v-popover>
+              <div>
+                <button class="icon button" @click="updateRole(index, 'OWNER')">
+                  OWNER
+                </button>
+              </div>
+              <div>
+                <button
+                  class="icon button"
+                  @click="updateRole(index, 'EDITOR')"
+                >
+                  EDITOR
+                </button>
+              </div>
+              <div>
+                <button
+                  class="icon button"
+                  @click="updateRole(index, 'VIEWER')"
+                >
+                  VIEWER
+                </button>
+              </div>
+            </tippy>
           </span>
         </li>
         <div>
           <li>
             <button
               id="member"
-              v-tooltip.bottom="$t('delete')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
               class="icon button"
               @click="removeExistingTeamMember(member.user.uid)"
             >
@@ -137,55 +132,44 @@
         </li>
         <li>
           <span class="select-wrapper">
-            <v-popover>
-              <input
-                class="input"
-                :placeholder="$t('permissions')"
-                :name="'value' + index"
-                :value="
-                  typeof member.value === 'string'
-                    ? member.value
-                    : JSON.stringify(member.value)
-                "
-                readonly
-              />
-              <template #popover>
-                <div>
-                  <button
-                    v-close-popover
-                    class="icon button"
-                    @click="member.value = 'OWNER'"
-                  >
-                    OWNER
-                  </button>
-                </div>
-                <div>
-                  <button
-                    v-close-popover
-                    class="icon button"
-                    @click="member.value = 'EDITOR'"
-                  >
-                    EDITOR
-                  </button>
-                </div>
-                <div>
-                  <button
-                    v-close-popover
-                    class="icon button"
-                    @click="member.value = 'VIEWER'"
-                  >
-                    VIEWER
-                  </button>
-                </div>
+            <tippy trigger="click" theme="popover" arrow>
+              <template #trigger>
+                <input
+                  class="input"
+                  :placeholder="$t('permissions')"
+                  :name="'value' + index"
+                  :value="
+                    typeof member.value === 'string'
+                      ? member.value
+                      : JSON.stringify(member.value)
+                  "
+                  readonly
+                />
               </template>
-            </v-popover>
+              <div>
+                <button class="icon button" @click="member.value = 'OWNER'">
+                  OWNER
+                </button>
+              </div>
+              <div>
+                <button class="icon button" @click="member.value = 'EDITOR'">
+                  EDITOR
+                </button>
+              </div>
+              <div>
+                <button class="icon button" @click="member.value = 'VIEWER'">
+                  VIEWER
+                </button>
+              </div>
+            </tippy>
           </span>
         </li>
         <div>
           <li>
             <button
               id="member"
-              v-tooltip.bottom="$t('delete')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
               class="icon button"
               @click="removeTeamMember(index)"
             >
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 7358287b6..9f6b3f3f7 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -2,7 +2,8 @@
   <div class="row-wrapper">
     <div>
       <button
-        v-tooltip.right="team.myRole === 'OWNER' ? $t('edit') : ''"
+        v-tippy="{ theme: 'tooltip' }"
+        title="team.myRole === 'OWNER' ? $t('edit') : ''"
         class="icon button"
         @click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
       >
@@ -10,49 +11,49 @@
         <span>{{ team.name }}</span>
       </button>
     </div>
-    <v-popover>
-      <button v-tooltip.left="$t('more')" class="tooltip-target icon button">
-        <i class="material-icons">more_vert</i>
-      </button>
-      <template #popover>
-        <div v-if="team.myRole === 'OWNER'">
-          <button
-            v-close-popover
-            class="icon button"
-            @click="$emit('edit-team')"
-          >
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
-          </button>
-        </div>
-        <div v-if="team.myRole === 'OWNER'">
-          <button v-close-popover class="icon button" @click="deleteTeam">
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
-          </button>
-        </div>
-        <div>
-          <button
-            v-close-popover
-            class="icon button"
-            :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
-            @click="exitTeam"
-          >
-            <i class="material-icons">remove</i>
-            <div
-              v-tooltip.left="{
+    <tippy trigger="click" theme="popover" arrow>
+      <template #trigger>
+        <button
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('more')"
+          class="tooltip-target icon button"
+        >
+          <i class="material-icons">more_vert</i>
+        </button>
+      </template>
+      <div v-if="team.myRole === 'OWNER'">
+        <button class="icon button" @click="$emit('edit-team')">
+          <i class="material-icons">create</i>
+          <span>{{ $t("edit") }}</span>
+        </button>
+      </div>
+      <div v-if="team.myRole === 'OWNER'">
+        <button class="icon button" @click="deleteTeam">
+          <i class="material-icons">delete</i>
+          <span>{{ $t("delete") }}</span>
+        </button>
+      </div>
+      <div>
+        <button
+          class="icon button"
+          :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
+          @click="exitTeam"
+        >
+          <i class="material-icons">remove</i>
+          <div
+            v-tippy="{ theme: 'tooltip' }"
+            title="{
                 content:
                   team.myRole === 'OWNER' && team.ownersCount == 1
                     ? $t('disable_exit')
                     : '',
               }"
-            >
-              <span>{{ $t("exit") }}</span>
-            </div>
-          </button>
-        </div>
-      </template>
-    </v-popover>
+          >
+            <span>{{ $t("exit") }}</span>
+          </div>
+        </button>
+      </div>
+    </tippy>
   </div>
 </template>
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 0b4ca2bf1..7f82e6b00 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -40,6 +40,7 @@
         <button class="button icon" @click="hideHeaderPane = !hideHeaderPane">
           <i class="material-icons">menu_open</i>
         </button>
+        <AppFooter />
       </Pane>
     </Splitpanes>
   </div>
diff --git a/nuxt.config.js b/nuxt.config.js
index 6577816b9..d00416f13 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -95,7 +95,6 @@ export default {
   plugins: [
     "~/plugins/v-tippy",
     "~/plugins/vuex-persist",
-    "~/plugins/v-tooltip",
     "~/plugins/vue-rx",
     "~/plugins/vue-apollo",
     { src: "~/plugins/web-worker", ssr: false },
@@ -202,13 +201,6 @@ export default {
     Sitemap: `${process.env.BASE_URL}/sitemap.xml`,
   },
 
-  // Color Mode module configuration (https://github.com/nuxt-community/color-mode-module)
-  colorMode: {
-    classSuffix: "",
-    preference: "dark",
-    fallback: "dark",
-  },
-
   // Google Fonts module configuration (https://github.com/nuxt-community/google-fonts-module)
   googleFonts: {
     display: "swap",
@@ -449,6 +441,6 @@ export default {
 
   // Router configuration (https://nuxtjs.org/api/configuration-router)
   router: {
-    linkExactActiveClass: "text-accent bg-primaryDark",
+    linkExactActiveClass: "text-accent",
   },
 }
diff --git a/package-lock.json b/package-lock.json
index caf4929d3..b76b284ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,6 @@
         "tern": "^0.24.3",
         "three": "^0.130.0",
         "three-globe": "^2.18.5",
-        "v-tooltip": "^2.1.3",
         "vue-apollo": "^3.0.7",
         "vue-cli-plugin-apollo": "^0.22.2",
         "vue-functional-data-merge": "^3.1.0",
@@ -29009,17 +29008,6 @@
         "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/v-tooltip": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
-      "integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "lodash": "^4.17.21",
-        "popper.js": "^1.16.1",
-        "vue-resize": "^1.0.1"
-      }
-    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -29569,14 +29557,6 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
-    "node_modules/vue-resize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
-      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
     "node_modules/vue-router": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
@@ -55818,17 +55798,6 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
-    "v-tooltip": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
-      "integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "lodash": "^4.17.21",
-        "popper.js": "^1.16.1",
-        "vue-resize": "^1.0.1"
-      }
-    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -56313,14 +56282,6 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
-    "vue-resize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
-      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
-      "requires": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
     "vue-router": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
diff --git a/package.json b/package.json
index 59edbde8d..ad58835dc 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,6 @@
     "tern": "^0.24.3",
     "three": "^0.130.0",
     "three-globe": "^2.18.5",
-    "v-tooltip": "^2.1.3",
     "vue-apollo": "^3.0.7",
     "vue-cli-plugin-apollo": "^0.22.2",
     "vue-functional-data-merge": "^3.1.0",
diff --git a/pages/api.vue b/pages/api.vue
index f30647c12..01bcd87e0 100644
--- a/pages/api.vue
+++ b/pages/api.vue
@@ -10,33 +10,32 @@
                 <li class="shrink">
                   <label for="method">{{ $t("method") }}</label>
                   <span class="select-wrapper">
-                    <v-popover>
-                      <input
-                        id="method"
-                        class="input drop-down-input"
-                        v-model="method"
-                        :readonly="!customMethod"
-                        autofocus
-                      />
-                      <template #popover>
-                        <div
-                          v-for="(methodMenuItem, index) in methodMenuItems"
-                          :key="`method-${index}`"
-                        >
-                          <button
-                            class="icon button"
-                            @click="
-                              customMethod =
-                                methodMenuItem == 'CUSTOM' ? true : false
-                              method = methodMenuItem
-                            "
-                            v-close-popover
-                          >
-                            {{ methodMenuItem }}
-                          </button>
-                        </div>
+                    <tippy trigger="click" theme="popover" arrow>
+                      <template #trigger>
+                        <input
+                          id="method"
+                          class="input drop-down-input"
+                          v-model="method"
+                          :readonly="!customMethod"
+                          autofocus
+                        />
                       </template>
-                    </v-popover>
+                      <div
+                        v-for="(methodMenuItem, index) in methodMenuItems"
+                        :key="`method-${index}`"
+                      >
+                        <button
+                          class="icon button"
+                          @click="
+                            customMethod =
+                              methodMenuItem == 'CUSTOM' ? true : false
+                            method = methodMenuItem
+                          "
+                        >
+                          {{ methodMenuItem }}
+                        </button>
+                      </div>
+                    </tippy>
                   </span>
                 </li>
                 <li>
@@ -109,30 +108,29 @@
                       $t("content_type")
                     }}</label>
                     <span class="select-wrapper">
-                      <v-popover>
-                        <input
-                          id="contentType"
-                          class="input drop-down-input"
-                          v-model="contentType"
-                          readonly
-                        />
-                        <template #popover>
-                          <div
-                            v-for="(
-                              contentTypeMenuItem, index
-                            ) in validContentTypes"
-                            :key="`content-type-${index}`"
-                          >
-                            <button
-                              class="icon button"
-                              @click="contentType = contentTypeMenuItem"
-                              v-close-popover
-                            >
-                              {{ contentTypeMenuItem }}
-                            </button>
-                          </div>
+                      <tippy trigger="click" theme="popover" arrow>
+                        <template #trigger>
+                          <input
+                            id="contentType"
+                            class="input drop-down-input"
+                            v-model="contentType"
+                            readonly
+                          />
                         </template>
-                      </v-popover>
+                        <div
+                          v-for="(
+                            contentTypeMenuItem, index
+                          ) in validContentTypes"
+                          :key="`content-type-${index}`"
+                        >
+                          <button
+                            class="icon button"
+                            @click="contentType = contentTypeMenuItem"
+                          >
+                            {{ contentTypeMenuItem }}
+                          </button>
+                        </div>
+                      </tippy>
                     </span>
                     <!-- <SmartAutoComplete
                   :source="validContentTypes"
@@ -182,7 +180,8 @@
                   <button
                     class="icon button"
                     @click="showCurlImportModal = !showCurlImportModal"
-                    v-tooltip.bottom="$t('import_curl')"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('import_curl')"
                   >
                     <i class="material-icons">import_export</i>
                   </button>
@@ -190,7 +189,8 @@
                     class="icon button"
                     @click="showCodegenModal = !showCodegenModal"
                     :disabled="!isValidURL"
-                    v-tooltip.bottom="$t('show_code')"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('show_code')"
                   >
                     <i class="material-icons">code</i>
                   </button>
@@ -201,7 +201,8 @@
                     @click="copyRequest"
                     ref="copyRequest"
                     :disabled="!isValidURL"
-                    v-tooltip.bottom="$t('copy_request_link')"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('copy_request_link')"
                   >
                     <i v-if="navigatorShare" class="material-icons">share</i>
                     <i v-else class="material-icons">content_copy</i>
@@ -211,14 +212,16 @@
                     @click="saveRequest"
                     ref="saveRequest"
                     :disabled="!isValidURL"
-                    v-tooltip.bottom="$t('save_to_collections')"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('save_to_collections')"
                   >
                     <i class="material-icons">create_new_folder</i>
                   </button>
                   <button
                     class="icon button"
                     @click="clearContent('', $event)"
-                    v-tooltip.bottom="$t('clear_all')"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('clear_all')"
                     ref="clearAll"
                   >
                     <i class="material-icons">clear_all</i>
@@ -276,7 +279,8 @@
                             <button
                               class="icon button"
                               @click="clearContent('auth', $event)"
-                              v-tooltip.bottom="$t('clear')"
+                              v-tippy="{ theme: 'tooltip' }"
+                              :title="$t('clear')"
                             >
                               <i class="material-icons">clear_all</i>
                             </button>
@@ -344,7 +348,8 @@
                             v-if="auth === 'OAuth 2.0'"
                             class="icon button"
                             @click="showTokenListModal = !showTokenListModal"
-                            v-tooltip.bottom="$t('use_token')"
+                            v-tippy="{ theme: 'tooltip' }"
+                            :title="$t('use_token')"
                           >
                             <i class="material-icons">open_in_new</i>
                           </button>
@@ -352,7 +357,8 @@
                             v-if="auth === 'OAuth 2.0'"
                             class="icon button"
                             @click="showTokenRequest = !showTokenRequest"
-                            v-tooltip.bottom="$t('get_token')"
+                            v-tippy="{ theme: 'tooltip' }"
+                            :title="$t('get_token')"
                           >
                             <i class="material-icons">vpn_key</i>
                           </button>
@@ -381,21 +387,24 @@
                             <button
                               class="icon button"
                               @click="showTokenRequestList = true"
-                              v-tooltip.bottom="$t('manage_token_req')"
+                              v-tippy="{ theme: 'tooltip' }"
+                              :title="$t('manage_token_req')"
                             >
                               <i class="material-icons">library_add</i>
                             </button>
                             <button
                               class="icon button"
                               @click="clearContent('access_token', $event)"
-                              v-tooltip.bottom="$t('clear')"
+                              v-tippy="{ theme: 'tooltip' }"
+                              :title="$t('clear')"
                             >
                               <i class="material-icons">clear_all</i>
                             </button>
                             <button
                               class="icon button"
                               @click="showTokenRequest = false"
-                              v-tooltip.bottom="$t('close')"
+                              v-tippy="{ theme: 'tooltip' }"
+                              :title="$t('close')"
                             >
                               <i class="material-icons">close</i>
                             </button>
@@ -516,7 +525,8 @@
                             >
                               <button
                                 class="icon button"
-                                v-tooltip="$t('wiki')"
+                                v-tippy="{ theme: 'tooltip' }"
+                                :title="$t('wiki')"
                               >
                                 <i class="material-icons">help_outline</i>
                               </button>
@@ -555,7 +565,8 @@
                             >
                               <button
                                 class="icon button"
-                                v-tooltip="$t('wiki')"
+                                v-tippy="{ theme: 'tooltip' }"
+                                :title="$t('wiki')"
                               >
                                 <i class="material-icons">help_outline</i>
                               </button>
@@ -582,7 +593,8 @@
                               <button
                                 class="icon button"
                                 @click="clearContent('tests', $event)"
-                                v-tooltip.bottom="$t('clear')"
+                                v-tippy="{ theme: 'tooltip' }"
+                                :title="$t('clear')"
                               >
                                 <i class="material-icons">clear_all</i>
                               </button>
@@ -723,7 +735,8 @@
               :disabled="this.tokenReqs.length === 0"
               class="icon button"
               @click="showTokenRequestList = false"
-              v-tooltip.bottom="$t('use_token_req')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('use_token_req')"
             >
               <i class="material-icons">input</i>
             </button>
@@ -731,7 +744,8 @@
               :disabled="this.tokenReqs.length === 0"
               class="icon button"
               @click="removeOAuthTokenReq"
-              v-tooltip.bottom="$t('delete')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
             >
               <i class="material-icons">delete</i>
             </button>
diff --git a/pages/doc.vue b/pages/doc.vue
index 1bf6efb2a..1e98e86fd 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -11,7 +11,8 @@
             <div class="row-wrapper">
               <label for="collectionUpload">
                 <button
-                  v-tooltip="'JSON'"
+                  v-tippy="{ theme: 'tooltip' }"
+                  title="JSON"
                   class="icon button"
                   @click="$refs.collectionUpload.click()"
                 >
@@ -28,7 +29,8 @@
               />
               <div>
                 <button
-                  v-tooltip.bottom="$t('clear')"
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('clear')"
                   class="icon button"
                   @click="collectionJSON = '[]'"
                 >
@@ -64,7 +66,8 @@
             </p>
             <div v-else class="row-wrapper">
               <div
-                v-tooltip.bottom="{
+                v-tippy="{ theme: 'tooltip' }"
+                title="{
                   content: !currentUser
                     ? $t('login_with_github_to') + $t('create_secret_gist')
                     : currentUser.provider !== 'github.com'
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 6ec239bff..5fcec8281 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -50,7 +50,8 @@
                   <label for="headerList">{{ $t("header_list") }}</label>
                   <div>
                     <button
-                      v-tooltip.bottom="$t('clear')"
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="$t('clear')"
                       class="icon button"
                       @click="headers = []"
                     >
@@ -103,7 +104,8 @@
               <div>
                 <li>
                   <button
-                    v-tooltip.bottom="{
+                    v-tippy="{ theme: 'tooltip' }"
+                    title="{
                       content: header.hasOwnProperty('active')
                         ? header.active
                           ? $t('turn_off')
@@ -135,7 +137,8 @@
               <div>
                 <li>
                   <button
-                    v-tooltip.bottom="$t('delete')"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('delete')"
                     class="icon button"
                     @click="removeRequestHeader(index)"
                   >
@@ -161,7 +164,8 @@
             <div v-if="schema">
               <button
                 ref="ToggleExpandResponse"
-                v-tooltip="{
+                v-tippy="{ theme: 'tooltip' }"
+                title="{
                   content: !expandResponse
                     ? $t('expand_response')
                     : $t('collapse_response'),
@@ -175,7 +179,8 @@
               </button>
               <button
                 ref="downloadSchema"
-                v-tooltip="$t('download_file')"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('download_file')"
                 class="icon button"
                 @click="downloadSchema"
               >
@@ -183,7 +188,8 @@
               </button>
               <button
                 ref="copySchemaCode"
-                v-tooltip="$t('copy_schema')"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('copy_schema')"
                 class="icon button"
                 @click="copySchema"
               >
@@ -222,7 +228,8 @@
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
               <button
-                v-tooltip.bottom="
+                v-tippy="{ theme: 'tooltip' }"
+                title="
                   `${$t('run_query')} (${getSpecialKey()}-Enter)`
                 "
                 class="button"
@@ -232,14 +239,16 @@
               </button>
               <button
                 ref="copyQueryButton"
-                v-tooltip="$t('copy_query')"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('copy_query')"
                 class="icon button"
                 @click="copyQuery"
               >
                 <i class="material-icons">{{ copyQueryIcon }}</i>
               </button>
               <button
-                v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
                 class="icon button"
                 @click="doPrettifyQuery"
               >
@@ -247,7 +256,8 @@
               </button>
               <button
                 ref="saveRequest"
-                v-tooltip.bottom="$t('save_to_collections')"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('save_to_collections')"
                 class="icon button"
                 @click="saveRequest"
               >
@@ -300,7 +310,8 @@
                 <button
                   v-if="response"
                   ref="downloadResponse"
-                  v-tooltip="$t('download_file')"
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('download_file')"
                   class="icon button"
                   @click="downloadResponse"
                 >
@@ -309,7 +320,8 @@
                 <button
                   v-if="response"
                   ref="copyResponseButton"
-                  v-tooltip="$t('copy_response')"
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('copy_response')"
                   class="icon button"
                   @click="copyResponse"
                 >
diff --git a/pages/index.vue b/pages/index.vue
index c0fbae449..9d8b63a9f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="flex flex-col space-y-16">
     <LandingHero />
     <LandingStats />
     <LandingUsers />
     <LandingFeatures />
-    <LandingPackage />
+    <LandingCTA />
     <LandingFooter />
   </div>
 </template>
diff --git a/pages/settings.vue b/pages/settings.vue
index 436e8f46d..d672bf7bf 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -124,7 +124,11 @@
             target="_blank"
             rel="noopener"
           >
-            <button v-tooltip="$t('wiki')" class="icon button">
+            <button
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('wiki')"
+              class="icon button"
+            >
               <i class="material-icons">help_outline</i>
             </button>
           </a>
@@ -132,7 +136,8 @@
         <div class="row-wrapper">
           <label for="url">{{ $t("url") }}</label>
           <button
-            v-tooltip.bottom="$t('reset_default')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('reset_default')"
             class="icon button"
             @click="resetProxy"
           >
diff --git a/plugins/v-tippy.js b/plugins/v-tippy.js
index 61ca3c415..c730181e7 100644
--- a/plugins/v-tippy.js
+++ b/plugins/v-tippy.js
@@ -1,5 +1,8 @@
 import Vue from "vue"
 import VueTippy, { TippyComponent } from "vue-tippy"
 
-Vue.use(VueTippy)
+Vue.use(VueTippy, {
+  animateFill: false,
+  interactive: true,
+})
 Vue.component("Tippy", TippyComponent)
diff --git a/plugins/v-tooltip.js b/plugins/v-tooltip.js
deleted file mode 100644
index 86f71019f..000000000
--- a/plugins/v-tooltip.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Vue from "vue"
-import VTooltip from "v-tooltip"
-
-Vue.use(VTooltip, {
-  defaultOffset: 8,
-  popover: {
-    defaultOffset: 0,
-  },
-})