diff --git a/app/Http/Controllers/BlogController.php b/app/Http/Controllers/BlogController.php
index 1df4fd2..88e3e51 100644
--- a/app/Http/Controllers/BlogController.php
+++ b/app/Http/Controllers/BlogController.php
@@ -25,7 +25,7 @@ public function index(Request $request)
                 'views',
                 'created_at',
             ])
-            ->with(['user:id,name,username', 'user.roles:id,name'])
+            ->with('user:id,name,username')
             ->withCount(['reactions', 'comments'])
             ->where('is_published', true);
 
@@ -56,7 +56,7 @@ public function show(Blog $blog)
     {
         abort_unless($blog->is_published, 404);
 
-        $blog->load(['user:id,name,username,image_path', 'user.roles:id,name']);
+        $blog->load('user:id,name,username,image_path');
         $blog->increment('views');
 
         $reactionsCount = $blog->reactions()->count();
diff --git a/app/Http/Controllers/UserProfileController.php b/app/Http/Controllers/UserProfileController.php
index dcb7b21..4a9d859 100644
--- a/app/Http/Controllers/UserProfileController.php
+++ b/app/Http/Controllers/UserProfileController.php
@@ -51,14 +51,14 @@ public function show(string $username)
             : false;
 
         $appreciators = $user->appreciators()
-            ->select(['users.id', 'users.name', 'users.username', 'users.image_path', 'users.institution'])
+            ->select(['users.id', 'users.name', 'users.username', 'users.image_path', 'users.institution', 'users.title'])
             ->with('roles:id,name')
             ->latest('user_appreciations.id')
             ->take(50)
             ->get();
 
         $appreciating = $user->appreciatingUsers()
-            ->select(['users.id', 'users.name', 'users.username', 'users.image_path', 'users.institution'])
+            ->select(['users.id', 'users.name', 'users.username', 'users.image_path', 'users.institution', 'users.title'])
             ->with('roles:id,name')
             ->latest('user_appreciations.id')
             ->take(50)
diff --git a/resources/js/components/BlogCard.vue b/resources/js/components/BlogCard.vue
index 3fa5bc7..50e58c0 100644
--- a/resources/js/components/BlogCard.vue
+++ b/resources/js/components/BlogCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { ArrowRight, Heart, MessageSquare, BadgeCheck } from 'lucide-vue-next';
+import { ArrowRight, Heart, MessageSquare } from 'lucide-vue-next';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -59,25 +59,15 @@ const formattedDate = computed(() => {
                 <Link
                     v-if="blog.user?.username"
                     :href="`/u/${blog.user.username}`"
-                    class="inline-flex items-center gap-1 font-medium text-indigo-600 underline transition-colors hover:underline dark:text-indigo-400"
+                    class="font-medium text-indigo-600 underline transition-colors hover:underline dark:text-indigo-400"
                 >
-                    <span>{{ blog.user?.name }}</span>
-                    <BadgeCheck
-                        v-if="blog.user?.roles && blog.user.roles.length > 0"
-                        class="h-3.5 w-3.5 fill-blue-50 stroke-[2.2] text-blue-600 dark:fill-blue-950/60 dark:text-blue-400"
-                        title="Verified Contributor"
-                    />
+                    {{ blog.user?.name }}
                 </Link>
                 <span
                     v-else
-                    class="inline-flex items-center gap-1 font-medium text-slate-700 dark:text-gray-300"
+                    class="font-medium text-slate-700 dark:text-gray-300"
                 >
-                    <span>{{ blog.user?.name }}</span>
-                    <BadgeCheck
-                        v-if="blog.user?.roles && blog.user.roles.length > 0"
-                        class="h-3.5 w-3.5 fill-blue-50 stroke-[2.2] text-blue-600 dark:fill-blue-950/60 dark:text-blue-400"
-                        title="Verified Contributor"
-                    />
+                    {{ blog.user?.name }}
                 </span>
 
                 <span
diff --git a/resources/js/components/UserCard.vue b/resources/js/components/UserCard.vue
index 9fb21ef..f0c0b9c 100644
--- a/resources/js/components/UserCard.vue
+++ b/resources/js/components/UserCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { GraduationCap, ArrowRight, BadgeCheck } from 'lucide-vue-next';
+import { GraduationCap, ArrowRight } from 'lucide-vue-next';
 import { computed } from 'vue';
 
 const props = defineProps<{
@@ -88,15 +88,6 @@ const roleInfo = computed(() => {
                     >
                         {{ member.name }}
                     </Link>
-                    <span
-                        v-if="member.roles && member.roles.length > 0"
-                        class="inline-flex items-center text-blue-600 dark:text-blue-400"
-                        title="Verified HSCStack Contributor"
-                    >
-                        <BadgeCheck
-                            class="h-4.5 w-4.5 fill-blue-50 stroke-[2.2] dark:fill-blue-950/60"
-                        />
-                    </span>
                 </div>
 
                 <!-- Role Pill -->
diff --git a/resources/js/pages/Blog/Show.vue b/resources/js/pages/Blog/Show.vue
index bb5077d..3c91ae1 100644
--- a/resources/js/pages/Blog/Show.vue
+++ b/resources/js/pages/Blog/Show.vue
@@ -277,16 +277,9 @@ const goBack = () => {
                                 ? `/u/${blog.user.username}`
                                 : '#'
                         "
-                        class="inline-flex items-center gap-1 font-medium text-indigo-600 transition-colors hover:text-indigo-800 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
+                        class="font-medium text-indigo-600 transition-colors hover:text-indigo-800 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
                     >
-                        <span>{{ blog.user?.name }}</span>
-                        <BadgeCheck
-                            v-if="
-                                blog.user?.roles && blog.user.roles.length > 0
-                            "
-                            class="h-4 w-4 fill-blue-50 stroke-[2.2] text-blue-600 dark:fill-blue-950/60 dark:text-blue-400"
-                            title="Verified Contributor"
-                        />
+                        {{ blog.user?.name }}
                     </Link>
                 </div>
 
diff --git a/resources/js/pages/User/Show.vue b/resources/js/pages/User/Show.vue
index 530fde9..d5ac4fe 100644
--- a/resources/js/pages/User/Show.vue
+++ b/resources/js/pages/User/Show.vue
@@ -23,6 +23,7 @@ import {
     Users,
     X,
 } from 'lucide-vue-next';
+import UserListItem from '@/components/UserListItem.vue';
 import { computed, ref, watch } from 'vue';
 
 const props = defineProps<{
@@ -359,17 +360,6 @@ const totalActivitiesCount = computed(
                                     {{ profileUser.name }}
                                 </h1>
 
-                                <!-- Verified Staff Badge -->
-                                <span
-                                    v-if="profileUser.is_staff"
-                                    class="inline-flex items-center text-blue-600 dark:text-blue-400"
-                                    title="Verified HSCStack Staff / Contributor"
-                                >
-                                    <BadgeCheck
-                                        class="h-4.5 w-4.5 fill-blue-50 stroke-[2.2] sm:h-5 sm:w-5 dark:fill-blue-950/60"
-                                    />
-                                </span>
-
                                 <!-- Role Pill -->
                                 <span
                                     class="inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-bold"
@@ -1220,53 +1210,15 @@ const totalActivitiesCount = computed(
 
                 <div
                     v-if="appreciators && appreciators.length > 0"
-                    class="max-h-72 space-y-2 overflow-y-auto pr-1"
+                    class="-mx-1 max-h-72 divide-y divide-slate-100 overflow-y-auto px-1 dark:divide-gray-800/80"
                 >
-                    <Link
+                    <UserListItem
                         v-for="person in appreciators"
                         :key="person.id"
-                        :href="`/u/${person.username}`"
+                        :user="person"
+                        theme="rose"
                         @click="showAppreciatorsModal = false"
-                        class="group flex items-center justify-between rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-gray-800/60"
-                    >
-                        <div class="flex min-w-0 items-center gap-2.5">
-                            <div
-                                class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-indigo-50 text-xs font-black text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
-                            >
-                                <img
-                                    v-if="person.image_path"
-                                    :src="'/storage/' + person.image_path"
-                                    :alt="person.name"
-                                    class="h-full w-full object-cover"
-                                />
-                                <span v-else>{{
-                                    person.name.charAt(0).toUpperCase()
-                                }}</span>
-                            </div>
-                            <div class="min-w-0 flex-1">
-                                <p
-                                    class="truncate text-xs font-bold text-slate-900 group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
-                                >
-                                    {{ person.name }}
-                                </p>
-                                <p
-                                    class="truncate text-[10px] text-slate-400 dark:text-gray-500"
-                                >
-                                    {{
-                                        person.institution ||
-                                        '@' + person.username
-                                    }}
-                                </p>
-                            </div>
-                        </div>
-
-                        <span
-                            v-if="person.roles && person.roles.length > 0"
-                            class="rounded-md bg-indigo-50 px-1.5 py-0.5 text-[9px] font-bold text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-400"
-                        >
-                            {{ person.roles[0].name }}
-                        </span>
-                    </Link>
+                    />
                 </div>
 
                 <div
@@ -1323,53 +1275,15 @@ const totalActivitiesCount = computed(
 
                 <div
                     v-if="appreciating && appreciating.length > 0"
-                    class="max-h-72 space-y-2 overflow-y-auto pr-1"
+                    class="-mx-1 max-h-72 divide-y divide-slate-100 overflow-y-auto px-1 dark:divide-gray-800/80"
                 >
-                    <Link
+                    <UserListItem
                         v-for="person in appreciating"
                         :key="person.id"
-                        :href="`/u/${person.username}`"
+                        :user="person"
+                        theme="indigo"
                         @click="showAppreciatingModal = false"
-                        class="group flex items-center justify-between rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-gray-800/60"
-                    >
-                        <div class="flex min-w-0 items-center gap-2.5">
-                            <div
-                                class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-indigo-50 text-xs font-black text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
-                            >
-                                <img
-                                    v-if="person.image_path"
-                                    :src="'/storage/' + person.image_path"
-                                    :alt="person.name"
-                                    class="h-full w-full object-cover"
-                                />
-                                <span v-else>{{
-                                    person.name.charAt(0).toUpperCase()
-                                }}</span>
-                            </div>
-                            <div class="min-w-0 flex-1">
-                                <p
-                                    class="truncate text-xs font-bold text-slate-900 group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
-                                >
-                                    {{ person.name }}
-                                </p>
-                                <p
-                                    class="truncate text-[10px] text-slate-400 dark:text-gray-500"
-                                >
-                                    {{
-                                        person.institution ||
-                                        '@' + person.username
-                                    }}
-                                </p>
-                            </div>
-                        </div>
-
-                        <span
-                            v-if="person.roles && person.roles.length > 0"
-                            class="rounded-md bg-indigo-50 px-1.5 py-0.5 text-[9px] font-bold text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-400"
-                        >
-                            {{ person.roles[0].name }}
-                        </span>
-                    </Link>
+                    />
                 </div>
 
                 <div