diff --git a/app/views/decidim/extra_user_fields/_registration_form.html.erb b/app/views/decidim/extra_user_fields/_registration_form.html.erb
index 0bfa9d5..1a7f90c 100644
--- a/app/views/decidim/extra_user_fields/_registration_form.html.erb
+++ b/app/views/decidim/extra_user_fields/_registration_form.html.erb
@@ -1,49 +1,44 @@
 <% if current_organization.extra_user_fields_enabled? %>
-  <div class="card">
-    <div class="card__content card__extra_user_fields">
-      <div class="legend">
-        <h3><%= t(".signup.legend") %></h3>
-      </div>
-
-      <% if current_organization.activated_extra_field?(:date_of_birth) %>
-        <div class="field">
-          <%= f.date_field :date_of_birth %>
-        </div>
-      <% end %>
-
-      <% if current_organization.activated_extra_field?(:gender) %>
-        <div class="field">
-          <%= f.collection_select :gender, f.object.gender_options_for_select, :first, :last %>
-        </div>
-      <% end %>
-
-      <% if current_organization.activated_extra_field?(:country) %>
-        <div class="field">
-          <%= f.custom_country_select :country %>
-        </div>
-      <% end %>
-
-      <% if current_organization.activated_extra_field?(:postal_code) %>
-        <div class="field">
-          <%= f.text_field :postal_code %>
-        </div>
-      <% end %>
-
-      <% if current_organization.activated_extra_field?(:phone_number) %>
-        <div class="field">
-          <%= f.text_field :phone_number %>
-        </div>
-      <% end %>
-
-      <% if current_organization.activated_extra_field?(:location) %>
-        <div class="field">
-          <%= f.text_field :location %>
-        </div>
-      <% end %>
-
-      <%# Block ExtraUserFields SignUpFormFields %>
-
-      <%# EndBlock %>
-    </div>
+  <div id="card__extra_user_fields" class="form__wrapper form__wrapper-block">
+    <h4 class="h4"><%= t(".signup.legend") %></h4>
+
+    <% if current_organization.activated_extra_field?(:date_of_birth) %>
+      <%= f.date_field :date_of_birth %>
+    <% end %>
+
+    <% if current_organization.activated_extra_field?(:gender) %>
+      <%= f.collection_select :gender, f.object.gender_options_for_select, :first, :last %>
+    <% end %>
+
+    <% if current_organization.activated_extra_field?(:country) %>
+      <%= f.custom_country_select :country %>
+    <% end %>
+
+    <% if current_organization.activated_extra_field?(:postal_code) %>
+      <%= f.text_field :postal_code %>
+    <% end %>
+
+    <%
+      # TODO: move wherever it takes
+      def telephone_pattern
+        "^(\\+34)?[0-9]{9}$"
+      end
+
+      def telephone_placeholder
+        "+34987654321"
+      end
+    %>
+    <% if current_organization.activated_extra_field?(:phone_number) %>
+      <%= f.telephone_field :phone_number, placeholder: telephone_placeholder, pattern: telephone_pattern %>
+    <% end %>
+
+    <% if current_organization.activated_extra_field?(:location) %>
+      <%= f.text_field :location %>
+    <% end %>
+
+    <%# Block ExtraUserFields SignUpFormFields %>
+
+    <%# EndBlock %>
+
   </div>
 <% end %>
diff --git a/app/views/decidim/extra_user_fields/admin/extra_user_fields/_form.html.erb b/app/views/decidim/extra_user_fields/admin/extra_user_fields/_form.html.erb
index b3d17f1..cd3c6c8 100644
--- a/app/views/decidim/extra_user_fields/admin/extra_user_fields/_form.html.erb
+++ b/app/views/decidim/extra_user_fields/admin/extra_user_fields/_form.html.erb
@@ -1,29 +1,36 @@
-<p class="callout success"><%== t(".callout.help") %></p>
-<div class="card">
-  <div class="card-section extra_user_fields">
-    <div>
-      <h3><%= t(".global.title") %></h3>
+<%= cell("decidim/announcement", t(".callout.help"), callout_class: "success" ) %>
+
+<div class="form__wrapper">
+  <div class="card" data-component="accordion" id="accordion-global">
+    <div class="card-divider">
+      <button class="card-divider-button" data-open="true" data-controls="panel-global" type="button">
+        <%= icon "arrow-right-s-line" %>
+        <h2 class="card-title"><%= t(".global.title") %></h2>
+      </button>
     </div>
-    <div class="row column">
-      <%= form.check_box :enabled, label: t(".extra_user_fields.extra_user_fields_enabled") %>
+
+    <div id="panel-global" class="card-section">
+      <div class="row column">
+        <%= form.check_box :enabled, label: t(".extra_user_fields.extra_user_fields_enabled") %>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="card extra_fields_setup">
-  <div class="card-section">
-    <div>
-      <h3><%= t(".extra_user_fields.section") %></h3>
+  <div class="card" data-component="accordion" id="accordion-setup">
+    <div class="card-divider">
+      <button class="card-divider-button" data-open="true" data-controls="panel-setup" type="button">
+        <%= icon "arrow-right-s-line" %>
+        <h2 class="card-title"><%= t(".extra_user_fields.section") %></h2>
+      </button>
     </div>
 
-    <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/date_of_birth", locals: { form: form } %>
-    <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/country", locals: { form: form } %>
-    <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/postal_code", locals: { form: form } %>
-    <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/gender", locals: { form: form } %>
-    <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/phone_number", locals: { form: form } %>
-    <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/location", locals: { form: form } %>
-    <%# Block ExtraUserFields ExtraFields %>
-
-    <%# EndBlock %>
+    <div id="panel-setup" class="card-section">
+      <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/date_of_birth", locals: { form: form } %>
+      <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/country", locals: { form: form } %>
+      <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/postal_code", locals: { form: form } %>
+      <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/gender", locals: { form: form } %>
+      <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/phone_number", locals: { form: form } %>
+      <%= render partial: "decidim/extra_user_fields/admin/extra_user_fields/fields/location", locals: { form: form } %>
+    </div>
   </div>
 </div>
diff --git a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_country.html.erb b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_country.html.erb
index 93adc59..1a2763d 100644
--- a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_country.html.erb
+++ b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_country.html.erb
@@ -1,6 +1,5 @@
 <div class="card-section">
   <div class="row column">
-    <p><%= t(".description") %></p>
-    <%= form.check_box :country, label: t(".label") %>
+    <%= form.check_box :country, label: t(".label"), help_text: t(".description") %>
   </div>
 </div>
diff --git a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_date_of_birth.html.erb b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_date_of_birth.html.erb
index 0bbab64..3e34bf2 100644
--- a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_date_of_birth.html.erb
+++ b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_date_of_birth.html.erb
@@ -1,6 +1,5 @@
 <div class="card-section">
   <div class="row column">
-    <p><%= t(".description") %></p>
-    <%= form.check_box :date_of_birth, label: t(".label") %>
+    <%= form.check_box :date_of_birth, label: t(".label"), help_text: t(".description") %>
   </div>
 </div>
diff --git a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_gender.html.erb b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_gender.html.erb
index 37cfecd..7405bb8 100644
--- a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_gender.html.erb
+++ b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_gender.html.erb
@@ -1,6 +1,5 @@
 <div class="card-section">
   <div class="row column">
-    <p><%= t(".description") %></p>
-    <%= form.check_box :gender, label: t(".label") %>
+    <%= form.check_box :gender, label: t(".label"), help_text: t(".description") %>
   </div>
 </div>
diff --git a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_location.html.erb b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_location.html.erb
index 899fa02..8f47117 100644
--- a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_location.html.erb
+++ b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_location.html.erb
@@ -1,6 +1,5 @@
 <div class="card-section">
   <div class="row column">
-    <p><%= t(".description") %></p>
-    <%= form.check_box :location, label: t(".label") %>
+    <%= form.check_box :location, label: t(".label"), help_text: t(".description") %>
   </div>
 </div>
diff --git a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_phone_number.html.erb b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_phone_number.html.erb
index e789c0a..99d9e65 100644
--- a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_phone_number.html.erb
+++ b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_phone_number.html.erb
@@ -1,6 +1,5 @@
 <div class="card-section">
   <div class="row column">
-    <p><%= t(".description") %></p>
-    <%= form.check_box :phone_number, label: t(".label") %>
+    <%= form.check_box :phone_number, label: t(".label"), help_text: t(".description") %>
   </div>
 </div>
diff --git a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_postal_code.html.erb b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_postal_code.html.erb
index bfa91a7..059ccc6 100644
--- a/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_postal_code.html.erb
+++ b/app/views/decidim/extra_user_fields/admin/extra_user_fields/fields/_postal_code.html.erb
@@ -1,6 +1,5 @@
 <div class="card-section">
   <div class="row column">
-    <p><%= t(".description") %></p>
-    <%= form.check_box :postal_code, label: t(".label") %>
+    <%= form.check_box :postal_code, label: t(".label"), help_text: t(".description") %>
   </div>
 </div>
diff --git a/app/views/decidim/extra_user_fields/admin/extra_user_fields/index.html.erb b/app/views/decidim/extra_user_fields/admin/extra_user_fields/index.html.erb
index 68ce0b0..0e9bef8 100644
--- a/app/views/decidim/extra_user_fields/admin/extra_user_fields/index.html.erb
+++ b/app/views/decidim/extra_user_fields/admin/extra_user_fields/index.html.erb
@@ -1,16 +1,17 @@
-<div class="card" id="extra_user_fields">
-  <div class="card-divider">
-    <h2 class="card-title">
-      <%= t ".title" %>
-    </h2>
-  </div>
-  <div class="card-section">
-    <%= decidim_form_for(@form, url: "/admin/extra_user_fields/extra_user_fields", html: { class: "form edit_extra_user_fields" }, method: :patch) do |f| %>
-      <%= render partial: "form", object: f %>
+<% add_decidim_page_title(t(".title")) %>
+<div class="item_show__header">
+  <h1 class="item_show__header-title">
+    <%= t ".title" %>
+  </h1>
+</div>
+<div id="extra_user_fields" class="item__edit-form">
+  <%= decidim_form_for(@form, url: "/admin/extra_user_fields/extra_user_fields", html: { class: "form-defaults form edit_extra_user_fields" }, method: :patch) do |f| %>
+    <%= render partial: "form", object: f %>
 
-      <div class="button--double form-general-submit">
-        <%= f.submit t(".save") %>
+    <div class="item__edit-sticky">
+      <div class="item__edit-sticky-container">
+        <%= f.submit t(".save"), class: "button button__sm button__secondary" %>
       </div>
-    <% end %>
-  </div>
+    </div>
+  <% end %>
 </div>
diff --git a/lib/decidim/extra_user_fields/version.rb b/lib/decidim/extra_user_fields/version.rb
index e6bada4..8daf38f 100644
--- a/lib/decidim/extra_user_fields/version.rb
+++ b/lib/decidim/extra_user_fields/version.rb
@@ -8,7 +8,7 @@ def self.version
     end
 
     def self.decidim_version
-      [">= 0.27.0", "< 0.28"].freeze
+      [">= 0.28"].freeze
     end
   end
 end
diff --git a/spec/system/admin_manages_organization_extra_user_fields_spec.rb b/spec/system/admin_manages_organization_extra_user_fields_spec.rb
index dde7091..f9f8193 100644
--- a/spec/system/admin_manages_organization_extra_user_fields_spec.rb
+++ b/spec/system/admin_manages_organization_extra_user_fields_spec.rb
@@ -31,11 +31,8 @@
     end
 
     it "allows to enable extra user fields functionality" do
-      within ".extra_user_fields" do
+      within "#extra_user_fields" do
         expect(page).to have_content("Enable extra user fields")
-      end
-
-      within ".extra_fields_setup" do
         expect(page).to have_content("Available extra fields for signup form")
       end
     end
diff --git a/spec/system/registration_spec.rb b/spec/system/registration_spec.rb
index 250aff3..c267288 100644
--- a/spec/system/registration_spec.rb
+++ b/spec/system/registration_spec.rb
@@ -85,7 +85,7 @@ def fill_extra_user_fields
   end
 
   it "contains extra user fields" do
-    within ".card__extra_user_fields" do
+    within "#card__extra_user_fields" do
       expect(page).to have_content("Date of birth")
       expect(page).to have_content("Gender")
       expect(page).to have_content("Country")