diff --git a/src/app/api/posts/[slug]/engagement/route.ts b/src/app/api/posts/[slug]/engagement/route.ts
new file mode 100644
index 0000000..b1eb938
--- /dev/null
+++ b/src/app/api/posts/[slug]/engagement/route.ts
@@ -0,0 +1,264 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import { createServerComponentClient, createServiceRoleClient } from '@/lib/supabase/server-client';
+
+const voteSchema = z.object({
+  voteType: z.enum(['upvote', 'downvote']),
+});
+
+interface SessionProfile {
+  id: string;
+  displayName: string | null;
+}
+
+const getSessionProfile = async (): Promise<SessionProfile | null> => {
+  const supabase = createServerComponentClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return null;
+  }
+
+  const { data, error } = await supabase
+    .from('profiles')
+    .select('id, display_name')
+    .eq('user_id', user.id)
+    .maybeSingle();
+
+  if (error || !data) {
+    return null;
+  }
+
+  return {
+    id: data.id as string,
+    displayName: (data.display_name as string | null) ?? null,
+  };
+};
+
+interface PostRecord {
+  id: string;
+  views: number | null;
+}
+
+const fetchPostBySlug = async (slug: string): Promise<PostRecord | null> => {
+  const supabase = createServiceRoleClient();
+  const { data, error } = await supabase
+    .from('posts')
+    .select('id, views')
+    .eq('slug', slug)
+    .eq('status', 'published')
+    .maybeSingle();
+
+  if (error || !data) {
+    return null;
+  }
+
+  return data as PostRecord;
+};
+
+interface EngagementStats {
+  upvotes: number;
+  downvotes: number;
+  comments: number;
+  bookmarks: number;
+  views: number;
+}
+
+const loadEngagementStats = async (postId: string): Promise<EngagementStats> => {
+  const supabase = createServiceRoleClient();
+
+  const [{ count: upvotes }, { count: downvotes }, { count: comments }, { count: bookmarks }] = await Promise.all([
+    supabase
+      .from('post_votes')
+      .select('id', { head: true, count: 'exact' })
+      .eq('post_id', postId)
+      .eq('vote_type', 'upvote'),
+    supabase
+      .from('post_votes')
+      .select('id', { head: true, count: 'exact' })
+      .eq('post_id', postId)
+      .eq('vote_type', 'downvote'),
+    supabase
+      .from('comments')
+      .select('id', { head: true, count: 'exact' })
+      .eq('post_id', postId)
+      .eq('status', 'approved'),
+    supabase
+      .from('bookmarks')
+      .select('id', { head: true, count: 'exact' })
+      .eq('post_id', postId),
+  ]);
+
+  return {
+    upvotes: upvotes ?? 0,
+    downvotes: downvotes ?? 0,
+    comments: comments ?? 0,
+    bookmarks: bookmarks ?? 0,
+    views: 0,
+  };
+};
+
+const buildEngagementResponse = async (
+  post: PostRecord,
+  profile: SessionProfile | null,
+): Promise<{ stats: EngagementStats; viewer: { vote: 'upvote' | 'downvote' | null; bookmarkId: string | null } }> => {
+  const supabase = createServiceRoleClient();
+  const stats = await loadEngagementStats(post.id);
+  stats.views = post.views ?? 0;
+
+  let vote: 'upvote' | 'downvote' | null = null;
+  let bookmarkId: string | null = null;
+
+  if (profile) {
+    const [{ data: voteRow }, { data: bookmarkRow }] = await Promise.all([
+      supabase
+        .from('post_votes')
+        .select('id, vote_type')
+        .eq('post_id', post.id)
+        .eq('profile_id', profile.id)
+        .maybeSingle(),
+      supabase
+        .from('bookmarks')
+        .select('id')
+        .eq('post_id', post.id)
+        .eq('profile_id', profile.id)
+        .maybeSingle(),
+    ]);
+
+    vote = (voteRow?.vote_type as 'upvote' | 'downvote' | null) ?? null;
+    bookmarkId = (bookmarkRow?.id as string | null) ?? null;
+  }
+
+  return {
+    stats,
+    viewer: {
+      vote,
+      bookmarkId,
+    },
+  };
+};
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ slug: string }> },
+) {
+  const { slug } = await params;
+  const decodedSlug = decodeURIComponent(slug);
+  const post = await fetchPostBySlug(decodedSlug);
+
+  if (!post) {
+    return NextResponse.json({ error: 'Post not found.' }, { status: 404 });
+  }
+
+  const profile = await getSessionProfile();
+  const payload = await buildEngagementResponse(post, profile);
+
+  return NextResponse.json({
+    postId: post.id,
+    stats: payload.stats,
+    viewer: payload.viewer,
+  });
+}
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ slug: string }> },
+) {
+  const { slug } = await params;
+  const decodedSlug = decodeURIComponent(slug);
+  const profile = await getSessionProfile();
+
+  if (!profile) {
+    return NextResponse.json({ error: 'Authentication required.' }, { status: 401 });
+  }
+
+  const post = await fetchPostBySlug(decodedSlug);
+
+  if (!post) {
+    return NextResponse.json({ error: 'Post not found.' }, { status: 404 });
+  }
+
+  const raw = await request.json().catch(() => null);
+  const parsed = voteSchema.safeParse(raw);
+
+  if (!parsed.success) {
+    return NextResponse.json({ error: 'Invalid payload.' }, { status: 400 });
+  }
+
+  const supabase = createServiceRoleClient();
+
+  const { data: existing } = await supabase
+    .from('post_votes')
+    .select('id, vote_type')
+    .eq('post_id', post.id)
+    .eq('profile_id', profile.id)
+    .maybeSingle();
+
+  if (existing && existing.vote_type === parsed.data.voteType) {
+    await supabase
+      .from('post_votes')
+      .delete()
+      .eq('id', existing.id);
+
+    const payload = await buildEngagementResponse(post, profile);
+    return NextResponse.json({
+      postId: post.id,
+      stats: payload.stats,
+      viewer: payload.viewer,
+    });
+  }
+
+  await supabase
+    .from('post_votes')
+    .upsert(
+      {
+        post_id: post.id,
+        profile_id: profile.id,
+        vote_type: parsed.data.voteType,
+      },
+      { onConflict: 'post_id,profile_id' },
+    );
+
+  const payload = await buildEngagementResponse(post, profile);
+  return NextResponse.json({
+    postId: post.id,
+    stats: payload.stats,
+    viewer: payload.viewer,
+  });
+}
+
+export async function DELETE(
+  _request: Request,
+  { params }: { params: Promise<{ slug: string }> },
+) {
+  const { slug } = await params;
+  const decodedSlug = decodeURIComponent(slug);
+  const profile = await getSessionProfile();
+
+  if (!profile) {
+    return NextResponse.json({ error: 'Authentication required.' }, { status: 401 });
+  }
+
+  const post = await fetchPostBySlug(decodedSlug);
+
+  if (!post) {
+    return NextResponse.json({ error: 'Post not found.' }, { status: 404 });
+  }
+
+  const supabase = createServiceRoleClient();
+
+  await supabase
+    .from('post_votes')
+    .delete()
+    .eq('post_id', post.id)
+    .eq('profile_id', profile.id);
+
+  const payload = await buildEngagementResponse(post, profile);
+  return NextResponse.json({
+    postId: post.id,
+    stats: payload.stats,
+    viewer: payload.viewer,
+  });
+}
diff --git a/src/app/topics/page.tsx b/src/app/topics/page.tsx
index b81d8ee..6d5c017 100644
--- a/src/app/topics/page.tsx
+++ b/src/app/topics/page.tsx
@@ -22,7 +22,7 @@ export const metadata: Metadata = {
 type SearchParamsShape = Record<string, string | string[] | undefined>;
 
 type TopicsPageProps = {
-  searchParams?: SearchParamsShape | Promise<SearchParamsShape>;
+  searchParams?: Promise<SearchParamsShape>;
 };
 
 const footerLinks = [
@@ -229,10 +229,7 @@ const normalizeParam = (value: string | string[] | undefined) =>
   (Array.isArray(value) ? value[0] : value) ?? null;
 
 export default async function TopicsPage({ searchParams }: TopicsPageProps) {
-  const resolvedSearchParams: SearchParamsShape =
-    searchParams && typeof (searchParams as Promise<unknown>).then === 'function'
-      ? await (searchParams as Promise<SearchParamsShape>)
-      : (searchParams ?? {});
+  const resolvedSearchParams: SearchParamsShape = searchParams ? await searchParams : {};
 
   const rawTopic = normalizeParam(resolvedSearchParams.topic);
   const rawQuery = normalizeParam(resolvedSearchParams.q);
diff --git a/src/components/admin/CommentsModeration.tsx b/src/components/admin/CommentsModeration.tsx
index 5ed6520..b151db1 100644
--- a/src/components/admin/CommentsModeration.tsx
+++ b/src/components/admin/CommentsModeration.tsx
@@ -187,7 +187,8 @@ export const CommentsModeration = ({
                       <AlertDialogHeader>
                         <AlertDialogTitle>Delete comment?</AlertDialogTitle>
                         <AlertDialogDescription>
-                          This will permanently delete this comment from {comment.authorName}. This action cannot be undone.
+                          This will permanently delete this comment from {comment.authorDisplayName ?? 'this reader'}. This
+                          action cannot be undone.
                         </AlertDialogDescription>
                       </AlertDialogHeader>
                       <AlertDialogFooter>
diff --git a/src/components/ui/BlogEngagementToolbar.tsx b/src/components/ui/BlogEngagementToolbar.tsx
new file mode 100644
index 0000000..d16530b
--- /dev/null
+++ b/src/components/ui/BlogEngagementToolbar.tsx
@@ -0,0 +1,428 @@
+"use client";
+
+import Link from 'next/link';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ArrowBigDown,
+  ArrowBigUp,
+  Bookmark,
+  BookmarkCheck,
+  Loader2,
+  MessageCircle,
+  MoreHorizontal,
+  Share2,
+} from 'lucide-react';
+import { formatCompactNumber } from '@/lib/utils';
+
+type VoteType = 'upvote' | 'downvote';
+
+interface EngagementStats {
+  upvotes: number;
+  downvotes: number;
+  comments: number;
+  bookmarks: number;
+  views: number;
+}
+
+interface EngagementResponse {
+  postId: string;
+  stats: EngagementStats;
+  viewer: {
+    vote: VoteType | null;
+    bookmarkId: string | null;
+  };
+}
+
+interface BlogEngagementToolbarProps {
+  postId: string;
+  slug: string;
+  title: string;
+  excerpt: string;
+  initialViews: number;
+  authorId?: string | null;
+  authorName?: string | null;
+  isFollowingAuthor?: boolean;
+  isAuthorMuted?: boolean;
+  onHide?: () => void;
+  onToggleFollow?: (nextAction: 'follow' | 'unfollow') => void;
+  onToggleMute?: (nextAction: 'mute' | 'unmute') => void;
+}
+
+const buildShareFallback = (slug: string) => {
+  if (typeof window === 'undefined') {
+    return `/blogs/${slug}`;
+  }
+
+  return `${window.location.origin}/blogs/${slug}`;
+};
+
+export function BlogEngagementToolbar({
+  postId,
+  slug,
+  title,
+  excerpt,
+  initialViews,
+  authorId,
+  authorName,
+  isFollowingAuthor = false,
+  isAuthorMuted = false,
+  onHide,
+  onToggleFollow,
+  onToggleMute,
+}: BlogEngagementToolbarProps) {
+  const [stats, setStats] = useState<EngagementStats>({
+    upvotes: 0,
+    downvotes: 0,
+    comments: 0,
+    bookmarks: 0,
+    views: initialViews,
+  });
+  const [viewerVote, setViewerVote] = useState<VoteType | null>(null);
+  const [bookmarkId, setBookmarkId] = useState<string | null>(null);
+  const [loadingVote, setLoadingVote] = useState(false);
+  const [bookmarkLoading, setBookmarkLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [copyState, setCopyState] = useState<'idle' | 'copied'>('idle');
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const shareUrl = useMemo(() => buildShareFallback(slug), [slug]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadEngagement = async () => {
+      try {
+        const response = await fetch(`/api/posts/${encodeURIComponent(slug)}/engagement`, {
+          credentials: 'include',
+        });
+
+        if (!response.ok) {
+          throw new Error(await response.text());
+        }
+
+        const payload = (await response.json()) as EngagementResponse;
+
+        if (!isMounted) {
+          return;
+        }
+
+        setStats({ ...payload.stats, views: payload.stats.views ?? initialViews });
+        setViewerVote(payload.viewer.vote);
+        setBookmarkId(payload.viewer.bookmarkId);
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+        console.warn('Unable to load engagement for post', slug, error);
+        setErrorMessage('Unable to load engagement details right now.');
+      }
+    };
+
+    void loadEngagement();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [initialViews, slug]);
+
+  useEffect(() => {
+    if (!menuOpen) {
+      return undefined;
+    }
+
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => document.removeEventListener('mousedown', handleOutsideClick);
+  }, [menuOpen]);
+
+  useEffect(() => {
+    if (copyState !== 'copied') {
+      return undefined;
+    }
+
+    const timeout = window.setTimeout(() => setCopyState('idle'), 2500);
+    return () => window.clearTimeout(timeout);
+  }, [copyState]);
+
+  const updateEngagementState = (payload: EngagementResponse) => {
+    setStats({ ...payload.stats, views: payload.stats.views ?? initialViews });
+    setViewerVote(payload.viewer.vote);
+    setBookmarkId(payload.viewer.bookmarkId);
+  };
+
+  const handleVote = async (voteType: VoteType) => {
+    setLoadingVote(true);
+    setErrorMessage(null);
+
+    try {
+      const method = viewerVote === voteType ? 'DELETE' : 'POST';
+      const response = await fetch(`/api/posts/${encodeURIComponent(slug)}/engagement`, {
+        method,
+        credentials: 'include',
+        headers: method === 'POST' ? { 'Content-Type': 'application/json' } : undefined,
+        body: method === 'POST' ? JSON.stringify({ voteType }) : undefined,
+      });
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          setErrorMessage('Sign in to vote on stories.');
+          return;
+        }
+        throw new Error(await response.text());
+      }
+
+      const payload = (await response.json()) as EngagementResponse;
+      updateEngagementState(payload);
+    } catch (error) {
+      console.error('Unable to update vote', error);
+      setErrorMessage('Unable to update your vote. Please try again.');
+    } finally {
+      setLoadingVote(false);
+    }
+  };
+
+  const handleBookmark = async () => {
+    setBookmarkLoading(true);
+    setErrorMessage(null);
+
+    try {
+      if (bookmarkId) {
+        const response = await fetch(`/api/library/bookmarks/${bookmarkId}`, {
+          method: 'DELETE',
+          credentials: 'include',
+        });
+
+        if (!response.ok) {
+          if (response.status === 401) {
+            setErrorMessage('Sign in to manage your reading list.');
+            return;
+          }
+          throw new Error(await response.text());
+        }
+
+        setBookmarkId(null);
+        setStats((previous) => ({
+          ...previous,
+          bookmarks: previous.bookmarks > 0 ? previous.bookmarks - 1 : 0,
+        }));
+        return;
+      }
+
+      const response = await fetch('/api/library/bookmarks', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ postId }),
+      });
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          setErrorMessage('Sign in to save stories for later.');
+          return;
+        }
+        const payload = await response.json().catch(() => null);
+        throw new Error(payload?.error ?? 'Unable to save bookmark');
+      }
+
+      const payload = (await response.json()) as { bookmark: { id: string } };
+      setBookmarkId(payload.bookmark.id);
+      setStats((previous) => ({
+        ...previous,
+        bookmarks: previous.bookmarks + 1,
+      }));
+    } catch (error) {
+      console.error('Unable to toggle bookmark', error);
+      setErrorMessage('Unable to update your bookmark. Please try again.');
+    } finally {
+      setBookmarkLoading(false);
+    }
+  };
+
+  const handleShare = async () => {
+    setErrorMessage(null);
+
+    try {
+      if (navigator.share) {
+        await navigator.share({
+          title,
+          text: excerpt,
+          url: shareUrl,
+        });
+        return;
+      }
+
+      if (navigator.clipboard) {
+        await navigator.clipboard.writeText(shareUrl);
+        setCopyState('copied');
+        return;
+      }
+
+      window.prompt('Copy this link', shareUrl);
+      setCopyState('copied');
+    } catch (error) {
+      console.error('Unable to share story', error);
+      setErrorMessage('Unable to share this story right now.');
+    }
+  };
+
+  const handleFollowToggle = () => {
+    if (!authorId || !onToggleFollow) {
+      return;
+    }
+
+    onToggleFollow(isFollowingAuthor ? 'unfollow' : 'follow');
+    setMenuOpen(false);
+  };
+
+  const handleMuteToggle = () => {
+    if (!authorId || !onToggleMute) {
+      return;
+    }
+
+    onToggleMute(isAuthorMuted ? 'unmute' : 'mute');
+    setMenuOpen(false);
+  };
+
+  const handleHide = () => {
+    onHide?.();
+    setMenuOpen(false);
+  };
+
+  const handleReport = () => {
+    setMenuOpen(false);
+    const subject = encodeURIComponent(`Report story: ${title}`);
+    const greeting = authorName ? `Author: ${authorName}\n` : '';
+    const body = encodeURIComponent(`${greeting}Slug: /blogs/${slug}\n\nPlease describe the issue:`);
+    if (typeof window !== 'undefined') {
+      window.location.href = `mailto:editors@syntax-blogs.test?subject=${subject}&body=${body}`;
+    }
+  };
+
+  const voteButtonClasses = (active: boolean) =>
+    `inline-flex items-center gap-1 rounded-full border-2 border-black px-3 py-1 text-xs font-bold transition-transform ${
+      active ? 'bg-[#6C63FF] text-white shadow-[4px_4px_0_rgba(0,0,0,0.25)]' : 'bg-white text-black hover:-translate-y-0.5'
+    }`;
+
+  const iconButtonClasses = (active: boolean) =>
+    `inline-flex items-center gap-1 rounded-full border-2 border-black px-3 py-1 text-xs font-bold transition-transform ${
+      active ? 'bg-[#118AB2] text-white shadow-[4px_4px_0_rgba(0,0,0,0.25)]' : 'bg-white text-black hover:-translate-y-0.5'
+    }`;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            onClick={() => void handleVote('upvote')}
+            disabled={loadingVote}
+            className={voteButtonClasses(viewerVote === 'upvote')}
+            aria-pressed={viewerVote === 'upvote'}
+          >
+            {loadingVote ? <Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" /> : <ArrowBigUp className="h-3 w-3" aria-hidden="true" />}
+            {formatCompactNumber(stats.upvotes)}
+          </button>
+          <button
+            type="button"
+            onClick={() => void handleVote('downvote')}
+            disabled={loadingVote}
+            className={voteButtonClasses(viewerVote === 'downvote')}
+            aria-pressed={viewerVote === 'downvote'}
+          >
+            {loadingVote ? <Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" /> : <ArrowBigDown className="h-3 w-3" aria-hidden="true" />}
+            {formatCompactNumber(stats.downvotes)}
+          </button>
+          <Link
+            href={`/blogs/${slug}#comments`}
+            className={iconButtonClasses(false)}
+            aria-label="View comments"
+          >
+            <MessageCircle className="h-3 w-3" aria-hidden="true" />
+            {formatCompactNumber(stats.comments)}
+          </Link>
+          <button
+            type="button"
+            onClick={() => void handleBookmark()}
+            disabled={bookmarkLoading}
+            className={iconButtonClasses(Boolean(bookmarkId))}
+            aria-pressed={Boolean(bookmarkId)}
+            aria-label={bookmarkId ? 'Remove bookmark' : 'Save to bookmarks'}
+          >
+            {bookmarkLoading ? (
+              <Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" />
+            ) : bookmarkId ? (
+              <BookmarkCheck className="h-3 w-3" aria-hidden="true" />
+            ) : (
+              <Bookmark className="h-3 w-3" aria-hidden="true" />
+            )}
+            {formatCompactNumber(stats.bookmarks)}
+          </button>
+        </div>
+        <div className="flex items-center gap-2" ref={menuRef}>
+          <button
+            type="button"
+            onClick={() => void handleShare()}
+            className="inline-flex items-center gap-1 rounded-full border-2 border-black bg-white px-3 py-1 text-xs font-bold transition-transform hover:-translate-y-0.5"
+          >
+            <Share2 className="h-3 w-3" aria-hidden="true" />
+            {copyState === 'copied' ? 'Copied!' : 'Share'}
+          </button>
+          <div className="relative">
+            <button
+              type="button"
+              onClick={() => setMenuOpen((previous) => !previous)}
+              className="inline-flex items-center justify-center rounded-full border-2 border-black bg-white p-2 hover:-translate-y-0.5"
+              aria-haspopup="menu"
+              aria-expanded={menuOpen}
+              aria-label="More options"
+            >
+              <MoreHorizontal className="h-4 w-4" aria-hidden="true" />
+            </button>
+            {menuOpen ? (
+              <div className="absolute right-0 z-50 mt-2 w-56 rounded-xl border-4 border-black bg-white p-2 shadow-[6px_6px_0_rgba(0,0,0,0.2)]">
+                <button
+                  type="button"
+                  onClick={handleHide}
+                  className="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-semibold hover:bg-gray-100"
+                  disabled={!onHide}
+                >
+                  Show less like this
+                </button>
+                <button
+                  type="button"
+                  onClick={handleFollowToggle}
+                  className="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-semibold hover:bg-gray-100 disabled:cursor-not-allowed disabled:text-gray-400"
+                  disabled={!authorId || !onToggleFollow}
+                >
+                  {isFollowingAuthor ? 'Unfollow author' : 'Follow author'}
+                </button>
+                <button
+                  type="button"
+                  onClick={handleMuteToggle}
+                  className="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-semibold hover:bg-gray-100 disabled:cursor-not-allowed disabled:text-gray-400"
+                  disabled={!authorId || !onToggleMute}
+                >
+                  {isAuthorMuted ? 'Unmute author' : 'Mute author'}
+                </button>
+                <button
+                  type="button"
+                  onClick={handleReport}
+                  className="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-semibold text-red-600 hover:bg-red-50"
+                >
+                  Report story
+                </button>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      {errorMessage ? <p className="text-xs font-semibold text-red-600" role="status">{errorMessage}</p> : null}
+    </div>
+  );
+}
diff --git a/src/components/ui/NewBlogCard.tsx b/src/components/ui/NewBlogCard.tsx
index 85b634d..fbdadb3 100644
--- a/src/components/ui/NewBlogCard.tsx
+++ b/src/components/ui/NewBlogCard.tsx
@@ -1,12 +1,14 @@
 "use client";
 
-import React, { useEffect, useState, useRef } from 'react';
+import React from 'react';
 import Link from 'next/link';
-import { MoreHorizontal, Calendar, Clock } from 'lucide-react';
+import { Calendar, Clock } from 'lucide-react';
 
 import { NeobrutalCard } from '@/components/neobrutal/card';
+import { BlogEngagementToolbar } from './BlogEngagementToolbar';
 
 interface BlogCardProps {
+  id: string;
   title: string;
   categoryLabel: string;
   accentColor?: string | null;
@@ -14,6 +16,15 @@ interface BlogCardProps {
   views: number;
   excerpt: string;
   slug: string;
+  author?: {
+    id: string | null;
+    displayName: string | null;
+  };
+  onHide?: () => void;
+  onToggleFollow?: (nextAction: 'follow' | 'unfollow') => void;
+  onToggleMute?: (nextAction: 'mute' | 'unmute') => void;
+  isAuthorFollowed?: boolean;
+  isAuthorMuted?: boolean;
 }
 
 const colorPalette = ['#6C63FF', '#FF5252', '#06D6A0', '#FFD166', '#118AB2'];
@@ -34,6 +45,7 @@ const getFallbackColor = (label: string) => {
 };
 
 export function NewBlogCard({
+  id,
   title,
   categoryLabel,
   accentColor,
@@ -41,44 +53,13 @@ export function NewBlogCard({
   views,
   excerpt,
   slug,
+  author,
+  onHide,
+  onToggleFollow,
+  onToggleMute,
+  isAuthorFollowed = false,
+  isAuthorMuted = false,
 }: BlogCardProps) {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-        setMenuOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  const handleShare = () => {
-    if (navigator.share) {
-      navigator.share({
-        title: title,
-        text: excerpt,
-        url: window.location.origin + '/blogs/' + slug,
-      }).catch(console.error);
-    } else {
-      // Fallback for browsers that don't support the Web Share API
-      navigator.clipboard.writeText(window.location.origin + '/blogs/' + slug)
-        .then(() => alert('Link copied to clipboard!'))
-        .catch(console.error);
-    }
-    setMenuOpen(false);
-  };
-
-  const handleGenerateWithAI = () => {
-    // This would be implemented with your AI generation functionality
-    alert('Generate with AI functionality would go here');
-    setMenuOpen(false);
-  };
-
   const badgeColor = accentColor ?? getFallbackColor(categoryLabel);
 
   return (
@@ -93,34 +74,6 @@ export function NewBlogCard({
           >
             {categoryLabel}
           </span>
-          <div className="relative" ref={menuRef}>
-            <button
-              type="button"
-              onClick={() => setMenuOpen(!menuOpen)}
-              className="p-2 hover:bg-gray-100 rounded-full transition-colors"
-              aria-label="Open menu"
-            >
-              <MoreHorizontal size={20} />
-            </button>
-            {menuOpen && (
-              <div className="absolute right-0 mt-2 w-48 rounded-lg border-4 border-black bg-white shadow-[4px_4px_0px_0px_rgba(0,0,0)] z-50">
-                <button
-                  type="button"
-                  onClick={handleShare}
-                  className="w-full text-left px-4 py-2 text-sm font-bold hover:bg-gray-100"
-                >
-                  Share
-                </button>
-                <button
-                  type="button"
-                  onClick={handleGenerateWithAI}
-                  className="w-full text-left px-4 py-2 text-sm font-bold hover:bg-gray-100"
-                >
-                  Generate Post
-                </button>
-              </div>
-            )}
-          </div>
         </div>
         <h3 className="text-xl font-black mb-3">{title}</h3>
         <p className="text-gray-600 mb-4">{excerpt}</p>
@@ -142,6 +95,20 @@ export function NewBlogCard({
             READ POST
           </Link>
         </div>
+        <BlogEngagementToolbar
+          postId={id}
+          slug={slug}
+          title={title}
+          excerpt={excerpt}
+          initialViews={views}
+          authorId={author?.id ?? null}
+          authorName={author?.displayName ?? null}
+          isFollowingAuthor={isAuthorFollowed}
+          isAuthorMuted={isAuthorMuted}
+          onHide={onHide}
+          onToggleFollow={onToggleFollow}
+          onToggleMute={onToggleMute}
+        />
       </div>
     </NeobrutalCard>
   );
diff --git a/src/components/ui/NewBlogGrid.tsx b/src/components/ui/NewBlogGrid.tsx
index 1dfdcc8..2b7546a 100644
--- a/src/components/ui/NewBlogGrid.tsx
+++ b/src/components/ui/NewBlogGrid.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { NewBlogCard } from './NewBlogCard';
 
 export interface BlogGridItem {
+  id: string;
   slug: string;
   title: string;
   excerpt: string;
@@ -9,19 +10,37 @@ export interface BlogGridItem {
   dateLabel: string;
   views: number;
   accentColor: string | null;
+  authorId: string | null;
+  authorName: string | null;
 }
 
 interface BlogGridProps {
   blogs: BlogGridItem[];
+  onHidePost?: (blog: BlogGridItem) => void;
+  onToggleFollow?: (authorId: string, action: 'follow' | 'unfollow', authorName: string | null) => void;
+  onToggleMute?: (authorId: string, action: 'mute' | 'unmute', authorName: string | null) => void;
+  followingAuthorIds?: string[];
+  mutedAuthorIds?: string[];
 }
 
-export function NewBlogGrid({ blogs }: BlogGridProps) {
+export function NewBlogGrid({
+  blogs,
+  onHidePost,
+  onToggleFollow,
+  onToggleMute,
+  followingAuthorIds = [],
+  mutedAuthorIds = [],
+}: BlogGridProps) {
+  const followingSet = new Set(followingAuthorIds.filter(Boolean));
+  const mutedSet = new Set(mutedAuthorIds.filter(Boolean));
+
   return (
     <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
       {blogs.length > 0 ? (
         blogs.map((blog) => (
           <NewBlogCard
             key={blog.slug}
+            id={blog.id}
             title={blog.title}
             categoryLabel={blog.categoryLabel}
             accentColor={blog.accentColor}
@@ -29,6 +48,20 @@ export function NewBlogGrid({ blogs }: BlogGridProps) {
             views={blog.views}
             excerpt={blog.excerpt}
             slug={blog.slug}
+            author={{ id: blog.authorId, displayName: blog.authorName }}
+            onHide={onHidePost ? () => onHidePost(blog) : undefined}
+            onToggleFollow={
+              blog.authorId && onToggleFollow
+                ? (action) => onToggleFollow(blog.authorId as string, action, blog.authorName)
+                : undefined
+            }
+            onToggleMute={
+              blog.authorId && onToggleMute
+                ? (action) => onToggleMute(blog.authorId as string, action, blog.authorName)
+                : undefined
+            }
+            isAuthorFollowed={Boolean(blog.authorId && followingSet.has(blog.authorId))}
+            isAuthorMuted={Boolean(blog.authorId && mutedSet.has(blog.authorId))}
           />
         ))
       ) : (
diff --git a/src/components/ui/NewBlogsPage.tsx b/src/components/ui/NewBlogsPage.tsx
index 9bdbdea..491d3df 100644
--- a/src/components/ui/NewBlogsPage.tsx
+++ b/src/components/ui/NewBlogsPage.tsx
@@ -19,9 +19,63 @@ export function NewBlogsPage({ posts }: NewBlogsPageProps) {
   const [query, setQuery] = useState('');
   const [sortBy, setSortBy] = useState<'latest' | 'popular'>('latest');
   const [page, setPage] = useState(1);
+  const [hiddenSlugs, setHiddenSlugs] = useState<string[]>([]);
+  const [mutedAuthorIds, setMutedAuthorIds] = useState<string[]>([]);
+  const [followedAuthorIds, setFollowedAuthorIds] = useState<string[]>([]);
+  const [statusMessage, setStatusMessage] = useState('');
 
   const PAGE_SIZE = 6;
 
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const readList = (key: string) => {
+      try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw) {
+          return [] as string[];
+        }
+
+        const parsed = JSON.parse(raw) as unknown;
+        if (Array.isArray(parsed)) {
+          return parsed.filter((value): value is string => typeof value === 'string');
+        }
+
+        return [] as string[];
+      } catch (error) {
+        console.warn('Unable to parse personalization list', key, error);
+        return [] as string[];
+      }
+    };
+
+    setHiddenSlugs(readList('syntaxBlogs.hiddenSlugs'));
+    setMutedAuthorIds(readList('syntaxBlogs.mutedAuthors'));
+    setFollowedAuthorIds(readList('syntaxBlogs.followedAuthors'));
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    window.localStorage.setItem('syntaxBlogs.hiddenSlugs', JSON.stringify(hiddenSlugs));
+  }, [hiddenSlugs]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    window.localStorage.setItem('syntaxBlogs.mutedAuthors', JSON.stringify(mutedAuthorIds));
+  }, [mutedAuthorIds]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    window.localStorage.setItem('syntaxBlogs.followedAuthors', JSON.stringify(followedAuthorIds));
+  }, [followedAuthorIds]);
+
   const derivedCategories = useMemo(() => {
     const categoryMap = new Map<string, { slug: string; label: string }>();
 
@@ -57,6 +111,7 @@ export function NewBlogsPage({ posts }: NewBlogsPageProps) {
       const publishedAt = post.publishedAt ?? null;
 
       return {
+        id: post.id,
         slug: post.slug,
         title: post.title,
         excerpt: post.excerpt ?? '',
@@ -69,10 +124,15 @@ export function NewBlogsPage({ posts }: NewBlogsPageProps) {
             ? dateFormatter.format(new Date(publishedAt))
             : 'Unscheduled',
         views: post.views ?? 0,
+        authorId: post.author?.id ?? null,
+        authorName: post.author?.displayName ?? null,
       };
     });
   }, [dateFormatter, posts]);
 
+  const hiddenSlugSet = useMemo(() => new Set(hiddenSlugs), [hiddenSlugs]);
+  const mutedAuthorSet = useMemo(() => new Set(mutedAuthorIds), [mutedAuthorIds]);
+
   const recommendedTopics = useMemo(
     () => derivedCategories.map((category) => category.label),
     [derivedCategories],
@@ -89,10 +149,12 @@ export function NewBlogsPage({ posts }: NewBlogsPageProps) {
         normalizedQuery.length === 0 ||
         blog.title.toLowerCase().includes(normalizedQuery) ||
         blog.excerpt.toLowerCase().includes(normalizedQuery);
+      const isHidden = hiddenSlugSet.has(blog.slug);
+      const isMuted = Boolean(blog.authorId && mutedAuthorSet.has(blog.authorId));
 
-      return matchesCategory && matchesQuery;
+      return matchesCategory && matchesQuery && !isHidden && !isMuted;
     });
-  }, [allBlogs, query, selectedCategories]);
+  }, [allBlogs, hiddenSlugSet, mutedAuthorSet, query, selectedCategories]);
 
   const sortedBlogs = useMemo(() => {
     const copy = [...filteredBlogs];
@@ -138,6 +200,7 @@ export function NewBlogsPage({ posts }: NewBlogsPageProps) {
     const end = start + PAGE_SIZE;
 
     return sortedBlogs.slice(start, end).map((blog) => ({
+      id: blog.id,
       slug: blog.slug,
       title: blog.title,
       excerpt: blog.excerpt,
@@ -145,9 +208,61 @@ export function NewBlogsPage({ posts }: NewBlogsPageProps) {
       accentColor: blog.accentColor,
       dateLabel: blog.dateLabel,
       views: blog.views,
+      authorId: blog.authorId,
+      authorName: blog.authorName,
     }));
   }, [page, sortedBlogs]);
 
+  const handleHidePost = (blog: BlogGridItem) => {
+    setHiddenSlugs((previous) => {
+      if (previous.includes(blog.slug)) {
+        return previous;
+      }
+      return [...previous, blog.slug];
+    });
+    setStatusMessage(`We'll show fewer stories like "${blog.title}".`);
+  };
+
+  const handleToggleFollow = (
+    authorId: string,
+    action: 'follow' | 'unfollow',
+    authorName: string | null,
+  ) => {
+    setFollowedAuthorIds((previous) => {
+      const next = new Set(previous);
+      if (action === 'follow') {
+        next.add(authorId);
+        setStatusMessage(`You'll see more from ${authorName ?? 'this author'}.`);
+      } else {
+        next.delete(authorId);
+        setStatusMessage(`You will no longer follow ${authorName ?? 'this author'}.`);
+      }
+      return Array.from(next);
+    });
+  };
+
+  const handleToggleMute = (
+    authorId: string,
+    action: 'mute' | 'unmute',
+    authorName: string | null,
+  ) => {
+    setMutedAuthorIds((previous) => {
+      const next = new Set(previous);
+      if (action === 'mute') {
+        next.add(authorId);
+        setStatusMessage(`${authorName ?? 'This author'} has been muted.`);
+      } else {
+        next.delete(authorId);
+        setStatusMessage(`${authorName ?? 'This author'} has been unmuted.`);
+      }
+      return Array.from(next);
+    });
+
+    if (action === 'mute') {
+      setFollowedAuthorIds((previous) => previous.filter((id) => id !== authorId));
+    }
+  };
+
   const handleToggleCategory = (categorySlug: string) => {
     setSelectedCategories((previous) => {
       if (previous.includes(categorySlug)) {
@@ -163,6 +278,9 @@ export function NewBlogsPage({ posts }: NewBlogsPageProps) {
 
   return (
     <div className="container mx-auto px-4 pb-14 pt-10">
+      <span aria-live="polite" className="sr-only">
+        {statusMessage}
+      </span>
       <NewBlogsHeader />
       <div className="mt-8 flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-8">
         <div className="w-full lg:w-8/12 lg:overflow-y-auto">
@@ -210,7 +328,14 @@ export function NewBlogsPage({ posts }: NewBlogsPageProps) {
               <span>{selectedCategories.length > 0 ? `${selectedCategories.length} topic filter(s)` : 'All topics'}</span>
             </div>
 
-            <NewBlogGrid blogs={paginatedBlogs} />
+            <NewBlogGrid
+              blogs={paginatedBlogs}
+              onHidePost={handleHidePost}
+              onToggleFollow={handleToggleFollow}
+              onToggleMute={handleToggleMute}
+              followingAuthorIds={followedAuthorIds}
+              mutedAuthorIds={mutedAuthorIds}
+            />
 
             <div className="flex items-center justify-between gap-4">
               <button
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index ecc6e7a..09122bf 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -138,7 +138,7 @@ function AlertDialogCancel({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
   return (
     <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "neutral" }), className)}
+      className={cn(buttonVariants({ variant: "outline" }), className)}
       {...props}
     />
   )
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 2c11f35..9bf8e0e 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react"
 import { DayPicker } from "react-day-picker"
 
 import { buttonVariants } from "@/components/ui/button"
@@ -75,8 +75,22 @@ function Calendar({
         ),
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" {...props} />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" {...props} />,
+        Chevron: ({ orientation, className, disabled, ...iconProps }) => {
+          const iconClassName = cn("h-4 w-4", className)
+          void disabled
+
+          switch (orientation) {
+            case "left":
+              return <ChevronLeft className={iconClassName} {...iconProps} />
+            case "up":
+              return <ChevronUp className={iconClassName} {...iconProps} />
+            case "down":
+              return <ChevronDown className={iconClassName} {...iconProps} />
+            case "right":
+            default:
+              return <ChevronRight className={iconClassName} {...iconProps} />
+          }
+        },
       }}
       {...props}
     />
diff --git a/src/lib/posts.ts b/src/lib/posts.ts
index 8869950..d19c126 100644
--- a/src/lib/posts.ts
+++ b/src/lib/posts.ts
@@ -26,6 +26,7 @@ interface PostListRecord {
   views: number | null
   published_at: string | null
   categories: CategoryRecord | null
+  author: AuthorRecord | null
 }
 
 interface PostDetailRecord extends PostListRecord {
@@ -51,6 +52,11 @@ export interface BlogListPost {
   accentColor: string | null
   publishedAt: string | null
   views: number
+  author: {
+    id: string | null
+    displayName: string | null
+    avatarUrl: string | null
+  }
 }
 
 export interface BlogPostDetail extends BlogListPost {
@@ -80,6 +86,11 @@ const mapListPost = (record: PostListRecord): BlogListPost => ({
   accentColor: record.accent_color ?? null,
   publishedAt: record.published_at ?? null,
   views: record.views ?? 0,
+  author: {
+    id: record.author?.id ?? null,
+    displayName: record.author?.display_name ?? null,
+    avatarUrl: record.author?.avatar_url ?? null,
+  },
 })
 
 const OPTIONAL_IMAGE_COLUMNS = ['featured_image_url', 'social_image_url'] as const
@@ -205,7 +216,7 @@ export const getPublishedPosts = cache(async () => {
     const { data, error } = await supabase
       .from('posts')
       .select(
-        `id, title, slug, excerpt, accent_color, views, published_at, categories:categories(id, name, slug)`,
+        `id, title, slug, excerpt, accent_color, views, published_at, categories:categories(id, name, slug), author:author_id(id, display_name, avatar_url)`,
       )
       .eq('status', 'published')
       .order('published_at', { ascending: false })
@@ -235,7 +246,7 @@ export const getTrendingPosts = async (limit = 6) => {
     const { data, error } = await supabase
       .from('posts')
       .select(
-        `id, title, slug, excerpt, accent_color, views, published_at, categories:categories(id, name, slug)`,
+        `id, title, slug, excerpt, accent_color, views, published_at, categories:categories(id, name, slug), author:author_id(id, display_name, avatar_url)`,
       )
       .eq('status', 'published')
       .order('views', { ascending: false, nullsFirst: false })
@@ -380,7 +391,7 @@ export const searchPublishedPosts = async (query: string, limit = 12) => {
     const { data, error } = await supabase
       .from('posts')
       .select(
-        `id, title, slug, excerpt, accent_color, views, published_at, categories:categories(id, name, slug)`,
+        `id, title, slug, excerpt, accent_color, views, published_at, categories:categories(id, name, slug), author:author_id(id, display_name, avatar_url)`,
       )
       .eq('status', 'published')
       .or(
@@ -421,7 +432,7 @@ export const getRelatedPosts = async (postId: string, categorySlug: string | nul
     const { data, error } = await supabase
       .from('posts')
       .select(
-        `id, title, slug, excerpt, accent_color, views, published_at, categories:categories(id, name, slug), post_tags:post_tags(tags(name, slug))`,
+        `id, title, slug, excerpt, accent_color, views, published_at, categories:categories(id, name, slug), author:author_id(id, display_name, avatar_url), post_tags:post_tags(tags(name, slug))`,
       )
       .eq('status', 'published')
       .neq('id', postId)
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index ccfe6d3..4e79e44 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -27,3 +27,27 @@ export function generateSlug(input: string) {
     .replace(/^-+|-+$/g, '')
     .slice(0, 120)
 }
+
+/**
+ * Format large numeric counts using compact notation (e.g., 1.2K, 3.4M).
+ * Falls back to the raw number when the Intl implementation is unavailable.
+ *
+ * @param {number} value Numeric value to format.
+ * @returns {string} Human readable string representation.
+ */
+export function formatCompactNumber(value: number) {
+  if (!Number.isFinite(value)) {
+    return '0'
+  }
+
+  try {
+    const formatter = new Intl.NumberFormat('en-US', {
+      notation: 'compact',
+      maximumFractionDigits: 1,
+    })
+    return formatter.format(value)
+  } catch (error) {
+    console.warn('Unable to format number compactly', error)
+    return String(value)
+  }
+}
diff --git a/supabase/migrations/0016_create_post_votes.sql b/supabase/migrations/0016_create_post_votes.sql
new file mode 100644
index 0000000..dcbdc2a
--- /dev/null
+++ b/supabase/migrations/0016_create_post_votes.sql
@@ -0,0 +1,116 @@
+-- =================================================================
+-- POST VOTE REACTIONS
+-- =================================================================
+-- Enables upvote/downvote reactions on blog posts backed by Supabase.
+-- Tracks each profile's vote and keeps metadata ready for aggregation.
+-- =================================================================
+
+-- Ensure enum exists
+DO $$
+BEGIN
+  IF NOT EXISTS (
+    SELECT 1
+    FROM pg_type t
+    WHERE t.typname = 'post_vote_type'
+      AND t.typnamespace = 'public'::regnamespace
+  ) THEN
+    CREATE TYPE public.post_vote_type AS ENUM ('upvote', 'downvote');
+  END IF;
+END;
+$$;
+
+-- Create table
+CREATE TABLE IF NOT EXISTS public.post_votes (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  post_id uuid NOT NULL REFERENCES public.posts(id) ON DELETE CASCADE,
+  profile_id uuid NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE,
+  vote_type public.post_vote_type NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  updated_at timestamptz NOT NULL DEFAULT now(),
+  CONSTRAINT post_votes_unique UNIQUE(post_id, profile_id)
+);
+
+CREATE INDEX IF NOT EXISTS post_votes_post_id_idx ON public.post_votes(post_id);
+CREATE INDEX IF NOT EXISTS post_votes_profile_id_idx ON public.post_votes(profile_id);
+CREATE INDEX IF NOT EXISTS post_votes_vote_type_idx ON public.post_votes(vote_type);
+
+-- Updated at trigger
+DO $$
+BEGIN
+  IF NOT EXISTS (
+    SELECT 1
+    FROM pg_trigger
+    WHERE tgname = 'post_votes_set_updated_at'
+      AND tgrelid = 'public.post_votes'::regclass
+  ) THEN
+    CREATE TRIGGER post_votes_set_updated_at
+      BEFORE UPDATE ON public.post_votes
+      FOR EACH ROW EXECUTE FUNCTION public.set_updated_at();
+  END IF;
+END;
+$$;
+
+-- Enable RLS
+ALTER TABLE public.post_votes ENABLE ROW LEVEL SECURITY;
+
+-- Policy: allow users to manage their own votes
+DO $$
+BEGIN
+  IF NOT EXISTS (
+    SELECT 1
+    FROM pg_policies
+    WHERE schemaname = 'public'
+      AND tablename = 'post_votes'
+      AND policyname = 'Users can manage their post votes'
+  ) THEN
+    CREATE POLICY "Users can manage their post votes"
+      ON public.post_votes
+      FOR ALL
+      USING (
+        profile_id IN (
+          SELECT id FROM public.profiles WHERE user_id = auth.uid()
+        )
+      )
+      WITH CHECK (
+        profile_id IN (
+          SELECT id FROM public.profiles WHERE user_id = auth.uid()
+        )
+      );
+  END IF;
+END;
+$$;
+
+-- Policy: admins can manage all votes
+DO $$
+BEGIN
+  IF NOT EXISTS (
+    SELECT 1
+    FROM pg_policies
+    WHERE schemaname = 'public'
+      AND tablename = 'post_votes'
+      AND policyname = 'Admins can manage post votes'
+  ) THEN
+    CREATE POLICY "Admins can manage post votes"
+      ON public.post_votes
+      FOR ALL
+      USING (
+        EXISTS (
+          SELECT 1
+          FROM public.profiles
+          WHERE user_id = auth.uid()
+            AND is_admin = TRUE
+        )
+      )
+      WITH CHECK (
+        EXISTS (
+          SELECT 1
+          FROM public.profiles
+          WHERE user_id = auth.uid()
+            AND is_admin = TRUE
+        )
+      );
+  END IF;
+END;
+$$;
+
+COMMENT ON TABLE public.post_votes IS 'Stores per-profile upvote/downvote reactions for blog posts.';
diff --git a/tests/unit/format-compact-number.test.ts b/tests/unit/format-compact-number.test.ts
new file mode 100644
index 0000000..6b6c2be
--- /dev/null
+++ b/tests/unit/format-compact-number.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { formatCompactNumber } from '@/lib/utils';
+
+describe('formatCompactNumber', () => {
+  it('formats small values without notation changes', () => {
+    expect(formatCompactNumber(42)).toBe('42');
+  });
+
+  it('formats large numbers using compact notation', () => {
+    expect(formatCompactNumber(1500)).toBe('1.5K');
+    expect(formatCompactNumber(2_500_000)).toBe('2.5M');
+  });
+
+  it('returns 0 when value is not finite', () => {
+    expect(formatCompactNumber(Number.POSITIVE_INFINITY)).toBe('0');
+    expect(formatCompactNumber(Number.NaN)).toBe('0');
+  });
+});