diff --git a/data/resources/style.css b/data/resources/style.css
index 50e41167..de9943fa 100644
--- a/data/resources/style.css
+++ b/data/resources/style.css
@@ -27,6 +27,10 @@ listview.content row:last-child {
 	border-bottom-width: 0px;
 }
 
+headerbar .suggested-action {
+  min-width: 70px;
+}
+
 
 /* Components */
 
diff --git a/data/resources/ui/login.ui b/data/resources/ui/login.ui
index b3fb74cc..780d63d2 100644
--- a/data/resources/ui/login.ui
+++ b/data/resources/ui/login.ui
@@ -19,25 +19,9 @@
               </object>
             </child>
             <child type="end">
-              <object class="GtkButton" id="next_button">
+              <object class="SpinnerButton" id="next_button">
                 <property name="action_name">login.next</property>
-                <property name="child">
-                  <object class="GtkStack" id="next_stack">
-                    <child>
-                      <object class="GtkLabel" id="next_label">
-                        <property name="use_underline">True</property>
-                        <property name="label" translatable="yes">_Next</property>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkSpinner" id="next_spinner">
-                        <property name="spinning">True</property>
-                        <property name="valign">center</property>
-                        <property name="halign">center</property>
-                      </object>
-                    </child>
-                  </object>
-                </property>
+                <property name="label" translatable="yes">_Next</property>
                 <style>
                   <class name="suggested-action"/>
                 </style>
@@ -167,4 +151,3 @@
     </child>
   </template>
 </interface>
-
diff --git a/src/login.rs b/src/login.rs
index 60d65eb0..487f99ef 100644
--- a/src/login.rs
+++ b/src/login.rs
@@ -3,7 +3,7 @@ use gtk::{self, glib, glib::clone, prelude::*, subclass::prelude::*, CompositeTe
 use log::debug;
 use url::{ParseError, Url};
 
-use crate::Session;
+use crate::{components::SpinnerButton, Session};
 
 mod imp {
     use std::cell::RefCell;
@@ -21,13 +21,7 @@ mod imp {
     pub struct Login {
         pub current_session: RefCell<Option<Session>>,
         #[template_child]
-        pub next_button: TemplateChild<gtk::Button>,
-        #[template_child]
-        pub next_stack: TemplateChild<gtk::Stack>,
-        #[template_child]
-        pub next_label: TemplateChild<gtk::Label>,
-        #[template_child]
-        pub next_spinner: TemplateChild<gtk::Spinner>,
+        pub next_button: TemplateChild<SpinnerButton>,
         #[template_child]
         pub main_stack: TemplateChild<gtk::Stack>,
         #[template_child]
@@ -153,9 +147,7 @@ impl Login {
         let priv_ = self.imp();
 
         self.action_set_enabled("login.next", false);
-        priv_
-            .next_stack
-            .set_visible_child(&priv_.next_spinner.get());
+        priv_.next_button.set_loading(true);
         priv_.main_stack.set_sensitive(false);
     }
 
@@ -163,7 +155,7 @@ impl Login {
         let priv_ = self.imp();
 
         self.action_set_enabled("login.next", true);
-        priv_.next_stack.set_visible_child(&priv_.next_label.get());
+        priv_.next_button.set_loading(false);
         priv_.main_stack.set_sensitive(true);
     }