diff --git a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
index 3a9d385441..83f5960156 100644
--- a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
+++ b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
@@ -23,3 +23,37 @@
     }
   }
 }
+
+.collapsible-checkbox {
+  display: none;
+}
+
+.lbl-toggle > ::before {
+  content: ' ';
+  display: inline-block;
+
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid currentColor;
+
+  vertical-align: middle;
+  margin-right: .7rem;
+  transform: translateY(-2px);
+
+  transition: transform .2s ease-out;
+}
+
+.collapsible-content {
+  max-height: 0px;
+  overflow: hidden;
+
+  transition: max-height .25s ease-in-out;
+}
+
+.collapsible-checkbox:checked + .lbl-toggle + .collapsible-content {
+  max-height: 350px;
+}
+
+.collapsible-checkbox:checked + .lbl-toggle > ::before {
+  transform: rotate(90deg) translateX(-3px);
+}
diff --git a/app/views/registration/steps/_introduction.html.haml b/app/views/registration/steps/_introduction.html.haml
index 84bbb9840e..53315b7815 100644
--- a/app/views/registration/steps/_introduction.html.haml
+++ b/app/views/registration/steps/_introduction.html.haml
@@ -10,27 +10,33 @@
 
   .row{ 'data-equalizer' => true }
     .small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true }
-      %h5= t(".registration_checklist")+":"
-      %ul.check-list
-        %li
-          = t(".registration_time")
-        %li
-          = t(".registration_enterprise_address")
-        %li
-          = t(".registration_contact_details")
-        %li
-          = t(".registration_logo")
-        %li
-          = t(".registration_promo_image")
-        %li
-          = t(".registration_about_us")
+      %input#collapsible-registration-checklist.collapsible-checkbox{:type => "checkbox"}
+      %label.lbl-toggle{:for => "collapsible-registration-checklist"}
+        %h5= t(".registration_checklist")+":"
+      .collapsible-content
+        %ul.check-list
+          %li
+            = t(".registration_time")
+          %li
+            = t(".registration_enterprise_address")
+          %li
+            = t(".registration_contact_details")
+          %li
+            = t(".registration_logo")
+          %li
+            = t(".registration_promo_image")
+          %li
+            = t(".registration_about_us")
 
     .small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true}
-      %h5
-        = t(".registration_outcome_headline")
-      %p= t(".registration_outcome1_html")
-      %p= t(".registration_outcome2")
-      %p= t(".registration_outcome3")
+      %input#collapsible-registration-outcome.collapsible-checkbox{:type => "checkbox"}
+      %label.lbl-toggle{:for => "collapsible-registration-outcome"}
+        %h5
+          = t(".registration_outcome_headline")
+      .collapsible-content
+        %p= t(".registration_outcome1_html")
+        %p= t(".registration_outcome2")
+        %p= t(".registration_outcome3")
 
   .row{'ng-init' => "tos_required=#{Spree::Config.enterprises_require_tos}" }
     %hr