diff --git a/packages/hoppscotch-common/src/components/app/Shortcuts.vue b/packages/hoppscotch-common/src/components/app/Shortcuts.vue
index ce7a624a5..ac0255426 100644
--- a/packages/hoppscotch-common/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-common/src/components/app/Shortcuts.vue
@@ -17,9 +17,10 @@
           v-if="isEmpty(shortcutsResults)"
           :text="`${t('state.nothing_found')} ‟${filterText}”`"
         >
-          <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+          <template #icon>
+            <icon-lucide-search class="svg-icons opacity-75" />
+          </template>
         </HoppSmartPlaceholder>
-
         <details
           v-for="(sectionResults, sectionTitle) in shortcutsResults"
           v-else
diff --git a/packages/hoppscotch-common/src/components/app/spotlight/index.vue b/packages/hoppscotch-common/src/components/app/spotlight/index.vue
index b8f9c8887..f61d20a3e 100644
--- a/packages/hoppscotch-common/src/components/app/spotlight/index.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/index.vue
@@ -49,13 +49,15 @@
           :text="`${t('state.nothing_found')} ‟${search}”`"
         >
           <template #icon>
-            <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+            <icon-lucide-search class="svg-icons opacity-75" />
+          </template>
+          <template #body>
+            <HoppButtonSecondary
+              :label="t('action.clear')"
+              outline
+              @click="search = ''"
+            />
           </template>
-          <HoppButtonSecondary
-            :label="t('action.clear')"
-            outline
-            @click="search = ''"
-          />
         </HoppSmartPlaceholder>
       </div>
       <div
diff --git a/packages/hoppscotch-common/src/components/collections/MyCollections.vue b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
index 207cd0082..3fbb73b8e 100644
--- a/packages/hoppscotch-common/src/components/collections/MyCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
@@ -254,7 +254,7 @@
             :text="`${t('state.nothing_found')} ‟${filterText}”`"
           >
             <template #icon>
-              <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+              <icon-lucide-search class="svg-icons opacity-75" />
             </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
@@ -263,27 +263,29 @@
             :alt="`${t('empty.collections')}`"
             :text="t('empty.collections')"
           >
-            <div class="flex flex-col items-center space-y-4">
-              <span class="text-center text-secondaryLight">
-                {{ t("collection.import_or_create") }}
-              </span>
-              <div class="flex flex-col items-stretch gap-4">
-                <HoppButtonPrimary
-                  :icon="IconImport"
-                  :label="t('import.title')"
-                  filled
-                  outline
-                  @click="emit('display-modal-import-export')"
-                />
-                <HoppButtonSecondary
-                  :icon="IconPlus"
-                  :label="t('add.new')"
-                  filled
-                  outline
-                  @click="emit('display-modal-add')"
-                />
+            <template #body>
+              <div class="flex flex-col items-center space-y-4">
+                <span class="text-center text-secondaryLight">
+                  {{ t("collection.import_or_create") }}
+                </span>
+                <div class="flex flex-col items-stretch gap-4">
+                  <HoppButtonPrimary
+                    :icon="IconImport"
+                    :label="t('import.title')"
+                    filled
+                    outline
+                    @click="emit('display-modal-import-export')"
+                  />
+                  <HoppButtonSecondary
+                    :icon="IconPlus"
+                    :label="t('add.new')"
+                    filled
+                    outline
+                    @click="emit('display-modal-add')"
+                  />
+                </div>
               </div>
-            </div>
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'collections'"
@@ -291,18 +293,20 @@
             :alt="`${t('empty.collections')}`"
             :text="t('empty.collections')"
           >
-            <HoppButtonSecondary
-              :label="t('add.new')"
-              filled
-              outline
-              @click="
-                node.data.type === 'collections' &&
-                  emit('add-folder', {
-                    path: node.id,
-                    folder: node.data.data.data,
-                  })
-              "
-            />
+            <template #body>
+              <HoppButtonSecondary
+                :label="t('add.new')"
+                filled
+                outline
+                @click="
+                  node.data.type === 'collections' &&
+                    emit('add-folder', {
+                      path: node.id,
+                      folder: node.data.data.data,
+                    })
+                "
+              />
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'folders'"
diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index acf503fe6..4df036a79 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -274,33 +274,37 @@
             :text="t('empty.collections')"
             @drop.stop
           >
-            <div class="flex flex-col items-center space-y-4">
-              <span class="text-center text-secondaryLight">
-                {{ t("collection.import_or_create") }}
-              </span>
-              <div class="flex flex-col items-stretch gap-4">
-                <HoppButtonPrimary
-                  :icon="IconImport"
-                  :label="t('import.title')"
-                  filled
-                  outline
-                  :disabled="hasNoTeamAccess"
-                  :title="hasNoTeamAccess ? t('team.no_access') : ''"
-                  @click="
-                    hasNoTeamAccess ? null : emit('display-modal-import-export')
-                  "
-                />
-                <HoppButtonSecondary
-                  :icon="IconPlus"
-                  :label="t('add.new')"
-                  filled
-                  outline
-                  :disabled="hasNoTeamAccess"
-                  :title="hasNoTeamAccess ? t('team.no_access') : ''"
-                  @click="hasNoTeamAccess ? null : emit('display-modal-add')"
-                />
+            <template #body>
+              <div class="flex flex-col items-center space-y-4">
+                <span class="text-center text-secondaryLight">
+                  {{ t("collection.import_or_create") }}
+                </span>
+                <div class="flex flex-col items-stretch gap-4">
+                  <HoppButtonPrimary
+                    :icon="IconImport"
+                    :label="t('import.title')"
+                    filled
+                    outline
+                    :disabled="hasNoTeamAccess"
+                    :title="hasNoTeamAccess ? t('team.no_access') : ''"
+                    @click="
+                      hasNoTeamAccess
+                        ? null
+                        : emit('display-modal-import-export')
+                    "
+                  />
+                  <HoppButtonSecondary
+                    :icon="IconPlus"
+                    :label="t('add.new')"
+                    filled
+                    outline
+                    :disabled="hasNoTeamAccess"
+                    :title="hasNoTeamAccess ? t('team.no_access') : ''"
+                    @click="hasNoTeamAccess ? null : emit('display-modal-add')"
+                  />
+                </div>
               </div>
-            </div>
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'collections'"
@@ -309,18 +313,20 @@
             :text="t('empty.collections')"
             @drop.stop
           >
-            <HoppButtonSecondary
-              :label="t('add.new')"
-              filled
-              outline
-              @click="
-                node.data.type === 'collections' &&
-                  emit('add-folder', {
-                    path: node.id,
-                    folder: node.data.data.data,
-                  })
-              "
-            />
+            <template #body>
+              <HoppButtonSecondary
+                :label="t('add.new')"
+                filled
+                outline
+                @click="
+                  node.data.type === 'collections' &&
+                    emit('add-folder', {
+                      path: node.id,
+                      folder: node.data.data.data,
+                    })
+                "
+              />
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'folders'"
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue b/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
index 06007c488..ba3ff1953 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
@@ -180,16 +180,18 @@
           :alt="`${t('empty.collection')}`"
           :text="t('empty.collection')"
         >
-          <HoppButtonSecondary
-            :label="t('add.new')"
-            filled
-            outline
-            @click="
-              emit('add-folder', {
-                path: `${collectionIndex}`,
-              })
-            "
-          />
+          <template #body>
+            <HoppButtonSecondary
+              :label="t('add.new')"
+              filled
+              outline
+              @click="
+                emit('add-folder', {
+                  path: `${collectionIndex}`,
+                })
+              "
+            />
+          </template>
         </HoppSmartPlaceholder>
       </div>
     </div>
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue b/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
index 4621404e4..4735bde16 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
@@ -176,8 +176,7 @@
           :src="`/images/states/${colorMode.value}/pack.svg`"
           :alt="`${t('empty.folder')}`"
           :text="t('empty.folder')"
-        >
-        </HoppSmartPlaceholder>
+        />
       </div>
     </div>
     <HoppSmartConfirmModal
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/index.vue b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
index 848579b99..adf8f93d2 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
@@ -66,34 +66,36 @@
       :alt="`${t('empty.collections')}`"
       :text="t('empty.collections')"
     >
-      <div class="flex flex-col items-center space-y-4">
-        <span class="text-center text-secondaryLight">
-          {{ t("collection.import_or_create") }}
-        </span>
-        <div class="flex flex-col items-stretch gap-4">
-          <HoppButtonPrimary
-            :icon="IconImport"
-            :label="t('import.title')"
-            filled
-            outline
-            @click="displayModalImportExport(true)"
-          />
-          <HoppButtonSecondary
-            :label="t('add.new')"
-            filled
-            outline
-            :icon="IconPlus"
-            @click="displayModalAdd(true)"
-          />
+      <template #body>
+        <div class="flex flex-col items-center space-y-4">
+          <span class="text-center text-secondaryLight">
+            {{ t("collection.import_or_create") }}
+          </span>
+          <div class="flex flex-col items-stretch gap-4">
+            <HoppButtonPrimary
+              :icon="IconImport"
+              :label="t('import.title')"
+              filled
+              outline
+              @click="displayModalImportExport(true)"
+            />
+            <HoppButtonSecondary
+              :label="t('add.new')"
+              filled
+              outline
+              :icon="IconPlus"
+              @click="displayModalAdd(true)"
+            />
+          </div>
         </div>
-      </div>
+      </template>
     </HoppSmartPlaceholder>
     <HoppSmartPlaceholder
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
       :text="`${t('state.nothing_found')} ‟${filterText}”`"
     >
       <template #icon>
-        <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+        <icon-lucide-search class="svg-icons opacity-75" />
       </template>
     </HoppSmartPlaceholder>
     <CollectionsGraphqlAdd
diff --git a/packages/hoppscotch-common/src/components/cookies/AllModal.vue b/packages/hoppscotch-common/src/components/cookies/AllModal.vue
index 40e0a67f7..9b319489c 100644
--- a/packages/hoppscotch-common/src/components/cookies/AllModal.vue
+++ b/packages/hoppscotch-common/src/components/cookies/AllModal.vue
@@ -11,7 +11,9 @@
         v-if="!currentInterceptorSupportsCookies"
         :text="t('cookies.modal.interceptor_no_support')"
       >
-        <AppInterceptor class="rounded border border-dividerLight p-2" />
+        <template #body>
+          <AppInterceptor class="rounded border border-dividerLight p-2" />
+        </template>
       </HoppSmartPlaceholder>
       <div v-else class="flex flex-col">
         <div
@@ -38,8 +40,7 @@
             :alt="`${t('cookies.modal.empty_domains')}`"
             :text="t('cookies.modal.empty_domains')"
             class="mt-6"
-          >
-          </HoppSmartPlaceholder>
+          />
           <div
             v-for="[domain, entries] in workingCookieJar.entries()"
             v-else
diff --git a/packages/hoppscotch-common/src/components/environments/Selector.vue b/packages/hoppscotch-common/src/components/environments/Selector.vue
index 1b6c0d206..085fa8f0c 100644
--- a/packages/hoppscotch-common/src/components/environments/Selector.vue
+++ b/packages/hoppscotch-common/src/components/environments/Selector.vue
@@ -93,20 +93,12 @@
                   }
                 "
               />
-              <div
+              <HoppSmartPlaceholder
                 v-if="myEnvironments.length === 0"
-                class="flex flex-col items-center justify-center text-secondaryLight"
-              >
-                <img
-                  :src="`/images/states/${colorMode.value}/blockchain.svg`"
-                  loading="lazy"
-                  class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
-                  :alt="`${t('empty.environments')}`"
-                />
-                <span class="pb-2 text-center">
-                  {{ t("empty.environments") }}
-                </span>
-              </div>
+                :src="`/images/states/${colorMode.value}/blockchain.svg`"
+                :alt="`${t('empty.environments')}`"
+                :text="t('empty.environments')"
+              />
             </HoppSmartTab>
             <HoppSmartTab
               :id="'team-environments'"
@@ -140,20 +132,12 @@
                     }
                   "
                 />
-                <div
+                <HoppSmartPlaceholder
                   v-if="teamEnvironmentList.length === 0"
-                  class="flex flex-col items-center justify-center text-secondaryLight"
-                >
-                  <img
-                    :src="`/images/states/${colorMode.value}/blockchain.svg`"
-                    loading="lazy"
-                    class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
-                    :alt="`${t('empty.environments')}`"
-                  />
-                  <span class="pb-2 text-center">
-                    {{ t("empty.environments") }}
-                  </span>
-                </div>
+                  :src="`/images/states/${colorMode.value}/blockchain.svg`"
+                  :alt="`${t('empty.environments')}`"
+                  :text="t('empty.environments')"
+                />
               </div>
               <div
                 v-if="!teamListLoading && teamAdapterError"
diff --git a/packages/hoppscotch-common/src/components/environments/my/Details.vue b/packages/hoppscotch-common/src/components/environments/my/Details.vue
index d40e232c3..7b9d799aa 100644
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -78,11 +78,13 @@
             :alt="`${t('empty.environments')}`"
             :text="t('empty.environments')"
           >
-            <HoppButtonSecondary
-              :label="`${t('add.new')}`"
-              filled
-              @click="addEnvironmentVariable"
-            />
+            <template #body>
+              <HoppButtonSecondary
+                :label="`${t('add.new')}`"
+                filled
+                @click="addEnvironmentVariable"
+              />
+            </template>
           </HoppSmartPlaceholder>
         </div>
       </div>
diff --git a/packages/hoppscotch-common/src/components/environments/my/index.vue b/packages/hoppscotch-common/src/components/environments/my/index.vue
index 46116da3f..f066df1e4 100644
--- a/packages/hoppscotch-common/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/index.vue
@@ -38,27 +38,29 @@
       :alt="`${t('empty.environments')}`"
       :text="t('empty.environments')"
     >
-      <div class="flex flex-col items-center space-y-4">
-        <span class="text-center text-secondaryLight">
-          {{ t("environment.import_or_create") }}
-        </span>
-        <div class="flex flex-col items-stretch gap-4">
-          <HoppButtonPrimary
-            :icon="IconImport"
-            :label="t('import.title')"
-            filled
-            outline
-            @click="displayModalImportExport(true)"
-          />
-          <HoppButtonSecondary
-            :icon="IconPlus"
-            :label="`${t('add.new')}`"
-            filled
-            outline
-            @click="displayModalAdd(true)"
-          />
+      <template #body>
+        <div class="flex flex-col items-center space-y-4">
+          <span class="text-center text-secondaryLight">
+            {{ t("environment.import_or_create") }}
+          </span>
+          <div class="flex flex-col items-stretch gap-4">
+            <HoppButtonPrimary
+              :icon="IconImport"
+              :label="t('import.title')"
+              filled
+              outline
+              @click="displayModalImportExport(true)"
+            />
+            <HoppButtonSecondary
+              :icon="IconPlus"
+              :label="`${t('add.new')}`"
+              filled
+              outline
+              @click="displayModalAdd(true)"
+            />
+          </div>
         </div>
-      </div>
+      </template>
     </HoppSmartPlaceholder>
     <EnvironmentsMyDetails
       :show="showModalDetails"
diff --git a/packages/hoppscotch-common/src/components/environments/teams/Details.vue b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
index 2f15917ed..d54d18034 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -81,18 +81,20 @@
             :alt="`${t('empty.environments')}`"
             :text="t('empty.environments')"
           >
-            <HoppButtonSecondary
-              v-if="isViewer"
-              disabled
-              :label="`${t('add.new')}`"
-              filled
-            />
-            <HoppButtonSecondary
-              v-else
-              :label="`${t('add.new')}`"
-              filled
-              @click="addEnvironmentVariable"
-            />
+            <template #body>
+              <HoppButtonSecondary
+                v-if="isViewer"
+                disabled
+                :label="`${t('add.new')}`"
+                filled
+              />
+              <HoppButtonSecondary
+                v-else
+                :label="`${t('add.new')}`"
+                filled
+                @click="addEnvironmentVariable"
+              />
+            </template>
           </HoppSmartPlaceholder>
         </div>
       </div>
diff --git a/packages/hoppscotch-common/src/components/environments/teams/index.vue b/packages/hoppscotch-common/src/components/environments/teams/index.vue
index c5429ef13..e1f161a84 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -49,31 +49,33 @@
       :alt="`${t('empty.environments')}`"
       :text="t('empty.environments')"
     >
-      <div class="flex flex-col items-center space-y-4">
-        <span class="text-center text-secondaryLight">
-          {{ t("environment.import_or_create") }}
-        </span>
-        <div class="flex flex-col items-stretch gap-4">
-          <HoppButtonPrimary
-            :icon="IconImport"
-            :label="t('import.title')"
-            filled
-            outline
-            :title="isTeamViewer ? t('team.no_access') : ''"
-            :disabled="isTeamViewer"
-            @click="isTeamViewer ? null : displayModalImportExport(true)"
-          />
-          <HoppButtonSecondary
-            :label="`${t('add.new')}`"
-            filled
-            outline
-            :icon="IconPlus"
-            :title="isTeamViewer ? t('team.no_access') : ''"
-            :disabled="isTeamViewer"
-            @click="isTeamViewer ? null : displayModalAdd(true)"
-          />
+      <template #body>
+        <div class="flex flex-col items-center space-y-4">
+          <span class="text-center text-secondaryLight">
+            {{ t("environment.import_or_create") }}
+          </span>
+          <div class="flex flex-col items-stretch gap-4">
+            <HoppButtonPrimary
+              :icon="IconImport"
+              :label="t('import.title')"
+              filled
+              outline
+              :title="isTeamViewer ? t('team.no_access') : ''"
+              :disabled="isTeamViewer"
+              @click="isTeamViewer ? null : displayModalImportExport(true)"
+            />
+            <HoppButtonSecondary
+              :label="`${t('add.new')}`"
+              filled
+              outline
+              :icon="IconPlus"
+              :title="isTeamViewer ? t('team.no_access') : ''"
+              :disabled="isTeamViewer"
+              @click="isTeamViewer ? null : displayModalAdd(true)"
+            />
+          </div>
         </div>
-      </div>
+      </template>
     </HoppSmartPlaceholder>
     <div v-else-if="!loading">
       <EnvironmentsTeamsEnvironment
diff --git a/packages/hoppscotch-common/src/components/graphql/Authorization.vue b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
index 810366c86..49a857cbb 100644
--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
@@ -120,14 +120,16 @@
       :alt="`${t('empty.authorization')}`"
       :text="t('empty.authorization')"
     >
-      <HoppButtonSecondary
-        outline
-        :label="t('app.documentation')"
-        to="https://docs.hoppscotch.io/documentation/features/authorization"
-        blank
-        :icon="IconExternalLink"
-        reverse
-      />
+      <template #body>
+        <HoppButtonSecondary
+          outline
+          :label="t('app.documentation')"
+          to="https://docs.hoppscotch.io/documentation/features/authorization"
+          blank
+          :icon="IconExternalLink"
+          reverse
+        />
+      </template>
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">
diff --git a/packages/hoppscotch-common/src/components/graphql/Headers.vue b/packages/hoppscotch-common/src/components/graphql/Headers.vue
index 8be85436e..b808a086f 100644
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -162,12 +162,14 @@
       :alt="`${t('empty.headers')}`"
       :text="t('empty.headers')"
     >
-      <HoppButtonSecondary
-        :label="`${t('add.new')}`"
-        filled
-        :icon="IconPlus"
-        @click="addHeader"
-      />
+      <template #body>
+        <HoppButtonSecondary
+          :label="`${t('add.new')}`"
+          filled
+          :icon="IconPlus"
+          @click="addHeader"
+        />
+      </template>
     </HoppSmartPlaceholder>
   </div>
 </template>
diff --git a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
index 4c0f90830..5c1a9094d 100644
--- a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
@@ -20,8 +20,7 @@
         :src="`/images/states/${colorMode.value}/add_comment.svg`"
         :alt="`${t('empty.documentation')}`"
         :text="t('empty.documentation')"
-      >
-      </HoppSmartPlaceholder>
+      />
       <div v-else>
         <div
           class="sticky top-0 z-10 flex flex-shrink-0 overflow-x-auto bg-primary"
diff --git a/packages/hoppscotch-common/src/components/history/index.vue b/packages/hoppscotch-common/src/components/history/index.vue
index de67e5976..483d1423c 100644
--- a/packages/hoppscotch-common/src/components/history/index.vue
+++ b/packages/hoppscotch-common/src/components/history/index.vue
@@ -114,8 +114,7 @@
       :src="`/images/states/${colorMode.value}/history.svg`"
       :alt="`${t('empty.history')}`"
       :text="t('empty.history')"
-    >
-    </HoppSmartPlaceholder>
+    />
     <HoppSmartPlaceholder
       v-else-if="
         Object.keys(filteredHistoryGroups).length === 0 ||
@@ -124,18 +123,20 @@
       :text="`${t('state.nothing_found')} ‟${filterText || filterSelection}”`"
     >
       <template #icon>
-        <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+        <icon-lucide-search class="svg-icons opacity-75" />
+      </template>
+      <template #body>
+        <HoppButtonSecondary
+          :label="t('action.clear')"
+          outline
+          @click="
+            () => {
+              filterText = ''
+              filterSelection = 'ALL'
+            }
+          "
+        />
       </template>
-      <HoppButtonSecondary
-        :label="t('action.clear')"
-        outline
-        @click="
-          () => {
-            filterText = ''
-            filterSelection = 'ALL'
-          }
-        "
-      />
     </HoppSmartPlaceholder>
     <HoppSmartConfirmModal
       :show="confirmRemove"
diff --git a/packages/hoppscotch-common/src/components/http/Authorization.vue b/packages/hoppscotch-common/src/components/http/Authorization.vue
index d9f393783..191d1b7e5 100644
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@@ -119,14 +119,16 @@
       :alt="`${t('empty.authorization')}`"
       :text="t('empty.authorization')"
     >
-      <HoppButtonSecondary
-        outline
-        :label="t('app.documentation')"
-        to="https://docs.hoppscotch.io/documentation/features/authorization"
-        blank
-        :icon="IconExternalLink"
-        reverse
-      />
+      <template #body>
+        <HoppButtonSecondary
+          outline
+          :label="t('app.documentation')"
+          to="https://docs.hoppscotch.io/documentation/features/authorization"
+          blank
+          :icon="IconExternalLink"
+          reverse
+        />
+      </template>
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">
diff --git a/packages/hoppscotch-common/src/components/http/Body.vue b/packages/hoppscotch-common/src/components/http/Body.vue
index 8662ad430..75c15ca95 100644
--- a/packages/hoppscotch-common/src/components/http/Body.vue
+++ b/packages/hoppscotch-common/src/components/http/Body.vue
@@ -112,14 +112,16 @@
       :alt="`${t('empty.body')}`"
       :text="t('empty.body')"
     >
-      <HoppButtonSecondary
-        outline
-        :label="`${t('app.documentation')}`"
-        to="https://docs.hoppscotch.io/documentation/getting-started/rest/uploading-data"
-        blank
-        :icon="IconExternalLink"
-        reverse
-      />
+      <template #body>
+        <HoppButtonSecondary
+          outline
+          :label="`${t('app.documentation')}`"
+          to="https://docs.hoppscotch.io/documentation/getting-started/rest/uploading-data"
+          blank
+          :icon="IconExternalLink"
+          reverse
+        />
+      </template>
     </HoppSmartPlaceholder>
   </div>
 </template>
diff --git a/packages/hoppscotch-common/src/components/http/BodyParameters.vue b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
index b898e304c..c8f13c4b1 100644
--- a/packages/hoppscotch-common/src/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
@@ -158,12 +158,14 @@
       :alt="`${t('empty.body')}`"
       :text="t('empty.body')"
     >
-      <HoppButtonSecondary
-        :label="`${t('add.new')}`"
-        filled
-        :icon="IconPlus"
-        @click="addBodyParam"
-      />
+      <template #body>
+        <HoppButtonSecondary
+          :label="`${t('add.new')}`"
+          filled
+          :icon="IconPlus"
+          @click="addBodyParam"
+        />
+      </template>
     </HoppSmartPlaceholder>
   </div>
 </template>
diff --git a/packages/hoppscotch-common/src/components/http/CodegenModal.vue b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
index 7c488bd40..a793dbef1 100644
--- a/packages/hoppscotch-common/src/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
@@ -61,7 +61,7 @@
                   :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
                 >
                   <template #icon>
-                    <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+                    <icon-lucide-search class="svg-icons opacity-75" />
                   </template>
                 </HoppSmartPlaceholder>
               </div>
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index 6b92a2ea1..c2978e1a5 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -209,12 +209,14 @@
         :alt="`${t('empty.headers')}`"
         :text="t('empty.headers')"
       >
-        <HoppButtonSecondary
-          filled
-          :label="`${t('add.new')}`"
-          :icon="IconPlus"
-          @click="addHeader"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            filled
+            :label="`${t('add.new')}`"
+            :icon="IconPlus"
+            @click="addHeader"
+          />
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>
diff --git a/packages/hoppscotch-common/src/components/http/Parameters.vue b/packages/hoppscotch-common/src/components/http/Parameters.vue
index 6f7dab60e..3c9179440 100644
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -157,12 +157,14 @@
         :alt="`${t('empty.parameters')}`"
         :text="t('empty.parameters')"
       >
-        <HoppButtonSecondary
-          :label="`${t('add.new')}`"
-          :icon="IconPlus"
-          filled
-          @click="addParam"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            :label="`${t('add.new')}`"
+            :icon="IconPlus"
+            filled
+            @click="addParam"
+          />
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>
diff --git a/packages/hoppscotch-common/src/components/http/ResponseMeta.vue b/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
index a2501563f..4c3e0a325 100644
--- a/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
@@ -37,7 +37,9 @@
         :text="t('helpers.network_fail')"
         large
       >
-        <AppInterceptor class="rounded border border-dividerLight p-2" />
+        <template #body>
+          <AppInterceptor class="rounded border border-dividerLight p-2" />
+        </template>
       </HoppSmartPlaceholder>
       <HoppSmartPlaceholder
         v-if="response.type === 'script_fail'"
@@ -47,12 +49,14 @@
         :text="t('helpers.script_fail')"
         large
       >
-        <div
-          class="mt-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
-        >
-          {{ response.error.name }}: {{ response.error.message }}<br />
-          {{ response.error.stack }}
-        </div>
+        <template #body>
+          <div
+            class="mt-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
+          >
+            {{ response.error.name }}: {{ response.error.message }}<br />
+            {{ response.error.stack }}
+          </div>
+        </template>
       </HoppSmartPlaceholder>
       <div
         v-if="response.type === 'success' || response.type === 'fail'"
diff --git a/packages/hoppscotch-common/src/components/http/TestResult.vue b/packages/hoppscotch-common/src/components/http/TestResult.vue
index 93daccb95..24b491bc3 100644
--- a/packages/hoppscotch-common/src/components/http/TestResult.vue
+++ b/packages/hoppscotch-common/src/components/http/TestResult.vue
@@ -159,8 +159,7 @@
       :alt="`${t('error.test_script_fail')}`"
       :heading="t('error.test_script_fail')"
       :text="t('helpers.test_script_fail')"
-    >
-    </HoppSmartPlaceholder>
+    />
     <HoppSmartPlaceholder
       v-else
       :src="`/images/states/${colorMode.value}/validation.svg`"
@@ -168,15 +167,16 @@
       :heading="t('empty.tests')"
       :text="t('helpers.tests')"
     >
-      <HoppButtonSecondary
-        outline
-        :label="`${t('action.learn_more')}`"
-        to="https://docs.hoppscotch.io/documentation/getting-started/rest/tests"
-        blank
-        :icon="IconExternalLink"
-        reverse
-        class="my-4"
-      />
+      <template #body>
+        <HoppButtonSecondary
+          outline
+          :label="`${t('action.learn_more')}`"
+          to="https://docs.hoppscotch.io/documentation/getting-started/rest/tests"
+          blank
+          :icon="IconExternalLink"
+          reverse
+        />
+      </template>
     </HoppSmartPlaceholder>
     <EnvironmentsMyDetails
       :show="showMyEnvironmentDetailsModal"
diff --git a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
index 14ca424e4..ee6d4844d 100644
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -149,12 +149,14 @@
         :alt="`${t('empty.body')}`"
         :text="t('empty.body')"
       >
-        <HoppButtonSecondary
-          filled
-          :label="`${t('add.new')}`"
-          :icon="IconPlus"
-          @click="addUrlEncodedParam"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            filled
+            :label="`${t('add.new')}`"
+            :icon="IconPlus"
+            @click="addUrlEncodedParam"
+          />
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>
diff --git a/packages/hoppscotch-common/src/components/interceptors/ErrorPlaceholder.vue b/packages/hoppscotch-common/src/components/interceptors/ErrorPlaceholder.vue
index 2a850a6f3..d28e6c8e9 100644
--- a/packages/hoppscotch-common/src/components/interceptors/ErrorPlaceholder.vue
+++ b/packages/hoppscotch-common/src/components/interceptors/ErrorPlaceholder.vue
@@ -5,55 +5,57 @@
     :heading="t('error.network_fail')"
     large
   >
-    <div class="my-1 flex flex-col items-center text-secondaryLight">
-      <span>
-        {{ t("error.please_install_extension") }}
-      </span>
-      <span>
-        {{ t("error.check_how_to_add_origin") }}
-        <HoppSmartLink
-          blank
-          to="https://docs.hoppscotch.io/documentation/features/interceptor#browser-extension"
-          class="text-accent hover:text-accentDark"
-        >
-          here
-        </HoppSmartLink>
-      </span>
-    </div>
-    <div class="flex flex-col space-y-2 py-4">
-      <span>
-        <HoppSmartItem
-          to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
-          blank
-          :icon="IconChrome"
-          label="Chrome"
-          :info-icon="hasChromeExtInstalled ? IconCheckCircle : null"
-          :active-info-icon="hasChromeExtInstalled"
-          outline
-        />
-      </span>
-      <span>
-        <HoppSmartItem
-          to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-          blank
-          :icon="IconFirefox"
-          label="Firefox"
-          :info-icon="hasFirefoxExtInstalled ? IconCheckCircle : null"
-          :active-info-icon="hasFirefoxExtInstalled"
-          outline
-        />
-      </span>
-    </div>
-    <div class="space-y-4 py-4">
-      <div class="flex items-center">
-        <HoppSmartToggle
-          :on="extensionEnabled"
-          @change="extensionEnabled = !extensionEnabled"
-        >
-          {{ t("settings.extensions_use_toggle") }}
-        </HoppSmartToggle>
+    <template #body>
+      <div class="my-1 flex flex-col items-center text-secondaryLight">
+        <span>
+          {{ t("error.please_install_extension") }}
+        </span>
+        <span>
+          {{ t("error.check_how_to_add_origin") }}
+          <HoppSmartLink
+            blank
+            to="https://docs.hoppscotch.io/documentation/features/interceptor#browser-extension"
+            class="text-accent hover:text-accentDark"
+          >
+            here
+          </HoppSmartLink>
+        </span>
       </div>
-    </div>
+      <div class="flex flex-col space-y-2 py-4">
+        <span>
+          <HoppSmartItem
+            to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+            blank
+            :icon="IconChrome"
+            label="Chrome"
+            :info-icon="hasChromeExtInstalled ? IconCheckCircle : null"
+            :active-info-icon="hasChromeExtInstalled"
+            outline
+          />
+        </span>
+        <span>
+          <HoppSmartItem
+            to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+            blank
+            :icon="IconFirefox"
+            label="Firefox"
+            :info-icon="hasFirefoxExtInstalled ? IconCheckCircle : null"
+            :active-info-icon="hasFirefoxExtInstalled"
+            outline
+          />
+        </span>
+      </div>
+      <div class="space-y-4 py-4">
+        <div class="flex items-center">
+          <HoppSmartToggle
+            :on="extensionEnabled"
+            @change="extensionEnabled = !extensionEnabled"
+          >
+            {{ t("settings.extensions_use_toggle") }}
+          </HoppSmartToggle>
+        </div>
+      </div>
+    </template>
   </HoppSmartPlaceholder>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/share/index.vue b/packages/hoppscotch-common/src/components/share/index.vue
index 496817490..38fed740d 100644
--- a/packages/hoppscotch-common/src/components/share/index.vue
+++ b/packages/hoppscotch-common/src/components/share/index.vue
@@ -32,10 +32,12 @@
         :alt="`${t('empty.shared_requests_logout')}`"
         :text="`${t('empty.shared_requests_logout')}`"
       >
-        <HoppButtonPrimary
-          :label="t('auth.login')"
-          @click="invokeAction('modals.login.toggle')"
-        />
+        <template #body>
+          <HoppButtonPrimary
+            :label="t('auth.login')"
+            @click="invokeAction('modals.login.toggle')"
+          />
+        </template>
       </HoppSmartPlaceholder>
 
       <template v-else-if="sharedRequests.length">
diff --git a/packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue b/packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue
index 1922da447..e6b893daa 100644
--- a/packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue
+++ b/packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue
@@ -60,7 +60,7 @@
               :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
             >
               <template #icon>
-                <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+                <icon-lucide-search class="svg-icons opacity-75" />
               </template>
             </HoppSmartPlaceholder>
           </div>
diff --git a/packages/hoppscotch-common/src/components/teams/Edit.vue b/packages/hoppscotch-common/src/components/teams/Edit.vue
index dda42cf4a..c2b8b4746 100644
--- a/packages/hoppscotch-common/src/components/teams/Edit.vue
+++ b/packages/hoppscotch-common/src/components/teams/Edit.vue
@@ -45,15 +45,17 @@
             :alt="`${t('empty.members')}`"
             :text="t('empty.members')"
           >
-            <HoppButtonSecondary
-              :icon="IconUserPlus"
-              :label="t('team.invite')"
-              @click="
-                () => {
-                  emit('invite-team')
-                }
-              "
-            />
+            <template #body>
+              <HoppButtonSecondary
+                :icon="IconUserPlus"
+                :label="t('team.invite')"
+                @click="
+                  () => {
+                    emit('invite-team')
+                  }
+                "
+              />
+            </template>
           </HoppSmartPlaceholder>
           <div v-else class="divide-y divide-dividerLight">
             <div
diff --git a/packages/hoppscotch-common/src/components/teams/Invite.vue b/packages/hoppscotch-common/src/components/teams/Invite.vue
index 6feaed7c4..96ade485a 100644
--- a/packages/hoppscotch-common/src/components/teams/Invite.vue
+++ b/packages/hoppscotch-common/src/components/teams/Invite.vue
@@ -125,8 +125,7 @@
                 pendingInvites.data.right.team?.teamInvitations.length === 0
               "
               :text="t('empty.pending_invites')"
-            >
-            </HoppSmartPlaceholder>
+            />
             <div
               v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
               class="flex flex-col items-center p-4"
@@ -245,11 +244,13 @@
             :alt="`${t('empty.invites')}`"
             :text="`${t('empty.invites')}`"
           >
-            <HoppButtonSecondary
-              :label="t('add.new')"
-              filled
-              @click="addNewInvitee"
-            />
+            <template #body>
+              <HoppButtonSecondary
+                :label="t('add.new')"
+                filled
+                @click="addNewInvitee"
+              />
+            </template>
           </HoppSmartPlaceholder>
         </div>
         <div
diff --git a/packages/hoppscotch-common/src/components/teams/index.vue b/packages/hoppscotch-common/src/components/teams/index.vue
index 556908bcb..2c3972ec5 100644
--- a/packages/hoppscotch-common/src/components/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/teams/index.vue
@@ -16,11 +16,13 @@
         :alt="`${t('empty.teams')}`"
         :text="`${t('empty.teams')}`"
       >
-        <HoppButtonSecondary
-          :label="`${t('team.create_new')}`"
-          filled
-          @click="displayModalAdd(true)"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            :label="`${t('team.create_new')}`"
+            filled
+            @click="displayModalAdd(true)"
+          />
+        </template>
       </HoppSmartPlaceholder>
       <div
         v-else-if="!loading"
diff --git a/packages/hoppscotch-common/src/components/workspace/Selector.vue b/packages/hoppscotch-common/src/components/workspace/Selector.vue
index b9d455f82..24fc1ec03 100644
--- a/packages/hoppscotch-common/src/components/workspace/Selector.vue
+++ b/packages/hoppscotch-common/src/components/workspace/Selector.vue
@@ -21,13 +21,15 @@
         :alt="`${t('empty.teams')}`"
         :text="`${t('empty.teams')}`"
       >
-        <HoppButtonSecondary
-          :label="t('team.create_new')"
-          filled
-          outline
-          :icon="IconPlus"
-          @click="displayModalAdd(true)"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            :label="t('team.create_new')"
+            filled
+            outline
+            :icon="IconPlus"
+            @click="displayModalAdd(true)"
+          />
+        </template>
       </HoppSmartPlaceholder>
       <div v-else-if="!loading" class="flex flex-col">
         <div
diff --git a/packages/hoppscotch-common/src/pages/profile.vue b/packages/hoppscotch-common/src/pages/profile.vue
index 5a0589e97..acd2c240b 100644
--- a/packages/hoppscotch-common/src/pages/profile.vue
+++ b/packages/hoppscotch-common/src/pages/profile.vue
@@ -14,10 +14,12 @@
           :alt="`${t('empty.profile')}`"
           :text="`${t('empty.profile')}`"
         >
-          <HoppButtonPrimary
-            :label="t('auth.login')"
-            @click="invokeAction('modals.login.toggle')"
-          />
+          <template #body>
+            <HoppButtonPrimary
+              :label="t('auth.login')"
+              @click="invokeAction('modals.login.toggle')"
+            />
+          </template>
         </HoppSmartPlaceholder>
         <div v-else class="space-y-8">
           <div
diff --git a/packages/hoppscotch-common/src/pages/realtime/mqtt.vue b/packages/hoppscotch-common/src/pages/realtime/mqtt.vue
index e426dc7ae..001d968ea 100644
--- a/packages/hoppscotch-common/src/pages/realtime/mqtt.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/mqtt.vue
@@ -142,12 +142,14 @@
         :alt="`${t('empty.subscription')}`"
         :text="`${t('empty.subscription')}`"
       >
-        <HoppButtonSecondary
-          :label="t('mqtt.new')"
-          filled
-          outline
-          @click="showSubscriptionModal(true)"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            :label="t('mqtt.new')"
+            filled
+            outline
+            @click="showSubscriptionModal(true)"
+          />
+        </template>
       </HoppSmartPlaceholder>
       <div v-else>
         <div
diff --git a/packages/hoppscotch-common/src/pages/realtime/socketio.vue b/packages/hoppscotch-common/src/pages/realtime/socketio.vue
index 4bb496a33..1c758248d 100644
--- a/packages/hoppscotch-common/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/socketio.vue
@@ -197,14 +197,16 @@
             :alt="`${t('socketio.connection_not_authorized')}`"
             :text="`${t('socketio.connection_not_authorized')}`"
           >
-            <HoppButtonSecondary
-              outline
-              :label="t('app.documentation')"
-              to="https://docs.hoppscotch.io/documentation/features/authorization"
-              blank
-              :icon="IconExternalLink"
-              reverse
-            />
+            <template #body>
+              <HoppButtonSecondary
+                outline
+                :label="t('app.documentation')"
+                to="https://docs.hoppscotch.io/documentation/features/authorization"
+                blank
+                :icon="IconExternalLink"
+                reverse
+              />
+            </template>
           </HoppSmartPlaceholder>
           <div
             v-if="authType === 'Bearer'"
diff --git a/packages/hoppscotch-common/src/pages/realtime/websocket.vue b/packages/hoppscotch-common/src/pages/realtime/websocket.vue
index 3486ae393..21fd6956d 100644
--- a/packages/hoppscotch-common/src/pages/realtime/websocket.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/websocket.vue
@@ -163,8 +163,7 @@
             :src="`/images/states/${colorMode.value}/add_category.svg`"
             :alt="`${t('empty.protocols')}`"
             :text="`${t('empty.protocols')}`"
-          >
-          </HoppSmartPlaceholder>
+          />
         </HoppSmartTab>
       </HoppSmartTabs>
     </template>
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/Invite.vue b/packages/hoppscotch-sh-admin/src/components/teams/Invite.vue
index 287d6da89..088e71cad 100644
--- a/packages/hoppscotch-sh-admin/src/components/teams/Invite.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Invite.vue
@@ -117,7 +117,13 @@
             alt="No invites"
             text="No invites"
           >
-            <HoppButtonSecondary label="Add new" filled @click="addNewMember" />
+            <template #body>
+              <HoppButtonSecondary
+                label="Add new"
+                filled
+                @click="addNewMember"
+              />
+            </template>
           </HoppSmartPlaceholder>
         </div>
         <div
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/Members.vue b/packages/hoppscotch-sh-admin/src/components/teams/Members.vue
index 222904a6f..5a3033074 100644
--- a/packages/hoppscotch-sh-admin/src/components/teams/Members.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Members.vue
@@ -15,15 +15,17 @@
           v-if="team?.teamMembers?.length === 0"
           text="No members in this team. Add members to this team to collaborate"
         >
-          <HoppButtonSecondary
-            :icon="IconUserPlus"
-            :label="t('teams.add_members')"
-            @click="
-              () => {
-                showInvite = !showInvite;
-              }
-            "
-          />
+          <template #body>
+            <HoppButtonSecondary
+              :icon="IconUserPlus"
+              :label="t('teams.add_members')"
+              @click="
+                () => {
+                  showInvite = !showInvite;
+                }
+              "
+            />
+          </template>
         </HoppSmartPlaceholder>
         <div v-else class="divide-y divide-dividerLight">
           <div
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue b/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue
index df757d1e1..16b532a28 100644
--- a/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue
@@ -41,10 +41,12 @@
         v-if="team && pendingInvites?.length === 0"
         text="No pending invites"
       >
-        <div v-if="!fetching && error" class="flex flex-col items-center p-4">
-          <icon-lucide-help-circle class="mb-4 svg-icons" />
-          Something went wrong. Please try again later.
-        </div>
+        <template #body>
+          <div v-if="!fetching && error" class="flex flex-col items-center p-4">
+            <icon-lucide-help-circle class="mb-4 svg-icons" />
+            {{ t('error.something_went_wrong') }}
+          </div>
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>
diff --git a/packages/hoppscotch-ui/src/components/smart/Placeholder.vue b/packages/hoppscotch-ui/src/components/smart/Placeholder.vue
index 20a14d0b4..a302ff349 100644
--- a/packages/hoppscotch-ui/src/components/smart/Placeholder.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Placeholder.vue
@@ -4,24 +4,31 @@
       v-if="src"
       :src="src"
       loading="lazy"
-      class="inline-flex flex-col object-contain object-center mb-4"
+      class="inline-flex flex-col object-contain object-center"
       :class="large ? 'w-32 h-32' : 'w-16 h-16'"
       :alt="alt"
     />
-    <slot name="icon"></slot>
-    <span v-if="heading" class="mb-2 font-semibold text-center">
+    <div v-if="hasIcon">
+      <slot name="icon"></slot>
+    </div>
+    <span v-if="heading" class="font-semibold mt-2 text-center">
       {{ heading }}
     </span>
     <span
-      class="max-w-sm mb-4 text-center whitespace-normal text-secondaryLight"
+      v-if="text"
+      class="max-w-sm mt-2 text-center whitespace-normal text-secondaryLight text-tiny"
     >
       {{ text }}
     </span>
-    <slot></slot>
+    <div v-if="hasBody" class="mt-4">
+      <slot name="body"></slot>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from "vue"
+
 withDefaults(
   defineProps<{
     src?: string
@@ -35,4 +42,14 @@ withDefaults(
     text: "",
   }
 )
+
+const slots = useSlots()
+
+const hasIcon = computed(() => {
+  return !!slots.icon
+})
+
+const hasBody = computed(() => {
+  return !!slots.body
+})
 </script>