diff --git a/imports/NeoChat/Component/Login/Login.qml b/imports/NeoChat/Component/Login/Login.qml
index 075ffe194..7ef3cd219 100644
--- a/imports/NeoChat/Component/Login/Login.qml
+++ b/imports/NeoChat/Component/Login/Login.qml
@@ -14,7 +14,7 @@ import NeoChat.Component 1.0
 LoginStep {
     id: login
 
-    showContinueButton: true
+    showContinueButton: LoginHelper.homeserverReachable
     showBackButton: false
 
     title: i18nc("@title", "Login")
@@ -25,7 +25,7 @@ LoginStep {
     }
 
     QQC2.Label {
-        text: "To get started, enter your matrix ID:"
+        text: i18n("To get started, enter your matrix ID:")
     }
 
     Kirigami.FormLayout {
@@ -35,6 +35,8 @@ LoginStep {
             onTextChanged: {
                 if(acceptableInput) {
                     LoginHelper.matrixId = text
+                } else {
+                    LoginHelper.matrixId = ""
                 }
             }
 
diff --git a/imports/NeoChat/Page/WelcomePage.qml b/imports/NeoChat/Page/WelcomePage.qml
index 3988a2c6f..54d934962 100644
--- a/imports/NeoChat/Page/WelcomePage.qml
+++ b/imports/NeoChat/Page/WelcomePage.qml
@@ -5,7 +5,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15 as Controls
 import QtQuick.Layouts 1.15
 
-import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigami 2.19 as Kirigami
 
 import org.kde.neochat 1.0
 import NeoChat.Component.Login 1.0
@@ -49,22 +49,66 @@ Kirigami.ScrollablePage {
     ColumnLayout {
         Item {
             Layout.preferredHeight: Kirigami.Units.gridUnit * 10
-            Layout.preferredWidth: Kirigami.Units.gridUnit * 8
             Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
+
+            id: swapper
+            states: [
+                State {
+                    when: !LoginHelper.homeserverReachable
+                    name: "idle"
+                    PropertyChanges {
+                        target: icon
+                        opacity: 1
+                    }
+                    PropertyChanges {
+                        target: avi
+                        opacity: 0
+                    }
+                },
+                State {
+                    when: LoginHelper.homeserverReachable
+                    name: "showAvi"
+                    PropertyChanges {
+                        target: icon
+                        opacity: 0
+                    }
+                    PropertyChanges {
+                        target: avi
+                        opacity: 1
+                    }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    to: "showAvi"
+                    SequentialAnimation {
+                        NumberAnimation { target: icon; properties: "opacity";}
+                        NumberAnimation { target: avi; properties: "opacity";}
+                    }
+                },
+                Transition {
+                    from: "showAvi"
+                    SequentialAnimation {
+                        NumberAnimation { target: avi; properties: "opacity";}
+                        NumberAnimation { target: icon; properties: "opacity";}
+                    }
+                }
+            ]
+
+            Kirigami.Icon {
+                id: icon
+                source: "org.kde.neochat"
+                anchors.fill: parent
+                implicitWidth: height
+            }
 
             ColumnLayout {
+                id: avi
+                opacity: 0
                 anchors.fill: parent
-
-                Kirigami.Icon {
-                    source: "org.kde.neochat"
-                    visible: !welcomePage.showAvatar
-                    Layout.fillHeight: true
-                    Layout.alignment: Qt.AlignHCenter
-                    implicitWidth: height
-                }
-
                 Kirigami.Avatar {
-                    visible: welcomePage.showAvatar
                     source: LoginHelper.loginAvatar
                     name: LoginHelper.loginName
                     Layout.fillHeight: true
@@ -72,11 +116,11 @@ Kirigami.ScrollablePage {
                     Layout.alignment: Qt.AlignHCenter
                }
 
-                Controls.Label {
-                    text: LoginHelper.loginName
-                    font.pointSize: 24
-                    Layout.alignment: Qt.AlignHCenter
-                }
+               Controls.Label {
+                   text: LoginHelper.loginName
+                   font.pointSize: 24
+                   Layout.alignment: Qt.AlignHCenter
+               }
             }
         }
         Controls.Label {
@@ -95,6 +139,7 @@ Kirigami.ScrollablePage {
                 headerMessage.text = ""
             }
         }
+
         RowLayout {
             Layout.alignment: Qt.AlignHCenter
 
@@ -112,11 +157,19 @@ Kirigami.ScrollablePage {
             Controls.Button {
                 id: continueButton
                 enabled: welcomePage.currentStep.acceptable
-                visible: welcomePage.currentStep.showContinueButton
+                opacity: welcomePage.currentStep.showContinueButton ? 1 : 0
+                Behavior on opacity { NumberAnimation {} }
                 action: welcomePage.currentStep.action
             }
         }
 
+        Kirigami.LoadingPlaceholder {
+            opacity: LoginHelper.testing ? 1 : 0
+            text: i18n("Connecting to your homeserver...")
+            Behavior on opacity { NumberAnimation {} }
+            Layout.alignment: Qt.AlignHCenter
+        }
+
         Connections {
             target: currentStep