diff --git a/app/views/decidim/helsinki_smsauth/omniauth/_phone_form.html.erb b/app/views/decidim/helsinki_smsauth/omniauth/_phone_form.html.erb
index 6992f87..c9e7ef2 100644
--- a/app/views/decidim/helsinki_smsauth/omniauth/_phone_form.html.erb
+++ b/app/views/decidim/helsinki_smsauth/omniauth/_phone_form.html.erb
@@ -1,10 +1,5 @@
-<div class="row">
-  <div class="columns large-centered">
-    <%= form.number_field :phone_number, value: (form.object.phone_number.present? ? "0#{form.object.phone_number}" : nil) %>
-  </div>
-</div>
-<div class="row">
-  <div class="columns large-centered">
-    <%= form.submit t(".submit"), class:"button expanded" %>
-  </div>
+<%= form.number_field :phone_number, value: (form.object.phone_number.present? ? "0#{form.object.phone_number}" : nil) %>
+
+<div class="form__wrapper-block">
+  <%= form.submit t(".submit"), class:"button button__lg button__primary" %>
 </div>
diff --git a/app/views/decidim/helsinki_smsauth/omniauth/_phone_instructions.html.erb b/app/views/decidim/helsinki_smsauth/omniauth/_phone_instructions.html.erb
index 395766b..f232e07 100644
--- a/app/views/decidim/helsinki_smsauth/omniauth/_phone_instructions.html.erb
+++ b/app/views/decidim/helsinki_smsauth/omniauth/_phone_instructions.html.erb
@@ -1,2 +1,2 @@
 <h2><%= t(".step_one") %> - <%= t(".enter_phone_number") %></h2>
-<p><%= t(".type_in_phone") %></p>
+<p class="my-5"><%= t(".type_in_phone") %></p>
diff --git a/app/views/decidim/helsinki_smsauth/omniauth/new.html.erb b/app/views/decidim/helsinki_smsauth/omniauth/new.html.erb
index b86f7a0..3e75c3b 100644
--- a/app/views/decidim/helsinki_smsauth/omniauth/new.html.erb
+++ b/app/views/decidim/helsinki_smsauth/omniauth/new.html.erb
@@ -1,26 +1,23 @@
-<div class="content">
-  <div class="wrapper">
-    <div class="row">
-      <div class="columns large-10 large-centered text-center page-title margin-top-1">
-        <h1><%= t(".title") %></h1>
-        <%= render partial: "phone_instructions" %>
-      </div>
-      <div class="row">
-        <div class="columns medium-10 mediumlarge-8 large-6 medium-centered">
-          <div class="card">
-            <div class="card__content">
-              <%= decidim_form_for(@form, url: users_auth_sms_send_message_path, method: :post) do |form| %>
-                <%= render partial: "phone_form", locals: { form: form } %>
-              <% end %>
-            </div>
-          </div>
-          <div class="text-center margin-top-2">
-            <h3><%= t(".problem_sign_in") %></h3>
-            <p><%= t(".explanation") %></p>
-            <p><%= link_to t(".another_method"), users_auth_sms_access_code_path, class: "text-center" %></p>
-          </div>
-        </div>
-      </div>
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
+  <div class="flex justify-center">
+    <h1 class="title-decorator my-12"><%= t("title", scope: "decidim.helsinki_smsauth.omniauth.new") %></h1>
+  </div>
+
+  <div class="text-lg text-gray-2">
+    <p>
+      <%= render partial: "phone_instructions" %>
+    </p>
+  </div>
+
+  <%= decidim_form_for(@form, url: users_auth_sms_send_message_path, method: :post) do |form| %>
+    <div class="form__wrapper">
+      <%= render partial: "phone_form", locals: { form: form } %>
     </div>
+  <% end %>
+
+  <div class="text-center margin-top-2">
+    <h3><%= t("problem_sign_in", scope: "decidim.helsinki_smsauth.omniauth.new") %></h3>
+    <p><%= t("explanation", scope: "decidim.helsinki_smsauth.omniauth.new") %></p>
+    <p><%= link_to t("another_method", scope: "decidim.helsinki_smsauth.omniauth.new"), users_auth_sms_access_code_path, class: "text-center" %></p>
   </div>
-</div>
+<% end %>