diff --git a/src/js/components/Ballot/BallotItemCompressed.jsx b/src/js/components/Ballot/BallotItemCompressed.jsx
index b95ee6423..8d62d5815 100644
--- a/src/js/components/Ballot/BallotItemCompressed.jsx
+++ b/src/js/components/Ballot/BallotItemCompressed.jsx
@@ -9,7 +9,7 @@ export default class BallotItemCompressed extends PureComponent {
     renderLog('BallotItemCompressed');  // Set LOG_RENDER_EVENTS to log all renders
     const {
       ballotItemDisplayName, candidateList, candidatesToShowForSearchResults,
-      isFirstBallotItem, isMeasure,
+      isFirstBallotItem, isMeasure, primaryParty,
       weVoteId,
     } = this.props;
     return (
@@ -26,6 +26,7 @@ export default class BallotItemCompressed extends PureComponent {
             candidateList={candidateList}
             candidatesToShowForSearchResults={candidatesToShowForSearchResults}
             isFirstBallotItem={isFirstBallotItem}
+            primaryParty={primaryParty}
           />
         )}
       </div>
@@ -38,5 +39,6 @@ BallotItemCompressed.propTypes = {
   candidatesToShowForSearchResults: PropTypes.array,
   isFirstBallotItem: PropTypes.bool,
   isMeasure: PropTypes.bool,
+  primaryParty: PropTypes.string,
   weVoteId: PropTypes.string.isRequired,
 };
diff --git a/src/js/components/Ballot/OfficeItemCompressed.jsx b/src/js/components/Ballot/OfficeItemCompressed.jsx
index 0d2df8b27..8b2816f10 100644
--- a/src/js/components/Ballot/OfficeItemCompressed.jsx
+++ b/src/js/components/Ballot/OfficeItemCompressed.jsx
@@ -515,7 +515,7 @@ class OfficeItemCompressed extends Component {
     renderLog('OfficeItemCompressed');  // Set LOG_RENDER_EVENTS to log all renders
     // console.log('OfficeItemCompressed render');
     let { ballotItemDisplayName } = this.props;
-    const { isFirstBallotItem, officeWeVoteId } = this.props; // classes
+    const { isFirstBallotItem, officeWeVoteId, primaryParty } = this.props; // classes
     const { candidateListLength, showAllCandidates, totalNumberOfCandidates } = this.state;
     ballotItemDisplayName = toTitleCase(ballotItemDisplayName).replace('(Unexpired)', '(Remainder)');
     const candidatesToRenderCount = this.getCandidatesToRenderCount();
@@ -534,6 +534,15 @@ class OfficeItemCompressed extends Component {
         />
         <OfficeNameH2>
           {ballotItemDisplayName}
+          {!!(primaryParty) && (
+            <PrimaryPartyWrapper>
+              {' '}
+              (
+              {primaryParty}
+              {' '}
+              Primary)
+            </PrimaryPartyWrapper>
+          )}
         </OfficeNameH2>
         {/* *************************
           Display either a) the candidates the voter supports, or b) the first few candidates running for this office
@@ -576,6 +585,7 @@ OfficeItemCompressed.propTypes = {
   isFirstBallotItem: PropTypes.bool,
   organization: PropTypes.object,
   organizationWeVoteId: PropTypes.string,
+  primaryParty: PropTypes.string,
 };
 
 const styles = (theme) => ({
@@ -616,6 +626,10 @@ const ItemActionBarOutsideWrapper = styled('div')`
   width: 100%;
 `;
 
+const PrimaryPartyWrapper = styled('span')`
+  font-size: 18px;
+`;
+
 const ScoreWrapper = styled('div')`
   display: flex;
 `;
diff --git a/src/js/pages/Ballot/Ballot.jsx b/src/js/pages/Ballot/Ballot.jsx
index 7d3365412..9c1dbf25d 100644
--- a/src/js/pages/Ballot/Ballot.jsx
+++ b/src/js/pages/Ballot/Ballot.jsx
@@ -1637,6 +1637,7 @@ class Ballot extends Component {
                                         id={chipLabelText(item.ballot_item_display_name)}
                                         isFirstBallotItem={isFirstBallotItem}
                                         isMeasure={item.kind_of_ballot_item === TYPES.MEASURE}
+                                        primaryParty={item.primary_party}
                                         totalNumberOfBallotItems={totalNumberOfBallotItems}
                                         weVoteId={item.we_vote_id}
                                         key={key}