diff --git a/app/assets/stylesheets/components/_personal-key.scss b/app/assets/stylesheets/components/_personal-key.scss
index e359ee51661..3dcf488795b 100644
--- a/app/assets/stylesheets/components/_personal-key.scss
+++ b/app/assets/stylesheets/components/_personal-key.scss
@@ -1,8 +1,15 @@
-.key-badge {
-  position: relative;
+.personal-key-block {
+  @include u-padding-y(2);
+  background-image: url('personal-key/pkey-block.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+
+  @include at-media('tablet') {
+    @include u-padding-x(1);
+  }
 }
 
-.separator-text__code {
+.personal-key-block__code {
   @include u-font-family('mono');
   font-size: 1.5rem;
 
@@ -17,21 +24,6 @@
   }
 }
 
-@include at-media('tablet') {
-  .separator-text > div {
-    &::after {
-      color: #000;
-      padding: 0 0.5rem;
-    }
-  }
-}
-
-.bg-pk-box {
-  background-image: url('personal-key/pkey-block.svg');
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
 .bg-personal-key {
   height: 145px;
   background-image: url('personal-key/shield.svg');
diff --git a/app/views/partials/personal_key/_key.html.erb b/app/views/partials/personal_key/_key.html.erb
index b7007dbec18..3a096babaed 100644
--- a/app/views/partials/personal_key/_key.html.erb
+++ b/app/views/partials/personal_key/_key.html.erb
@@ -3,9 +3,9 @@
     <%= t('users.personal_key.header') %>
   </h2>
   <div class="bg-personal-key padding-top-4 margin-y-2">
-    <div class="padding-x-0 tablet:padding-x-1 padding-y-2 separator-text bg-pk-box">
+    <div class="personal-key-block">
       <% code.split('-').each do |word| %>
-        <% concat(content_tag(:strong, word, class: 'separator-text__code', data: { personal_key: '' })) %>
+        <% concat(content_tag(:strong, word, class: 'personal-key-block__code', data: { personal_key: '' })) %>
       <% end %>
     </div>
   </div>
diff --git a/spec/support/features/personal_key_helper.rb b/spec/support/features/personal_key_helper.rb
index cc99ebf315d..a773b451412 100644
--- a/spec/support/features/personal_key_helper.rb
+++ b/spec/support/features/personal_key_helper.rb
@@ -28,6 +28,6 @@ def trigger_reset_password_and_click_email_link(email)
   end
 
   def scrape_personal_key
-    page.all('.separator-text__code').map(&:text).join('-')
+    page.all('.personal-key-block__code').map(&:text).join('-')
   end
 end
diff --git a/spec/support/shared_examples/sign_in.rb b/spec/support/shared_examples/sign_in.rb
index 78b63cef084..a304c2da699 100644
--- a/spec/support/shared_examples/sign_in.rb
+++ b/spec/support/shared_examples/sign_in.rb
@@ -242,7 +242,7 @@ def user_with_broken_personal_key(protocol, scenario)
           fill_in_credentials_and_submit(user.email, user.password)
 
           expect(page).to have_content(t('account.personal_key.needs_new'))
-          code = page.all('.separator-text__code').map(&:text).join(' ')
+          code = page.all('.personal-key-block__code').map(&:text).join(' ')
           acknowledge_and_confirm_personal_key
 
           expect(user.reload.valid_personal_key?(code)).to eq(true)
@@ -265,7 +265,7 @@ def user_with_broken_personal_key(protocol, scenario)
           click_button t('forms.buttons.submit.default')
 
           expect(page).to have_content(t('account.personal_key.needs_new'))
-          code = page.all('.separator-text__code').map(&:text).join(' ')
+          code = page.all('.personal-key-block__code').map(&:text).join(' ')
           acknowledge_and_confirm_personal_key
 
           expect(user.reload.valid_personal_key?(code)).to eq(true)