diff --git a/.cursor/plans/micro-interaction_ads_platform_76f79a28.plan.md b/.cursor/plans/micro-interaction_ads_platform_76f79a28.plan.md
new file mode 100644
index 00000000000..ed510fb09c7
--- /dev/null
+++ b/.cursor/plans/micro-interaction_ads_platform_76f79a28.plan.md
@@ -0,0 +1,429 @@
+---
+name: Micro-Interaction Ads Platform
+overview: "Build a micro-interaction advertising system allowing brands to sponsor UI elements: tags, upvote animations, external store coupons in wallet, promotional checklists with core rewards, and highlighted word tooltips."
+todos:
+  - id: brand-types
+    content: Create brand configuration types in packages/shared/src/lib/brand.ts
+    status: completed
+  - id: brand-hook
+    content: Implement useBrandSponsorship hook with GrowthBook integration
+    status: completed
+  - id: tag-branding
+    content: Build BrandedTag component with animation using framer-motion
+    status: completed
+  - id: greeting-sponsor
+    content: Create SponsoredGreeting component and integrate with CardWelcome
+    status: cancelled
+  - id: upvote-animation
+    content: Implement branded upvote animation with particle effects
+    status: completed
+  - id: wallet-coupons
+    content: Add "My Coupons" section to wallet for external store discount codes
+    status: completed
+  - id: promoted-checklist
+    content: Build PromotedChecklist popover with trigger banner and task verification
+    status: completed
+  - id: highlighted-word
+    content: Build HighlightedWord component with sponsored tooltip on hover/click
+    status: completed
+  - id: coupons-page
+    content: Create dedicated coupons page at /settings/coupons with search and favorites
+    status: completed
+  - id: coupon-widget
+    content: Build SponsoredCouponWidget for post modal sidebar
+    status: completed
+isProject: false
+---
+
+# Micro-Interaction Ads Platform
+
+## Architecture Overview
+
+```mermaid
+graph TB
+    subgraph DataLayer [Data Layer]
+        BrandConfig[BrandConfig Interface]
+        useBrandSponsorship[useBrandSponsorship Hook]
+        GrowthBook[Feature Flags]
+    end
+    
+    subgraph Features [Micro-Interaction Features]
+        TagBranding[Tag Branding ✅]
+        UpvoteAnimation[Upvote Animation ✅]
+        WalletCoupon[Wallet Coupons ✅]
+        CouponsPage[Coupons Page ✅]
+        CouponWidget[Coupon Widget ✅]
+        PromotedChecklist[Promoted Checklist ✅]
+        HighlightedWord[Highlighted Word Tooltip ✅]
+    end
+    
+    BrandConfig --> useBrandSponsorship
+    GrowthBook --> useBrandSponsorship
+    useBrandSponsorship --> TagBranding
+    useBrandSponsorship --> UpvoteAnimation
+    useBrandSponsorship --> WalletCoupon
+    useBrandSponsorship --> CouponWidget
+    WalletCoupon --> CouponsPage
+    useBrandSponsorship --> PromotedChecklist
+    useBrandSponsorship --> HighlightedWord
+```
+
+
+
+## 1. Core Brand Configuration Types ✅
+
+Create shared types in `[packages/shared/src/lib/brand.ts](packages/shared/src/lib/brand.ts)`:
+
+```typescript
+interface BrandConfig {
+  id: string;
+  name: string;           // "Copilot"
+  slug: string;           // "copilot"
+  colors: {
+    primary: string;      // Brand primary color
+    secondary: string;
+    gradient?: string;
+  };
+  logo: string;           // Brand logo URL
+  sponsoredTags: string[];  // ["ai", "copilot", "github"]
+  
+  // Feature-specific configs
+  tagBranding?: TagBrandingConfig;
+  upvoteAnimation?: UpvoteAnimationConfig;
+  couponCampaign?: CouponCampaignConfig;
+  promotedChecklist?: PromotedChecklistConfig;
+  highlightedWord?: HighlightedWordConfig;
+}
+```
+
+**Mock Brand Config (GitHub Copilot):**
+
+```typescript
+const MOCK_COPILOT_BRAND: BrandConfig = {
+  id: 'copilot',
+  name: 'GitHub Copilot',
+  slug: 'copilot',
+  colors: {
+    primary: '#6e40c9',     // Copilot purple
+    secondary: '#1f6feb',   // GitHub blue
+    gradient: 'linear-gradient(135deg, #6e40c9 0%, #1f6feb 100%)',
+  },
+  logo: 'https://github.githubassets.com/images/icons/copilot/cp-head-square.png',
+  sponsoredTags: ['ai', 'copilot', 'github', 'machine-learning'],
+  // ... feature configs
+};
+```
+
+## 2. Feature: Tag Branding ✅
+
+**Files to modify:**
+
+- `[packages/shared/src/components/tags/TagElement.tsx](packages/shared/src/components/tags/TagElement.tsx)`
+- `[packages/shared/src/components/cards/common/PostTags.tsx](packages/shared/src/components/cards/common/PostTags.tsx)`
+
+**Implementation:**
+
+- Create `BrandedTag` wrapper component
+- Animate tag text transition after 1 second delay
+- Add brand suffix ("powered by Copilot") or brand arrow ("Copilot ->")
+- Use framer-motion for smooth text transitions
+
+```typescript
+interface TagBrandingConfig {
+  style: 'suffix' | 'replace' | 'arrow';  // "ai - powered by Copilot" | "#Copilot" | "#Copilot ->"
+  delay: number;          // Animation delay in ms
+  targetUrl?: string;     // Optional click-through URL
+}
+```
+
+## 3. Feature: Greeting Sponsorship (REMOVED)
+
+~~**Location:** Modify existing Log page greeting (`/log`)~~
+
+**Status:** This feature was removed from the /log page. The greeting sponsorship types remain in the codebase for potential future use in other locations.
+
+## 4. Feature: Branded Upvote Animation ✅
+
+**Files to modify:**
+
+- `[packages/shared/src/components/cards/common/UpvoteButtonIcon.tsx](packages/shared/src/components/cards/common/UpvoteButtonIcon.tsx)`
+- `[packages/shared/src/hooks/vote/useVotePost.ts](packages/shared/src/hooks/vote/useVotePost.ts)`
+
+**Implementation:**
+
+- Add framer-motion for animation (already used in Log cards)
+- Create particle/confetti effect using brand colors
+- Trigger animation when upvoting posts with matching tags
+- Animation options: confetti, ripple, burst, glow
+
+```typescript
+interface UpvoteAnimationConfig {
+  type: 'confetti' | 'ripple' | 'burst' | 'glow';
+  particleCount?: number;
+  duration: number;
+}
+```
+
+## 5. Feature: Wallet Coupons (External Store Codes) ✅
+
+Brands can send **external discount codes** to users' wallets. Users copy these codes and redeem them on the brand's external store (e.g., "20% off Copilot Pro" redeemed at GitHub checkout).
+
+**Files created:**
+
+- `packages/shared/src/components/wallet/CouponCard.tsx` - Standalone coupon display card ✅
+- `packages/shared/src/components/wallet/SponsoredCouponWidget.tsx` - Post modal sidebar widget ✅
+- `packages/webapp/pages/settings/coupons.tsx` - Full coupons page with search & favorites ✅
+
+**Files modified:**
+
+- `[packages/webapp/pages/wallet.tsx](packages/webapp/pages/wallet.tsx)` - Integrated coupon section ✅
+- `[packages/shared/src/components/ProfileMenu/sections/MainSection.tsx](packages/shared/src/components/ProfileMenu/sections/MainSection.tsx)` - Added coupons link ✅
+- `[packages/shared/src/components/profile/ProfileSettingsMenu.tsx](packages/shared/src/components/profile/ProfileSettingsMenu.tsx)` - Added coupons menu item ✅
+
+**Implementation:**
+
+- Display coupon codes users can copy to clipboard
+- Show brand logo, discount description, and expiration date
+- "Redeem" button links to brand's external store
+- Coupon states: active, used (self-reported), expired
+- Toast notification when new coupon is received
+
+```typescript
+interface BrandCoupon {
+  id: string;
+  brandId: string;
+  code: string;              // "COPILOT20" - the actual discount code
+  description: string;       // "20% off Copilot Pro subscription"
+  expiresAt: Date;
+  redeemUrl: string;         // "https://github.com/copilot/checkout"
+  termsUrl?: string;         // Link to terms & conditions
+  isUsed: boolean;           // User marks as used (optional tracking)
+}
+
+interface CouponCampaignConfig {
+  coupons: BrandCoupon[];
+}
+```
+
+**UI Flow:**
+
+1. Brand sends coupon to eligible users (via backend)
+2. User sees notification: "You received a coupon from Copilot!"
+3. Coupon appears in wallet under "My Coupons" section
+4. User clicks "Copy Code" -> code copied to clipboard
+5. User clicks "Redeem" -> opens brand's external store in new tab
+6. User can optionally mark coupon as "Used"
+
+**Additional Implementations:**
+
+### Dedicated Coupons Page (`/settings/coupons`) ✅
+
+A full-featured coupons management page in settings:
+
+- **Search**: Filter coupons by company, category, title, or description
+- **Favorites**: Star coupons to pin them to the top (persisted in localStorage)
+- **Card Grid**: Responsive 2-column grid on tablet+
+- **Modal Details**: Click coupon card to view full details with:
+  - Copy code button
+  - Step-by-step redemption instructions
+  - Direct link to brand website
+- **Mock Data**: 6 sample coupons (GitHub, JetBrains, Vercel, Notion, Figma, Linear)
+
+### Post Modal Sidebar Widget (`SponsoredCouponWidget`) ✅
+
+Shows contextual coupons in post modal sidebar when:
+
+- Post has tags matching the active brand's sponsored tags
+- Brand has active coupon campaign
+- Coupon is not expired or used
+
+Features:
+
+- Brand-colored gradient border
+- Copy code on click
+- "Redeem at {domain}" CTA button
+
+## 6. Feature: Promoted Checklist ✅
+
+**Location:** Popover triggered by a promotional banner/button
+
+**Files created:**
+
+- `packages/shared/src/components/checklist/PromotedChecklist.tsx` - Main checklist UI with hero header, animated coins, progress bar ✅
+- `packages/shared/src/components/checklist/PromotedChecklistBanner.tsx` - Promotional banner for sidebar/feed ✅
+- `packages/shared/src/components/checklist/PromotedChecklistMenuItem.tsx` - Compact menu item variant ✅
+- `packages/shared/src/hooks/usePromotedChecklist.ts` - State management with localStorage persistence ✅
+
+**Leverage existing:**
+
+- `[packages/shared/src/hooks/useChecklist.ts](packages/shared/src/hooks/useChecklist.ts)` - Checklist logic
+- `[packages/shared/src/graphql/actions.ts](packages/shared/src/graphql/actions.ts)` - ActionType enum
+- Existing popover patterns in the codebase
+
+**Implementation:**
+
+- Show a promotional banner in the feed or sidebar: "Complete the Copilot Challenge - Earn 500 Cores!"
+- Clicking banner opens a popover with task list
+- Each task has a "Verify" button (for prototype: mock verification with localStorage)
+- Progress bar showing completed tasks
+- Award cores via existing `AWARD_MUTATION` (mocked for prototype)
+
+```typescript
+interface PromotedChecklistConfig {
+  title: string;          // "Copilot Challenge"
+  description: string;    // "Complete tasks to earn cores"
+  tasks: PromotedTask[];
+  totalReward: number;    // Total cores for completion
+}
+
+interface PromotedTask {
+  id: string;
+  title: string;          // "Follow @GitHubCopilot on X"
+  description?: string;
+  reward: number;         // Cores awarded per task
+  verifyUrl?: string;     // External link to complete task
+  icon?: string;          // Task icon (e.g., X logo for follow task)
+}
+```
+
+**Example tasks for Copilot:**
+
+1. "Follow @GitHubCopilot on X" - 100 cores
+2. "Try Copilot free for 30 days" - 200 cores
+3. "Star the Copilot repo on GitHub" - 100 cores
+4. "Share your Copilot experience" - 100 cores
+
+## 7. Feature: Highlighted Word Tooltip ✅
+
+**Location:** Post content, comments, article previews - anywhere text is displayed
+
+**Files to create:**
+
+- `packages/shared/src/components/brand/HighlightedWord.tsx` - Highlighted word with tooltip
+- `packages/shared/src/components/brand/SponsoredTooltip.tsx` - Tooltip content with brand info
+
+**Implementation:**
+
+- Scan text content for configured keywords (e.g., "AI", "machine learning", "copilot")
+- Wrap matched keywords with `HighlightedWord` component
+- On hover/click, show a sponsored tooltip with brand info and CTA
+- Tooltip includes: brand logo, short message, and optional action button
+- Subtle highlight styling (dotted underline or background) to indicate sponsorship
+- Track impressions and clicks for analytics
+
+```typescript
+interface HighlightedWordConfig {
+  keywords: string[];           // Words to highlight (case-insensitive)
+  tooltipTitle: string;         // "Powered by GitHub Copilot"
+  tooltipDescription: string;   // "AI pair programming for developers"
+  ctaText?: string;             // "Try Free" button text
+  ctaUrl?: string;              // Click-through URL
+  highlightStyle: 'underline' | 'background' | 'dotted';
+  triggerOn: 'hover' | 'click' | 'both';
+}
+```
+
+**Example configuration for Copilot:**
+
+```typescript
+highlightedWord: {
+  keywords: ['AI', 'artificial intelligence', 'code completion', 'copilot'],
+  tooltipTitle: 'GitHub Copilot',
+  tooltipDescription: 'Your AI pair programmer. Write code faster with intelligent suggestions.',
+  ctaText: 'Try Free for 30 Days',
+  ctaUrl: 'https://github.com/features/copilot',
+  highlightStyle: 'dotted',
+  triggerOn: 'hover',
+}
+```
+
+**UI Behavior:**
+
+1. User reads post content containing keyword "AI"
+2. "AI" appears with subtle dotted underline indicating it's interactive
+3. On hover (or click based on config), tooltip appears above the word
+4. Tooltip shows: Copilot logo, "Your AI pair programmer", and "Try Free" button
+5. Clicking CTA opens brand URL in new tab
+6. Tooltip has "Sponsored" label for transparency
+
+**Integration points:**
+
+- Post cards (title, description)
+- Post page content
+- Comments section
+- Search results snippets
+
+## 8. Central Hook: useBrandSponsorship ✅
+
+Create `[packages/shared/src/hooks/useBrandSponsorship.ts](packages/shared/src/hooks/useBrandSponsorship.ts)`:
+
+```typescript
+const useBrandSponsorship = () => {
+  const { value: brandConfig } = useConditionalFeature({
+    feature: 'brand_sponsorship_config',
+    shouldEvaluate: true,
+  });
+  
+  return {
+    activeBrand: brandConfig,
+    getSponsoredTag: (tag: string) => /* ... */,
+    getUpvoteAnimation: (postTags: string[]) => /* ... */,
+    getCoupons: () => /* ... */,
+    getPromotedChecklist: () => /* ... */,
+    getHighlightedWordConfig: () => /* ... */,
+    isKeywordHighlighted: (word: string) => /* ... */,
+  };
+};
+```
+
+## File Structure
+
+```
+packages/shared/src/
+├── lib/
+│   └── brand.ts                    # Brand types, mock data, and utilities ✅
+├── hooks/
+│   ├── useBrandSponsorship.ts      # Central brand hook ✅
+│   └── usePromotedChecklist.ts     # Checklist state management ✅
+├── components/
+│   ├── brand/
+│   │   ├── BrandedTag.tsx          # Tag branding with animation ✅
+│   │   ├── BrandedTag.module.css   # Tag animation styles ✅
+│   │   ├── BrandedUpvoteAnimation.tsx  # Confetti/particle animation ✅
+│   │   ├── HighlightedWord.tsx     # Highlighted keyword with tooltip ✅
+│   │   └── SponsoredTooltip.tsx    # Tooltip content component ✅
+│   ├── checklist/
+│   │   ├── PromotedChecklist.tsx       # Main checklist UI ✅
+│   │   ├── PromotedChecklist.module.css # Checklist styles ✅
+│   │   ├── PromotedChecklistBanner.tsx  # Promotional banner component ✅
+│   │   ├── PromotedChecklistBanner.module.css # Banner styles ✅
+│   │   ├── PromotedChecklistMenuItem.tsx # Menu item variant ✅
+│   │   └── PromotedChecklistMenuItem.module.css # Menu item styles ✅
+│   └── wallet/
+│       ├── CouponCard.tsx          # Standalone coupon card ✅
+│       └── SponsoredCouponWidget.tsx # Post modal sidebar coupon widget ✅
+
+packages/webapp/
+└── pages/
+    ├── wallet.tsx                  # Modified for coupon section ✅
+    └── settings/
+        └── coupons.tsx             # Full coupons page with search & favorites ✅
+```
+
+## Design Considerations for Future Admin Panel
+
+The `BrandConfig` interface is designed to be:
+
+- Serializable to JSON for storage in backend
+- Configurable via GrowthBook feature flags initially
+- Migrated to dedicated admin API later
+
+Admin panel would allow brands to:
+
+- Upload logo and set brand colors
+- Select which tags to sponsor
+- Design upvote animations
+- Create and distribute external store coupon codes to users
+- Build promotional checklists with core rewards
+- Configure highlighted keywords with custom tooltips and CTAs
+
diff --git a/packages/shared/src/components/FeedItemComponent.tsx b/packages/shared/src/components/FeedItemComponent.tsx
index 99382f176a6..d3cd7ca2bde 100644
--- a/packages/shared/src/components/FeedItemComponent.tsx
+++ b/packages/shared/src/components/FeedItemComponent.tsx
@@ -41,6 +41,8 @@ import { LogExtraContextProvider } from '../contexts/LogExtraContext';
 import { SquadAdList } from './cards/ad/squad/SquadAdList';
 import { SquadAdGrid } from './cards/ad/squad/SquadAdGrid';
 import { adLogEvent, feedLogExtra } from '../lib/feed';
+import { findCreativeForTags } from '../lib/engagementAds';
+import { useEngagementAdsContext } from '../contexts/EngagementAdsContext';
 import { useLogContext } from '../contexts/LogContext';
 import { MarketingCtaVariant } from './marketingCta/common';
 import { MarketingCtaBriefing } from './marketingCta/MarketingCtaBriefing';
@@ -186,6 +188,7 @@ export const withFeedLogExtraContext = (
     props: FeedItemComponentProps,
   ): ReactElement | null => {
     const { item } = props;
+    const { creatives } = useEngagementAdsContext();
 
     if ([FeedItemType.Ad, FeedItemType.Post].includes(item?.type)) {
       return (
@@ -207,6 +210,17 @@ export const withFeedLogExtraContext = (
               extraData.referrer_target_type = post?.id
                 ? TargetType.Post
                 : undefined;
+
+              if (
+                item.type === FeedItemType.Post &&
+                post?.tags &&
+                creatives.length > 0
+              ) {
+                const creative = findCreativeForTags(creatives, post.tags);
+                if (creative) {
+                  extraData.gen_id = creative.genId;
+                }
+              }
             }
 
             if (isBoostedSquadAd(item)) {
diff --git a/packages/shared/src/components/ProfileMenu/sections/MainSection.tsx b/packages/shared/src/components/ProfileMenu/sections/MainSection.tsx
index 9043bca3724..949d3806133 100644
--- a/packages/shared/src/components/ProfileMenu/sections/MainSection.tsx
+++ b/packages/shared/src/components/ProfileMenu/sections/MainSection.tsx
@@ -3,11 +3,11 @@ import type { ReactElement } from 'react';
 
 import { ProfileSection } from '../ProfileSection';
 import {
-  AnalyticsIcon,
   CoinIcon,
   DevCardIcon,
-  MedalBadgeIcon,
   UserIcon,
+  AnalyticsIcon,
+  MedalBadgeIcon,
 } from '../../icons';
 import { settingsUrl, walletUrl, webappUrl } from '../../../lib/constants';
 import { useAuthContext } from '../../../contexts/AuthContext';
@@ -40,6 +40,12 @@ export const MainSection = (): ReactElement => {
           href: `${settingsUrl}/customization/devcard`,
           icon: DevCardIcon,
         },
+        // TODO: Re-enable when ready
+        // {
+        //   title: 'Coupons',
+        //   href: `${settingsUrl}/coupons`,
+        //   icon: GiftIcon,
+        // },
         {
           title: 'Analytics',
           href: `${webappUrl}analytics`,
diff --git a/packages/shared/src/components/brand/BrandedTag.module.css b/packages/shared/src/components/brand/BrandedTag.module.css
new file mode 100644
index 00000000000..580ba0b3e06
--- /dev/null
+++ b/packages/shared/src/components/brand/BrandedTag.module.css
@@ -0,0 +1,62 @@
+/* BrandedTag - Micro-interaction animations for sponsored tags */
+
+.brandedTag {
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.brandedTag:hover {
+  transform: scale(1.02);
+}
+
+/* Tag content */
+.tagContent {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Branded content */
+.brandedContent {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.brandedContent.fadeIn {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Brand logo pulse effect */
+.brandLogo {
+  animation: logoPulse 2s ease-in-out infinite;
+}
+
+@keyframes logoPulse {
+  0%, 100% {
+    transform: scale(1);
+    filter: drop-shadow(0 0 0 transparent);
+  }
+  50% {
+    transform: scale(1.1);
+    filter: drop-shadow(0 0 4px currentColor);
+  }
+}
+
+/* Brand text */
+.brandText {
+  white-space: nowrap;
+}
+
+/* Animated (branded) state — continuous glow, no entrance animation */
+.animated {
+  animation: tagGlow 2s ease-in-out infinite;
+}
+
+@keyframes tagGlow {
+  0%, 100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+  50% {
+    box-shadow: 0 0 8px 0 var(--brand-primary, #6e40c9);
+  }
+}
diff --git a/packages/shared/src/components/brand/BrandedTag.tsx b/packages/shared/src/components/brand/BrandedTag.tsx
new file mode 100644
index 00000000000..53a475f8f8f
--- /dev/null
+++ b/packages/shared/src/components/brand/BrandedTag.tsx
@@ -0,0 +1,207 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { useBrandSponsorship } from '../../hooks/useBrandSponsorship';
+import type { TagBrandingStyle } from '../../lib/brand';
+import { Tooltip } from '../tooltip/Tooltip';
+import { SponsoredTooltip } from './SponsoredTooltip';
+import styles from './BrandedTag.module.css';
+
+interface BrandedTagProps {
+  tag: string;
+  className?: string;
+  onClick?: () => void;
+  /** Render as span instead of button (for use inside links) */
+  asSpan?: boolean;
+  /** Force disable branding even if tag is sponsored */
+  disableBranding?: boolean;
+}
+
+/**
+ * BrandedTag Component
+ *
+ * Renders a tag with optional brand sponsorship animation.
+ * When a tag is sponsored, it animates to show the brand association.
+ *
+ * Animation styles:
+ * - 'suffix': "ai" -> "ai - powered by Copilot"
+ * - 'replace': "ai" -> "Copilot"
+ * - 'arrow': "ai" -> "Copilot →"
+ */
+export const BrandedTag = ({
+  tag,
+  className,
+  onClick,
+  asSpan = false,
+  disableBranding = false,
+}: BrandedTagProps): ReactElement => {
+  const { getSponsoredTag, getHighlightedWordConfig } = useBrandSponsorship();
+  const rawSponsorInfo = getSponsoredTag(tag);
+  // Allow disabling branding externally (e.g., to limit to one sponsored tag per list)
+  const sponsorInfo = disableBranding
+    ? { ...rawSponsorInfo, isSponsored: false }
+    : rawSponsorInfo;
+  const isAnimated = sponsorInfo.isSponsored && !!sponsorInfo.branding;
+  const showBranding = isAnimated;
+
+  const getBrandedContent = (style: TagBrandingStyle): string => {
+    if (!sponsorInfo.brandName) {
+      return `#${tag}`;
+    }
+
+    switch (style) {
+      case 'suffix':
+        return `#${tag} - powered by ${sponsorInfo.brandName}`;
+      case 'replace':
+        return `#${sponsorInfo.brandName}`;
+      case 'arrow':
+        return `${sponsorInfo.brandName} →`;
+      default:
+        return `#${tag}`;
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent): void => {
+    // When used as a span inside a link (asSpan=true), don't intercept - let the parent link handle navigation
+    // For standalone buttons with branding shown, open brand URL in new tab
+    if (!asSpan && sponsorInfo.targetUrl && showBranding) {
+      e.preventDefault();
+      e.stopPropagation();
+      window.open(sponsorInfo.targetUrl, '_blank', 'noopener,noreferrer');
+      return;
+    }
+    onClick?.();
+  };
+
+  const baseClassName = classNames(
+    'flex h-6 items-center justify-center rounded-8 border border-border-subtlest-tertiary px-2 text-text-quaternary typo-footnote',
+    className,
+  );
+
+  const sponsoredClassName = classNames(
+    styles.brandedTag,
+    'relative flex h-6 items-center overflow-hidden rounded-8 border px-2 typo-footnote',
+    {
+      'border-border-subtlest-tertiary text-text-quaternary': !isAnimated,
+      [styles.animated]: isAnimated,
+    },
+    className,
+  );
+
+  const sponsoredStyle =
+    isAnimated && sponsorInfo.colors
+      ? ({
+          borderColor: sponsorInfo.colors.primary,
+          background: `linear-gradient(135deg, ${sponsorInfo.colors.primary}15 0%, ${sponsorInfo.colors.secondary}15 100%)`,
+          '--brand-primary': sponsorInfo.colors.primary,
+        } as React.CSSProperties)
+      : undefined;
+
+  const brandedText = sponsorInfo.branding
+    ? getBrandedContent(sponsorInfo.branding.style)
+    : '';
+
+  const content = (
+    <>
+      {/* Original tag — hidden when branded */}
+      {!showBranding && (
+        <span className={classNames(styles.tagContent, 'whitespace-nowrap')}>
+          #{tag}
+        </span>
+      )}
+
+      {/* Branded content with logo and styled text */}
+      {showBranding && sponsorInfo.branding && (
+        <span
+          className={classNames(
+            styles.brandedContent,
+            styles.fadeIn,
+            'flex items-center justify-center gap-1.5 whitespace-nowrap text-text-tertiary',
+          )}
+        >
+          {sponsorInfo.branding.showLogo !== false && sponsorInfo.brandLogo && (
+            <img
+              src={sponsorInfo.brandLogo}
+              alt={sponsorInfo.brandName || ''}
+              className={classNames(styles.brandLogo, 'size-3.5 rounded-full')}
+            />
+          )}
+          <span className={styles.brandText}>{brandedText}</span>
+        </span>
+      )}
+    </>
+  );
+
+  // Get tooltip config for sponsored tags
+  const highlightedWordResult = getHighlightedWordConfig([tag]);
+  const showTooltip =
+    showBranding &&
+    sponsorInfo.isSponsored &&
+    highlightedWordResult.config &&
+    sponsorInfo.brandName;
+
+  const tooltipContent = showTooltip ? (
+    <SponsoredTooltip
+      config={highlightedWordResult.config}
+      brandName={sponsorInfo.brandName}
+      brandLogo={sponsorInfo.brandLogo}
+      colors={sponsorInfo.colors}
+    />
+  ) : null;
+
+  // Render as span for use inside links
+  if (asSpan) {
+    const spanElement = (
+      <span
+        role="presentation"
+        onClick={handleClick}
+        className={sponsorInfo.isSponsored ? sponsoredClassName : baseClassName}
+        style={sponsorInfo.isSponsored ? sponsoredStyle : undefined}
+      >
+        {content}
+      </span>
+    );
+
+    if (showTooltip) {
+      return (
+        <Tooltip
+          content={tooltipContent}
+          side="bottom"
+          className="no-arrow !max-w-none !rounded-16 !bg-transparent !p-0"
+        >
+          {spanElement}
+        </Tooltip>
+      );
+    }
+
+    return spanElement;
+  }
+
+  // Render as button for standalone use
+  const buttonElement = (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={sponsorInfo.isSponsored ? sponsoredClassName : baseClassName}
+      style={sponsorInfo.isSponsored ? sponsoredStyle : undefined}
+    >
+      {content}
+    </button>
+  );
+
+  if (showTooltip) {
+    return (
+      <Tooltip
+        content={tooltipContent}
+        side="bottom"
+        className="!max-w-none !rounded-16 !bg-transparent !p-0 [&_.TooltipArrow]:hidden"
+      >
+        {buttonElement}
+      </Tooltip>
+    );
+  }
+
+  return buttonElement;
+};
+
+export default BrandedTag;
diff --git a/packages/shared/src/components/brand/BrandedUpvoteAnimation.tsx b/packages/shared/src/components/brand/BrandedUpvoteAnimation.tsx
new file mode 100644
index 00000000000..e6e38b99cf1
--- /dev/null
+++ b/packages/shared/src/components/brand/BrandedUpvoteAnimation.tsx
@@ -0,0 +1,275 @@
+import type { ReactElement, CSSProperties } from 'react';
+import React, { useEffect, useRef, useState, useCallback, memo } from 'react';
+import type { BrandColors, UpvoteAnimationConfig } from '../../lib/brand';
+
+interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  size: number;
+  color: string;
+  alpha: number;
+  rotation: number;
+  rotationSpeed: number;
+  type: 'circle' | 'star' | 'square';
+}
+
+interface BrandedUpvoteAnimationProps {
+  /** Trigger the animation */
+  isActive: boolean;
+  /** Brand colors for the particles */
+  colors: BrandColors;
+  /** Animation configuration */
+  config: UpvoteAnimationConfig;
+  /** Callback when animation completes */
+  onComplete?: () => void;
+  /** Custom styles for positioning */
+  style?: CSSProperties;
+  /** Custom class name */
+  className?: string;
+}
+
+const drawStar = (
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  size: number,
+  rotation: number,
+): void => {
+  const spikes = 5;
+  const outerRadius = size;
+  const innerRadius = size / 2;
+
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(rotation);
+  ctx.beginPath();
+
+  for (let i = 0; i < spikes * 2; i += 1) {
+    const radius = i % 2 === 0 ? outerRadius : innerRadius;
+    const angle = (i * Math.PI) / spikes - Math.PI / 2;
+    const px = Math.cos(angle) * radius;
+    const py = Math.sin(angle) * radius;
+
+    if (i === 0) {
+      ctx.moveTo(px, py);
+    } else {
+      ctx.lineTo(px, py);
+    }
+  }
+
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+};
+
+const drawParticle = (
+  ctx: CanvasRenderingContext2D,
+  particle: Particle,
+): void => {
+  ctx.globalAlpha = particle.alpha;
+  ctx.fillStyle = particle.color;
+
+  switch (particle.type) {
+    case 'circle':
+      ctx.beginPath();
+      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    case 'star':
+      drawStar(ctx, particle.x, particle.y, particle.size, particle.rotation);
+      break;
+    case 'square':
+      ctx.save();
+      ctx.translate(particle.x, particle.y);
+      ctx.rotate(particle.rotation);
+      ctx.fillRect(
+        -particle.size / 2,
+        -particle.size / 2,
+        particle.size,
+        particle.size,
+      );
+      ctx.restore();
+      break;
+    default:
+      break;
+  }
+};
+
+/**
+ * BrandedUpvoteAnimation
+ *
+ * A high-performance particle animation component for branded upvotes.
+ * Uses canvas for smooth 60fps animations with brand-colored particles.
+ *
+ * Animation types:
+ * - confetti: Colorful particles exploding outward
+ * - ripple: Concentric circles expanding from center
+ * - burst: Particles shooting outward in all directions
+ * - glow: Pulsing glow effect with particles
+ */
+const BrandedUpvoteAnimation = memo(
+  ({
+    isActive,
+    colors,
+    config,
+    onComplete,
+    style,
+    className,
+  }: BrandedUpvoteAnimationProps): ReactElement | null => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const particlesRef = useRef<Particle[]>([]);
+    const animationFrameRef = useRef<number | null>(null);
+    const [shouldRender, setShouldRender] = useState(false);
+
+    const createParticle = useCallback(
+      (centerX: number, centerY: number): Particle => {
+        const angle = Math.random() * Math.PI * 2;
+        const speed = 2 + Math.random() * 4;
+        const colorOptions = [colors.primary, colors.secondary, '#ffffff'];
+
+        return {
+          x: centerX,
+          y: centerY,
+          vx: Math.cos(angle) * speed,
+          vy: Math.sin(angle) * speed - 2, // Slight upward bias
+          size: 3 + Math.random() * 5,
+          color: colorOptions[Math.floor(Math.random() * colorOptions.length)],
+          alpha: 1,
+          rotation: Math.random() * Math.PI * 2,
+          rotationSpeed: (Math.random() - 0.5) * 0.2,
+          type: (['circle', 'star', 'square'] as const)[
+            Math.floor(Math.random() * 3)
+          ],
+        };
+      },
+      [colors],
+    );
+
+    const animate = useCallback(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) {
+        return;
+      }
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        return;
+      }
+
+      // Clear canvas
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Update and draw particles
+      const activeParticles: Particle[] = [];
+
+      particlesRef.current.forEach((particle) => {
+        // Update position
+        const updatedParticle = { ...particle };
+        updatedParticle.x += updatedParticle.vx;
+        updatedParticle.y += updatedParticle.vy;
+        updatedParticle.vy += 0.15; // Gravity
+        updatedParticle.alpha -= 0.015;
+        updatedParticle.rotation += updatedParticle.rotationSpeed;
+        updatedParticle.size *= 0.98; // Shrink slightly
+
+        if (updatedParticle.alpha > 0) {
+          drawParticle(ctx, updatedParticle);
+          activeParticles.push(updatedParticle);
+        }
+      });
+
+      particlesRef.current = activeParticles;
+
+      // Continue animation if particles remain
+      if (activeParticles.length > 0) {
+        animationFrameRef.current = requestAnimationFrame(animate);
+      } else {
+        setShouldRender(false);
+        onComplete?.();
+      }
+    }, [onComplete]);
+
+    // Trigger animation when isActive becomes true
+    useEffect(() => {
+      if (!isActive) {
+        return undefined;
+      }
+
+      // Start animation
+      setShouldRender(true);
+
+      // Small delay to ensure canvas is mounted
+      const timeoutId = setTimeout(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+          return;
+        }
+
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+
+        // Create particles based on config
+        const particleCount = config.particleCount || 30;
+        const newParticles: Particle[] = [];
+
+        for (let i = 0; i < particleCount; i += 1) {
+          newParticles.push(createParticle(centerX, centerY));
+        }
+
+        particlesRef.current = newParticles;
+
+        // Start animation loop
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = requestAnimationFrame(animate);
+      }, 50);
+
+      // Cleanup
+      return () => {
+        clearTimeout(timeoutId);
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+      };
+    }, [isActive, config.particleCount, createParticle, animate]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+      return () => {
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+      };
+    }, []);
+
+    if (!shouldRender) {
+      return null;
+    }
+
+    return (
+      <canvas
+        ref={canvasRef}
+        width={120}
+        height={120}
+        className={className}
+        style={{
+          position: 'absolute',
+          pointerEvents: 'none',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+          zIndex: 50,
+          ...style,
+        }}
+      />
+    );
+  },
+);
+
+BrandedUpvoteAnimation.displayName = 'BrandedUpvoteAnimation';
+
+export { BrandedUpvoteAnimation };
+export default BrandedUpvoteAnimation;
diff --git a/packages/shared/src/components/brand/HighlightedWord.tsx b/packages/shared/src/components/brand/HighlightedWord.tsx
new file mode 100644
index 00000000000..2a67088cdc8
--- /dev/null
+++ b/packages/shared/src/components/brand/HighlightedWord.tsx
@@ -0,0 +1,179 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useMemo, Fragment } from 'react';
+import classNames from 'classnames';
+import { Tooltip } from '../tooltip/Tooltip';
+import { SponsoredTooltip } from './SponsoredTooltip';
+import { useBrandSponsorship } from '../../hooks/useBrandSponsorship';
+import type { HighlightStyle } from '../../lib/brand';
+import { findHighlightedKeywords } from '../../lib/brand';
+import { useEngagementAdsContext } from '../../contexts/EngagementAdsContext';
+
+interface HighlightedWordProps {
+  /** The word/text to highlight */
+  word: string;
+  /** Tags used to look up the matching creative. When omitted, checks all creatives. */
+  tags?: string[];
+  className?: string;
+}
+
+/**
+ * Get Tailwind classes for highlight style
+ */
+const getHighlightClasses = (style: HighlightStyle): string => {
+  switch (style) {
+    case 'dotted':
+      return 'border-b border-dotted border-accent-onion-default cursor-pointer';
+    case 'underline':
+      return 'underline decoration-1 underline-offset-2 cursor-pointer';
+    case 'background':
+      return 'bg-accent-onion-default/20 rounded px-0.5 -mx-0.5 cursor-pointer';
+    default:
+      return 'underline decoration-1 underline-offset-2 cursor-pointer';
+  }
+};
+
+/**
+ * HighlightedWord Component
+ *
+ * Renders a single highlighted keyword with a sponsored tooltip on hover.
+ * Uses the brand sponsorship configuration for styling and tooltip content.
+ */
+export const HighlightedWord = ({
+  word,
+  tags,
+  className,
+}: HighlightedWordProps): ReactElement => {
+  const { getHighlightedWordConfig } = useBrandSponsorship();
+  const { creatives } = useEngagementAdsContext();
+
+  // When tags are provided, use them to find the creative.
+  // When omitted, find the first creative whose keywords include this word.
+  const highlightResult = useMemo(() => {
+    if (tags?.length) {
+      return getHighlightedWordConfig(tags);
+    }
+
+    const lowerWord = word.toLowerCase().trim();
+    const match = creatives.find((c) =>
+      c.keywords.some((k) => k.toLowerCase() === lowerWord),
+    );
+
+    if (!match) {
+      return { config: null, brandName: null, brandLogo: null, colors: null };
+    }
+
+    return getHighlightedWordConfig(match.tags);
+  }, [tags, word, creatives, getHighlightedWordConfig]);
+
+  const { config, brandName, brandLogo, colors } = highlightResult;
+
+  if (!config || !brandName) {
+    return <>{word}</>;
+  }
+
+  const highlightClasses = getHighlightClasses(config.highlightStyle);
+
+  const tooltipContent = (
+    <SponsoredTooltip
+      config={config}
+      brandName={brandName}
+      brandLogo={brandLogo}
+      colors={colors}
+    />
+  );
+
+  return (
+    <Tooltip
+      content={tooltipContent}
+      className="no-arrow !max-w-none !rounded-16 !bg-transparent !p-0"
+      delayDuration={100}
+    >
+      <span
+        className={classNames('transition-colors', highlightClasses, className)}
+      >
+        {word}
+      </span>
+    </Tooltip>
+  );
+};
+
+interface HighlightedTextProps {
+  /** The full text to scan for keywords */
+  text: string;
+  /** Tags used to look up the matching creative. When omitted, checks all creatives. */
+  tags?: string[];
+  /** Optional className for the container */
+  className?: string;
+}
+
+/**
+ * HighlightedText Component
+ *
+ * Scans text for sponsored keywords and wraps them with HighlightedWord components.
+ * Non-matching text is rendered as-is.
+ *
+ * @example
+ * ```tsx
+ * <HighlightedText text="Learn about AI and machine learning" />
+ * // "AI" would be highlighted if it's a sponsored keyword
+ * ```
+ */
+export const HighlightedText = ({
+  text,
+  tags,
+  className,
+}: HighlightedTextProps): ReactElement => {
+  const { getHighlightedWordConfig } = useBrandSponsorship();
+  const { creatives } = useEngagementAdsContext();
+
+  // Build a highlight config: from specific tags, or by merging all creatives' keywords
+  const config = useMemo(() => {
+    if (tags?.length) {
+      return getHighlightedWordConfig(tags).config;
+    }
+
+    if (!creatives.length) {
+      return null;
+    }
+
+    // Merge all creatives' keywords into one config for text scanning
+    const allKeywords = creatives.flatMap((c) => c.keywords);
+
+    if (!allKeywords.length) {
+      return null;
+    }
+
+    return {
+      keywords: allKeywords,
+      highlightStyle: 'dotted' as const,
+      triggerOn: 'hover' as const,
+      tooltipTitle: '',
+      tooltipDescription: '',
+    };
+  }, [tags, creatives, getHighlightedWordConfig]);
+
+  const parts = useMemo((): ReactNode[] => {
+    if (!config || !text) {
+      return [text];
+    }
+
+    const matches = findHighlightedKeywords(text, config);
+
+    if (matches.length === 0) {
+      return [text];
+    }
+
+    // Only highlight the first match
+    const match = matches[0];
+
+    return [
+      text.slice(0, match.start),
+      <HighlightedWord key="highlight-0" word={match.keyword} tags={tags} />,
+      text.slice(match.end),
+    ];
+  }, [text, tags, config]);
+
+  return <span className={className}>{parts}</span>;
+};
+
+export default HighlightedWord;
diff --git a/packages/shared/src/components/brand/MentionedToolsWidget.tsx b/packages/shared/src/components/brand/MentionedToolsWidget.tsx
new file mode 100644
index 00000000000..588b47200bc
--- /dev/null
+++ b/packages/shared/src/components/brand/MentionedToolsWidget.tsx
@@ -0,0 +1,263 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useCallback, useState } from 'react';
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import { useBrandSponsorship } from '../../hooks/useBrandSponsorship';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../typography/Typography';
+import { VIcon, PlusIcon } from '../icons';
+import { IconSize } from '../Icon';
+import { useToastNotification } from '../../hooks/useToastNotification';
+import { Tooltip } from '../tooltip/Tooltip';
+import { SponsoredTooltip } from './SponsoredTooltip';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useUserStack } from '../../features/profile/hooks/useUserStack';
+import { UserStackModal } from '../../features/profile/components/stack/UserStackModal';
+import type { AddUserStackInput } from '../../graphql/user/userStack';
+import { webappUrl } from '../../lib/constants';
+import { AuthTriggers } from '../../lib/auth';
+import type { PublicProfile } from '../../lib/user';
+import { useEngagementAdsContext } from '../../contexts/EngagementAdsContext';
+
+interface Tool {
+  id: string;
+  name: string;
+  icon?: string;
+  isSponsored?: boolean;
+}
+
+interface MentionedToolsWidgetProps {
+  postTags: string[];
+  className?: string;
+}
+
+/**
+ * MentionedToolsWidget Component
+ *
+ * Displays tools from the matching engagement creative that users can add
+ * to their profile. The sponsored tools appear first with special styling.
+ */
+export const MentionedToolsWidget = ({
+  postTags,
+  className,
+}: MentionedToolsWidgetProps): ReactElement | null => {
+  const router = useRouter();
+  const { user, showLogin } = useAuthContext();
+  const { getHighlightedWordConfig, hasAnySponsoredTag } =
+    useBrandSponsorship();
+  const { getCreativeForTags } = useEngagementAdsContext();
+  const { displayToast } = useToastNotification();
+
+  const { stackItems, add, remove } = useUserStack(user as PublicProfile);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedToolName, setSelectedToolName] = useState<string | null>(null);
+
+  const isToolInStack = useCallback(
+    (toolName: string): boolean => {
+      return stackItems.some(
+        (item) =>
+          item.tool.title.toLowerCase() === toolName.toLowerCase() ||
+          item.title?.toLowerCase() === toolName.toLowerCase(),
+      );
+    },
+    [stackItems],
+  );
+
+  // Extract tools from the matching creative
+  const mentionedTools = useMemo(() => {
+    const creative = getCreativeForTags(postTags);
+
+    if (!creative?.tools?.length) {
+      return [];
+    }
+
+    return creative.tools.map(
+      (toolName): Tool => ({
+        id: toolName,
+        name: toolName,
+        icon: creative.icon,
+        isSponsored: true,
+      }),
+    );
+  }, [postTags, getCreativeForTags]);
+
+  const handleToolClick = useCallback(
+    (tool: Tool) => {
+      if (!user) {
+        showLogin({ trigger: AuthTriggers.AddToStack });
+        return;
+      }
+
+      if (isToolInStack(tool.name)) {
+        router.push(`${webappUrl}${user.username}`);
+        return;
+      }
+
+      setSelectedToolName(tool.name);
+      setIsModalOpen(true);
+    },
+    [user, showLogin, isToolInStack, router],
+  );
+
+  const handleAddToStack = useCallback(
+    async (input: AddUserStackInput) => {
+      try {
+        const result = await add(input);
+
+        const newItemId = result?.id;
+        const toolName = input.title;
+
+        displayToast(`Added ${toolName} to your stack`, {
+          action: newItemId
+            ? {
+                onClick: async () => {
+                  try {
+                    await remove(newItemId);
+                    displayToast(`Removed ${toolName} from your stack`);
+                  } catch (error) {
+                    displayToast('Failed to undo');
+                  }
+                },
+                copy: 'Undo',
+              }
+            : undefined,
+        });
+      } catch (error) {
+        displayToast('Failed to add to stack');
+        throw error;
+      }
+    },
+    [add, remove, displayToast],
+  );
+
+  const handleCloseModal = useCallback(() => {
+    setIsModalOpen(false);
+    setSelectedToolName(null);
+  }, []);
+
+  if (mentionedTools.length === 0) {
+    return null;
+  }
+
+  const highlightedWordResult = getHighlightedWordConfig(postTags);
+
+  return (
+    <>
+      <div
+        className={classNames(
+          'flex flex-col gap-4 rounded-16 border border-border-subtlest-tertiary p-4',
+          className,
+        )}
+      >
+        <Typography
+          type={TypographyType.Body}
+          color={TypographyColor.Primary}
+          bold
+        >
+          Mentioned tools
+        </Typography>
+
+        <div className="flex flex-col gap-2">
+          {mentionedTools.map((tool) => {
+            const isSponsored =
+              tool.isSponsored && hasAnySponsoredTag(postTags);
+            const isInStack = isToolInStack(tool.name);
+
+            const toolItem = (
+              <button
+                key={tool.id}
+                type="button"
+                onClick={() => handleToolClick(tool)}
+                className="group flex h-12 w-full cursor-pointer items-center justify-between gap-3 rounded-12 px-3 text-left transition-colors hover:bg-surface-hover"
+              >
+                <div className="flex items-center gap-2">
+                  {tool.icon ? (
+                    <img
+                      src={tool.icon}
+                      alt=""
+                      className="size-6 flex-shrink-0 rounded-full"
+                    />
+                  ) : (
+                    <div className="rounded size-6 flex-shrink-0 bg-surface-float" />
+                  )}
+                  <div className="flex flex-col">
+                    <Typography
+                      type={TypographyType.Callout}
+                      color={TypographyColor.Primary}
+                      bold
+                    >
+                      {tool.name}
+                    </Typography>
+                    {isSponsored && (
+                      <Typography
+                        type={TypographyType.Caption1}
+                        color={TypographyColor.Tertiary}
+                      >
+                        Sponsored
+                      </Typography>
+                    )}
+                  </div>
+                </div>
+
+                {isInStack ? (
+                  <div className="flex items-center gap-1 text-accent-avocado-default">
+                    <VIcon size={IconSize.Small} />
+                    <Typography
+                      type={TypographyType.Caption1}
+                      className="text-accent-avocado-default"
+                    >
+                      Added
+                    </Typography>
+                  </div>
+                ) : (
+                  <PlusIcon
+                    size={IconSize.Small}
+                    className="text-text-tertiary"
+                  />
+                )}
+              </button>
+            );
+
+            if (isSponsored && highlightedWordResult.config) {
+              return (
+                <Tooltip
+                  key={tool.id}
+                  content={
+                    <SponsoredTooltip
+                      config={highlightedWordResult.config}
+                      brandName={highlightedWordResult.brandName}
+                      brandLogo={highlightedWordResult.brandLogo}
+                      colors={highlightedWordResult.colors}
+                    />
+                  }
+                  side="left"
+                  className="no-arrow !max-w-none !rounded-16 !bg-transparent !p-0"
+                >
+                  {toolItem}
+                </Tooltip>
+              );
+            }
+
+            return toolItem;
+          })}
+        </div>
+      </div>
+
+      {isModalOpen && (
+        <UserStackModal
+          isOpen={isModalOpen}
+          onRequestClose={handleCloseModal}
+          onSubmit={handleAddToStack}
+          defaultTitle={selectedToolName || undefined}
+          modalTitle="Add stack/tool to profile"
+        />
+      )}
+    </>
+  );
+};
+
+export default MentionedToolsWidget;
diff --git a/packages/shared/src/components/brand/SponsoredTagHero.tsx b/packages/shared/src/components/brand/SponsoredTagHero.tsx
new file mode 100644
index 00000000000..b5ff37f9fff
--- /dev/null
+++ b/packages/shared/src/components/brand/SponsoredTagHero.tsx
@@ -0,0 +1,149 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { useBrandSponsorship } from '../../hooks/useBrandSponsorship';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { OpenLinkIcon } from '../icons';
+
+interface SponsoredTagHeroProps {
+  tag: string;
+  className?: string;
+}
+
+/**
+ * Hero banner for sponsored tags
+ * Shows brand imagery and CTA when a tag is sponsored
+ * Features animated gradient border and floating orbs
+ */
+export const SponsoredTagHero = ({
+  tag,
+  className,
+}: SponsoredTagHeroProps): ReactElement | null => {
+  const { getSponsoredTag, getHighlightedWordConfig } = useBrandSponsorship();
+  const sponsorInfo = getSponsoredTag(tag);
+
+  if (!sponsorInfo.isSponsored) {
+    return null;
+  }
+
+  const highlightedWordConfig = getHighlightedWordConfig([tag]);
+  const ctaUrl = highlightedWordConfig.config?.ctaUrl;
+  const ctaText = highlightedWordConfig.config?.ctaText || 'Learn more';
+
+  const { primary, secondary } = sponsorInfo.colors;
+
+  return (
+    <div
+      className={classNames(
+        'relative w-full overflow-hidden rounded-16',
+        className,
+      )}
+      style={{
+        background: `linear-gradient(135deg,
+          ${primary} 0%,
+          ${secondary} 25%,
+          #a855f7 50%,
+          #ec4899 75%,
+          #f472b6 100%)`,
+      }}
+    >
+      {/* Mesh gradient overlay for depth */}
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background: `
+            radial-gradient(ellipse at 20% 80%, #ec4899 0%, transparent 50%),
+            radial-gradient(ellipse at 80% 20%, ${primary} 0%, transparent 50%),
+            radial-gradient(ellipse at 40% 40%, ${secondary} 0%, transparent 40%),
+            radial-gradient(ellipse at 60% 60%, #a855f7 0%, transparent 50%)
+          `,
+        }}
+      />
+
+      {/* Animated floating orbs - contained within bounds */}
+      <div
+        className="pointer-events-none absolute right-0 top-0 size-32 rounded-full opacity-40 blur-3xl"
+        style={{
+          background: '#f472b6',
+          animation: 'heroFloat 6s ease-in-out infinite',
+        }}
+      />
+      <div
+        className="pointer-events-none absolute bottom-0 left-0 size-28 rounded-full opacity-40 blur-3xl"
+        style={{
+          background: primary,
+          animation: 'heroFloat 8s ease-in-out infinite reverse',
+        }}
+      />
+      <div
+        className="opacity-30 pointer-events-none absolute left-1/2 top-1/2 size-20 -translate-x-1/2 -translate-y-1/2 rounded-full blur-2xl"
+        style={{
+          background: secondary,
+          animation: 'heroPulse 4s ease-in-out infinite',
+        }}
+      />
+
+      {/* Content - white text for contrast */}
+      <div className="relative flex flex-col gap-4 p-6 tablet:flex-row tablet:items-center tablet:justify-between">
+        <div className="flex items-center gap-4">
+          {/* Brand logo with glow */}
+          {sponsorInfo.brandLogo && (
+            <div className="relative flex-shrink-0">
+              <div
+                className="opacity-70 absolute inset-0 rounded-full blur-md"
+                style={{ background: 'white' }}
+              />
+              <img
+                src={sponsorInfo.brandLogo}
+                alt={sponsorInfo.brandName}
+                className="relative size-12 rounded-full bg-white object-cover p-1 shadow-2"
+              />
+            </div>
+          )}
+
+          <div className="flex flex-col gap-1">
+            <span className="text-white/80 typo-callout">Sponsored by</span>
+            <span className="font-bold text-white typo-title3">
+              {sponsorInfo.brandName}
+            </span>
+            {highlightedWordConfig.config?.tooltipDescription && (
+              <span className="text-white/90 max-w-lg typo-body">
+                {highlightedWordConfig.config.tooltipDescription}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* CTA button - white style */}
+        {ctaUrl && (
+          <Button
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Medium}
+            tag="a"
+            href={ctaUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="!text-gray-900 hover:bg-white/90 flex-shrink-0 self-start bg-white tablet:self-center"
+          >
+            {ctaText}
+            <OpenLinkIcon className="ml-2" />
+          </Button>
+        )}
+      </div>
+
+      {/* Inline keyframe styles */}
+      <style>{`
+        @keyframes heroFloat {
+          0%, 100% { transform: translateY(0) translateX(0); }
+          50% { transform: translateY(-10px) translateX(5px); }
+        }
+        @keyframes heroPulse {
+          0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); }
+          50% { opacity: 0.35; transform: translate(-50%, -50%) scale(1.1); }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default SponsoredTagHero;
diff --git a/packages/shared/src/components/brand/SponsoredTooltip.tsx b/packages/shared/src/components/brand/SponsoredTooltip.tsx
new file mode 100644
index 00000000000..8b6ccd96691
--- /dev/null
+++ b/packages/shared/src/components/brand/SponsoredTooltip.tsx
@@ -0,0 +1,92 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { BrandColors, HighlightedWordConfig } from '../../lib/brand';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+
+interface SponsoredTooltipProps {
+  config: HighlightedWordConfig;
+  brandName: string;
+  brandLogo: string | null;
+  colors: BrandColors | null;
+  className?: string;
+}
+
+/**
+ * SponsoredTooltip Component
+ *
+ * A beautiful tooltip content for highlighted words showing brand info and CTA.
+ * Features gradient background based on brand colors and a prominent CTA button.
+ */
+export const SponsoredTooltip = ({
+  config,
+  brandName,
+  brandLogo,
+  colors,
+  className,
+}: SponsoredTooltipProps): ReactElement => {
+  const handleCtaClick = (e: React.MouseEvent): void => {
+    e.stopPropagation();
+    if (config.ctaUrl) {
+      window.open(config.ctaUrl, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  return (
+    <div
+      className={classNames(
+        'flex w-72 flex-col gap-3 rounded-16 border border-border-subtlest-tertiary bg-background-default p-4 shadow-2',
+        className,
+      )}
+    >
+      {/* Header with logo and brand name */}
+      <div className="flex items-center gap-2.5">
+        {brandLogo && (
+          <img
+            src={brandLogo}
+            alt={brandName}
+            className="size-8 rounded-full bg-surface-float object-cover p-0.5"
+          />
+        )}
+        <div className="flex flex-col">
+          <span className="text-xs font-medium text-text-quaternary">
+            Sponsored
+          </span>
+          <span
+            className="font-bold text-text-primary"
+            style={colors ? { color: colors.primary } : undefined}
+          >
+            {config.tooltipTitle}
+          </span>
+        </div>
+      </div>
+
+      {/* Description */}
+      <p className="text-sm leading-relaxed text-text-secondary">
+        {config.tooltipDescription}
+      </p>
+
+      {/* CTA Button */}
+      {config.ctaText && config.ctaUrl && (
+        <Button
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Small}
+          onClick={handleCtaClick}
+          className="mt-1 w-full"
+          style={
+            colors
+              ? {
+                  backgroundColor: colors.primary,
+                  color: '#fff',
+                }
+              : undefined
+          }
+        >
+          {config.ctaText}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default SponsoredTooltip;
diff --git a/packages/shared/src/components/cards/TrendingTagsCard.tsx b/packages/shared/src/components/cards/TrendingTagsCard.tsx
new file mode 100644
index 00000000000..683053fc34c
--- /dev/null
+++ b/packages/shared/src/components/cards/TrendingTagsCard.tsx
@@ -0,0 +1,220 @@
+import type { CSSProperties, ReactElement } from 'react';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import classNames from 'classnames';
+import Link from '../utilities/Link';
+import { webappUrl } from '../../lib/constants';
+import { ArrowIcon, TrendingIcon } from '../icons';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+
+// Mock trending tags data - in production this would come from an API
+const TRENDING_TAGS = [
+  'ai',
+  'webdev',
+  'react',
+  'typescript',
+  'devops',
+  'javascript',
+  'python',
+  'nodejs',
+  'cloud',
+  'docker',
+  'kubernetes',
+  'rust',
+  'golang',
+  'vue',
+  'nextjs',
+  'aws',
+  'security',
+  'database',
+  'api',
+  'opensource',
+];
+
+interface TrendingTagsCardProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+interface TagChipProps {
+  tag: string;
+  href: string;
+  isActive?: boolean;
+}
+
+const TagChip = ({ tag, href, isActive }: TagChipProps): ReactElement => (
+  <Link href={href}>
+    <span
+      className={classNames(
+        'flex h-8 flex-shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-10 border px-3 transition-colors typo-callout',
+        isActive
+          ? 'border-text-primary bg-text-primary text-background-default'
+          : 'border-border-subtlest-tertiary bg-background-default text-text-tertiary hover:bg-surface-hover hover:text-text-secondary',
+      )}
+    >
+      {tag}
+    </span>
+  </Link>
+);
+
+// Mobile card version - shown only on mobile
+const MobileTrendingCard = ({
+  className,
+}: {
+  className?: string;
+}): ReactElement => (
+  <div
+    className={classNames(
+      'flex flex-col gap-3 rounded-16 border border-border-subtlest-tertiary bg-background-subtle p-4 tablet:hidden',
+      className,
+    )}
+  >
+    {/* Header */}
+    <div className="flex items-center gap-2">
+      <TrendingIcon className="size-5 text-text-tertiary" />
+      <Typography
+        type={TypographyType.Callout}
+        color={TypographyColor.Primary}
+        bold
+      >
+        Trending tags
+      </Typography>
+    </div>
+
+    {/* Tags - show first 8 on mobile */}
+    <div className="flex flex-wrap gap-2">
+      {TRENDING_TAGS.slice(0, 8).map((tag) => (
+        <Link key={tag} href={`${webappUrl}tags/${tag}`}>
+          <span className="flex items-center rounded-8 bg-surface-float px-2.5 py-1 text-text-secondary typo-footnote hover:bg-surface-hover">
+            #{tag}
+          </span>
+        </Link>
+      ))}
+    </div>
+  </div>
+);
+
+// Desktop strip version with scroll
+const DesktopTrendingStrip = ({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: CSSProperties;
+}): ReactElement => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(true);
+
+  const checkScrollPosition = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const { scrollLeft, scrollWidth, clientWidth } = container;
+    const isAtStart = scrollLeft <= 10;
+    const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 10;
+    setShowLeftArrow(!isAtStart);
+    setShowRightArrow(!isAtEnd);
+  }, []);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return undefined;
+    }
+
+    checkScrollPosition();
+    container.addEventListener('scroll', checkScrollPosition);
+
+    return () => {
+      container.removeEventListener('scroll', checkScrollPosition);
+    };
+  }, [checkScrollPosition]);
+
+  const scrollLeftFn = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    container.scrollBy({ left: -120, behavior: 'smooth' });
+  }, []);
+
+  const scrollRightFn = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    container.scrollBy({ left: 120, behavior: 'smooth' });
+  }, []);
+
+  return (
+    <div
+      className={classNames('relative hidden tablet:block', className)}
+      style={style}
+    >
+      {/* Floating left arrow with gradient fade */}
+      {showLeftArrow && (
+        <>
+          <div className="pointer-events-none absolute left-0 top-0 z-1 h-full w-16 bg-gradient-to-r from-background-default to-transparent" />
+          <button
+            type="button"
+            onClick={scrollLeftFn}
+            className="absolute -left-4 top-1/2 z-2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full border border-border-subtlest-tertiary bg-background-default shadow-2 transition-colors hover:bg-surface-hover"
+            aria-label="Scroll left"
+          >
+            <ArrowIcon className="-rotate-90 text-text-primary" />
+          </button>
+        </>
+      )}
+
+      <div
+        ref={scrollContainerRef}
+        className="no-scrollbar flex w-full items-center gap-2 overflow-x-auto px-2 py-2"
+      >
+        {/* All tag - always first */}
+        <TagChip tag="All" href={`${webappUrl}`} isActive />
+
+        {/* Trending tags */}
+        {TRENDING_TAGS.map((tag) => (
+          <TagChip key={tag} tag={`#${tag}`} href={`${webappUrl}tags/${tag}`} />
+        ))}
+      </div>
+
+      {/* Floating right arrow with gradient fade */}
+      {showRightArrow && (
+        <>
+          <div className="pointer-events-none absolute right-0 top-0 h-full w-16 bg-gradient-to-l from-background-default to-transparent" />
+          <button
+            type="button"
+            onClick={scrollRightFn}
+            className="absolute -right-4 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full border border-border-subtlest-tertiary bg-background-default shadow-2 transition-colors hover:bg-surface-hover"
+            aria-label="Scroll right"
+          >
+            <ArrowIcon className="rotate-90 text-text-primary" />
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export const TrendingTagsCard = ({
+  className,
+  style,
+}: TrendingTagsCardProps): ReactElement => {
+  return (
+    <>
+      <MobileTrendingCard className={className} />
+      <DesktopTrendingStrip className={className} style={style} />
+    </>
+  );
+};
+
+export default TrendingTagsCard;
diff --git a/packages/shared/src/components/cards/common/ActionButtons.tsx b/packages/shared/src/components/cards/common/ActionButtons.tsx
index fb025fdc362..d4562e7785f 100644
--- a/packages/shared/src/components/cards/common/ActionButtons.tsx
+++ b/packages/shared/src/components/cards/common/ActionButtons.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
 import InteractionCounter from '../../InteractionCounter';
@@ -21,6 +21,7 @@ import ConditionalWrapper from '../../ConditionalWrapper';
 import { PostTagsPanel } from '../../post/block/PostTagsPanel';
 import { LinkWithTooltip } from '../../tooltips/LinkWithTooltip';
 import { useCardActions } from '../../../hooks/cards/useCardActions';
+import { useBrandSponsorship } from '../../../hooks/useBrandSponsorship';
 
 export type ActionButtonsVariant = 'grid' | 'list' | 'signal';
 
@@ -76,6 +77,7 @@ const ActionButtons = ({
 }: ActionButtonsProps): ReactElement => {
   const config = variantConfig[variant];
   const isFeedPreview = useFeedPreviewMode();
+  const { getUpvoteAnimation } = useBrandSponsorship();
   const { value: showBookmarkCount } = useConditionalFeature({
     feature: featureShowBookmarkCount,
     shouldEvaluate: true,
@@ -99,6 +101,23 @@ const ActionButtons = ({
     closeTagsPanelOnUpvote: variant === 'list',
   });
 
+  // Get brand animation config if post has sponsored tags
+  const brandAnimation = useMemo(() => {
+    const animationResult = getUpvoteAnimation(post.tags || []);
+    if (
+      !animationResult.shouldAnimate ||
+      !animationResult.colors ||
+      !animationResult.config
+    ) {
+      return null;
+    }
+    return {
+      colors: animationResult.colors,
+      config: animationResult.config,
+      brandLogo: animationResult.brandLogo,
+    };
+  }, [getUpvoteAnimation, post.tags]);
+
   if (isFeedPreview) {
     return null;
   }
@@ -182,6 +201,7 @@ const ActionButtons = ({
               <UpvoteButtonIcon
                 secondary={isUpvoteActive}
                 size={config.iconSize}
+                brandAnimation={brandAnimation}
               />
             }
           >
diff --git a/packages/shared/src/components/cards/common/ShowMoreContent.tsx b/packages/shared/src/components/cards/common/ShowMoreContent.tsx
index 7ee588abd4a..127add107a8 100644
--- a/packages/shared/src/components/cards/common/ShowMoreContent.tsx
+++ b/packages/shared/src/components/cards/common/ShowMoreContent.tsx
@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { ClickableText } from '../../buttons/ClickableText';
 import { useToggle } from '../../../hooks/useToggle';
+import { HighlightedText } from '../../brand/HighlightedWord';
 
 export type ShowMoreContentEnding = 'ellipsis' | 'punctuation' | 'none';
 
@@ -81,7 +82,7 @@ export default function ShowMoreContent({
         data-testid="tldr-container"
       >
         {contentPrefix}
-        {shownContent}
+        <HighlightedText text={shownContent} />
         {showMore.isVisible && (
           <ClickableText
             className="inline-flex !text-text-link"
diff --git a/packages/shared/src/components/cards/common/UpvoteButtonIcon.module.css b/packages/shared/src/components/cards/common/UpvoteButtonIcon.module.css
new file mode 100644
index 00000000000..088e380049e
--- /dev/null
+++ b/packages/shared/src/components/cards/common/UpvoteButtonIcon.module.css
@@ -0,0 +1,37 @@
+.iconWrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.rotating {
+  animation: spinAndScale 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes spinAndScale {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+.brandIcon {
+  animation: fadeIn 0.2s ease-out forwards;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
diff --git a/packages/shared/src/components/cards/common/UpvoteButtonIcon.tsx b/packages/shared/src/components/cards/common/UpvoteButtonIcon.tsx
index 841cb2669f0..a5b4e3fb2b1 100644
--- a/packages/shared/src/components/cards/common/UpvoteButtonIcon.tsx
+++ b/packages/shared/src/components/cards/common/UpvoteButtonIcon.tsx
@@ -1,16 +1,113 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import classNames from 'classnames';
 import { UpvoteIcon } from '../../icons';
 import type { IconProps } from '../../Icon';
+import { IconSize, iconSizeToClassName } from '../../Icon';
+import { BrandedUpvoteAnimation } from '../../brand/BrandedUpvoteAnimation';
+import type { BrandColors, UpvoteAnimationConfig } from '../../../lib/brand';
+import styles from './UpvoteButtonIcon.module.css';
+
+interface UpvoteButtonIconProps extends IconProps {
+  /** Post tags to check for brand sponsorship */
+  postTags?: string[];
+  /** Brand animation config (passed from parent) */
+  brandAnimation?: {
+    colors: BrandColors;
+    config: UpvoteAnimationConfig;
+    brandLogo: string | null;
+  } | null;
+}
 
 export const UpvoteButtonIcon = React.memo(function UpvoteButtonIconComp(
-  props: IconProps,
+  props: UpvoteButtonIconProps,
 ): ReactElement {
-  const { secondary: isUpvoteActive, ...attrs } = props;
+  const {
+    secondary: isUpvoteActive,
+    brandAnimation,
+    size = IconSize.XSmall,
+    ...attrs
+  } = props;
+  const [showAnimation, setShowAnimation] = useState(false);
+  const [showBrandIcon, setShowBrandIcon] = useState(false);
+  const [isRotating, setIsRotating] = useState(false);
+  const prevActiveRef = useRef(isUpvoteActive);
+  const timeoutRefs = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+  // Clear all timeouts on unmount
+  useEffect(() => {
+    const timeouts = timeoutRefs.current;
+    return () => {
+      timeouts.forEach(clearTimeout);
+    };
+  }, []);
+
+  // Trigger animation when transitioning from inactive to active
+  useEffect(() => {
+    if (isUpvoteActive && !prevActiveRef.current && brandAnimation) {
+      // Start particle animation
+      setShowAnimation(true);
+
+      // Start rotation animation
+      setIsRotating(true);
+
+      // After rotation completes (400ms), show brand icon
+      const showBrandTimeout = setTimeout(() => {
+        if (brandAnimation.brandLogo) {
+          setShowBrandIcon(true);
+        }
+        setIsRotating(false);
+      }, 400);
+      timeoutRefs.current.push(showBrandTimeout);
+
+      // After showing brand icon for 1.2s, switch back to upvote icon
+      const hideBrandTimeout = setTimeout(() => {
+        setShowBrandIcon(false);
+      }, 1600);
+      timeoutRefs.current.push(hideBrandTimeout);
+    }
+    prevActiveRef.current = isUpvoteActive;
+  }, [isUpvoteActive, brandAnimation]);
+
+  const handleAnimationComplete = (): void => {
+    setShowAnimation(false);
+  };
+
+  const hasBrandLogo = brandAnimation?.brandLogo;
 
   return (
     <span className="pointer-events-none relative">
-      <UpvoteIcon secondary={isUpvoteActive} {...attrs} />
+      <span
+        className={classNames(
+          styles.iconWrapper,
+          isRotating && styles.rotating,
+        )}
+      >
+        {/* Brand icon - shown after rotation */}
+        {showBrandIcon && hasBrandLogo ? (
+          <img
+            src={brandAnimation.brandLogo}
+            alt=""
+            className={classNames(
+              styles.brandIcon,
+              iconSizeToClassName[size],
+              'rounded-full object-cover',
+            )}
+          />
+        ) : (
+          <UpvoteIcon secondary={isUpvoteActive} size={size} {...attrs} />
+        )}
+      </span>
+
+      {/* Branded upvote animation (particles) */}
+      {brandAnimation && (
+        <BrandedUpvoteAnimation
+          isActive={showAnimation}
+          colors={brandAnimation.colors}
+          config={brandAnimation.config}
+          onComplete={handleAnimationComplete}
+        />
+      )}
     </span>
   );
 });
diff --git a/packages/shared/src/components/modals/BasePostModal.tsx b/packages/shared/src/components/modals/BasePostModal.tsx
index da98b5dc1ff..ec84556c826 100644
--- a/packages/shared/src/components/modals/BasePostModal.tsx
+++ b/packages/shared/src/components/modals/BasePostModal.tsx
@@ -16,6 +16,7 @@ import { LogEvent, TargetType } from '../../lib/log';
 import { useLogContext } from '../../contexts/LogContext';
 import { useEventListener } from '../../hooks';
 import useDebounceFn from '../../hooks/useDebounceFn';
+import { useEngagementAdsContext } from '../../contexts/EngagementAdsContext';
 
 interface BasePostModalProps extends ModalProps {
   postType: PostType;
@@ -44,6 +45,7 @@ function BasePostModal({
 }: BasePostModalProps): ReactElement {
   const { usePostReferrer } = usePostReferrerContext();
   const { logEvent } = useLogContext();
+  const { getCreativeForTags } = useEngagementAdsContext();
   const [scrollNode, setScrollNode] = useState(null);
 
   usePostReferrer({ post });
@@ -73,9 +75,11 @@ function BasePostModal({
     <ActivePostContextProvider post={post}>
       <LogExtraContextProvider
         selector={() => {
+          const creative = getCreativeForTags(post?.tags || []);
           return {
             referrer_target_id: post?.id,
             referrer_target_type: post?.id ? TargetType.Post : undefined,
+            ...(creative && { gen_id: creative.genId }),
           };
         }}
       >
diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx
index 26d75c214aa..cc2c0d692d3 100644
--- a/packages/shared/src/components/post/PostActions.tsx
+++ b/packages/shared/src/components/post/PostActions.tsx
@@ -1,9 +1,8 @@
 import type { ReactElement } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import type { QueryKey } from '@tanstack/react-query';
 import classNames from 'classnames';
 import {
-  UpvoteIcon,
   DiscussIcon as CommentIcon,
   DownvoteIcon,
   LinkIcon,
@@ -32,6 +31,8 @@ import type { LoggedUser } from '../../lib/user';
 import { useCanAwardUser } from '../../hooks/useCoresFeature';
 import { useUpdateQuery } from '../../hooks/useUpdateQuery';
 import { Tooltip } from '../tooltip/Tooltip';
+import { useBrandSponsorship } from '../../hooks/useBrandSponsorship';
+import { UpvoteButtonIcon } from '../cards/common/UpvoteButtonIcon';
 
 interface PostActionsProps {
   post: Post;
@@ -56,11 +57,29 @@ export function PostActions({
     sendingUser: user,
     receivingUser: post.author as LoggedUser,
   });
+  const { getUpvoteAnimation } = useBrandSponsorship();
 
   const { toggleUpvote, toggleDownvote } = useVotePost();
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
   const isDownvoteActive = post?.userState?.vote === UserVote.Down;
 
+  // Get brand animation config if post has sponsored tags
+  const brandAnimation = useMemo(() => {
+    const animationResult = getUpvoteAnimation(post.tags || []);
+    if (
+      !animationResult.shouldAnimate ||
+      !animationResult.colors ||
+      !animationResult.config
+    ) {
+      return null;
+    }
+    return {
+      colors: animationResult.colors,
+      config: animationResult.config,
+      brandLogo: animationResult.brandLogo,
+    };
+  }, [getUpvoteAnimation, post.tags]);
+
   const { toggleBookmark } = useBookmarkPost();
 
   const onToggleBookmark = async () => {
@@ -209,7 +228,12 @@ export function PostActions({
               id="upvote-post-btn"
               pressed={isUpvoteActive}
               onClick={onToggleUpvote}
-              icon={<UpvoteIcon secondary={isUpvoteActive} />}
+              icon={
+                <UpvoteButtonIcon
+                  secondary={isUpvoteActive}
+                  brandAnimation={brandAnimation}
+                />
+              }
               aria-label="Upvote"
               variant={ButtonVariant.Tertiary}
               color={ButtonColor.Avocado}
diff --git a/packages/shared/src/components/post/PostWidgets.tsx b/packages/shared/src/components/post/PostWidgets.tsx
index 7f5ba26ba47..437f9283c58 100644
--- a/packages/shared/src/components/post/PostWidgets.tsx
+++ b/packages/shared/src/components/post/PostWidgets.tsx
@@ -13,6 +13,7 @@ import type { UserShortProfile } from '../../lib/user';
 import type { SourceTooltip } from '../../graphql/sources';
 import { SourceType } from '../../graphql/sources';
 import EntityCardSkeleton from '../cards/entity/EntityCardSkeleton';
+import { MentionedToolsWidget } from '../brand/MentionedToolsWidget';
 import { PostSidebarAdWidget } from './PostSidebarAdWidget';
 
 const UserEntityCard = dynamic(
@@ -80,6 +81,7 @@ export function PostWidgets({
           user={creator as UserShortProfile}
         />
       )}
+      <MentionedToolsWidget postTags={post.tags || []} />
       <PostSidebarAdWidget
         postId={post.id}
         className={{ container: cardClasses }}
diff --git a/packages/shared/src/components/post/tags/PostTagList.tsx b/packages/shared/src/components/post/tags/PostTagList.tsx
index aae5b4c84c4..c26038c55a6 100644
--- a/packages/shared/src/components/post/tags/PostTagList.tsx
+++ b/packages/shared/src/components/post/tags/PostTagList.tsx
@@ -1,5 +1,5 @@
 import type { PropsWithChildren, ReactElement } from 'react';
-import React from 'react';
+import React, { memo, useMemo } from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
 import { useFollowPostTags } from '../../../hooks/feed/useFollowPostTags';
@@ -16,6 +16,8 @@ import { Button, ButtonSize } from '../../buttons/Button';
 import { PlusIcon } from '../../icons';
 import { IconSize } from '../../Icon';
 import { Tooltip } from '../../tooltip/Tooltip';
+import { BrandedTag } from '../../brand/BrandedTag';
+import { useBrandSponsorship } from '../../../hooks/useBrandSponsorship';
 
 interface PostTagListProps {
   post: Post;
@@ -25,6 +27,7 @@ interface PostTagItemProps {
   isFollowed?: boolean;
   onFollow?: (tag: string) => void;
   tag: string;
+  disableBranding?: boolean;
 }
 
 const Chip = <T extends TypographyTag>({
@@ -50,65 +53,79 @@ const PostTagItem = ({
   isFollowed,
   onFollow,
   tag,
+  disableBranding,
 }: PostTagItemProps): ReactElement => {
-  if (isFollowed) {
-    return (
-      <Link href={getTagPageLink(tag)} passHref prefetch={false}>
-        <Chip
-          className="border px-2 py-1 hover:bg-border-subtlest-tertiary"
-          role="listitem"
-          tag={TypographyTag.Link}
-          title={`Check all #${tag} posts`}
-        >
-          #{tag}
-        </Chip>
-      </Link>
-    );
-  }
-
   return (
-    <Chip className="flex items-center bg-surface-float" role="listitem">
-      <Link href={getTagPageLink(tag)} passHref>
-        <a
-          className="inline-block px-2 py-1"
-          title={`Check all #${tag} posts`}
-        >{`#${tag}`}</a>
+    <Chip
+      className={classNames(
+        'flex items-center',
+        isFollowed ? '' : 'bg-surface-float',
+      )}
+      role="listitem"
+    >
+      <Link href={getTagPageLink(tag)} passHref prefetch={false}>
+        <a title={`Check all #${tag} posts`}>
+          <BrandedTag
+            tag={tag}
+            asSpan
+            disableBranding={disableBranding}
+            className={
+              isFollowed
+                ? 'border px-2 py-1 hover:bg-border-subtlest-tertiary'
+                : '!h-auto !border-0 !bg-transparent py-1'
+            }
+          />
+        </a>
       </Link>
-      <span
-        className="h-3 translate-y-px rounded-2 border border-border-subtlest-tertiary"
-        role="separator"
-      />
-      <Tooltip content={`Follow #${tag}`}>
-        <Button
-          icon={<PlusIcon aria-hidden size={IconSize.XSmall} />}
-          onClick={() => onFollow(tag)}
-          size={ButtonSize.XSmall}
-        />
-      </Tooltip>
+      {!isFollowed && (
+        <>
+          <span
+            className="h-3 translate-y-px rounded-2 border border-border-subtlest-tertiary"
+            role="separator"
+          />
+          <Tooltip content={`Follow #${tag}`}>
+            <Button
+              icon={<PlusIcon aria-hidden size={IconSize.XSmall} />}
+              onClick={() => onFollow(tag)}
+              size={ButtonSize.XSmall}
+            />
+          </Tooltip>
+        </>
+      )}
     </Chip>
   );
 };
 
-export const PostTagList = ({ post }: PostTagListProps): ReactElement => {
+const PostTagListInner = ({ post }: PostTagListProps): ReactElement => {
   const { onFollowTag, tags } = useFollowPostTags({ post });
+  const { isTagSponsored } = useBrandSponsorship();
+
+  const firstSponsoredTag = useMemo(() => {
+    return tags.all.find((tag) => isTagSponsored(tag)) || null;
+  }, [tags.all, isTagSponsored]);
 
   if (!tags.all.length) {
     return null;
   }
 
+  const followedSet = new Set(tags.followed);
+
   return (
     <ul aria-label="Post tags" className="flex flex-wrap items-center gap-2">
-      {tags.followed.map((tag) => (
-        <PostTagItem key={`followed-${tag}`} tag={tag} isFollowed />
-      ))}
-      {tags.notFollowed.map((tag) => (
+      {tags.all.map((tag) => (
         <PostTagItem
-          isFollowed={false}
-          key={`notFollowed-${tag}`}
-          onFollow={onFollowTag}
+          key={tag}
           tag={tag}
+          isFollowed={followedSet.has(tag)}
+          onFollow={onFollowTag}
+          disableBranding={tag !== firstSponsoredTag}
         />
       ))}
     </ul>
   );
 };
+
+export const PostTagList = memo(
+  PostTagListInner,
+  (prev, next) => prev.post?.tags?.join() === next.post?.tags?.join(),
+);
diff --git a/packages/shared/src/components/profile/ProfileSettingsMenu.tsx b/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
index c6a27962ac8..4014296bee9 100644
--- a/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
+++ b/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
@@ -17,6 +17,7 @@ import {
   BlockIcon,
   CoinIcon,
   CreditCardIcon,
+  GiftIcon,
   HashtagIcon,
   HotIcon,
   InviteIcon,
@@ -33,7 +34,6 @@ import {
   TerminalIcon,
   TourIcon,
   FeatherIcon,
-  GiftIcon,
 } from '../icons';
 import { NavDrawer } from '../drawers/NavDrawer';
 import {
@@ -174,6 +174,12 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
               icon: InviteIcon,
               href: `${settingsUrl}/invite`,
             },
+            // TODO: Re-enable when ready
+            // coupons: {
+            //   title: 'Coupons',
+            //   icon: GiftIcon,
+            //   href: `${settingsUrl}/coupons`,
+            // },
           },
         },
         misc: {
diff --git a/packages/shared/src/components/sidebar/sections/TrendingTagsSection.tsx b/packages/shared/src/components/sidebar/sections/TrendingTagsSection.tsx
new file mode 100644
index 00000000000..daf95b63cbe
--- /dev/null
+++ b/packages/shared/src/components/sidebar/sections/TrendingTagsSection.tsx
@@ -0,0 +1,58 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import type { SidebarMenuItem } from '../common';
+import { Section } from '../Section';
+import { webappUrl } from '../../../lib/constants';
+import type { SidebarSectionProps } from './common';
+import { HashtagIcon } from '../../icons';
+import { useBrandSponsorship } from '../../../hooks/useBrandSponsorship';
+
+// Mock trending tags data - in production this would come from an API
+const TRENDING_TAGS = ['ai', 'webdev', 'react', 'typescript', 'devops'];
+
+export const TrendingTagsSection = ({
+  isItemsButton,
+  ...defaultRenderSectionProps
+}: SidebarSectionProps): ReactElement => {
+  const { getSponsoredTag } = useBrandSponsorship();
+
+  const menuItems: SidebarMenuItem[] = useMemo(() => {
+    return TRENDING_TAGS.map((tag) => {
+      const tagPath = `${webappUrl}tags/${tag}`;
+      const sponsorInfo = getSponsoredTag(tag);
+
+      return {
+        icon: (active: boolean) => (
+          <HashtagIcon secondary={active} className="size-5" />
+        ),
+        title: tag,
+        path: tagPath,
+        rightIcon: sponsorInfo.isSponsored
+          ? () => (
+              <span className="flex items-center gap-1 text-text-quaternary typo-caption2">
+                {sponsorInfo.brandLogo && (
+                  <img
+                    src={sponsorInfo.brandLogo}
+                    alt={sponsorInfo.brandName}
+                    className="size-3.5 rounded-full"
+                  />
+                )}
+                <span className="truncate">
+                  by {sponsorInfo.brandName?.split(' ')[0]}
+                </span>
+              </span>
+            )
+          : undefined,
+      };
+    });
+  }, [getSponsoredTag]);
+
+  return (
+    <Section
+      {...defaultRenderSectionProps}
+      items={menuItems}
+      isItemsButton={isItemsButton}
+      className="hidden laptop:block"
+    />
+  );
+};
diff --git a/packages/shared/src/components/tooltip/styles.css b/packages/shared/src/components/tooltip/styles.css
index 2137f70dbf1..de1959f197c 100644
--- a/packages/shared/src/components/tooltip/styles.css
+++ b/packages/shared/src/components/tooltip/styles.css
@@ -1,4 +1,10 @@
 [data-radix-popper-content-wrapper] { min-width: auto!important; }
+
+/* Hide arrow for transparent tooltips */
+.TooltipContent.no-arrow .TooltipArrow,
+.TooltipContent.no-arrow > svg {
+  display: none !important;
+}
 .TooltipContent {
   user-select: none;
   animation-duration: 400ms;
diff --git a/packages/shared/src/contexts/BootProvider.tsx b/packages/shared/src/contexts/BootProvider.tsx
index 02dd7975099..d827e6a7ca1 100644
--- a/packages/shared/src/contexts/BootProvider.tsx
+++ b/packages/shared/src/contexts/BootProvider.tsx
@@ -26,6 +26,7 @@ import { ErrorBoundary } from '../components/ErrorBoundary';
 import { LogContextProvider } from './LogContext';
 import { REQUEST_APP_ACCOUNT_TOKEN_MUTATION } from '../graphql/users';
 import { isConnectionError } from '../lib/errors';
+import { EngagementAdsProvider } from './EngagementAdsContext';
 
 const ServerError = dynamic(
   () =>
@@ -334,28 +335,30 @@ export const BootDataProvider = ({
           loadedSettings={loadedFromCache}
           updateSettings={updateSettings}
         >
-          <AlertContextProvider
-            alerts={alerts}
-            isFetched={isBootReady}
-            updateAlerts={updateAlerts}
-            loadedAlerts={loadedFromCache}
-          >
-            <LogContextProvider
-              app={app}
-              version={version}
-              getPage={getPage}
-              deviceId={deviceId}
+          <EngagementAdsProvider rawCreatives={remoteData?.engagementCreatives}>
+            <AlertContextProvider
+              alerts={alerts}
+              isFetched={isBootReady}
+              updateAlerts={updateAlerts}
+              loadedAlerts={loadedFromCache}
             >
-              <ErrorBoundary>
-                <NotificationsContextProvider
-                  isNotificationsReady={isBootReady}
-                  unreadCount={notifications?.unreadNotificationsCount}
-                >
-                  {children}
-                </NotificationsContextProvider>
-              </ErrorBoundary>
-            </LogContextProvider>
-          </AlertContextProvider>
+              <LogContextProvider
+                app={app}
+                version={version}
+                getPage={getPage}
+                deviceId={deviceId}
+              >
+                <ErrorBoundary>
+                  <NotificationsContextProvider
+                    isNotificationsReady={isBootReady}
+                    unreadCount={notifications?.unreadNotificationsCount}
+                  >
+                    {children}
+                  </NotificationsContextProvider>
+                </ErrorBoundary>
+              </LogContextProvider>
+            </AlertContextProvider>
+          </EngagementAdsProvider>
         </SettingsContextProvider>
       </AuthContextProvider>
     </GrowthBookProvider>
diff --git a/packages/shared/src/contexts/EngagementAdsContext.spec.tsx b/packages/shared/src/contexts/EngagementAdsContext.spec.tsx
new file mode 100644
index 00000000000..c8d462c0063
--- /dev/null
+++ b/packages/shared/src/contexts/EngagementAdsContext.spec.tsx
@@ -0,0 +1,352 @@
+import React from 'react';
+import { QueryClient } from '@tanstack/react-query';
+import { render, screen, renderHook } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { TestBootProvider } from '../../__tests__/helpers/boot';
+import { defaultQueryClientTestingConfig } from '../../__tests__/helpers/tanstack-query';
+import type { EngagementCreative } from '../lib/engagementAds';
+import { findCreativeForTags } from '../lib/engagementAds';
+import {
+  EngagementAdsProvider,
+  useEngagementAdsContext,
+} from './EngagementAdsContext';
+import { LogExtraContextProvider, useLogExtraContext } from './LogExtraContext';
+import type { LogEvent } from '../hooks/log/useLogQueue';
+
+const mockCreative: EngagementCreative = {
+  gen_id: 'creative-123',
+  promoted_name: 'Test Brand',
+  promoted_body: 'Test body text',
+  promoted_cta: 'Try Now',
+  promoted_url: 'https://example.com',
+  promoted_logo_img: {
+    dark: 'https://example.com/logo-dark.png',
+    light: 'https://example.com/logo-light.png',
+  },
+  promoted_background_img: {
+    dark: 'https://example.com/bg-dark.png',
+    light: 'https://example.com/bg-light.png',
+  },
+  promoted_icon_img: {
+    dark: 'https://example.com/icon-dark.png',
+    light: 'https://example.com/icon-light.png',
+  },
+  promoted_primary_color: { dark: '#6e40c9', light: '#5a32a3' },
+  promoted_secondary_color: { dark: '#1f6feb', light: '#0969da' },
+  tools: ['copilot', 'vscode'],
+  keywords: ['AI', 'copilot'],
+  tags: ['ai', 'copilot', 'machine-learning'],
+};
+
+let queryClient: QueryClient;
+
+beforeEach(() => {
+  queryClient = new QueryClient(defaultQueryClientTestingConfig);
+});
+
+const createWrapper = (creatives?: EngagementCreative[]) =>
+  function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <TestBootProvider client={queryClient}>
+        <EngagementAdsProvider rawCreatives={creatives}>
+          {children}
+        </EngagementAdsProvider>
+      </TestBootProvider>
+    );
+  };
+
+describe('EngagementAdsContext', () => {
+  it('should provide empty creatives when rawCreatives is undefined', () => {
+    const { result } = renderHook(() => useEngagementAdsContext(), {
+      wrapper: createWrapper(undefined),
+    });
+
+    expect(result.current.creatives).toEqual([]);
+  });
+
+  it('should resolve themed values for dark mode', () => {
+    const { result } = renderHook(() => useEngagementAdsContext(), {
+      wrapper: createWrapper([mockCreative]),
+    });
+
+    expect(result.current.creatives).toHaveLength(1);
+
+    const [creative] = result.current.creatives;
+    expect(creative.genId).toBe('creative-123');
+    expect(creative.name).toBe('Test Brand');
+    expect(creative.body).toBe('Test body text');
+    expect(creative.cta).toBe('Try Now');
+    expect(creative.url).toBe('https://example.com');
+    // Default theme in TestBootProvider is Dark
+    expect(creative.logo).toBe('https://example.com/logo-dark.png');
+    expect(creative.primaryColor).toBe('#6e40c9');
+    expect(creative.secondaryColor).toBe('#1f6feb');
+    expect(creative.tools).toEqual(['copilot', 'vscode']);
+    expect(creative.keywords).toEqual(['AI', 'copilot']);
+    expect(creative.tags).toEqual(['ai', 'copilot', 'machine-learning']);
+  });
+
+  it('should find creative for matching tags', () => {
+    const { result } = renderHook(() => useEngagementAdsContext(), {
+      wrapper: createWrapper([mockCreative]),
+    });
+
+    const found = result.current.getCreativeForTags(['copilot']);
+    expect(found).not.toBeNull();
+    expect(found?.genId).toBe('creative-123');
+  });
+
+  it('should return null from getCreativeForTags when no match', () => {
+    const { result } = renderHook(() => useEngagementAdsContext(), {
+      wrapper: createWrapper([mockCreative]),
+    });
+
+    const found = result.current.getCreativeForTags(['golang', 'rust']);
+    expect(found).toBeNull();
+  });
+});
+
+describe('gen_id via LogExtraContextProvider selector (post modal pattern)', () => {
+  it('should inject gen_id when selector uses getCreativeForTags with matching tags', () => {
+    function InnerComponent() {
+      const ctx = useLogExtraContext();
+      const result = ctx.selectorRef.current({
+        event: { event_name: 'upvote' } as LogEvent,
+      });
+      return <div data-testid="extra">{result.extra ?? 'none'}</div>;
+    }
+
+    function PostModalSimulator() {
+      const { getCreativeForTags } = useEngagementAdsContext();
+      const postTags = ['ai', 'typescript'];
+
+      return (
+        <LogExtraContextProvider
+          selector={() => {
+            const creative = getCreativeForTags(postTags);
+            return {
+              referrer_target_id: 'post-1',
+              ...(creative && { gen_id: creative.genId }),
+            };
+          }}
+        >
+          <InnerComponent />
+        </LogExtraContextProvider>
+      );
+    }
+
+    render(
+      <TestBootProvider client={queryClient}>
+        <EngagementAdsProvider rawCreatives={[mockCreative]}>
+          <PostModalSimulator />
+        </EngagementAdsProvider>
+      </TestBootProvider>,
+    );
+
+    const extra = JSON.parse(screen.getByTestId('extra').textContent);
+    expect(extra.gen_id).toBe('creative-123');
+    expect(extra.referrer_target_id).toBe('post-1');
+  });
+
+  it('should NOT inject gen_id when post tags do not match', () => {
+    function InnerComponent() {
+      const ctx = useLogExtraContext();
+      const result = ctx.selectorRef.current({
+        event: { event_name: 'upvote' } as LogEvent,
+      });
+      return <div data-testid="extra">{result.extra ?? 'none'}</div>;
+    }
+
+    function PostModalSimulator() {
+      const { getCreativeForTags } = useEngagementAdsContext();
+      const postTags = ['react', 'css'];
+
+      return (
+        <LogExtraContextProvider
+          selector={() => {
+            const creative = getCreativeForTags(postTags);
+            return {
+              referrer_target_id: 'post-2',
+              ...(creative && { gen_id: creative.genId }),
+            };
+          }}
+        >
+          <InnerComponent />
+        </LogExtraContextProvider>
+      );
+    }
+
+    render(
+      <TestBootProvider client={queryClient}>
+        <EngagementAdsProvider rawCreatives={[mockCreative]}>
+          <PostModalSimulator />
+        </EngagementAdsProvider>
+      </TestBootProvider>,
+    );
+
+    const extra = JSON.parse(screen.getByTestId('extra').textContent);
+    expect(extra.gen_id).toBeUndefined();
+    expect(extra.referrer_target_id).toBe('post-2');
+  });
+});
+
+describe('getCreativeForTags for feed vote events (useFeedVotePost pattern)', () => {
+  it('should return gen_id for post with matching tags', () => {
+    const { result } = renderHook(() => useEngagementAdsContext(), {
+      wrapper: createWrapper([mockCreative]),
+    });
+
+    const postTags = ['ai', 'typescript'];
+    const creative = result.current.getCreativeForTags(postTags);
+    expect(creative).not.toBeNull();
+
+    const extra: Record<string, unknown> = {
+      origin: 'feed',
+      feed: 'popular',
+      ...(creative && { gen_id: creative.genId }),
+    };
+
+    expect(extra.gen_id).toBe('creative-123');
+  });
+
+  it('should not include gen_id for post without matching tags', () => {
+    const { result } = renderHook(() => useEngagementAdsContext(), {
+      wrapper: createWrapper([mockCreative]),
+    });
+
+    const postTags = ['react', 'css'];
+    const creative = result.current.getCreativeForTags(postTags);
+    expect(creative).toBeNull();
+
+    const extra: Record<string, unknown> = {
+      origin: 'feed',
+      feed: 'popular',
+      ...(creative && { gen_id: creative.genId }),
+    };
+
+    expect(extra.gen_id).toBeUndefined();
+  });
+});
+
+describe('findCreativeForTags with feed items', () => {
+  it('should match creative gen_id for a post with sponsored tags', () => {
+    const { result } = renderHook(() => useEngagementAdsContext(), {
+      wrapper: createWrapper([mockCreative]),
+    });
+
+    const { creatives } = result.current;
+    expect(creatives).toHaveLength(1);
+
+    const postTags = ['ai', 'typescript', 'react'];
+    const creative = findCreativeForTags(creatives, postTags);
+    expect(creative).not.toBeNull();
+    expect(creative?.genId).toBe('creative-123');
+  });
+
+  it('should return null for a post without sponsored tags', () => {
+    const { result } = renderHook(() => useEngagementAdsContext(), {
+      wrapper: createWrapper([mockCreative]),
+    });
+
+    const { creatives } = result.current;
+    const postTags = ['react', 'typescript', 'css'];
+    const creative = findCreativeForTags(creatives, postTags);
+    expect(creative).toBeNull();
+  });
+
+  it('should inject gen_id into extra data via selector pattern', () => {
+    function InnerComponent() {
+      const ctx = useLogExtraContext();
+      const event = ctx.selectorRef.current({
+        event: { event_name: 'upvote' } as LogEvent,
+      });
+      return <div data-testid="event-extra">{event.extra ?? 'none'}</div>;
+    }
+
+    function FeedItemSimulator() {
+      const { creatives } = useEngagementAdsContext();
+      const postTags = ['ai', 'typescript'];
+
+      return (
+        <LogExtraContextProvider
+          selector={() => {
+            const extraData: Record<string, unknown> = {};
+            extraData.referrer_target_id = 'post-1';
+
+            if (creatives.length > 0) {
+              const creative = findCreativeForTags(creatives, postTags);
+              if (creative) {
+                extraData.gen_id = creative.genId;
+              }
+            }
+
+            return extraData;
+          }}
+        >
+          <InnerComponent />
+        </LogExtraContextProvider>
+      );
+    }
+
+    render(
+      <TestBootProvider client={queryClient}>
+        <EngagementAdsProvider rawCreatives={[mockCreative]}>
+          <FeedItemSimulator />
+        </EngagementAdsProvider>
+      </TestBootProvider>,
+    );
+
+    const el = screen.getByTestId('event-extra');
+    const extra = JSON.parse(el.textContent);
+    expect(extra.gen_id).toBe('creative-123');
+    expect(extra.referrer_target_id).toBe('post-1');
+  });
+
+  it('should NOT inject gen_id when post tags do not match', () => {
+    function InnerComponent() {
+      const ctx = useLogExtraContext();
+      const event = ctx.selectorRef.current({
+        event: { event_name: 'upvote' } as LogEvent,
+      });
+      return <div data-testid="event-extra">{event.extra ?? 'none'}</div>;
+    }
+
+    function FeedItemSimulator() {
+      const { creatives } = useEngagementAdsContext();
+      const postTags = ['react', 'css'];
+
+      return (
+        <LogExtraContextProvider
+          selector={() => {
+            const extraData: Record<string, unknown> = {};
+            extraData.referrer_target_id = 'post-2';
+
+            if (creatives.length > 0) {
+              const creative = findCreativeForTags(creatives, postTags);
+              if (creative) {
+                extraData.gen_id = creative.genId;
+              }
+            }
+
+            return extraData;
+          }}
+        >
+          <InnerComponent />
+        </LogExtraContextProvider>
+      );
+    }
+
+    render(
+      <TestBootProvider client={queryClient}>
+        <EngagementAdsProvider rawCreatives={[mockCreative]}>
+          <FeedItemSimulator />
+        </EngagementAdsProvider>
+      </TestBootProvider>,
+    );
+
+    const el = screen.getByTestId('event-extra');
+    const extra = JSON.parse(el.textContent);
+    expect(extra.gen_id).toBeUndefined();
+    expect(extra.referrer_target_id).toBe('post-2');
+  });
+});
diff --git a/packages/shared/src/contexts/EngagementAdsContext.tsx b/packages/shared/src/contexts/EngagementAdsContext.tsx
new file mode 100644
index 00000000000..6cce33ee00b
--- /dev/null
+++ b/packages/shared/src/contexts/EngagementAdsContext.tsx
@@ -0,0 +1,66 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
+import type {
+  EngagementCreative,
+  ResolvedCreative,
+} from '../lib/engagementAds';
+import { findCreativeForTags, resolveCreative } from '../lib/engagementAds';
+import { useIsLightTheme } from '../hooks/utils/useThemedAsset';
+
+interface EngagementAdsContextValue {
+  /** All creatives from boot, theme-resolved */
+  creatives: ResolvedCreative[];
+
+  /** Find a creative matching specific tags (stateless lookup) */
+  getCreativeForTags: (tags: string[]) => ResolvedCreative | null;
+}
+
+const defaultValue: EngagementAdsContextValue = {
+  creatives: [],
+  getCreativeForTags: () => null,
+};
+
+const EngagementAdsContext =
+  createContext<EngagementAdsContextValue>(defaultValue);
+
+export const useEngagementAdsContext = (): EngagementAdsContextValue =>
+  useContext(EngagementAdsContext);
+
+interface EngagementAdsProviderProps {
+  children: ReactNode;
+  rawCreatives?: EngagementCreative[];
+}
+
+export const EngagementAdsProvider = ({
+  children,
+  rawCreatives,
+}: EngagementAdsProviderProps): ReactElement => {
+  const isLight = useIsLightTheme();
+
+  const resolvedCreatives = useMemo(() => {
+    if (!rawCreatives?.length) {
+      return [];
+    }
+
+    return rawCreatives.map((c) => resolveCreative(c, isLight));
+  }, [rawCreatives, isLight]);
+
+  const getCreativeForTags = useCallback(
+    (tags: string[]) => findCreativeForTags(resolvedCreatives, tags),
+    [resolvedCreatives],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      creatives: resolvedCreatives,
+      getCreativeForTags,
+    }),
+    [resolvedCreatives, getCreativeForTags],
+  );
+
+  return (
+    <EngagementAdsContext.Provider value={contextValue}>
+      {children}
+    </EngagementAdsContext.Provider>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/stack/UserStackModal.tsx b/packages/shared/src/features/profile/components/stack/UserStackModal.tsx
index c5dcdd4f8e2..3434e5f3117 100644
--- a/packages/shared/src/features/profile/components/stack/UserStackModal.tsx
+++ b/packages/shared/src/features/profile/components/stack/UserStackModal.tsx
@@ -42,21 +42,32 @@ type UserStackFormData = z.infer<typeof userStackFormSchema>;
 type UserStackModalProps = Omit<ModalProps, 'children'> & {
   onSubmit: (input: AddUserStackInput) => Promise<void>;
   existingItem?: UserStack;
+  /** Pre-fill the title without enabling edit mode */
+  defaultTitle?: string;
+  /** Custom modal title */
+  modalTitle?: string;
 };
 
 export function UserStackModal({
   onSubmit,
   existingItem,
+  defaultTitle,
+  modalTitle,
   ...rest
 }: UserStackModalProps): ReactElement {
+  // Don't show suggestions initially if we have a pre-selected title
   const [showSuggestions, setShowSuggestions] = useState(false);
+  const [hasSelectedFromDefault, setHasSelectedFromDefault] = useState(
+    !!defaultTitle,
+  );
   const isMobile = useViewSize(ViewSize.MobileL);
   const isEditing = !!existingItem;
 
   const methods = useForm<UserStackFormData>({
     resolver: zodResolver(userStackFormSchema),
     defaultValues: {
-      title: existingItem?.title ?? existingItem?.tool.title ?? '',
+      title:
+        existingItem?.title ?? existingItem?.tool.title ?? defaultTitle ?? '',
       section: existingItem?.section || 'Primary',
       customSection: '',
       startedAtYear: existingItem?.startedAt
@@ -131,7 +142,8 @@ export function UserStackModal({
           title: (
             <div className="px-4">
               <ModalHeader.Title className="typo-title3">
-                {isEditing ? 'Edit stack/tool' : 'Add stack/tool'}
+                {modalTitle ||
+                  (isEditing ? 'Edit stack/tool' : 'Add stack/tool')}
               </ModalHeader.Title>
             </div>
           ),
@@ -149,12 +161,42 @@ export function UserStackModal({
         <form onSubmit={onFormSubmit} id="user_stack_form">
           <ModalHeader showCloseButton={!isMobile}>
             <ModalHeader.Title className="typo-title3">
-              {isEditing ? 'Edit stack/tool' : 'Add stack/tool'}
+              {modalTitle || (isEditing ? 'Edit stack/tool' : 'Add stack/tool')}
             </ModalHeader.Title>
           </ModalHeader>
           <Modal.Body className="flex flex-col gap-4">
             {/* Title with autocomplete */}
             <div className="relative">
+              <TextField
+                {...register('title')}
+                autoComplete="off"
+                autoFocus={!defaultTitle}
+                inputId="stackTitle"
+                label="Technology, tool, or skill"
+                maxLength={255}
+                valid={!errors.title}
+                hint={errors.title?.message}
+                disabled={isEditing}
+                onChange={(e) => {
+                  setValue('title', e.target.value);
+                  if (!isEditing) {
+                    // If user changes the pre-selected title, enable suggestions
+                    if (
+                      hasSelectedFromDefault &&
+                      e.target.value !== defaultTitle
+                    ) {
+                      setHasSelectedFromDefault(false);
+                    }
+                    setShowSuggestions(true);
+                  }
+                }}
+                onFocus={() => {
+                  // Don't show suggestions if we have a pre-selected default title
+                  if (!isEditing && !hasSelectedFromDefault) {
+                    setShowSuggestions(true);
+                  }
+                }}
+              />
               <ConditionalWrapper
                 condition={isEditing}
                 wrapper={(component) => (
diff --git a/packages/shared/src/hooks/useBrandSponsorship.ts b/packages/shared/src/hooks/useBrandSponsorship.ts
new file mode 100644
index 00000000000..d8ff85df2cf
--- /dev/null
+++ b/packages/shared/src/hooks/useBrandSponsorship.ts
@@ -0,0 +1,230 @@
+import { useMemo, useCallback } from 'react';
+import type {
+  BrandColors,
+  TagBrandingConfig,
+  UpvoteAnimationConfig,
+  HighlightedWordConfig,
+} from '../lib/brand';
+import { useEngagementAdsContext } from '../contexts/EngagementAdsContext';
+import type { ResolvedCreative } from '../lib/engagementAds';
+
+// ============================================================================
+// Static defaults — presentation config not in EngagementCreative
+// ============================================================================
+
+const DEFAULT_TAG_BRANDING: TagBrandingConfig = {
+  style: 'suffix',
+  delay: 1000,
+};
+
+const DEFAULT_UPVOTE_ANIMATION: UpvoteAnimationConfig = {
+  type: 'confetti',
+  particleCount: 30,
+  duration: 1500,
+};
+
+const DEFAULT_HIGHLIGHT_STYLE: Pick<
+  HighlightedWordConfig,
+  'highlightStyle' | 'triggerOn'
+> = {
+  highlightStyle: 'dotted',
+  triggerOn: 'hover',
+};
+
+// ============================================================================
+// Return types
+// ============================================================================
+
+interface SponsoredTagResult {
+  isSponsored: boolean;
+  brandName: string | null;
+  brandLogo: string | null;
+  branding: TagBrandingConfig | null;
+  colors: BrandColors | null;
+  targetUrl: string | null;
+}
+
+interface UpvoteAnimationResult {
+  shouldAnimate: boolean;
+  config: UpvoteAnimationConfig | null;
+  colors: BrandColors | null;
+  brandName: string | null;
+  brandLogo: string | null;
+}
+
+interface HighlightedWordResult {
+  config: HighlightedWordConfig | null;
+  brandName: string | null;
+  brandLogo: string | null;
+  colors: BrandColors | null;
+}
+
+interface UseBrandSponsorshipReturn {
+  /** Whether any engagement creative is available */
+  isActive: boolean;
+
+  /** Get sponsorship info for a specific tag */
+  getSponsoredTag: (tag: string) => SponsoredTagResult;
+
+  /** Get upvote animation config if post has sponsored tags */
+  getUpvoteAnimation: (postTags: string[]) => UpvoteAnimationResult;
+
+  /** Get the highlighted word config for a set of tags */
+  getHighlightedWordConfig: (tags: string[]) => HighlightedWordResult;
+
+  /** Check if a tag is sponsored by any creative */
+  isTagSponsored: (tag: string) => boolean;
+
+  /** Check if any of the given tags are sponsored */
+  hasAnySponsoredTag: (tags: string[]) => boolean;
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+const colorsFromCreative = (creative: ResolvedCreative): BrandColors => ({
+  primary: creative.primaryColor,
+  secondary: creative.secondaryColor,
+  gradient: `linear-gradient(135deg, ${creative.primaryColor} 0%, ${creative.secondaryColor} 100%)`,
+});
+
+const EMPTY_SPONSORED_TAG: SponsoredTagResult = {
+  isSponsored: false,
+  brandName: null,
+  brandLogo: null,
+  branding: null,
+  colors: null,
+  targetUrl: null,
+};
+
+const EMPTY_UPVOTE: UpvoteAnimationResult = {
+  shouldAnimate: false,
+  config: null,
+  colors: null,
+  brandName: null,
+  brandLogo: null,
+};
+
+const EMPTY_HIGHLIGHT: HighlightedWordResult = {
+  config: null,
+  brandName: null,
+  brandLogo: null,
+  colors: null,
+};
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+/**
+ * Central hook for brand sponsorship features.
+ *
+ * All lookups are stateless — pass the tags you have and get the result.
+ * No global "active creative" state to manage or conflict between pages.
+ */
+export const useBrandSponsorship = (): UseBrandSponsorshipReturn => {
+  const { creatives, getCreativeForTags } = useEngagementAdsContext();
+
+  const isActive = creatives.length > 0;
+
+  const getSponsoredTag = useCallback(
+    (tag: string): SponsoredTagResult => {
+      const creative = getCreativeForTags([tag]);
+
+      if (!creative) {
+        return EMPTY_SPONSORED_TAG;
+      }
+
+      return {
+        isSponsored: true,
+        brandName: creative.name,
+        brandLogo: creative.logo,
+        branding: {
+          ...DEFAULT_TAG_BRANDING,
+          targetUrl: creative.url,
+        },
+        colors: colorsFromCreative(creative),
+        targetUrl: creative.url,
+      };
+    },
+    [getCreativeForTags],
+  );
+
+  const getUpvoteAnimation = useCallback(
+    (postTags: string[]): UpvoteAnimationResult => {
+      const creative = getCreativeForTags(postTags);
+
+      if (!creative) {
+        return EMPTY_UPVOTE;
+      }
+
+      return {
+        shouldAnimate: true,
+        config: DEFAULT_UPVOTE_ANIMATION,
+        colors: colorsFromCreative(creative),
+        brandName: creative.name,
+        brandLogo: creative.logo,
+      };
+    },
+    [getCreativeForTags],
+  );
+
+  const getHighlightedWordConfig = useCallback(
+    (tags: string[]): HighlightedWordResult => {
+      const creative = getCreativeForTags(tags);
+
+      if (!creative) {
+        return EMPTY_HIGHLIGHT;
+      }
+
+      return {
+        config: {
+          keywords: creative.keywords,
+          tooltipTitle: creative.name,
+          tooltipDescription: creative.body,
+          ctaText: creative.cta,
+          ctaUrl: creative.url,
+          ...DEFAULT_HIGHLIGHT_STYLE,
+        },
+        brandName: creative.name,
+        brandLogo: creative.logo,
+        colors: colorsFromCreative(creative),
+      };
+    },
+    [getCreativeForTags],
+  );
+
+  const checkIsTagSponsored = useCallback(
+    (tag: string): boolean => {
+      return !!getCreativeForTags([tag]);
+    },
+    [getCreativeForTags],
+  );
+
+  const checkHasAnySponsoredTag = useCallback(
+    (tags: string[]): boolean => {
+      return !!getCreativeForTags(tags);
+    },
+    [getCreativeForTags],
+  );
+
+  return useMemo(
+    () => ({
+      isActive,
+      getSponsoredTag,
+      getUpvoteAnimation,
+      getHighlightedWordConfig,
+      isTagSponsored: checkIsTagSponsored,
+      hasAnySponsoredTag: checkHasAnySponsoredTag,
+    }),
+    [
+      isActive,
+      getSponsoredTag,
+      getUpvoteAnimation,
+      getHighlightedWordConfig,
+      checkIsTagSponsored,
+      checkHasAnySponsoredTag,
+    ],
+  );
+};
diff --git a/packages/shared/src/hooks/vote/useFeedVotePost.ts b/packages/shared/src/hooks/vote/useFeedVotePost.ts
index 7459aefd014..afb959048a8 100644
--- a/packages/shared/src/hooks/vote/useFeedVotePost.ts
+++ b/packages/shared/src/hooks/vote/useFeedVotePost.ts
@@ -10,6 +10,7 @@ import { voteMutationMatcher, voteMutationHandlers } from './types';
 import { useVotePost } from './useVotePost';
 import { mutateVoteFeedPost } from './utils';
 import { updatePostCache } from '../../lib/query';
+import { useEngagementAdsContext } from '../../contexts/EngagementAdsContext';
 
 export type UseFeedVotePostProps = {
   feedName: string;
@@ -29,6 +30,7 @@ export const useFeedVotePost = ({
   feedQueryKey,
 }: UseFeedVotePostProps): UseFeedVotePost => {
   const queryClient = useQueryClient();
+  const { getCreativeForTags } = useEngagementAdsContext();
 
   useMutationSubscription({
     matcher: voteMutationMatcher,
@@ -67,7 +69,11 @@ export const useFeedVotePost = ({
     ...restVotePost,
     toggleUpvote: useCallback(
       ({ payload, origin, opts }) => {
-        const logExtra = feedLogExtra(feedName, ranking, opts?.extra);
+        const creative = getCreativeForTags(payload?.tags || []);
+        const logExtra = feedLogExtra(feedName, ranking, {
+          ...opts?.extra,
+          ...(creative && { gen_id: creative.genId }),
+        });
 
         return toggleUpvote({
           payload,
@@ -78,11 +84,15 @@ export const useFeedVotePost = ({
           },
         });
       },
-      [toggleUpvote, feedName, ranking],
+      [toggleUpvote, feedName, ranking, getCreativeForTags],
     ),
     toggleDownvote: useCallback(
       ({ payload, origin, opts }) => {
-        const logExtra = feedLogExtra(feedName, ranking, opts?.extra);
+        const creative = getCreativeForTags(payload?.tags || []);
+        const logExtra = feedLogExtra(feedName, ranking, {
+          ...opts?.extra,
+          ...(creative && { gen_id: creative.genId }),
+        });
 
         return toggleDownvote({
           payload,
@@ -93,7 +103,7 @@ export const useFeedVotePost = ({
           },
         });
       },
-      [toggleDownvote, feedName, ranking],
+      [toggleDownvote, feedName, ranking, getCreativeForTags],
     ),
   };
 };
diff --git a/packages/shared/src/lib/auth.ts b/packages/shared/src/lib/auth.ts
index 0b3013c79f6..b16cd114893 100644
--- a/packages/shared/src/lib/auth.ts
+++ b/packages/shared/src/lib/auth.ts
@@ -79,6 +79,7 @@ export enum AuthTriggers {
   RecruiterSelfServe = 'recruiter self serve',
   AiFluencyQuiz = 'ai fluency quiz',
   Gear = 'gear',
+  AddToStack = 'add to stack',
 }
 
 export type AuthTriggersType =
diff --git a/packages/shared/src/lib/boot.ts b/packages/shared/src/lib/boot.ts
index 9f65853256b..1c08d654564 100644
--- a/packages/shared/src/lib/boot.ts
+++ b/packages/shared/src/lib/boot.ts
@@ -9,6 +9,7 @@ import { decrypt } from '../components/crypto';
 import type { MarketingCta } from '../components/marketingCta/common';
 import type { Feed } from '../graphql/feed';
 import type { Continent } from './geo';
+import type { EngagementCreative } from './engagementAds';
 
 interface NotificationsBootData {
   unreadNotificationsCount: number;
@@ -71,6 +72,7 @@ export type Boot = {
     continent?: Continent;
   };
   isAndroidApp?: boolean;
+  engagementCreatives?: EngagementCreative[];
 };
 
 export type BootCacheData = Pick<
@@ -136,6 +138,38 @@ interface GetBootDataParams {
   pathname?: string;
 }
 
+// TODO: Remove before merging — mock engagement creatives for testing
+const MOCK_ENGAGEMENT_CREATIVES: EngagementCreative[] = [
+  {
+    gen_id: 'ec-copilot-2026-q1',
+    promoted_name: 'GitHub Copilot',
+    promoted_body:
+      'Your AI pair programmer. Write code faster with intelligent suggestions.',
+    promoted_cta: 'Try Free for 30 Days',
+    promoted_url: 'https://github.com/features/copilot',
+    promoted_logo_img: {
+      dark: 'https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png',
+      light:
+        'https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png',
+    },
+    promoted_background_img: {
+      dark: 'https://github.githubassets.com/images/modules/site/copilot/hero-bg-dark.webp',
+      light:
+        'https://github.githubassets.com/images/modules/site/copilot/hero-bg-light.webp',
+    },
+    promoted_icon_img: {
+      dark: 'https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png',
+      light:
+        'https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png',
+    },
+    promoted_primary_color: { dark: '#6e40c9', light: '#5a32a3' },
+    promoted_secondary_color: { dark: '#1f6feb', light: '#0969da' },
+    tools: ['copilot', 'vscode'],
+    keywords: ['AI', 'artificial intelligence', 'code completion', 'copilot'],
+    tags: ['ai', 'copilot', 'github-copilot', 'machine-learning', 'llm'],
+  },
+];
+
 export async function getBootData({
   app,
   url,
@@ -153,5 +187,10 @@ export async function getBootData({
     },
   });
   const result = await res.json();
-  return await enrichBootWithFeatures(result);
+  const boot = await enrichBootWithFeatures(result);
+
+  // TODO Micro-interactions-ads Remove before merging — inject mock engagement creatives
+  boot.engagementCreatives = MOCK_ENGAGEMENT_CREATIVES;
+
+  return boot;
 }
diff --git a/packages/shared/src/lib/brand.ts b/packages/shared/src/lib/brand.ts
new file mode 100644
index 00000000000..e6ccbcf50a8
--- /dev/null
+++ b/packages/shared/src/lib/brand.ts
@@ -0,0 +1,132 @@
+/**
+ * Brand Sponsorship System - Micro-Interaction Ads Platform
+ *
+ * Types and utilities for brand sponsorships.
+ * Data comes from EngagementCreative via boot response;
+ * this module owns presentation types and text-matching utilities.
+ */
+
+// ============================================================================
+// Core Brand Types
+// ============================================================================
+
+export interface BrandColors {
+  primary: string;
+  secondary: string;
+  gradient?: string;
+}
+
+// ============================================================================
+// Tag Branding
+// ============================================================================
+
+export type TagBrandingStyle = 'suffix' | 'replace' | 'arrow';
+
+export interface TagBrandingConfig {
+  style: TagBrandingStyle;
+  delay: number; // Animation delay in ms
+  targetUrl?: string; // Optional click-through URL
+  showLogo?: boolean; // Whether to show brand logo next to tag (default: true)
+}
+
+// ============================================================================
+// Upvote Animation
+// ============================================================================
+
+export type UpvoteAnimationType = 'confetti' | 'ripple' | 'burst' | 'glow';
+
+export interface UpvoteAnimationConfig {
+  type: UpvoteAnimationType;
+  particleCount?: number;
+  duration: number; // in ms
+}
+
+// ============================================================================
+// Highlighted Word Tooltip
+// ============================================================================
+
+export type HighlightStyle = 'underline' | 'background' | 'dotted';
+export type HighlightTrigger = 'hover' | 'click' | 'both';
+
+export interface HighlightedWordConfig {
+  keywords: string[]; // Words to highlight (case-insensitive)
+  tooltipTitle: string; // e.g., "Powered by GitHub Copilot"
+  tooltipDescription: string; // e.g., "AI pair programming for developers"
+  ctaText?: string; // e.g., "Try Free" button text
+  ctaUrl?: string; // Click-through URL
+  highlightStyle: HighlightStyle;
+  triggerOn: HighlightTrigger;
+}
+
+// ============================================================================
+// Utilities
+// ============================================================================
+
+/**
+ * Check if a word matches any highlighted keyword (case-insensitive)
+ */
+export const isWordHighlighted = (
+  word: string,
+  config: HighlightedWordConfig | null | undefined,
+): boolean => {
+  if (!config?.keywords?.length) {
+    return false;
+  }
+  const normalizedWord = word.toLowerCase().trim();
+  return config.keywords.some(
+    (keyword) => keyword.toLowerCase() === normalizedWord,
+  );
+};
+
+/**
+ * Escape special regex characters
+ */
+const escapeRegex = (str: string): string => {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};
+
+/**
+ * Find highlighted keyword matches in text
+ * Returns an array of match objects with start/end indices
+ */
+export interface KeywordMatch {
+  keyword: string;
+  start: number;
+  end: number;
+}
+
+export const findHighlightedKeywords = (
+  text: string,
+  config: HighlightedWordConfig | null | undefined,
+): KeywordMatch[] => {
+  if (!config?.keywords?.length || !text) {
+    return [];
+  }
+
+  const matches: KeywordMatch[] = [];
+  const lowerText = text.toLowerCase();
+
+  config.keywords.forEach((keyword) => {
+    const lowerKeyword = keyword.toLowerCase();
+    // Use word boundary regex to match whole words only
+    const regex = new RegExp(`\\b${escapeRegex(lowerKeyword)}\\b`, 'gi');
+    let match: RegExpExecArray | null = regex.exec(lowerText);
+
+    while (match !== null) {
+      matches.push({
+        keyword: text.slice(match.index, match.index + keyword.length),
+        start: match.index,
+        end: match.index + keyword.length,
+      });
+
+      match = regex.exec(lowerText);
+    }
+  });
+
+  // Sort by start position and remove overlapping matches
+  return matches
+    .sort((a, b) => a.start - b.start)
+    .filter(
+      (match, index, arr) => index === 0 || match.start >= arr[index - 1].end,
+    );
+};
diff --git a/packages/shared/src/lib/engagementAds.ts b/packages/shared/src/lib/engagementAds.ts
new file mode 100644
index 00000000000..b06a7465002
--- /dev/null
+++ b/packages/shared/src/lib/engagementAds.ts
@@ -0,0 +1,92 @@
+/**
+ * Engagement Ads (Micro-Interaction Ads) — Types
+ *
+ * Defines the raw API shape from boot and the resolved creative type
+ * used by all downstream components.
+ */
+
+/** Dark/light theme-aware value from the API */
+export interface ThemedValue {
+  dark: string;
+  light: string;
+}
+
+/** Raw shape from boot API (snake_case JSON) */
+export interface EngagementCreative {
+  gen_id: string;
+  promoted_name: string;
+  promoted_body: string;
+  promoted_cta: string;
+  promoted_url: string;
+  promoted_logo_img: ThemedValue;
+  promoted_background_img: ThemedValue;
+  promoted_icon_img: ThemedValue;
+  promoted_primary_color: ThemedValue;
+  promoted_secondary_color: ThemedValue;
+  tools: string[];
+  keywords: string[];
+  tags: string[];
+}
+
+/** EngagementCreative with themed values resolved to the current theme */
+export interface ResolvedCreative {
+  genId: string;
+  name: string;
+  body: string;
+  cta: string;
+  url: string;
+  logo: string;
+  background: string;
+  icon: string;
+  primaryColor: string;
+  secondaryColor: string;
+  tools: string[];
+  keywords: string[];
+  tags: string[];
+}
+
+/** Resolve a raw creative to the current theme */
+export const resolveCreative = (
+  creative: EngagementCreative,
+  isLight: boolean,
+): ResolvedCreative => ({
+  genId: creative.gen_id,
+  name: creative.promoted_name,
+  body: creative.promoted_body,
+  cta: creative.promoted_cta,
+  url: creative.promoted_url,
+  logo: isLight
+    ? creative.promoted_logo_img.light
+    : creative.promoted_logo_img.dark,
+  background: isLight
+    ? creative.promoted_background_img.light
+    : creative.promoted_background_img.dark,
+  icon: isLight
+    ? creative.promoted_icon_img.light
+    : creative.promoted_icon_img.dark,
+  primaryColor: isLight
+    ? creative.promoted_primary_color.light
+    : creative.promoted_primary_color.dark,
+  secondaryColor: isLight
+    ? creative.promoted_secondary_color.light
+    : creative.promoted_secondary_color.dark,
+  tools: creative.tools,
+  keywords: creative.keywords,
+  tags: creative.tags,
+});
+
+/** Find the first creative whose tags overlap with the given tags */
+export const findCreativeForTags = (
+  creatives?: ResolvedCreative[],
+  tags?: string[],
+): ResolvedCreative | null => {
+  if (!tags?.length || !creatives?.length) {
+    return null;
+  }
+
+  const lowerTags = tags.map((t) => t.toLowerCase());
+
+  return (
+    creatives.find((c) => c.tags.some((t) => lowerTags.includes(t))) ?? null
+  );
+};
diff --git a/packages/shared/src/lib/feed.ts b/packages/shared/src/lib/feed.ts
index d00fc667108..7581c1dc4e5 100644
--- a/packages/shared/src/lib/feed.ts
+++ b/packages/shared/src/lib/feed.ts
@@ -69,6 +69,7 @@ export function feedLogExtra(
   ranking?: string,
   extra?: {
     scroll_y?: number;
+    gen_id?: string;
   },
   origin?: Origin,
   variant?: string,
diff --git a/packages/webapp/pages/posts/[id]/index.tsx b/packages/webapp/pages/posts/[id]/index.tsx
index 44c919651ed..1d662d21f9e 100644
--- a/packages/webapp/pages/posts/[id]/index.tsx
+++ b/packages/webapp/pages/posts/[id]/index.tsx
@@ -46,6 +46,7 @@ import { ActivePostContextProvider } from '@dailydotdev/shared/src/contexts/Acti
 import { LogExtraContextProvider } from '@dailydotdev/shared/src/contexts/LogExtraContext';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
 import useDebounceFn from '@dailydotdev/shared/src/hooks/useDebounceFn';
+import { useEngagementAdsContext } from '@dailydotdev/shared/src/contexts/EngagementAdsContext';
 import { getPageSeoTitles } from '../../../components/layouts/utils';
 import { getLayout } from '../../../components/layouts/MainLayout';
 import FooterNavBarLayout from '../../../components/layouts/FooterNavBarLayout';
@@ -161,6 +162,7 @@ export const PostPage = ({
 }: Props): ReactElement => {
   useJoinReferral();
   const { logEvent } = useLogContext();
+  const { getCreativeForTags } = useEngagementAdsContext();
   const [position, setPosition] =
     useState<CSSProperties['position']>('relative');
   const router = useRouter();
@@ -235,9 +237,11 @@ export const PostPage = ({
     <ActivePostContextProvider post={post}>
       <LogExtraContextProvider
         selector={() => {
+          const creative = getCreativeForTags(post?.tags || []);
           return {
             referrer_target_id: post?.id,
             referrer_target_type: post?.id ? TargetType.Post : undefined,
+            ...(creative && { gen_id: creative.genId }),
           };
         }}
       >
diff --git a/packages/webapp/pages/settings/coupons.tsx b/packages/webapp/pages/settings/coupons.tsx
new file mode 100644
index 00000000000..4444c7a798c
--- /dev/null
+++ b/packages/webapp/pages/settings/coupons.tsx
@@ -0,0 +1,473 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import type { NextSeoProps } from 'next-seo';
+import { useRouter } from 'next/router';
+import { SearchField } from '@dailydotdev/shared/src/components/fields/SearchField';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import {
+  GiftIcon,
+  LinkIcon,
+  StarIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { useToastNotification } from '@dailydotdev/shared/src/hooks/useToastNotification';
+import classNames from 'classnames';
+import { Modal } from '@dailydotdev/shared/src/components/modals/common/Modal';
+import { ModalSize } from '@dailydotdev/shared/src/components/modals/common/types';
+import { settingsUrl } from '@dailydotdev/shared/src/lib/constants';
+import { AccountPageContainer } from '../../components/layouts/SettingsLayout/AccountPageContainer';
+import { getSettingsLayout } from '../../components/layouts/SettingsLayout';
+import { defaultSeo } from '../../next-seo';
+import { getTemplatedTitle } from '../../components/layouts/utils';
+
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  title: getTemplatedTitle('Coupons'),
+};
+
+// TODO: Re-enable when ready - page is temporarily hidden
+const COUPONS_PAGE_ENABLED = false;
+
+interface Coupon {
+  id: string;
+  company: string;
+  logo: string;
+  title: string;
+  description: string;
+  code: string;
+  discount: string;
+  expiresAt: string;
+  category: string;
+  redeemUrl: string;
+}
+
+// Mock coupon data - in production this would come from an API
+const mockCoupons: Coupon[] = [
+  {
+    id: '1',
+    company: 'GitHub',
+    logo: 'https://github.githubassets.com/favicons/favicon.svg',
+    title: '50% off GitHub Copilot',
+    description: 'Get 50% off your first year of GitHub Copilot Individual.',
+    code: 'DAILYDEV50',
+    discount: '50%',
+    expiresAt: '2026-12-31',
+    category: 'Developer Tools',
+    redeemUrl: 'https://github.com/features/copilot',
+  },
+  {
+    id: '2',
+    company: 'JetBrains',
+    logo: 'https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.svg',
+    title: '25% off All IDEs',
+    description:
+      'Exclusive discount on all JetBrains IDEs for daily.dev community members.',
+    code: 'DAILYDEV25',
+    discount: '25%',
+    expiresAt: '2026-06-30',
+    category: 'Developer Tools',
+    redeemUrl: 'https://www.jetbrains.com/',
+  },
+  {
+    id: '3',
+    company: 'Vercel',
+    logo: 'https://assets.vercel.com/image/upload/front/favicon/vercel/favicon.ico',
+    title: 'Free Pro Plan for 3 Months',
+    description: 'Try Vercel Pro free for 3 months with all premium features.',
+    code: 'DAILYDEVPRO',
+    discount: '3 months free',
+    expiresAt: '2026-09-30',
+    category: 'Hosting',
+    redeemUrl: 'https://vercel.com/',
+  },
+  {
+    id: '4',
+    company: 'Notion',
+    logo: 'https://www.notion.so/images/favicon.ico',
+    title: '20% off Plus Plan',
+    description: 'Upgrade to Notion Plus with 20% discount for the first year.',
+    code: 'DAILYNOTION',
+    discount: '20%',
+    expiresAt: '2026-08-15',
+    category: 'Productivity',
+    redeemUrl: 'https://www.notion.so/',
+  },
+  {
+    id: '5',
+    company: 'Figma',
+    logo: 'https://static.figma.com/app/icon/1/favicon.ico',
+    title: '30% off Professional Plan',
+    description: 'Design better with Figma Professional at 30% off.',
+    code: 'DAILYFIGMA30',
+    discount: '30%',
+    expiresAt: '2026-10-31',
+    category: 'Design',
+    redeemUrl: 'https://www.figma.com/',
+  },
+  {
+    id: '6',
+    company: 'Linear',
+    logo: 'https://linear.app/favicon.ico',
+    title: 'Free Plus Plan for 6 Months',
+    description:
+      'Streamline your workflow with Linear Plus, free for 6 months.',
+    code: 'DAILYLINEAR6',
+    discount: '6 months free',
+    expiresAt: '2026-11-30',
+    category: 'Productivity',
+    redeemUrl: 'https://linear.app/',
+  },
+];
+
+const FAVORITES_STORAGE_KEY = 'dailydev_coupon_favorites';
+
+const getFavoritesFromStorage = (): string[] => {
+  if (typeof window === 'undefined') {
+    return [];
+  }
+  const stored = localStorage.getItem(FAVORITES_STORAGE_KEY);
+  return stored ? JSON.parse(stored) : [];
+};
+
+const saveFavoritesToStorage = (favorites: string[]): void => {
+  localStorage.setItem(FAVORITES_STORAGE_KEY, JSON.stringify(favorites));
+};
+
+interface CouponCardProps {
+  coupon: Coupon;
+  isFavorite: boolean;
+  onToggleFavorite: (id: string) => void;
+}
+
+const CouponCard = ({
+  coupon,
+  isFavorite,
+  onToggleFavorite,
+}: CouponCardProps): ReactElement => {
+  const { displayToast } = useToastNotification();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleCopyCode = () => {
+    navigator.clipboard.writeText(coupon.code);
+    displayToast('Coupon code copied to clipboard!');
+  };
+
+  const handleFavoriteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onToggleFavorite(coupon.id);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        className="flex cursor-pointer flex-col gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4 text-left transition-colors hover:border-border-subtlest-secondary"
+        onClick={() => setIsModalOpen(true)}
+      >
+        <div className="flex w-full items-start justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <img
+              src={coupon.logo}
+              alt={coupon.company}
+              className="size-10 rounded-8 bg-background-default object-contain p-1"
+            />
+            <div>
+              <Typography
+                tag={TypographyTag.H3}
+                type={TypographyType.Callout}
+                bold
+              >
+                {coupon.company}
+              </Typography>
+              <Typography
+                type={TypographyType.Footnote}
+                color={TypographyColor.Tertiary}
+              >
+                {coupon.category}
+              </Typography>
+            </div>
+          </div>
+          <Button
+            variant={ButtonVariant.Tertiary}
+            size={ButtonSize.Small}
+            icon={
+              <StarIcon
+                secondary={isFavorite}
+                className={classNames(
+                  isFavorite && 'text-accent-cheese-default',
+                )}
+              />
+            }
+            onClick={handleFavoriteClick}
+            aria-label={
+              isFavorite ? 'Remove from favorites' : 'Add to favorites'
+            }
+          />
+        </div>
+
+        <div>
+          <Typography type={TypographyType.Body} bold>
+            {coupon.title}
+          </Typography>
+          <Typography
+            type={TypographyType.Callout}
+            color={TypographyColor.Secondary}
+            className="mt-1"
+          >
+            {coupon.description}
+          </Typography>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <span className="rounded-8 bg-accent-avocado-default px-2 py-1 font-bold text-raw-pepper-90 typo-footnote">
+            {coupon.discount}
+          </span>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            Expires: {new Date(coupon.expiresAt).toLocaleDateString()}
+          </Typography>
+        </div>
+      </button>
+
+      {isModalOpen && (
+        <Modal
+          isOpen={isModalOpen}
+          onRequestClose={handleCloseModal}
+          size={ModalSize.Small}
+          shouldCloseOnOverlayClick
+        >
+          <Modal.Header title={coupon.company} />
+          <Modal.Body className="flex flex-col gap-4 p-6">
+            <div className="flex items-center gap-3">
+              <img
+                src={coupon.logo}
+                alt={coupon.company}
+                className="size-12 rounded-8 bg-surface-float object-contain p-1"
+              />
+              <div>
+                <Typography type={TypographyType.Title3} bold>
+                  {coupon.title}
+                </Typography>
+                <Typography
+                  type={TypographyType.Callout}
+                  color={TypographyColor.Tertiary}
+                >
+                  {coupon.category}
+                </Typography>
+              </div>
+            </div>
+
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Secondary}
+            >
+              {coupon.description}
+            </Typography>
+
+            <div>
+              <Typography
+                type={TypographyType.Footnote}
+                color={TypographyColor.Tertiary}
+                className="mb-2"
+              >
+                Your coupon code
+              </Typography>
+              <div className="flex items-center gap-2 rounded-10 bg-surface-float p-3">
+                <code className="flex-1 font-mono font-bold text-text-primary typo-body">
+                  {coupon.code}
+                </code>
+                <Button
+                  variant={ButtonVariant.Secondary}
+                  size={ButtonSize.Small}
+                  onClick={handleCopyCode}
+                >
+                  Copy
+                </Button>
+              </div>
+            </div>
+
+            <div>
+              <Typography
+                type={TypographyType.Footnote}
+                color={TypographyColor.Tertiary}
+                className="mb-2"
+              >
+                How to redeem
+              </Typography>
+              <ol className="list-inside list-decimal space-y-1 text-text-secondary typo-callout">
+                <li>Copy the coupon code above</li>
+                <li>Visit {coupon.company}&apos;s website</li>
+                <li>Apply the code at checkout</li>
+              </ol>
+            </div>
+
+            <div className="flex items-center gap-2 text-text-tertiary typo-footnote">
+              <span className="rounded-8 bg-accent-avocado-default px-2 py-1 font-bold text-raw-pepper-90">
+                {coupon.discount}
+              </span>
+              <span>
+                Expires: {new Date(coupon.expiresAt).toLocaleDateString()}
+              </span>
+            </div>
+
+            <Button
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Large}
+              icon={<LinkIcon size={IconSize.Small} />}
+              onClick={() => {
+                handleCopyCode();
+                window.open(coupon.redeemUrl, '_blank');
+              }}
+              className="w-full"
+            >
+              Visit {coupon.company}
+            </Button>
+          </Modal.Body>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+const CouponsPage = (): ReactElement => {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [favorites, setFavorites] = useState<string[]>(getFavoritesFromStorage);
+
+  // TODO: Re-enable when ready - redirect if page is disabled
+  useEffect(() => {
+    if (!COUPONS_PAGE_ENABLED) {
+      router.replace(settingsUrl);
+    }
+  }, [router]);
+
+  const filteredAndSortedCoupons = useMemo(() => {
+    const filtered = mockCoupons.filter((coupon) => {
+      const query = searchQuery.toLowerCase();
+      return (
+        coupon.company.toLowerCase().includes(query) ||
+        coupon.title.toLowerCase().includes(query) ||
+        coupon.description.toLowerCase().includes(query) ||
+        coupon.category.toLowerCase().includes(query)
+      );
+    });
+
+    // Sort favorites to the top
+    return filtered.sort((a, b) => {
+      const aFav = favorites.includes(a.id);
+      const bFav = favorites.includes(b.id);
+      if (aFav && !bFav) {
+        return -1;
+      }
+      if (!aFav && bFav) {
+        return 1;
+      }
+      return 0;
+    });
+  }, [searchQuery, favorites]);
+
+  if (!COUPONS_PAGE_ENABLED) {
+    return null;
+  }
+
+  const handleToggleFavorite = (id: string) => {
+    setFavorites((prev) => {
+      const newFavorites = prev.includes(id)
+        ? prev.filter((fav) => fav !== id)
+        : [...prev, id];
+      saveFavoritesToStorage(newFavorites);
+      return newFavorites;
+    });
+  };
+
+  const favoriteCount = favorites.length;
+
+  return (
+    <AccountPageContainer title="Coupons">
+      <div className="mb-6 flex flex-col gap-4">
+        <div className="flex items-center gap-3">
+          <GiftIcon
+            size={IconSize.Large}
+            className="text-accent-bacon-default"
+          />
+          <div>
+            <Typography type={TypographyType.Body} bold>
+              Exclusive deals for the daily.dev community
+            </Typography>
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Tertiary}
+            >
+              Save on your favorite developer tools and services
+            </Typography>
+          </div>
+        </div>
+
+        <SearchField
+          inputId="coupon-search"
+          placeholder="Search coupons by company, category, or description..."
+          valueChanged={setSearchQuery}
+        />
+
+        {favoriteCount > 0 && (
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Secondary}
+            className="flex items-center gap-1"
+          >
+            <StarIcon
+              size={IconSize.XSmall}
+              secondary
+              className="text-accent-cheese-default"
+            />
+            {favoriteCount} favorite{favoriteCount !== 1 ? 's' : ''} pinned to
+            top
+          </Typography>
+        )}
+      </div>
+
+      {filteredAndSortedCoupons.length === 0 ? (
+        <div className="mt-16 flex flex-col items-center text-text-secondary">
+          <GiftIcon size={IconSize.XXXLarge} />
+          <Typography type={TypographyType.Body} className="mt-2">
+            {searchQuery
+              ? 'No coupons match your search'
+              : 'No coupons available at the moment'}
+          </Typography>
+        </div>
+      ) : (
+        <div className="grid gap-4 tablet:grid-cols-2">
+          {filteredAndSortedCoupons.map((coupon) => (
+            <CouponCard
+              key={coupon.id}
+              coupon={coupon}
+              isFavorite={favorites.includes(coupon.id)}
+              onToggleFavorite={handleToggleFavorite}
+            />
+          ))}
+        </div>
+      )}
+    </AccountPageContainer>
+  );
+};
+
+CouponsPage.getLayout = getSettingsLayout;
+CouponsPage.layoutProps = { seo };
+
+export default CouponsPage;
diff --git a/packages/webapp/pages/tags/[tag].tsx b/packages/webapp/pages/tags/[tag].tsx
index 19161439bc2..59a47cf94ea 100644
--- a/packages/webapp/pages/tags/[tag].tsx
+++ b/packages/webapp/pages/tags/[tag].tsx
@@ -12,7 +12,6 @@ import {
   DiscussIcon,
   HashtagIcon,
   MiniCloseIcon as XIcon,
-  OpenLinkIcon,
   PlusIcon,
   UpvoteIcon,
 } from '@dailydotdev/shared/src/components/icons';
@@ -65,14 +64,11 @@ import { RelatedSources } from '@dailydotdev/shared/src/components/RelatedSource
 import { ActiveFeedNameContext } from '@dailydotdev/shared/src/contexts';
 import HorizontalFeed from '@dailydotdev/shared/src/components/feeds/HorizontalFeed';
 import { PostType } from '@dailydotdev/shared/src/graphql/posts';
-import { useFeature } from '@dailydotdev/shared/src/components/GrowthBookProvider';
-import { feature } from '@dailydotdev/shared/src/lib/featureManagement';
-import { cloudinarySourceRoadmap } from '@dailydotdev/shared/src/lib/image';
-import { anchorDefaultRel } from '@dailydotdev/shared/src/lib/strings';
 import Link from '@dailydotdev/shared/src/components/utilities/Link';
 import CustomFeedOptionsMenu from '@dailydotdev/shared/src/components/CustomFeedOptionsMenu';
 import { useContentPreference } from '@dailydotdev/shared/src/hooks/contentPreference/useContentPreference';
 import { ContentPreferenceType } from '@dailydotdev/shared/src/graphql/contentPreference';
+import { SponsoredTagHero } from '@dailydotdev/shared/src/components/brand/SponsoredTagHero';
 import { getPageSeoTitles } from '../../components/layouts/utils';
 import { getLayout } from '../../components/layouts/FeedLayout';
 import { mainFeedLayoutProps } from '../../components/layouts/MainFeedPage';
@@ -231,7 +227,6 @@ const TagPage = ({
   recommendedTags,
 }: TagPageProps): ReactElement => {
   const { push } = useRouter();
-  const showRoadmap = useFeature(feature.showRoadmap);
   const { user, showLogin } = useContext(AuthContext);
   const mostUpvotedQueryVariables = useMemo(
     () => ({
@@ -331,6 +326,7 @@ const TagPage = ({
 
   return (
     <FeedPageLayoutComponent>
+      <SponsoredTagHero tag={tag} className="mx-4 mb-4" />
       {jsonLd && (
         <Head>
           <script
@@ -435,34 +431,6 @@ const TagPage = ({
             initialTags={recommendedTags}
           />
         )}
-        {showRoadmap && initialData?.flags?.roadmap && (
-          <Link href={initialData.flags.roadmap} passHref prefetch={false}>
-            <a
-              target="_blank"
-              rel={anchorDefaultRel}
-              className="mr-auto flex w-auto cursor-pointer items-center rounded-12 border border-border-subtlest-tertiary p-4"
-            >
-              <img
-                src={cloudinarySourceRoadmap}
-                alt="roadmap.sh logo"
-                className="size-10 rounded-full"
-              />
-              <div className="mx-3 flex-1">
-                <p className="font-bold typo-callout">
-                  Comprehensive roadmap for {tag}
-                </p>
-                <p className="text-text-tertiary typo-footnote">
-                  By roadmap.sh
-                </p>
-              </div>
-              <Button
-                icon={<OpenLinkIcon />}
-                size={ButtonSize.Small}
-                variant={ButtonVariant.Tertiary}
-              />
-            </a>
-          </Link>
-        )}
       </PageInfoHeader>
       <TagTopSources tag={tag} />
       <ActiveFeedNameContext.Provider
diff --git a/packages/webapp/pages/wallet.tsx b/packages/webapp/pages/wallet.tsx
index 481d77cc042..ce3d252a53a 100644
--- a/packages/webapp/pages/wallet.tsx
+++ b/packages/webapp/pages/wallet.tsx
@@ -247,6 +247,7 @@ const Wallet = (): ReactElement => {
                 balance={transactionSummary?.spent || 0}
               />
             </section>
+
             <Divider />
             <section className="flex w-full flex-col gap-6">
               <Typography type={TypographyType.Body} bold>