diff --git a/blueocean-personalization/src/main/js/components/PipelineCard.jsx b/blueocean-personalization/src/main/js/components/PipelineCard.jsx
index 7cb512f0..8a03f643 100644
--- a/blueocean-personalization/src/main/js/components/PipelineCard.jsx
+++ b/blueocean-personalization/src/main/js/components/PipelineCard.jsx
@@ -96,7 +96,7 @@ export class PipelineCard extends Component {
                 { this.props.branch ?
                 <span className="branch">
                     <span className="octicon octicon-git-branch"></span>
-                    <span className="branchText">{this.props.branch}</span>
+                    <span className="branchText">{decodeURIComponent(this.props.branch)}</span>
                 </span>
                 :
                 <span className="branch"></span>
diff --git a/blueocean-personalization/src/test/js/components/PipelineCard-spec.jsx b/blueocean-personalization/src/test/js/components/PipelineCard-spec.jsx
index e1a201c7..6298109a 100644
--- a/blueocean-personalization/src/test/js/components/PipelineCard-spec.jsx
+++ b/blueocean-personalization/src/test/js/components/PipelineCard-spec.jsx
@@ -55,4 +55,17 @@ describe('PipelineCard', () => {
 
         assert.equal(wrapper.find('.actions .run').length, 0);
     });
+
+    it('escapes the branch name', () => {
+        const branchName = 'feature/JENKINS-667';
+        const wrapper = shallow(
+            <PipelineCard status="SUCCESS" organization="Jenkins" pipeline="blueocean"
+              branch={encodeURIComponent(branchName)} commitId="447d8e1"
+            />
+        );
+
+        const elements = wrapper.find('.branchText');
+        assert.equal(elements.length, 1);
+        assert.equal(elements.at(0).text(), branchName);
+    });
 });