diff --git a/app/Http/Controllers/UserProfileController.php b/app/Http/Controllers/UserProfileController.php
index 5cc2931..dcb7b21 100644
--- a/app/Http/Controllers/UserProfileController.php
+++ b/app/Http/Controllers/UserProfileController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Mail\UserAppreciationMail;
 use App\Models\BlogComment;
 use App\Models\BlogReaction;
 use App\Models\Node;
@@ -9,6 +10,8 @@
 use App\Models\Resource;
 use App\Models\ResourceCompletion;
 use App\Models\User;
+use App\Models\UserAppreciation;
+use Illuminate\Support\Facades\Mail;
 use Inertia\Inertia;
 
 class UserProfileController extends Controller
@@ -40,7 +43,28 @@ public function show(string $username)
         $totalBlogLikes = BlogReaction::whereIn('blog_id', $user->blogs()->where('is_published', true)->select('id'))->count();
         $sharedResourcesCount = Resource::where('user_id', $user->id)->count();
 
-        // Recent Community Activities (Uploads, completed topics, comments made, reactions given, upvoted folders)
+        // Appreciations (Received & Given)
+        $appreciationsCount = $user->appreciationsReceived()->count();
+        $appreciatingCount = $user->appreciationsGiven()->count();
+        $isAppreciated = auth()->check()
+            ? $user->appreciationsReceived()->where('appreciator_id', auth()->id())->exists()
+            : false;
+
+        $appreciators = $user->appreciators()
+            ->select(['users.id', 'users.name', 'users.username', 'users.image_path', 'users.institution'])
+            ->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'])
+            ->with('roles:id,name')
+            ->latest('user_appreciations.id')
+            ->take(50)
+            ->get();
+
+        // Recent Community Activities (Uploads, completed topics, comments made, reactions given, upvoted folders, appreciations given)
         $recentUploads = Resource::where('user_id', $user->id)
             ->with(['node:id,name,subject_id', 'node.subject:id,name'])
             ->latest()
@@ -125,6 +149,21 @@ public function show(string $username)
             ->filter()
             ->values();
 
+        $recentAppreciations = UserAppreciation::where('appreciator_id', $user->id)
+            ->with('user:id,name,username')
+            ->latest('id')
+            ->take(4)
+            ->get()
+            ->map(fn ($item) => [
+                'type' => 'appreciation',
+                'title' => $item->user?->name,
+                'username' => $item->user?->username,
+                'url' => $item->user ? "/u/{$item->user->username}" : null,
+                'created_at' => $item->created_at?->diffForHumans(),
+            ])
+            ->filter(fn ($item) => $item['title'] !== null)
+            ->values();
+
         // Suggested / Discover community members: 2 contributors + 2 general users
         $contributorUsers = User::where('id', '!=', $user->id)
             ->whereNotNull('username')
@@ -171,6 +210,11 @@ public function show(string $username)
                 'totalBlogViews' => (int) $totalBlogViews,
                 'sharedResourcesCount' => $sharedResourcesCount,
             ],
+            'appreciationsCount' => $appreciationsCount,
+            'appreciatingCount' => $appreciatingCount,
+            'isAppreciated' => $isAppreciated,
+            'appreciators' => $appreciators,
+            'appreciating' => $appreciating,
             'recentCompletions' => $recentCompletions,
             'blogs' => $publishedBlogs,
             'recentActivities' => [
@@ -179,11 +223,45 @@ public function show(string $username)
                 'reactions' => $recentReactions->values(),
                 'comments' => $recentComments->values(),
                 'upvotes' => $recentUpvotes->values(),
+                'appreciations' => $recentAppreciations->values(),
             ],
             'suggestedUsers' => $suggestedUsers,
         ]);
     }
 
+    public function toggleAppreciate(User $user)
+    {
+        $currentAuthUser = auth()->user();
+
+        // Cannot appreciate own profile
+        if ($currentAuthUser->id === $user->id) {
+            return back();
+        }
+
+        $existing = UserAppreciation::where('user_id', $user->id)
+            ->where('appreciator_id', $currentAuthUser->id)
+            ->first();
+
+        if ($existing) {
+            $existing->delete();
+        } else {
+            UserAppreciation::create([
+                'user_id' => $user->id,
+                'appreciator_id' => $currentAuthUser->id,
+            ]);
+
+            $appreciationsCount = $user->appreciationsReceived()->count();
+            $milestones = [1, 10, 25, 50, 100, 250, 500, 1000];
+            $isMilestone = in_array($appreciationsCount, $milestones, true) || ($appreciationsCount > 1000 && $appreciationsCount % 500 === 0);
+
+            if ($isMilestone && $user->email && $user->receive_emails !== false) {
+                Mail::to($user->email)->queue(UserAppreciationMail::forMilestone($user, $currentAuthUser, $appreciationsCount));
+            }
+        }
+
+        return back();
+    }
+
     private function buildNodeUrl(Node $node): ?string
     {
         if (! $node->subject) {
diff --git a/app/Mail/UserAppreciationMail.php b/app/Mail/UserAppreciationMail.php
new file mode 100644
index 0000000..42af4eb
--- /dev/null
+++ b/app/Mail/UserAppreciationMail.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Mail;
+
+use App\Models\User;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Mail\Mailable;
+use Illuminate\Mail\Mailables\Content;
+use Illuminate\Mail\Mailables\Envelope;
+use Illuminate\Queue\SerializesModels;
+
+class UserAppreciationMail extends Mailable implements ShouldQueue
+{
+    use Queueable, SerializesModels;
+
+    public function __construct(
+        public string $mailSubject,
+        public string $mailContent,
+        public ?string $recipientName = null,
+    ) {}
+
+    public static function forMilestone(User $user, User $appreciator, int $milestoneCount): self
+    {
+        $appUrl = config('app.url', 'https://hscstack.site');
+        $profileUrl = rtrim($appUrl, '/')."/u/{$user->username}";
+        $appreciatorName = htmlspecialchars($appreciator->name, ENT_QUOTES, 'UTF-8');
+        $recipientName = htmlspecialchars($user->name, ENT_QUOTES, 'UTF-8');
+
+        if ($milestoneCount === 1) {
+            $mailSubject = 'Someone appreciated your profile on HSCStack! ❤️';
+            $headline = 'Congratulations! You received your first community appreciation ❤️';
+            $message = "<p><strong>{$appreciatorName}</strong> just appreciated your profile and contributions on <a href=\"{$profileUrl}\" target=\"_blank\"><strong>HSCStack</strong></a>.</p>"
+                .'<p>Your presence and contributions are helping fellow students in the community. Keep up the amazing work!</p>';
+        } else {
+            $mailSubject = "🎉 Milestone: {$milestoneCount} people have appreciated your profile!";
+            $headline = "🎉 Exciting News! {$milestoneCount} Appreciations Milestone reached!";
+            $message = "<p>Your profile on <a href=\"{$profileUrl}\" target=\"_blank\"><strong>HSCStack</strong></a> just reached <strong>{$milestoneCount} community appreciations</strong>, with the latest from <strong>{$appreciatorName}</strong>!</p>"
+                .'<p>Thank you for inspiring and supporting students and contributors across the platform.</p>';
+        }
+
+        $mailContent = "<p style=\"font-size: 16px; font-weight: 700; color: #4f46e5;\">{$headline}</p>"
+            .$message
+            .'<p style="margin-top: 24px;">'
+            ."<a href=\"{$profileUrl}\" target=\"_blank\" style=\"display: inline-block; background-color: #4f46e5; color: #ffffff; padding: 10px 20px; font-weight: 600; text-decoration: none; border-radius: 10px; font-size: 13px;\">"
+            .'View Your Profile &rarr;'
+            .'</a>'
+            .'</p>';
+
+        return new self($mailSubject, $mailContent, $user->name);
+    }
+
+    public function envelope(): Envelope
+    {
+        return new Envelope(
+            subject: $this->mailSubject,
+        );
+    }
+
+    public function content(): Content
+    {
+        return new Content(
+            view: 'emails.bulk_announcement',
+            with: [
+                'mailSubject' => $this->mailSubject,
+                'mailContent' => $this->mailContent,
+                'recipientName' => $this->recipientName,
+                'imageUrl' => null,
+            ],
+        );
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
index ad49b93..bda86bd 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -113,4 +113,24 @@ public function nodes(): HasMany
     {
         return $this->hasMany(Node::class);
     }
+
+    public function appreciationsReceived(): HasMany
+    {
+        return $this->hasMany(UserAppreciation::class, 'user_id');
+    }
+
+    public function appreciationsGiven(): HasMany
+    {
+        return $this->hasMany(UserAppreciation::class, 'appreciator_id');
+    }
+
+    public function appreciators()
+    {
+        return $this->belongsToMany(User::class, 'user_appreciations', 'user_id', 'appreciator_id');
+    }
+
+    public function appreciatingUsers()
+    {
+        return $this->belongsToMany(User::class, 'user_appreciations', 'appreciator_id', 'user_id');
+    }
 }
diff --git a/app/Models/UserAppreciation.php b/app/Models/UserAppreciation.php
new file mode 100644
index 0000000..4d8d2db
--- /dev/null
+++ b/app/Models/UserAppreciation.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class UserAppreciation extends Model
+{
+    protected $fillable = [
+        'user_id',
+        'appreciator_id',
+    ];
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'user_id');
+    }
+
+    public function appreciator(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'appreciator_id');
+    }
+}
diff --git a/database/migrations/2026_08_26_180000_create_user_appreciations_table.php b/database/migrations/2026_08_26_180000_create_user_appreciations_table.php
new file mode 100644
index 0000000..ade8cd2
--- /dev/null
+++ b/database/migrations/2026_08_26_180000_create_user_appreciations_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('user_appreciations', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->constrained('users')->cascadeOnDelete();
+            $table->foreignId('appreciator_id')->constrained('users')->cascadeOnDelete();
+            $table->unique(['user_id', 'appreciator_id']);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('user_appreciations');
+    }
+};
diff --git a/resources/js/pages/Node.vue b/resources/js/pages/Node.vue
index 0e36da7..1e65708 100644
--- a/resources/js/pages/Node.vue
+++ b/resources/js/pages/Node.vue
@@ -119,6 +119,7 @@ const handleVote = (type: 'up' | 'down') => {
     if (previousVote === type) {
         // Toggle off
         localUserVote.value = null;
+
         if (type === 'up') {
             localUpvotesCount.value = Math.max(0, localUpvotesCount.value - 1);
             localUpvoters.value = localUpvoters.value.filter(
@@ -133,8 +134,10 @@ const handleVote = (type: 'up' | 'down') => {
     } else if (previousVote === null) {
         // New vote
         localUserVote.value = type;
+
         if (type === 'up') {
             localUpvotesCount.value += 1;
+
             if (currentUser.value) {
                 localUpvoters.value = [
                     {
@@ -157,12 +160,14 @@ const handleVote = (type: 'up' | 'down') => {
     } else {
         // Switching vote
         localUserVote.value = type;
+
         if (type === 'up') {
             localUpvotesCount.value += 1;
             localDownvotesCount.value = Math.max(
                 0,
                 localDownvotesCount.value - 1,
             );
+
             if (currentUser.value) {
                 localUpvoters.value = [
                     {
diff --git a/resources/js/pages/User/Show.vue b/resources/js/pages/User/Show.vue
index 0ecffc0..530fde9 100644
--- a/resources/js/pages/User/Show.vue
+++ b/resources/js/pages/User/Show.vue
@@ -1,27 +1,29 @@
 <script setup lang="ts">
-import { Head, Link, usePage } from '@inertiajs/vue3';
+import { Head, Link, router, usePage } from '@inertiajs/vue3';
 import {
+    Activity,
+    ArrowBigUp,
+    ArrowRight,
+    ArrowUpRight,
+    BadgeCheck,
+    BookOpen,
     Calendar,
-    GraduationCap,
+    CheckCircle2,
     Edit3,
+    Eye,
     Facebook,
-    Instagram,
+    FileText,
     Github,
-    BadgeCheck,
-    ArrowRight,
+    GraduationCap,
     Heart,
+    Instagram,
+    LogIn,
     MessageSquare,
-    Eye,
-    CheckCircle2,
-    BookOpen,
-    FileText,
     UploadCloud,
-    Activity,
-    ArrowUpRight,
-    ArrowBigUp,
     Users,
+    X,
 } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const props = defineProps<{
     profileUser: {
@@ -46,6 +48,25 @@ const props = defineProps<{
         totalBlogViews: number;
         sharedResourcesCount: number;
     };
+    appreciationsCount: number;
+    appreciatingCount: number;
+    isAppreciated: boolean;
+    appreciators?: Array<{
+        id: number;
+        name: string;
+        username: string;
+        image_path?: string | null;
+        institution?: string | null;
+        roles?: Array<{ id: number; name: string }>;
+    }>;
+    appreciating?: Array<{
+        id: number;
+        name: string;
+        username: string;
+        image_path?: string | null;
+        institution?: string | null;
+        roles?: Array<{ id: number; name: string }>;
+    }>;
     recentCompletions: Array<{
         id: number;
         title: string;
@@ -106,6 +127,13 @@ const props = defineProps<{
             url: string | null;
             created_at: string;
         }>;
+        appreciations?: Array<{
+            type: string;
+            title: string;
+            username?: string;
+            url: string | null;
+            created_at: string;
+        }>;
     };
     suggestedUsers?: Array<{
         id: number;
@@ -134,6 +162,63 @@ const activeTab = ref<'completed' | 'blogs' | 'activity'>(
           : 'completed',
 );
 
+const localIsAppreciated = ref(props.isAppreciated);
+const localAppreciationsCount = ref(props.appreciationsCount);
+const showAppreciatorsModal = ref(false);
+const showAppreciatingModal = ref(false);
+const showGuestModal = ref(false);
+
+watch(
+    () => props.isAppreciated,
+    (val) => {
+        localIsAppreciated.value = val;
+    },
+);
+
+watch(
+    () => props.appreciationsCount,
+    (val) => {
+        localAppreciationsCount.value = val;
+    },
+);
+
+const handleAppreciate = () => {
+    if (!currentUser.value) {
+        showGuestModal.value = true;
+
+        return;
+    }
+
+    if (isOwnProfile.value) {
+        return;
+    }
+
+    // Optimistic UI update
+    if (localIsAppreciated.value) {
+        localIsAppreciated.value = false;
+        localAppreciationsCount.value = Math.max(
+            0,
+            localAppreciationsCount.value - 1,
+        );
+    } else {
+        localIsAppreciated.value = true;
+        localAppreciationsCount.value++;
+    }
+
+    router.post(
+        `/u/${props.profileUser.id}/appreciate`,
+        {},
+        {
+            preserveScroll: true,
+            preserveState: true,
+            onError: () => {
+                localIsAppreciated.value = props.isAppreciated;
+                localAppreciationsCount.value = props.appreciationsCount;
+            },
+        },
+    );
+};
+
 const getRoleBadge = (roles: string[]) => {
     if (roles.includes('admin')) {
         return {
@@ -169,7 +254,8 @@ const totalActivitiesCount = computed(
         (props.recentActivities.uploads?.length || 0) +
         (props.recentActivities.reactions?.length || 0) +
         (props.recentActivities.comments?.length || 0) +
-        (props.recentActivities.upvotes?.length || 0),
+        (props.recentActivities.upvotes?.length || 0) +
+        (props.recentActivities.appreciations?.length || 0),
 );
 </script>
 
@@ -323,18 +409,60 @@ const totalActivitiesCount = computed(
                         </div>
                     </div>
 
-                    <!-- Right Actions: Edit (Only for Profile Owner) -->
+                    <!-- Right Actions: Edit (For Profile Owner) or Appreciate (For Others) -->
                     <div
-                        v-if="isOwnProfile"
                         class="flex shrink-0 items-center self-start pt-1 sm:self-auto sm:pt-0"
                     >
                         <Link
+                            v-if="isOwnProfile"
                             href="/profile"
                             class="inline-flex h-8 items-center gap-1.5 rounded-xl bg-slate-900 px-3.5 text-xs font-semibold text-white shadow-xs transition hover:bg-slate-800 active:scale-95 sm:h-8.5 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
                         >
                             <Edit3 class="h-3.5 w-3.5" />
                             <span>Edit</span>
                         </Link>
+
+                        <button
+                            v-else
+                            @click="handleAppreciate"
+                            type="button"
+                            class="group inline-flex h-8.5 cursor-pointer items-center gap-1.5 rounded-xl px-3 text-xs font-bold transition-all duration-150 select-none active:scale-95 sm:h-9 sm:px-3.5"
+                            :class="[
+                                localIsAppreciated
+                                    ? 'border border-rose-200 bg-rose-50 text-rose-600 shadow-xs dark:border-rose-900/60 dark:bg-rose-950/60 dark:text-rose-400'
+                                    : 'border border-slate-200 bg-white text-slate-700 shadow-xs hover:border-rose-200 hover:bg-rose-50/40 hover:text-rose-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-rose-900/50 dark:hover:bg-rose-950/30 dark:hover:text-rose-400',
+                            ]"
+                            :title="
+                                localIsAppreciated
+                                    ? 'Appreciated (click to remove)'
+                                    : 'Appreciate this member'
+                            "
+                        >
+                            <Heart
+                                class="h-4 w-4 transition-transform group-hover:scale-110"
+                                :class="[
+                                    localIsAppreciated
+                                        ? 'fill-rose-500 text-rose-500 dark:fill-rose-400 dark:text-rose-400'
+                                        : 'stroke-[2.2] text-slate-500 group-hover:text-rose-500 dark:text-gray-400 dark:group-hover:text-rose-400',
+                                ]"
+                            />
+                            <span>{{
+                                localIsAppreciated
+                                    ? 'Appreciated'
+                                    : 'Appreciate'
+                            }}</span>
+                            <span
+                                v-if="localAppreciationsCount > 0"
+                                class="ml-0.5 rounded-lg px-1.5 py-0.5 text-[11px] font-bold"
+                                :class="[
+                                    localIsAppreciated
+                                        ? 'bg-rose-200/70 text-rose-700 dark:bg-rose-900/70 dark:text-rose-300'
+                                        : 'bg-slate-100 text-slate-600 dark:bg-gray-700 dark:text-gray-300',
+                                ]"
+                            >
+                                {{ localAppreciationsCount }}
+                            </span>
+                        </button>
                     </div>
                 </div>
 
@@ -346,9 +474,53 @@ const totalActivitiesCount = computed(
                     <p class="whitespace-pre-line">{{ profileUser.about }}</p>
                 </div>
 
+                <!-- Appreciations Summary Pill Row -->
+                <div
+                    v-if="localAppreciationsCount > 0 || appreciatingCount > 0"
+                    class="mt-3.5 flex flex-wrap items-center gap-2"
+                >
+                    <button
+                        v-if="localAppreciationsCount > 0"
+                        type="button"
+                        @click="showAppreciatorsModal = true"
+                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-rose-100 bg-rose-50/70 px-2.5 py-1 text-xs font-bold text-rose-700 transition select-none hover:bg-rose-100 active:scale-95 dark:border-rose-900/40 dark:bg-rose-950/40 dark:text-rose-300 dark:hover:bg-rose-900/60"
+                        title="View members who appreciated this profile"
+                    >
+                        <Heart
+                            class="h-3.5 w-3.5 fill-rose-500 text-rose-500 dark:fill-rose-400 dark:text-rose-400"
+                        />
+                        <span
+                            >{{ localAppreciationsCount }}
+                            {{
+                                localAppreciationsCount === 1
+                                    ? 'Appreciation'
+                                    : 'Appreciations'
+                            }}</span
+                        >
+                    </button>
+
+                    <button
+                        v-if="appreciatingCount > 0"
+                        type="button"
+                        @click="showAppreciatingModal = true"
+                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-slate-200/80 bg-slate-50/80 px-2.5 py-1 text-xs font-semibold text-slate-600 transition select-none hover:bg-slate-100 active:scale-95 dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-300 dark:hover:bg-gray-700"
+                        title="View members this user appreciates"
+                    >
+                        <Heart
+                            class="h-3.5 w-3.5 stroke-[2] text-slate-400 dark:text-gray-500"
+                        />
+                        <span
+                            >Appreciating {{ appreciatingCount }}
+                            {{
+                                appreciatingCount === 1 ? 'user' : 'users'
+                            }}</span
+                        >
+                    </button>
+                </div>
+
                 <!-- Social Links & Joined Date Footer -->
                 <div
-                    class="mt-4.5 flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 pt-3.5 dark:border-gray-800"
+                    class="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 pt-3.5 dark:border-gray-800"
                 >
                     <!-- Social Links -->
                     <div class="flex items-center gap-2">
@@ -865,6 +1037,47 @@ const totalActivitiesCount = computed(
                                 {{ item.created_at }}
                             </span>
                         </div>
+
+                        <!-- Appreciations Given -->
+                        <div
+                            v-for="(
+                                item, idx
+                            ) in recentActivities.appreciations"
+                            :key="'apprec-' + idx"
+                            class="flex items-center justify-between rounded-xl border border-slate-100 bg-white p-2.5 shadow-xs sm:rounded-2xl sm:p-3 dark:border-gray-800 dark:bg-gray-900"
+                        >
+                            <div class="flex min-w-0 items-center gap-2">
+                                <div
+                                    class="flex h-6.5 w-6.5 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-500 dark:bg-rose-950/60 dark:text-rose-400"
+                                >
+                                    <Heart class="h-3.5 w-3.5 fill-rose-500" />
+                                </div>
+                                <div class="min-w-0 flex-1 truncate">
+                                    <span
+                                        class="text-xs text-slate-500 dark:text-gray-400"
+                                        >Appreciated
+                                    </span>
+                                    <Link
+                                        v-if="item.url"
+                                        :href="item.url"
+                                        class="text-xs font-bold text-slate-900 hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
+                                    >
+                                        {{ item.title }}
+                                    </Link>
+                                    <span
+                                        v-if="item.username"
+                                        class="ml-1 text-[10px] text-slate-400 dark:text-gray-500"
+                                    >
+                                        (@{{ item.username }})
+                                    </span>
+                                </div>
+                            </div>
+                            <span
+                                class="shrink-0 pl-2 text-[10px] font-medium text-slate-400 dark:text-gray-500"
+                            >
+                                {{ item.created_at }}
+                            </span>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -958,4 +1171,271 @@ const totalActivitiesCount = computed(
             </div>
         </div>
     </div>
+
+    <!-- Appreciators Modal -->
+    <Teleport to="body">
+        <div
+            v-if="showAppreciatorsModal"
+            class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        >
+            <div
+                @click="showAppreciatorsModal = false"
+                class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity"
+            ></div>
+
+            <div
+                class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-slate-100 bg-white p-5 shadow-2xl transition-all sm:p-6 dark:border-gray-800 dark:bg-gray-900"
+            >
+                <button
+                    @click="showAppreciatorsModal = false"
+                    class="absolute top-3.5 right-3.5 cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
+                >
+                    <X class="h-4 w-4" />
+                </button>
+
+                <div class="mb-4 flex items-center gap-2.5">
+                    <div
+                        class="flex h-8 w-8 items-center justify-center rounded-xl bg-rose-50 text-rose-500 dark:bg-rose-950/60 dark:text-rose-400"
+                    >
+                        <Heart class="h-4 w-4 fill-rose-500" />
+                    </div>
+                    <div>
+                        <h3
+                            class="text-sm font-bold text-slate-900 dark:text-gray-100"
+                        >
+                            Appreciated by
+                        </h3>
+                        <p
+                            class="text-[11px] font-medium text-slate-500 dark:text-gray-400"
+                        >
+                            {{ localAppreciationsCount }} community
+                            {{
+                                localAppreciationsCount === 1
+                                    ? 'member'
+                                    : 'members'
+                            }}
+                        </p>
+                    </div>
+                </div>
+
+                <div
+                    v-if="appreciators && appreciators.length > 0"
+                    class="max-h-72 space-y-2 overflow-y-auto pr-1"
+                >
+                    <Link
+                        v-for="person in appreciators"
+                        :key="person.id"
+                        :href="`/u/${person.username}`"
+                        @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
+                    v-else
+                    class="py-6 text-center text-xs text-slate-400 dark:text-gray-500"
+                >
+                    No appreciations yet.
+                </div>
+            </div>
+        </div>
+    </Teleport>
+
+    <!-- Appreciating Modal -->
+    <Teleport to="body">
+        <div
+            v-if="showAppreciatingModal"
+            class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        >
+            <div
+                @click="showAppreciatingModal = false"
+                class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity"
+            ></div>
+
+            <div
+                class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-slate-100 bg-white p-5 shadow-2xl transition-all sm:p-6 dark:border-gray-800 dark:bg-gray-900"
+            >
+                <button
+                    @click="showAppreciatingModal = false"
+                    class="absolute top-3.5 right-3.5 cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
+                >
+                    <X class="h-4 w-4" />
+                </button>
+
+                <div class="mb-4 flex items-center gap-2.5">
+                    <div
+                        class="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-100 text-slate-600 dark:bg-gray-800 dark:text-gray-400"
+                    >
+                        <Heart class="h-4 w-4 fill-rose-500 text-rose-500" />
+                    </div>
+                    <div>
+                        <h3
+                            class="text-sm font-bold text-slate-900 dark:text-gray-100"
+                        >
+                            Appreciating
+                        </h3>
+                        <p
+                            class="text-[11px] font-medium text-slate-500 dark:text-gray-400"
+                        >
+                            {{ appreciatingCount }} community
+                            {{ appreciatingCount === 1 ? 'member' : 'members' }}
+                        </p>
+                    </div>
+                </div>
+
+                <div
+                    v-if="appreciating && appreciating.length > 0"
+                    class="max-h-72 space-y-2 overflow-y-auto pr-1"
+                >
+                    <Link
+                        v-for="person in appreciating"
+                        :key="person.id"
+                        :href="`/u/${person.username}`"
+                        @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
+                    v-else
+                    class="py-6 text-center text-xs text-slate-400 dark:text-gray-500"
+                >
+                    Not appreciating any users yet.
+                </div>
+            </div>
+        </div>
+    </Teleport>
+
+    <!-- Guest Sign-in Dialog Modal -->
+    <Teleport to="body">
+        <div
+            v-if="showGuestModal"
+            class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        >
+            <div
+                @click="showGuestModal = false"
+                class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity"
+            ></div>
+
+            <div
+                class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-slate-100 bg-white p-6 text-center shadow-2xl transition-all sm:p-7 dark:border-gray-800 dark:bg-gray-900"
+            >
+                <button
+                    @click="showGuestModal = false"
+                    class="absolute top-3.5 right-3.5 cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
+                >
+                    <X class="h-4 w-4" />
+                </button>
+
+                <div
+                    class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
+                >
+                    <Heart class="h-6 w-6 fill-rose-500" />
+                </div>
+
+                <h3
+                    class="mt-3.5 text-base font-bold text-slate-900 dark:text-gray-100"
+                >
+                    Sign in to Appreciate
+                </h3>
+                <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
+                    You need to be logged in to send appreciation and support
+                    fellow students and contributors.
+                </p>
+
+                <div class="mt-5 flex gap-2.5">
+                    <button
+                        type="button"
+                        @click="showGuestModal = false"
+                        class="flex-1 cursor-pointer rounded-xl border border-slate-200 py-2.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                    >
+                        Cancel
+                    </button>
+                    <Link
+                        href="/login"
+                        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-slate-900 py-2.5 text-xs font-bold text-white shadow-xs transition hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
+                    >
+                        <LogIn class="h-3.5 w-3.5" />
+                        <span>Sign In</span>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    </Teleport>
 </template>
diff --git a/routes/web.php b/routes/web.php
index 5ad9d12..f02e17d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -28,6 +28,7 @@
     Route::delete('/blogs/comments/{comment}', [BlogController::class, 'destroyComment'])->name('blogs.comments.destroy');
     Route::post('/resources/{resource}/complete', [ResourceController::class, 'toggleComplete'])->name('resources.complete');
     Route::post('/nodes/{node}/vote', [NodeController::class, 'vote'])->name('nodes.vote');
+    Route::post('/u/{user}/appreciate', [UserProfileController::class, 'toggleAppreciate'])->name('user.appreciate');
 });
 
 Route::prefix('admin')
diff --git a/tests/Feature/NodeVoteTest.php b/tests/Feature/NodeVoteTest.php
index 3631f00..8fdf378 100644
--- a/tests/Feature/NodeVoteTest.php
+++ b/tests/Feature/NodeVoteTest.php
@@ -1,9 +1,12 @@
 <?php
 
+use App\Mail\NodeNotificationMail;
 use App\Models\Node;
 use App\Models\NodeVote;
 use App\Models\Subject;
 use App\Models\User;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Mail;
 use Inertia\Testing\AssertableInertia as Assert;
 
 test('guests are redirected to login when attempting to vote on a folder', function () {
@@ -296,7 +299,7 @@
     NodeVote::create(['node_id' => $node->id, 'user_id' => $upvoter->id, 'type' => 'up']);
     NodeVote::create(['node_id' => $node->id, 'user_id' => $downvoter->id, 'type' => 'down']);
 
-    $response = $this->actingAs($upvoter)->get("/physics/chapter-1");
+    $response = $this->actingAs($upvoter)->get('/physics/chapter-1');
 
     $response->assertInertia(fn (Assert $page) => $page
         ->component('Node')
@@ -342,7 +345,7 @@
             ->where('nodes.1.upvotes_count', 0)
         );
 
-    expect(Illuminate\Support\Facades\Cache::has("subject_page_{$subject->id}"))->toBeTrue();
+    expect(Cache::has("subject_page_{$subject->id}"))->toBeTrue();
 
     // 2. User votes on Folder B
     $this->actingAs($user)
@@ -350,7 +353,7 @@
         ->assertRedirect();
 
     // Cache should have been invalidated
-    expect(Illuminate\Support\Facades\Cache::has("subject_page_{$subject->id}"))->toBeFalse();
+    expect(Cache::has("subject_page_{$subject->id}"))->toBeFalse();
 
     // 3. Next visit to subject page reflects Folder B with updated upvote count
     $this->get('/physics')
@@ -383,7 +386,7 @@
             ->where('nodes.1.upvotes_count', 0)
         );
 
-    expect(Illuminate\Support\Facades\Cache::has("node_children_{$folderA->id}"))->toBeTrue();
+    expect(Cache::has("node_children_{$folderA->id}"))->toBeTrue();
 
     // Vote on Subfolder B
     $this->actingAs($user)
@@ -391,7 +394,7 @@
         ->assertRedirect();
 
     // Cache should be cleared
-    expect(Illuminate\Support\Facades\Cache::has("node_children_{$folderA->id}"))->toBeFalse();
+    expect(Cache::has("node_children_{$folderA->id}"))->toBeFalse();
 
     // Next visit reflects new order and count
     $this->get("/physics/{$folderA->slug}")
@@ -402,7 +405,7 @@
 });
 
 test('folder author receives milestone email notification when folder hits 1 upvote', function () {
-    Illuminate\Support\Facades\Mail::fake();
+    Mail::fake();
 
     $author = User::factory()->create([
         'name' => 'Author Rahim',
@@ -435,7 +438,7 @@
         ->post("/nodes/{$folder->id}/vote", ['type' => 'up'])
         ->assertRedirect();
 
-    Illuminate\Support\Facades\Mail::assertQueued(App\Mail\NodeNotificationMail::class, function ($mail) use ($author, $folder) {
+    Mail::assertQueued(NodeNotificationMail::class, function ($mail) use ($author) {
         return $mail->hasTo($author->email) &&
             str_contains($mail->mailSubject, 'first upvote') &&
             str_contains($mail->mailContent, 'Vectors Complete Guide');
@@ -443,7 +446,7 @@
 });
 
 test('author upvoting their own folder does not trigger milestone email', function () {
-    Illuminate\Support\Facades\Mail::fake();
+    Mail::fake();
 
     $author = User::factory()->create([
         'name' => 'Self Voter',
@@ -470,5 +473,5 @@
         ->post("/nodes/{$folder->id}/vote", ['type' => 'up'])
         ->assertRedirect();
 
-    Illuminate\Support\Facades\Mail::assertNothingQueued();
+    Mail::assertNothingQueued();
 });
diff --git a/tests/Feature/UserAppreciationTest.php b/tests/Feature/UserAppreciationTest.php
new file mode 100644
index 0000000..901242b
--- /dev/null
+++ b/tests/Feature/UserAppreciationTest.php
@@ -0,0 +1,147 @@
+<?php
+
+use App\Mail\UserAppreciationMail;
+use App\Models\User;
+use App\Models\UserAppreciation;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\Mail;
+use Inertia\Testing\AssertableInertia as Assert;
+
+uses(RefreshDatabase::class);
+
+test('guests are redirected when attempting to appreciate a user', function () {
+    $targetUser = User::factory()->create([
+        'username' => 'rahim',
+    ]);
+
+    $this->post("/u/{$targetUser->id}/appreciate")
+        ->assertRedirect('/login');
+
+    expect(UserAppreciation::count())->toBe(0);
+});
+
+test('authenticated user can appreciate another user profile', function () {
+    $userA = User::factory()->create(['username' => 'alice']);
+    $userB = User::factory()->create(['username' => 'bob']);
+
+    $this->actingAs($userA)
+        ->post("/u/{$userB->id}/appreciate")
+        ->assertRedirect();
+
+    expect(UserAppreciation::where('user_id', $userB->id)->where('appreciator_id', $userA->id)->exists())->toBeTrue();
+    expect($userB->appreciationsReceived()->count())->toBe(1);
+    expect($userA->appreciationsGiven()->count())->toBe(1);
+});
+
+test('clicking appreciate again toggles it off', function () {
+    $userA = User::factory()->create(['username' => 'alice']);
+    $userB = User::factory()->create(['username' => 'bob']);
+
+    UserAppreciation::create([
+        'user_id' => $userB->id,
+        'appreciator_id' => $userA->id,
+    ]);
+
+    $this->actingAs($userA)
+        ->post("/u/{$userB->id}/appreciate")
+        ->assertRedirect();
+
+    expect(UserAppreciation::where('user_id', $userB->id)->where('appreciator_id', $userA->id)->exists())->toBeFalse();
+    expect($userB->appreciationsReceived()->count())->toBe(0);
+});
+
+test('users cannot appreciate their own profile', function () {
+    $user = User::factory()->create(['username' => 'alice']);
+
+    $this->actingAs($user)
+        ->post("/u/{$user->id}/appreciate")
+        ->assertRedirect();
+
+    expect(UserAppreciation::count())->toBe(0);
+});
+
+test('user profile displays accurate appreciation counts and status', function () {
+    $profileUser = User::factory()->create(['username' => 'recipient']);
+    $fan1 = User::factory()->create(['username' => 'fan1']);
+    $fan2 = User::factory()->create(['username' => 'fan2']);
+    $idol = User::factory()->create(['username' => 'idol']);
+
+    // Fan 1 & 2 appreciate profileUser
+    UserAppreciation::create(['user_id' => $profileUser->id, 'appreciator_id' => $fan1->id]);
+    UserAppreciation::create(['user_id' => $profileUser->id, 'appreciator_id' => $fan2->id]);
+
+    // profileUser appreciates idol
+    UserAppreciation::create(['user_id' => $idol->id, 'appreciator_id' => $profileUser->id]);
+
+    // Check as fan1 (should see isAppreciated = true)
+    $this->actingAs($fan1)
+        ->get("/u/{$profileUser->username}")
+        ->assertInertia(fn (Assert $page) => $page
+            ->component('User/Show')
+            ->where('appreciationsCount', 2)
+            ->where('appreciatingCount', 1)
+            ->where('isAppreciated', true)
+            ->has('appreciators', 2)
+            ->has('appreciating', 1)
+            ->has('recentActivities.appreciations', 1)
+        );
+
+    // Check as unauthenticated guest (isAppreciated = false)
+    auth()->logout();
+    $this->get("/u/{$profileUser->username}")
+        ->assertInertia(fn (Assert $page) => $page
+            ->component('User/Show')
+            ->where('appreciationsCount', 2)
+            ->where('appreciatingCount', 1)
+            ->where('isAppreciated', false)
+        );
+});
+
+test('recipient receives milestone email on 1st appreciation', function () {
+    Mail::fake();
+
+    $author = User::factory()->create([
+        'name' => 'Tarek Rahman',
+        'username' => 'tarek',
+        'email' => 'tarek@example.com',
+        'receive_emails' => true,
+    ]);
+
+    $fan = User::factory()->create([
+        'name' => 'Fahim Hasan',
+        'username' => 'fahim',
+        'email' => 'fahim@example.com',
+    ]);
+
+    $this->actingAs($fan)
+        ->post("/u/{$author->id}/appreciate")
+        ->assertRedirect();
+
+    Mail::assertQueued(UserAppreciationMail::class, function ($mail) use ($author) {
+        return $mail->hasTo($author->email) &&
+            str_contains($mail->mailSubject, 'appreciated your profile') &&
+            str_contains($mail->mailContent, 'Fahim Hasan');
+    });
+});
+
+test('milestone email is not sent if recipient opted out of emails', function () {
+    Mail::fake();
+
+    $author = User::factory()->create([
+        'name' => 'Quiet Contributor',
+        'username' => 'quiet',
+        'email' => 'quiet@example.com',
+        'receive_emails' => false,
+    ]);
+
+    $fan = User::factory()->create([
+        'name' => 'Fahim Hasan',
+        'username' => 'fahim',
+    ]);
+
+    $this->actingAs($fan)
+        ->post("/u/{$author->id}/appreciate")
+        ->assertRedirect();
+
+    Mail::assertNothingQueued();
+});
diff --git a/tests/Feature/UserProfileTest.php b/tests/Feature/UserProfileTest.php
index a0faa4f..7a82779 100644
--- a/tests/Feature/UserProfileTest.php
+++ b/tests/Feature/UserProfileTest.php
@@ -2,6 +2,7 @@
 
 use App\Models\Blog;
 use App\Models\Node;
+use App\Models\NodeVote;
 use App\Models\ResourceCompletion;
 use App\Models\Subject;
 use App\Models\User;
@@ -146,7 +147,7 @@
         'slug' => 'diff-notes',
     ]);
 
-    \App\Models\NodeVote::create([
+    NodeVote::create([
         'node_id' => $childFolder->id,
         'user_id' => $user->id,
         'type' => 'up',