diff --git a/app/Http/Controllers/BlogController.php b/app/Http/Controllers/BlogController.php
index 78dc382..1df4fd2 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')
+            ->with(['user:id,name,username', 'user.roles:id,name'])
             ->withCount(['reactions', 'comments'])
             ->where('is_published', true);
 
@@ -56,13 +56,13 @@ public function show(Blog $blog)
     {
         abort_unless($blog->is_published, 404);
 
-        $blog->load('user:id,name,username,image_path');
+        $blog->load(['user:id,name,username,image_path', 'user.roles:id,name']);
         $blog->increment('views');
 
         $reactionsCount = $blog->reactions()->count();
 
         $reactors = $blog->reactions()
-            ->with('user:id,name,username,image_path,institution')
+            ->with(['user:id,name,username,image_path,institution', 'user.roles:id,name'])
             ->latest('id')
             ->limit(50)
             ->get()
@@ -71,7 +71,7 @@ public function show(Blog $blog)
             ->values();
 
         $comments = $blog->comments()
-            ->with('user:id,name,username,image_path,institution')
+            ->with(['user:id,name,username,image_path,institution', 'user.roles:id,name'])
             ->latest()
             ->get();
 
@@ -131,7 +131,7 @@ public function storeComment(Request $request, Blog $blog)
             'content' => trim($validated['content']),
         ]);
 
-        $comment->load('user:id,name,username,image_path,institution');
+        $comment->load(['user:id,name,username,image_path,institution', 'user.roles:id,name']);
         $blog->loadMissing('user:id,name,email,receive_emails');
 
         if ($blog->user && $blog->user_id !== $userId && $blog->user->email && $blog->user->receive_emails !== false) {
diff --git a/app/Http/Controllers/ResourceController.php b/app/Http/Controllers/ResourceController.php
index 91c1f5c..656bc35 100644
--- a/app/Http/Controllers/ResourceController.php
+++ b/app/Http/Controllers/ResourceController.php
@@ -38,7 +38,7 @@ public function show($id)
         $completionsCount = ResourceCompletion::where('resource_id', $id)->count();
 
         $completers = ResourceCompletion::where('resource_id', $id)
-            ->with('user:id,name,username,image_path,institution')
+            ->with(['user:id,name,username,image_path,institution', 'user.roles:id,name'])
             ->latest()
             ->take(10)
             ->get()
diff --git a/app/Http/Controllers/UserProfileController.php b/app/Http/Controllers/UserProfileController.php
index 5f6968f..987ca59 100644
--- a/app/Http/Controllers/UserProfileController.php
+++ b/app/Http/Controllers/UserProfileController.php
@@ -94,6 +94,29 @@ public function show(string $username)
             ])
             ->filter(fn ($item) => $item['title'] !== null);
 
+        // Suggested / Discover community members: 2 contributors + 2 general users
+        $contributorUsers = User::where('id', '!=', $user->id)
+            ->whereNotNull('username')
+            ->whereHas('roles')
+            ->select(['id', 'name', 'username', 'title', 'institution', 'image_path', 'about'])
+            ->with('roles:id,name')
+            ->inRandomOrder()
+            ->take(2)
+            ->get();
+
+        $excludedIds = $contributorUsers->pluck('id')->push($user->id)->all();
+        $remainingNeeded = 4 - $contributorUsers->count();
+
+        $randomUsers = User::whereNotIn('id', $excludedIds)
+            ->whereNotNull('username')
+            ->select(['id', 'name', 'username', 'title', 'institution', 'image_path', 'about'])
+            ->with('roles:id,name')
+            ->inRandomOrder()
+            ->take($remainingNeeded)
+            ->get();
+
+        $suggestedUsers = $contributorUsers->concat($randomUsers)->shuffle()->values();
+
         return Inertia::render('User/Show', [
             'profileUser' => [
                 'id' => $user->id,
@@ -125,6 +148,7 @@ public function show(string $username)
                 'reactions' => $recentReactions->values(),
                 'comments' => $recentComments->values(),
             ],
+            'suggestedUsers' => $suggestedUsers,
         ]);
     }
 }
diff --git a/app/Models/User.php b/app/Models/User.php
index 3417c47..1f02793 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -51,6 +51,7 @@ class User extends Authenticatable
         'instagram',
         'github',
     ];
+
     protected static function booted(): void
     {
         static::created(function (User $user) {
diff --git a/resources/js/components/BlogCard.vue b/resources/js/components/BlogCard.vue
index 50e58c0..3fa5bc7 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 } from 'lucide-vue-next';
+import { ArrowRight, Heart, MessageSquare, BadgeCheck } from 'lucide-vue-next';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -59,15 +59,25 @@ const formattedDate = computed(() => {
                 <Link
                     v-if="blog.user?.username"
                     :href="`/u/${blog.user.username}`"
-                    class="font-medium text-indigo-600 underline transition-colors hover:underline dark:text-indigo-400"
+                    class="inline-flex items-center gap-1 font-medium text-indigo-600 underline transition-colors hover:underline dark:text-indigo-400"
                 >
-                    {{ blog.user?.name }}
+                    <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"
+                    />
                 </Link>
                 <span
                     v-else
-                    class="font-medium text-slate-700 dark:text-gray-300"
+                    class="inline-flex items-center gap-1 font-medium text-slate-700 dark:text-gray-300"
                 >
-                    {{ blog.user?.name }}
+                    <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"
+                    />
                 </span>
 
                 <span
diff --git a/resources/js/components/UserCard.vue b/resources/js/components/UserCard.vue
index 5fe6274..9fb21ef 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 } from 'lucide-vue-next';
+import { GraduationCap, ArrowRight, BadgeCheck } from 'lucide-vue-next';
 import { computed } from 'vue';
 
 const props = defineProps<{
@@ -81,12 +81,23 @@ const roleInfo = computed(() => {
 
             <!-- Name, Handle & Role -->
             <div class="space-y-1">
-                <Link
-                    :href="profileUrl"
-                    class="text-lg font-black tracking-tight text-slate-900 hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
-                >
-                    {{ member.name }}
-                </Link>
+                <div class="flex items-center justify-center gap-1.5">
+                    <Link
+                        :href="profileUrl"
+                        class="text-lg font-black tracking-tight text-slate-900 hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
+                    >
+                        {{ 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 -->
                 <div class="flex items-center justify-center pt-0.5">
diff --git a/resources/js/components/UserListItem.vue b/resources/js/components/UserListItem.vue
new file mode 100644
index 0000000..0954ac8
--- /dev/null
+++ b/resources/js/components/UserListItem.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { BadgeCheck } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+const props = withDefaults(
+    defineProps<{
+        user: {
+            id?: number;
+            name: string;
+            username?: string;
+            image_url?: string | null;
+            image_path?: string | null;
+            institution?: string | null;
+            title?: string | null;
+            roles?: Array<{ id?: number; name: string }>;
+        };
+        theme?: 'indigo' | 'emerald' | 'rose';
+        subtitle?: string | null;
+    }>(),
+    {
+        theme: 'indigo',
+        subtitle: null,
+    },
+);
+
+const profileUrl = computed(() => {
+    return props.user.username ? `/u/${props.user.username}` : '#';
+});
+
+const isVerified = computed(() => {
+    return Boolean(props.user.roles && props.user.roles.length > 0);
+});
+
+const avatarBgClass = computed(() => {
+    if (props.theme === 'rose') {
+        return 'bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-300 group-hover/user:ring-rose-400';
+    }
+
+    if (props.theme === 'emerald') {
+        return 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-300 group-hover/user:ring-emerald-400';
+    }
+
+    return 'bg-indigo-50 text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-300 group-hover/user:ring-indigo-400';
+});
+</script>
+
+<template>
+    <Link
+        :href="profileUrl"
+        class="group/user flex items-center gap-3 py-2.5 transition"
+    >
+        <div
+            class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold transition group-hover/user:ring-2"
+            :class="avatarBgClass"
+        >
+            <img
+                v-if="user.image_url || user.image_path"
+                :src="user.image_url || '/storage/' + user.image_path"
+                :alt="user.name"
+                class="h-full w-full object-cover"
+            />
+            <span v-else class="text-xs uppercase">
+                {{ user.name?.charAt(0) || 'U' }}
+            </span>
+        </div>
+        <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-1">
+                <p
+                    class="truncate text-xs font-semibold text-slate-900 group-hover/user:text-indigo-600 dark:text-gray-100 dark:group-hover/user:text-indigo-400"
+                >
+                    {{ user.name }}
+                </p>
+                <BadgeCheck
+                    v-if="isVerified"
+                    class="h-3.5 w-3.5 shrink-0 fill-blue-50 stroke-[2.2] text-blue-600 dark:fill-blue-950/60 dark:text-blue-400"
+                    title="Verified Contributor"
+                />
+            </div>
+            <p
+                v-if="subtitle || user.institution || user.title"
+                class="truncate text-[11px] text-slate-500 dark:text-gray-400"
+            >
+                {{ subtitle || user.institution || user.title }}
+            </p>
+        </div>
+    </Link>
+</template>
diff --git a/resources/js/pages/Blog/Show.vue b/resources/js/pages/Blog/Show.vue
index 589bf68..bb5077d 100644
--- a/resources/js/pages/Blog/Show.vue
+++ b/resources/js/pages/Blog/Show.vue
@@ -14,8 +14,10 @@ import {
     LogIn,
     X,
     Loader2,
+    BadgeCheck,
 } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
+import UserListItem from '@/components/UserListItem.vue';
 
 const props = defineProps({
     blog: {
@@ -275,9 +277,16 @@ const goBack = () => {
                                 ? `/u/${blog.user.username}`
                                 : '#'
                         "
-                        class="font-medium text-indigo-600 transition-colors hover:text-indigo-800 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
+                        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"
                     >
-                        {{ blog.user?.name }}
+                        <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"
+                        />
                     </Link>
                 </div>
 
@@ -622,16 +631,28 @@ const goBack = () => {
                             </Link>
 
                             <div class="min-w-0">
-                                <div class="flex flex-wrap items-center gap-2">
+                                <div
+                                    class="flex flex-wrap items-center gap-1.5"
+                                >
                                     <Link
                                         :href="
                                             comment.user?.username
                                                 ? `/u/${comment.user.username}`
                                                 : '#'
                                         "
-                                        class="text-sm font-bold text-slate-900 transition hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
+                                        class="inline-flex items-center gap-1 text-sm font-bold text-slate-900 transition hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
                                     >
-                                        {{ comment.user?.name || 'Anonymous' }}
+                                        <span>{{
+                                            comment.user?.name || 'Anonymous'
+                                        }}</span>
+                                        <BadgeCheck
+                                            v-if="
+                                                comment.user?.roles &&
+                                                comment.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"
+                                        />
                                     </Link>
                                     <span
                                         v-if="comment.user_id === blog.user_id"
@@ -699,9 +720,16 @@ const goBack = () => {
                                 ? `/u/${blog.user.username}`
                                 : '#'
                         "
-                        class="mt-1 block text-lg font-semibold text-slate-900 underline transition dark:text-gray-100"
+                        class="mt-1 inline-flex items-center gap-1.5 text-lg font-semibold text-slate-900 underline transition dark:text-gray-100"
                     >
-                        {{ blog.user?.name }}
+                        <span>{{ blog.user?.name }}</span>
+                        <BadgeCheck
+                            v-if="
+                                blog.user?.roles && blog.user.roles.length > 0
+                            "
+                            class="h-4.5 w-4.5 fill-blue-50 stroke-[2.2] text-blue-600 dark:fill-blue-950/60 dark:text-blue-400"
+                            title="Verified Contributor"
+                        />
                     </Link>
 
                     <Link
@@ -763,48 +791,12 @@ const goBack = () => {
                             No reactions yet.
                         </div>
 
-                        <Link
+                        <UserListItem
                             v-for="reactor in reactors"
                             :key="reactor.id"
-                            :href="
-                                reactor.username
-                                    ? `/u/${reactor.username}`
-                                    : '#'
-                            "
-                            class="group/user flex items-center gap-3 py-2.5 transition"
-                        >
-                            <div
-                                class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-rose-50 font-semibold text-rose-600 transition group-hover/user:ring-2 group-hover/user:ring-rose-400 dark:bg-rose-950/60 dark:text-rose-300"
-                            >
-                                <img
-                                    v-if="
-                                        reactor.image_url || reactor.image_path
-                                    "
-                                    :src="
-                                        reactor.image_url ||
-                                        '/storage/' + reactor.image_path
-                                    "
-                                    :alt="reactor.name"
-                                    class="h-full w-full object-cover"
-                                />
-                                <span v-else class="text-xs uppercase">
-                                    {{ reactor.name?.charAt(0) || 'U' }}
-                                </span>
-                            </div>
-                            <div class="min-w-0 flex-1">
-                                <p
-                                    class="truncate text-xs font-semibold text-slate-900 group-hover/user:text-indigo-600 dark:text-gray-100 dark:group-hover/user:text-indigo-400"
-                                >
-                                    {{ reactor.name }}
-                                </p>
-                                <p
-                                    v-if="reactor.institution"
-                                    class="truncate text-[11px] text-slate-500 dark:text-gray-400"
-                                >
-                                    {{ reactor.institution }}
-                                </p>
-                            </div>
-                        </Link>
+                            :user="reactor"
+                            theme="rose"
+                        />
 
                         <div
                             v-if="localReactionsCount > reactors.length"
diff --git a/resources/js/pages/Resource.vue b/resources/js/pages/Resource.vue
index 7e310fb..e7b20d8 100644
--- a/resources/js/pages/Resource.vue
+++ b/resources/js/pages/Resource.vue
@@ -16,6 +16,7 @@ import {
     CheckCircle2,
 } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
+import UserListItem from '@/components/UserListItem.vue';
 import YouTubePlayer from '../components/YouTubePlayer.vue';
 
 const props = defineProps({
@@ -806,49 +807,12 @@ watch(isFullscreen, (val) => {
                             No completions recorded yet.
                         </div>
 
-                        <Link
+                        <UserListItem
                             v-for="completer in localCompleters"
                             :key="completer.id"
-                            :href="
-                                completer.username
-                                    ? `/u/${completer.username}`
-                                    : '#'
-                            "
-                            class="group/user flex items-center gap-3 py-2.5 transition"
-                        >
-                            <div
-                                class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-emerald-50 font-semibold text-emerald-700 transition group-hover/user:ring-2 group-hover/user:ring-emerald-400 dark:bg-emerald-950/60 dark:text-emerald-300"
-                            >
-                                <img
-                                    v-if="
-                                        completer.image_url ||
-                                        completer.image_path
-                                    "
-                                    :src="
-                                        completer.image_url ||
-                                        '/storage/' + completer.image_path
-                                    "
-                                    :alt="completer.name"
-                                    class="h-full w-full object-cover"
-                                />
-                                <span v-else class="text-xs uppercase">
-                                    {{ completer.name?.charAt(0) || 'U' }}
-                                </span>
-                            </div>
-                            <div class="min-w-0 flex-1">
-                                <p
-                                    class="truncate text-xs font-semibold text-slate-900 group-hover/user:text-indigo-600 dark:text-gray-100 dark:group-hover/user:text-indigo-400"
-                                >
-                                    {{ completer.name }}
-                                </p>
-                                <p
-                                    v-if="completer.institution"
-                                    class="truncate text-[11px] text-slate-500 dark:text-gray-400"
-                                >
-                                    {{ completer.institution }}
-                                </p>
-                            </div>
-                        </Link>
+                            :user="completer"
+                            theme="emerald"
+                        />
 
                         <div
                             v-if="
diff --git a/resources/js/pages/User/Show.vue b/resources/js/pages/User/Show.vue
index 8bccd1e..0aaa472 100644
--- a/resources/js/pages/User/Show.vue
+++ b/resources/js/pages/User/Show.vue
@@ -18,6 +18,7 @@ import {
     UploadCloud,
     Activity,
     ArrowUpRight,
+    Users,
 } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
 
@@ -98,6 +99,17 @@ const props = defineProps<{
             created_at: string;
         }>;
     };
+    suggestedUsers?: Array<{
+        id: number;
+        name: string;
+        username: string;
+        title: string | null;
+        institution: string | null;
+        image_url: string | null;
+        image_path: string | null;
+        about: string | null;
+        roles?: Array<{ id: number; name: string }>;
+    }>;
 }>();
 
 const page = usePage();
@@ -156,7 +168,53 @@ const totalActivitiesCount = computed(
     <Head :title="`${profileUser.name} (@${profileUser.username})`">
         <meta
             name="description"
-            :content="`${profileUser.name}'s profile on HSCStack.`"
+            :content="
+                [profileUser.title, profileUser.institution, profileUser.about]
+                    .filter(Boolean)
+                    .slice(0, 2)
+                    .join(' · ') ||
+                `View ${profileUser.name}'s profile, completed study topics, and contributions on HSCStack.`
+            "
+        />
+        <meta
+            property="og:title"
+            :content="`${profileUser.name} (@${profileUser.username})`"
+        />
+        <meta
+            property="og:description"
+            :content="
+                [profileUser.title, profileUser.institution, profileUser.about]
+                    .filter(Boolean)
+                    .slice(0, 2)
+                    .join(' · ') ||
+                `View ${profileUser.name}'s profile, completed study topics, and contributions on HSCStack.`
+            "
+        />
+        <meta property="og:type" content="profile" />
+        <meta
+            v-if="profileUser.image_url"
+            property="og:image"
+            :content="profileUser.image_url"
+        />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta
+            name="twitter:title"
+            :content="`${profileUser.name} (@${profileUser.username})`"
+        />
+        <meta
+            name="twitter:description"
+            :content="
+                [profileUser.title, profileUser.institution, profileUser.about]
+                    .filter(Boolean)
+                    .slice(0, 2)
+                    .join(' · ') ||
+                `View ${profileUser.name}'s profile, completed study topics, and contributions on HSCStack.`
+            "
+        />
+        <meta
+            v-if="profileUser.image_url"
+            name="twitter:image"
+            :content="profileUser.image_url"
         />
     </Head>
 
@@ -760,6 +818,94 @@ const totalActivitiesCount = computed(
                     </div>
                 </div>
             </div>
+
+            <!-- Suggested / Discover Other Learners & Contributors -->
+            <div
+                v-if="suggestedUsers && suggestedUsers.length > 0"
+                class="space-y-3 pt-2"
+            >
+                <div class="flex items-center justify-between px-1">
+                    <div
+                        class="flex items-center gap-1.5 text-xs font-bold text-slate-700 dark:text-gray-300"
+                    >
+                        <Users
+                            class="h-3.5 w-3.5 text-indigo-600 dark:text-indigo-400"
+                        />
+                        <span>Discover People</span>
+                    </div>
+                    <Link
+                        href="/about-us"
+                        class="text-[11px] font-semibold text-indigo-600 hover:text-indigo-700 dark:text-indigo-400"
+                    >
+                        Meet team →
+                    </Link>
+                </div>
+
+                <div class="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
+                    <Link
+                        v-for="person in suggestedUsers"
+                        :key="person.id"
+                        :href="`/u/${person.username}`"
+                        class="group flex items-center justify-between rounded-xl border border-slate-200/80 bg-white p-3 shadow-xs transition hover:border-indigo-300 hover:bg-slate-50/70 sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900 dark:hover:border-indigo-900/60 dark:hover:bg-gray-800/50"
+                    >
+                        <div class="flex min-w-0 items-center gap-3">
+                            <div
+                                class="h-10 w-10 shrink-0 overflow-hidden rounded-xl bg-indigo-50 shadow-2xs ring-2 ring-slate-100 sm:h-11 sm:w-11 dark:bg-indigo-950/60 dark:ring-gray-800"
+                            >
+                                <img
+                                    v-if="person.image_url"
+                                    :src="person.image_url"
+                                    :alt="person.name"
+                                    class="h-full w-full object-cover"
+                                />
+                                <div
+                                    v-else
+                                    class="flex h-full w-full items-center justify-center bg-gradient-to-br from-indigo-500 to-indigo-600 text-sm font-black text-white"
+                                >
+                                    {{ person.name.charAt(0).toUpperCase() }}
+                                </div>
+                            </div>
+                            <div class="min-w-0 flex-1 space-y-0.5">
+                                <div class="flex items-center gap-1.5">
+                                    <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>
+                                    <span
+                                        v-if="
+                                            person.roles &&
+                                            person.roles.length > 0
+                                        "
+                                        class="inline-flex items-center text-blue-600 dark:text-blue-400"
+                                        title="Verified HSCStack Contributor"
+                                    >
+                                        <BadgeCheck
+                                            class="h-3.5 w-3.5 fill-blue-50 stroke-[2.2] dark:fill-blue-950/60"
+                                        />
+                                    </span>
+                                </div>
+                                <p
+                                    v-if="person.title || person.institution"
+                                    class="truncate text-[10px] font-medium text-slate-400 dark:text-gray-500"
+                                >
+                                    {{ person.title || person.institution }}
+                                </p>
+                                <p
+                                    v-else
+                                    class="truncate text-[10px] font-semibold text-slate-400 dark:text-gray-500"
+                                >
+                                    @{{ person.username }}
+                                </p>
+                            </div>
+                        </div>
+
+                        <ArrowUpRight
+                            class="h-3.5 w-3.5 shrink-0 text-slate-400 opacity-0 transition group-hover:opacity-100 dark:text-gray-500"
+                        />
+                    </Link>
+                </div>
+            </div>
         </div>
     </div>
 </template>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 9b9ab66..c20e3b0 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -28,6 +28,24 @@
         $ogImage = data_get($blog, 'featured_image') ?: url('/feature.png');
         $ogType = 'article';
         $ogUrl = data_get($blog, 'slug') ? url('/blogs/' . data_get($blog, 'slug')) : url()->current();
+    } elseif ($pageComponent === 'User/Show' && !empty($props['profileUser'])) {
+        $profileUser = $props['profileUser'];
+        $userName = data_get($profileUser, 'name');
+        $userHandle = data_get($profileUser, 'username');
+        $userTitle = data_get($profileUser, 'title');
+        $userInstitution = data_get($profileUser, 'institution');
+        $userAbout = data_get($profileUser, 'about');
+
+        $metaTitle = "{$userName} (@{$userHandle}) - " . config('app.name', 'HSCStack');
+        $ogTitle = "{$userName} (@{$userHandle})";
+        
+        $descParts = array_filter([$userTitle, $userInstitution, $userAbout]);
+        $metaDescription = !empty($descParts) 
+            ? implode(' · ', array_slice($descParts, 0, 2)) 
+            : "View {$userName}'s profile, completed study topics, and contributions on HSCStack.";
+        $ogImage = data_get($profileUser, 'image_url') ?: url('/feature.png');
+        $ogType = 'profile';
+        $ogUrl = $userHandle ? url('/u/' . $userHandle) : url()->current();
     } elseif ($pageComponent === 'Node' && (!empty($props['breadcrumb']) || !empty($props['subject']))) {
         $crumbs = $props['breadcrumb'] ?? [];
         $lastCrumb = is_array($crumbs) && count($crumbs) ? end($crumbs) : null;
diff --git a/tests/Feature/UserProfileTest.php b/tests/Feature/UserProfileTest.php
index b2e5c91..478fd23 100644
--- a/tests/Feature/UserProfileTest.php
+++ b/tests/Feature/UserProfileTest.php
@@ -18,11 +18,15 @@
     $response = $this->get('/u/tajim_pro');
 
     $response->assertOk();
+    $response->assertSee('<meta property="og:title" content="Tajim Ahmed (@tajim_pro)">', false);
+    $response->assertSee('<meta property="og:type" content="profile">', false);
+    $response->assertSee('<meta property="og:url" content="'.url('/u/tajim_pro').'">', false);
     $response->assertInertia(fn ($page) => $page
         ->component('User/Show')
         ->where('profileUser.username', 'tajim_pro')
         ->where('profileUser.name', 'Tajim Ahmed')
         ->where('profileUser.institution', 'Notre Dame College')
+        ->has('suggestedUsers')
     );
 });
 
@@ -95,3 +99,26 @@
         ->has('recentActivities.completions', 1)
     );
 });
+
+test('public profile includes both contributors and random users in suggestions', function () {
+    $role = Role::firstOrCreate(['name' => 'editor']);
+
+    $mainUser = User::factory()->create(['username' => 'current_user']);
+
+    $contributor1 = User::factory()->create(['username' => 'contrib_1']);
+    $contributor1->assignRole($role);
+
+    $contributor2 = User::factory()->create(['username' => 'contrib_2']);
+    $contributor2->assignRole($role);
+
+    $student1 = User::factory()->create(['username' => 'student_1']);
+    $student2 = User::factory()->create(['username' => 'student_2']);
+
+    $response = $this->get('/u/current_user');
+
+    $response->assertOk();
+    $response->assertInertia(fn ($page) => $page
+        ->component('User/Show')
+        ->has('suggestedUsers', 4)
+    );
+});