diff --git a/packages/devtools/client/components/PictureInPictureButton.vue b/packages/devtools/client/components/PictureInPictureButton.vue
index ed956c8518..4cc4a44e99 100644
--- a/packages/devtools/client/components/PictureInPictureButton.vue
+++ b/packages/devtools/client/components/PictureInPictureButton.vue
@@ -2,6 +2,7 @@
 const client = useClient()
 
 const isInPopup = window.__NUXT_DEVTOOLS_IS_POPUP__
+const isHttps = computed(() => window.location.protocol === 'https:')
 
 const showInfo = ref(false)
 const copy = useCopy()
@@ -17,7 +18,7 @@ function popup() {
 
 <template>
   <template v-if="!isInPopup">
-    <NButton v-if="client?.devtools.popup" n="sm primary" @click="popup()">
+    <NButton v-if="client?.devtools.popup && isHttps" n="sm primary" @click="popup()">
       <div carbon-launch /> Popup
     </NButton>
     <template v-else>
@@ -45,6 +46,12 @@ function popup() {
           </NButton>
           and restart the browser.
         </p>
+        <NTip v-if="!isHttps" class="mb-4" n="orange">
+          Please note that the popup feature only works when your server is running under HTTPS.
+          <NuxtLink to="https://nuxt.com/docs/api/nuxt-config#https" target="_blank">
+            Learn how to run your server with https on Nuxt's Documentation
+          </NuxtLink>
+        </NTip>
         <div>
           <NButton @click="showInfo = false">
             Close
diff --git a/packages/devtools/client/components/PictureInPictureInfoDialog.vue b/packages/devtools/client/components/PictureInPictureInfoDialog.vue
deleted file mode 100644
index e69de29bb2..0000000000