> ## Documentation Index
> Fetch the complete documentation index at: https://docs.topsort.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Marketplace UI improvements

> This week, Topsort has updated our marketplace UI to improve your user experience. We’ve added a new way to view how many members are dedicated to a vendor account on Topsort. We’ve also moved “Ad Reviews” next to “Configurations” so that marketplace representatives can manage every setting related to banner ads all in one place.

export const ChangelogActions = () => {
  return <>
      <style>{`
        .changelog-actions {
          display: flex;
          justify-content: center;
          gap: 12px;
          margin-top: 2rem;
          padding-top: 1.5rem;
          border-top: 1px solid #e5e7eb;
        }
        
        [data-theme="dark"] .changelog-actions {
          border-top-color: #374151;
        }
        
        .changelog-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 9999px;
          border: 1px solid #d1d5db;
          background: transparent;
          color: #6b7280;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .changelog-btn:hover {
          border-color: #9ca3af;
          background: #f9fafb;
        }
        
        [data-theme="dark"] .changelog-btn {
          border-color: #4b5563;
          color: #9ca3af;
        }
        
        [data-theme="dark"] .changelog-btn:hover {
          border-color: #6b7280;
          background: #1f2937;
        }
      `}</style>
      <div className="changelog-actions">
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    btn.innerHTML = "❤️ Like";
    btn.style.borderColor = "#ec4899";
  }}>
          🤍 Like
        </button>
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    navigator.clipboard.writeText(window.location.href);
    const originalContent = btn.innerHTML;
    btn.innerHTML = "✓ Copied";
    btn.style.borderColor = "#22c55e";
    btn.style.color = "#22c55e";
    setTimeout(() => {
      btn.innerHTML = originalContent;
      btn.style.borderColor = "";
      btn.style.color = "";
    }, 2000);
  }}>
          ↗ Share
        </button>
      </div>
    </>;
};

<div style={{ display: "flex", gap: "8px", flexWrap: "wrap", marginBottom: "16px" }}>
  <Badge color="gray" size="sm" icon="calendar">July 11, 2022</Badge>
  <Badge color="blue" size="sm" icon="rectangle-ad">Ad Platform</Badge>
  <Badge color="orange" size="sm" icon="arrow-up">Improvement</Badge>
</div>

This week, Topsort has updated our marketplace UI to improve your user experience. We’ve added a new way to view how many members are dedicated to a vendor account on Topsort. We’ve also moved “Ad Reviews” next to “Configurations” so that marketplace representatives can manage every setting related to banner ads all in one place.

# Improvements

## Added members card to vendor’s page

The newly added members card is located next to the “Balance Breakdown.” It clearly displays how many members have joined the Topsort platform in a space efficient way. Users can also choose to add members to the platform on this card.

<Frame>
  <img src="https://mintcdn.com/topsort/1RZV69Uhic79Ylqv/images/changelog/02705c6-changelog_4_members_card.webp?fit=max&auto=format&n=1RZV69Uhic79Ylqv&q=85&s=f2f7d21a20a60290a7f27c43eb5160e9" alt="members card" width="2100" height="786" data-path="images/changelog/02705c6-changelog_4_members_card.webp" />
</Frame>

## New “Manage” tab for reviewing banner ad creatives

Reviews for banner ad creatives are now located next to the configuration tab for banners. Formerly, it was labeled “Ad Reviews” and existed as a separate section on Topsort’s sidebar. By grouping “Ad Reviews” with “Configurations," users can easily navigate between managing configuration settings and creative approvals.

<Frame>
  <img src="https://mintcdn.com/topsort/IPYqfFwUqBX3axYX/images/changelog/61cacab-Changelog_4_Manage_Tab.webp?fit=max&auto=format&n=IPYqfFwUqBX3axYX&q=85&s=818ad73d13abfb467c534441d854d657" alt="manage tab" width="1440" height="900" data-path="images/changelog/61cacab-Changelog_4_Manage_Tab.webp" />
</Frame>

<ChangelogActions />