diff --git a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
index ba0935fff7d0ed6f2fd9d9f7204e740e23636d16..4d57c832bb4a721a54cc9656df3baf46957f8c89 100644
--- a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
@@ -1,9 +1,9 @@
 = form_for [@project, @protected_tag], html: { class: 'new-protected-tag js-new-protected-tag' } do |f|
   %input{ type: 'hidden', name: 'update_section', value: 'js-protected-tags-settings' }
-  .card
-    .card-header
+  = render Pajamas::CardComponent.new do |c|
+    - c.header do
       = _('Protect a tag')
-    .card-body
+    - c.body do
       = form_errors(@protected_tag)
       .form-group.row
         = f.label :name, _('Tag:'), class: 'col-md-2 text-left text-md-right'
@@ -19,5 +19,5 @@
           .create_access_levels-container
             = yield :create_access_levels
 
-    .card-footer
+    - c.footer do
       = f.submit _('Protect'), class: 'gl-button btn btn-confirm', disabled: true, data: { qa_selector: 'protect_tag_button' }