diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index 95bd3d00f..827312842 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -314,4 +314,41 @@
       margin: 0;
     }
   }
+
+  /* Checkboxes */
+  .checkbox {
+    appearance: none;
+    background-color: var(--color-canvas);
+    block-size: 1.1em;
+    border: 1px solid currentColor;
+    border-radius: 0.15em;
+    color: currentColor;
+    display: grid;
+    font: inherit;
+    inline-size: 1.1em;
+    margin: 0;
+    place-content: center;
+    transform: translateY(0.1em);
+
+    &::before {
+      background-color: CanvasText;
+      block-size: 0.65em;
+      box-shadow: inset 1em 1em currentColor;
+      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+      content: "";
+      inline-size: 0.65em;
+      transform: scale(0);
+      transform-origin: center;
+      transition: 150ms transform ease-in-out;
+    }
+
+    &:checked::before {
+      transform: scale(1) rotate(10deg);
+    }
+
+    &:where([disabled]):not(:hover):not(:active) {
+      filter: none;
+      opacity: 0.5;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/steps.css b/app/assets/stylesheets/steps.css
index b9b40c8fa..7a608b412 100644
--- a/app/assets/stylesheets/steps.css
+++ b/app/assets/stylesheets/steps.css
@@ -8,40 +8,6 @@
 
   .step__checkbox {
     --hover-color: var(--card-color);
-
-    appearance: none;
-    background-color: var(--color-canvas);
-    block-size: 1.1em;
-    border: 1px solid currentColor;
-    border-radius: 0.15em;
-    color: currentColor;
-    display: grid;
-    font: inherit;
-    inline-size: 1.1em;
-    margin: 0;
-    place-content: center;
-    transform: translateY(0.1em);
-
-    &::before {
-      background-color: CanvasText;
-      block-size: 0.65em;
-      box-shadow: inset 1em 1em currentColor;
-      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-      content: "";
-      inline-size: 0.65em;
-      transform: scale(0);
-      transform-origin: center;
-      transition: 150ms transform ease-in-out;
-    }
-
-    &:checked::before {
-      transform: scale(1) rotate(10deg);
-    }
-
-    &:where([disabled]):not(:hover):not(:active) {
-      filter: none;
-      opacity: 0.5;
-    }
   }
 
   .step__content {
diff --git a/app/views/cards/display/perma/_steps.html.erb b/app/views/cards/display/perma/_steps.html.erb
index 9f65dec2a..8a243bf9b 100644
--- a/app/views/cards/display/perma/_steps.html.erb
+++ b/app/views/cards/display/perma/_steps.html.erb
@@ -3,7 +3,7 @@
 
   <% unless card.closed? %>
     <li id="<%= dom_id(card, :new_step) %>" class="step">
-      <input type="checkbox" class="step__checkbox" disabled>
+      <input type="checkbox" class="checkbox step__checkbox" disabled>
       <%= form_with model: [card, Step.new], url: card_steps_path(card), class: "min-width", data: { controller: "form", action: "submit->form#preventEmptySubmit submit->form#preventComposingSubmit turbo:submit-end->form#reset" } do |form| %>
         <%= form.text_field :content, class: "input step__content hide-focus-ring", placeholder: "Add a step…", autocomplete: "off", data: { form_target: "input", "1p-ignore": "true", action: "compositionstart->form#compositionStart compositionend->form#compositionEnd" }, aria: { label: "Add a step" } %>
       <% end %>
diff --git a/app/views/cards/steps/_step.html.erb b/app/views/cards/steps/_step.html.erb
index 052419d39..ea049852a 100644
--- a/app/views/cards/steps/_step.html.erb
+++ b/app/views/cards/steps/_step.html.erb
@@ -1,7 +1,7 @@
 <%= turbo_frame_tag step do %>
   <li class="step">
     <%= form_with model: [step.card, step], data: { controller: "form" } do |form| %>
-      <%= form.check_box :completed, { class: "step__checkbox", data: { action: "change->form#submit" } } %>
+      <%= form.check_box :completed, { class: "checkbox step__checkbox", data: { action: "change->form#submit" } } %>
     <% end %>
     <%= link_to step.content, edit_card_step_path(step.card, step), class: "step__content" %>
   </li> 
diff --git a/app/views/cards/steps/edit.html.erb b/app/views/cards/steps/edit.html.erb
index 9784fe6ac..d112f0341 100644
--- a/app/views/cards/steps/edit.html.erb
+++ b/app/views/cards/steps/edit.html.erb
@@ -1,7 +1,7 @@
 <%= turbo_frame_tag @step do %>
   <div class="flex align-center gap-half">
     <%= form_with model: [@card, @step], class: "step", data: { controller: "form" } do |form| %>
-      <%= form.check_box :completed, { class: "step__checkbox", checked: @step.completed?, disabled: true } %>
+      <%= form.check_box :completed, { class: "checkbox step__checkbox", checked: @step.completed?, disabled: true } %>
       <%= form.text_field :content, class: "input step__content step__content--edit hide-focus-ring", placeholder: "Name this step…", required: true, autofocus: true, autocomplete: "off",
           data: { action: "keydown.esc->form#cancel focus->form#select", "1p-ignore": "true" } %>
       <%= form.button type: "submit", class: "btn btn--positive txt-xx-small" do %>
diff --git a/app/views/public/cards/show/_steps.html.erb b/app/views/public/cards/show/_steps.html.erb
index e6f8e1f3a..8e6b69fc9 100644
--- a/app/views/public/cards/show/_steps.html.erb
+++ b/app/views/public/cards/show/_steps.html.erb
@@ -1,7 +1,7 @@
 <ol class="steps txt-small margin-block">
   <% card.steps.each do |step| %>
     <li class="step">
-      <%= check_box_tag :completed, { class: "step__checkbox", disabled: true, checked: step.completed? } %>
+      <%= check_box_tag :completed, { class: "checkbox step__checkbox", disabled: true, checked: step.completed? } %>
       <%= tag.span step.content, class: "step__content" %>
     </li> 
   <% end %>