diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts
index 659b1871d1..063d9fd7f8 100644
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -84,6 +84,7 @@ declare module '@vue/runtime-core' {
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
     HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
     HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
     HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
     HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
@@ -164,6 +165,7 @@ declare module '@vue/runtime-core' {
     SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
     SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default']
     SmartModal: typeof import('./../../hoppscotch-ui/src/components/smart/Modal.vue')['default']
+    SmartPicture: typeof import('./../../hoppscotch-ui/src/components/smart/Picture.vue')['default']
     SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default']
     SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default']
     SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default']
diff --git a/packages/hoppscotch-common/src/components/app/Header.vue b/packages/hoppscotch-common/src/components/app/Header.vue
index 3df45f7aa4..ceb683d3fa 100644
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/packages/hoppscotch-common/src/components/app/Header.vue
@@ -124,7 +124,7 @@
               theme="popover"
               :on-shown="() => tippyActions.focus()"
             >
-              <ProfilePicture
+              <HoppSmartPicture
                 v-if="currentUser.photoURL"
                 v-tippy="{
                   theme: 'tooltip',
@@ -144,7 +144,7 @@
                   network.isOnline ? 'bg-green-500' : 'bg-red-500'
                 "
               />
-              <ProfilePicture
+              <HoppSmartPicture
                 v-else
                 v-tippy="{ theme: 'tooltip' }"
                 :title="
diff --git a/packages/hoppscotch-common/src/components/profile/Picture.vue b/packages/hoppscotch-common/src/components/profile/Picture.vue
deleted file mode 100644
index a9eaf68ba4..0000000000
--- a/packages/hoppscotch-common/src/components/profile/Picture.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <button
-    tabindex="0"
-    class="relative flex items-center justify-center overflow-visible cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primaryDark"
-    :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
-  >
-    <img
-      v-if="url"
-      class="absolute object-cover object-center transition bg-primaryDark"
-      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
-      :src="url"
-      :alt="alt"
-      loading="lazy"
-    />
-    <div
-      v-else
-      class="absolute flex items-center justify-center object-cover object-center transition bg-primaryDark text-accentContrast"
-      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
-      :style="`background-color: ${initial ? toHex(initial) : '#480000'}`"
-    >
-      <template v-if="initial && initial.charAt(0).toUpperCase()">
-        {{ initial.charAt(0).toUpperCase() }}
-      </template>
-
-      <icon-lucide-user v-else></icon-lucide-user>
-    </div>
-    <span
-      v-if="indicator"
-      class="border-primary border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
-      :class="[`rounded-${rounded}`, indicatorStyles]"
-    ></span>
-    <!-- w-5 h-5 rounded-lg -->
-  </button>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
-export default defineComponent({
-  props: {
-    url: {
-      type: String,
-      default: "",
-    },
-    alt: {
-      type: String,
-      default: "Profile picture",
-    },
-    indicator: {
-      type: Boolean,
-      default: false,
-    },
-    indicatorStyles: {
-      type: String,
-      default: "bg-green-500",
-    },
-    rounded: {
-      type: String,
-      default: "full",
-    },
-    size: {
-      type: String,
-      default: "5",
-    },
-    initial: {
-      type: String as PropType<string | undefined | null>,
-      default: "",
-    },
-  },
-  methods: {
-    toHex(initial: string) {
-      let hash = 0
-      if (initial.length === 0) return hash
-      for (let i = 0; i < initial.length; i++) {
-        hash = initial.charCodeAt(i) + ((hash << 5) - hash)
-        hash = hash & hash
-      }
-      let color = "#"
-      for (let i = 0; i < 3; i++) {
-        const value = (hash >> (i * 8)) & 255
-        color += `00${value.toString(16)}`.slice(-2)
-      }
-      return color
-    },
-  },
-})
-</script>
diff --git a/packages/hoppscotch-common/src/components/teams/MemberStack.vue b/packages/hoppscotch-common/src/components/teams/MemberStack.vue
index 8b305ba436..cb22f4f7bc 100644
--- a/packages/hoppscotch-common/src/components/teams/MemberStack.vue
+++ b/packages/hoppscotch-common/src/components/teams/MemberStack.vue
@@ -5,7 +5,7 @@
       :key="`member-${index}`"
       class="inline-flex"
     >
-      <ProfilePicture
+      <HoppSmartPicture
         v-if="member.user.photoURL"
         v-tippy="{ theme: 'tooltip' }"
         :url="member.user.photoURL"
@@ -14,7 +14,7 @@
         class="ring-primary ring-2"
         @click="handleClick()"
       />
-      <ProfilePicture
+      <HoppSmartPicture
         v-else
         v-tippy="{ theme: 'tooltip' }"
         :title="getUserName(member)"
diff --git a/packages/hoppscotch-common/src/pages/profile.vue b/packages/hoppscotch-common/src/pages/profile.vue
index ec21d4df93..dab559980c 100644
--- a/packages/hoppscotch-common/src/pages/profile.vue
+++ b/packages/hoppscotch-common/src/pages/profile.vue
@@ -34,7 +34,7 @@
           ></div>
           <div class="flex flex-col justify-between px-4 space-y-8 md:flex-row">
             <div class="flex items-end">
-              <ProfilePicture
+              <HoppSmartPicture
                 v-if="currentUser.photoURL"
                 :url="currentUser.photoURL"
                 :alt="
@@ -44,7 +44,7 @@
                 size="16"
                 rounded="lg"
               />
-              <ProfilePicture
+              <HoppSmartPicture
                 v-else
                 :initial="currentUser.displayName || currentUser.email"
                 rounded="lg"
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Header.vue b/packages/hoppscotch-sh-admin/src/components/app/Header.vue
index 8e1c9113c2..8d42cdb4f2 100644
--- a/packages/hoppscotch-sh-admin/src/components/app/Header.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Header.vue
@@ -28,7 +28,7 @@
           arrow
           :on-shown="() => tippyActions!.focus()"
         >
-          <ProfilePicture
+          <HoppSmartPicture
             v-if="currentUser.photoURL"
             v-tippy="{
               theme: 'tooltip',
@@ -37,7 +37,7 @@
             :alt="currentUser.displayName ?? 'No Name'"
             :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
           />
-          <ProfilePicture
+          <HoppSmartPicture
             v-else
             v-tippy="{ theme: 'tooltip' }"
             :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
diff --git a/packages/hoppscotch-sh-admin/src/components/profile/Picture.vue b/packages/hoppscotch-ui/src/components/smart/Picture.vue
similarity index 52%
rename from packages/hoppscotch-sh-admin/src/components/profile/Picture.vue
rename to packages/hoppscotch-ui/src/components/smart/Picture.vue
index 13797a8804..e82c22f578 100644
--- a/packages/hoppscotch-sh-admin/src/components/profile/Picture.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Picture.vue
@@ -33,55 +33,40 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    url: string
+    alt: string
+    indicator: boolean
+    indicatorStyles: string
+    rounded: string
+    size: string
+    initial: string | undefined | null
+  }>(),
+  {
+    url: "",
+    alt: "Profile picture",
+    indicator: false,
+    indicatorStyles: "bg-green-500",
+    rounded: "full",
+    size: "5",
+    initial: "",
+  }
+)
 
-export default defineComponent({
-  props: {
-    url: {
-      type: String,
-      default: '',
-    },
-    alt: {
-      type: String,
-      default: 'Profile picture',
-    },
-    indicator: {
-      type: Boolean,
-      default: false,
-    },
-    indicatorStyles: {
-      type: String,
-      default: 'bg-green-500',
-    },
-    rounded: {
-      type: String,
-      default: 'full',
-    },
-    size: {
-      type: String,
-      default: '5',
-    },
-    initial: {
-      type: String as PropType<string | undefined | null>,
-      default: '',
-    },
-  },
-  methods: {
-    toHex(initial: string) {
-      let hash = 0;
-      if (initial.length === 0) return hash;
-      for (let i = 0; i < initial.length; i++) {
-        hash = initial.charCodeAt(i) + ((hash << 5) - hash);
-        hash = hash & hash;
-      }
-      let color = '#';
-      for (let i = 0; i < 3; i++) {
-        const value = (hash >> (i * 8)) & 255;
-        color += `00${value.toString(16)}`.slice(-2);
-      }
-      return color;
-    },
-  },
-});
+const toHex = (initial: string) => {
+  let hash = 0
+  if (initial.length === 0) return hash
+  for (let i = 0; i < initial.length; i++) {
+    hash = initial.charCodeAt(i) + ((hash << 5) - hash)
+    hash = hash & hash
+  }
+  let color = "#"
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 255
+    color += `00${value.toString(16)}`.slice(-2)
+  }
+  return color
+}
 </script>
diff --git a/packages/hoppscotch-ui/src/components/smart/index.ts b/packages/hoppscotch-ui/src/components/smart/index.ts
index d7f291c7c3..ad176f54f1 100644
--- a/packages/hoppscotch-ui/src/components/smart/index.ts
+++ b/packages/hoppscotch-ui/src/components/smart/index.ts
@@ -18,3 +18,4 @@ export { default as HoppSmartTabs } from "./Tabs.vue"
 export { default as HoppSmartToggle } from "./Toggle.vue"
 export { default as HoppSmartWindow } from "./Window.vue"
 export { default as HoppSmartWindows } from "./Windows.vue"
+export { default as HoppSmartPicture } from "./Picture.vue"