All forms and icons are moved here

29 files changed, 745 insertions, 19 deletions

diff --git a/.gitignore b/.gitignore
index b09842f..b365c6f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,7 +31,6 @@ Makefile*
 *build-*
 *.pro
 *.conf
-*.qrc
 
 # Qt unit tests
 target_wrapper.*
@@ -53,5 +52,4 @@ compile_commands.json
 *creator.user*
 
 # Assets
-*.svg
 *.png
diff --git a/components/icons/add-24px.svg b/components/icons/add-24px.svg
new file mode 100644
index 0000000..ff2ae4c
--- /dev/null
+++ b/components/icons/add-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
\ No newline at end of file
diff --git a/components/icons/arrow-back-24px.svg b/components/icons/arrow-back-24px.svg
new file mode 100644
index 0000000..9d5f05f
--- /dev/null
+++ b/components/icons/arrow-back-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
\ No newline at end of file
diff --git a/components/icons/arrow-forward-24px.svg b/components/icons/arrow-forward-24px.svg
new file mode 100644
index 0000000..842e7d0
--- /dev/null
+++ b/components/icons/arrow-forward-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>
\ No newline at end of file
diff --git a/components/icons/attachment-24px.svg b/components/icons/attachment-24px.svg
new file mode 100644
index 0000000..b868484
--- /dev/null
+++ b/components/icons/attachment-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M18.5 16H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h12.5c1.38 0 2.5 1.12 2.5 2.5S20.88 13 19.5 13H9c-.55 0-1-.45-1-1s.45-1 1-1h9.5V9.5H9c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5h10.5c2.21 0 4-1.79 4-4s-1.79-4-4-4H7c-3.04 0-5.5 2.46-5.5 5.5s2.46 5.5 5.5 5.5h11.5V16z"/></svg>
\ No newline at end of file
diff --git a/components/icons/check-box-outline-24px.svg b/components/icons/check-box-outline-24px.svg
new file mode 100644
index 0000000..68d3447
--- /dev/null
+++ b/components/icons/check-box-outline-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
\ No newline at end of file
diff --git a/components/icons/chevron-right-24px.svg b/components/icons/chevron-right-24px.svg
new file mode 100644
index 0000000..acabc29
--- /dev/null
+++ b/components/icons/chevron-right-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
\ No newline at end of file
diff --git a/components/icons/close-24px.svg b/components/icons/close-24px.svg
new file mode 100644
index 0000000..0fd6b0d
--- /dev/null
+++ b/components/icons/close-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
\ No newline at end of file
diff --git a/components/icons/email-24px.svg b/components/icons/email-24px.svg
new file mode 100644
index 0000000..1ed4686
--- /dev/null
+++ b/components/icons/email-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>
\ No newline at end of file
diff --git a/components/icons/lock-24px.svg b/components/icons/lock-24px.svg
new file mode 100644
index 0000000..1dbceea
--- /dev/null
+++ b/components/icons/lock-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0V0z"/><path opacity=".87" d="M0 0h24v24H0V0z"/></g><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>
\ No newline at end of file
diff --git a/components/icons/menu-24px.svg b/components/icons/menu-24px.svg
new file mode 100644
index 0000000..770b192
--- /dev/null
+++ b/components/icons/menu-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
\ No newline at end of file
diff --git a/components/icons/photo_camera_24px.svg b/components/icons/photo_camera_24px.svg
new file mode 100644
index 0000000..5a9866b
--- /dev/null
+++ b/components/icons/photo_camera_24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M14.12 4l1.83 2H20v12H4V6h4.05l1.83-2h4.24M15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm-3 7c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z"/></svg>
\ No newline at end of file
diff --git a/components/icons/profile-24px.svg b/components/icons/profile-24px.svg
new file mode 100644
index 0000000..beed9cb
--- /dev/null
+++ b/components/icons/profile-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33C4.62 15.49 4 13.82 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z"/></svg>
\ No newline at end of file
diff --git a/components/icons/user-24px.svg b/components/icons/user-24px.svg
new file mode 100644
index 0000000..3eff6de
--- /dev/null
+++ b/components/icons/user-24px.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>username-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 L17,22 L17,20 L12,20 C7.66,20 4,16.34 4,12 C4,7.66 7.66,4 12,4 C16.34,4 20,7.66 20,12 L20,13.43 C20,14.22 19.29,15 18.5,15 C17.71,15 17,14.22 17,13.43 L17,12 C17,9.24 14.76,7 12,7 C9.24,7 7,9.24 7,12 C7,14.76 9.24,17 12,17 C13.38,17 14.64,16.44 15.54,15.53 C16.19,16.42 17.31,17 18.5,17 C20.47,17 22,15.4 22,13.43 L22,12 C22,6.48 17.52,2 12,2 Z M12,15 C10.34,15 9,13.66 9,12 C9,10.34 10.34,9 12,9 C13.66,9 15,10.34 15,12 C15,13.66 13.66,15 12,15 Z" id="path-1"></path>
+    </defs>
+    <g id="username-24" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="icon/communication/alternate_email_24px" fill-opacity="0.9" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/features/CreateProfileForm.ui.qml b/features/CreateProfileForm.ui.qml
new file mode 100644
index 0000000..6192a99
--- /dev/null
+++ b/features/CreateProfileForm.ui.qml
@@ -0,0 +1,210 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+
+Rectangle {
+    id: rectangle
+    color: "#fff"
+
+    property alias backButton: backButton
+    property alias titleLabel: titleLabel
+    property alias skipButton: skipButton
+    property alias enterFullName: enterFullName
+    property alias userNameLabel: userNameLabel
+    property alias emailAddressLabel: emailAddressLabel
+    property alias startUsingKelakon: startUsingKelakon
+
+    ToolBar {
+        id: toolbar
+        height: 56
+        font.family: "Google Sans"
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#fff"
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/components/icons/arrow-back-24px.svg"
+                highlighted: true
+            }
+            Label {
+                id: titleLabel
+                text: qsTr("Create Profile")
+                font.weight: Font.Medium
+                wrapMode: Text.WordWrap
+                color: "#000"
+                font.family: "Google Sans"
+                font.pointSize: 20
+                elide: Label.ElideRight
+                horizontalAlignment: Qt.AlignHCenter
+                verticalAlignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+            }
+            ToolButton {
+                id: skipButton
+                text: qsTr("Skip")
+                font.weight: Font.Medium
+                display: AbstractButton.TextOnly
+                font.family: "Google Sans"
+                font.pointSize: 14
+                font.capitalization: Font.MixedCase
+                highlighted: true
+            }
+        }
+    }
+    RowLayout {
+        id: userEmail
+        height: 56
+        anchors.topMargin: 16
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: usernameRowLayout.bottom
+        width: parent.width
+        spacing: 8
+
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/email-24px.svg"
+            antialiasing: true
+        }
+
+        Label {
+            id: emailAddressLabel
+            Layout.fillWidth: true
+            text: qsTr("Your@email.com")
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            verticalAlignment: Text.AlignVCenter
+            font.family: "Google Sans"
+            font.pointSize: 16
+            color: "#99000000"
+        }
+    }
+    RowLayout {
+        id: fullnameRowLayout
+        height: 56
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: profilePicture.bottom
+        anchors.topMargin: 32
+        width: parent.width
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/profile-24px.svg"
+            antialiasing: true
+        }
+
+        TextField {
+            id: enterFullName
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            font.pointSize: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Full name")
+            Layout.alignment: Qt.AlignVCenter
+        }
+    }
+    RowLayout {
+        id: usernameRowLayout
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        height: 56
+        Layout.alignment: Qt.AlignVCenter
+        anchors.top: fullnameRowLayout.bottom
+        anchors.topMargin: 16
+
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/user-24px.svg"
+            antialiasing: true
+        }
+
+        TextField {
+            id: userNameLabel
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            font.pointSize: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Username")
+        }
+    }
+
+    RoundButton {
+        id: startUsingKelakon
+        x: 34
+        y: 278
+        text: qsTr("Start using kelakon")
+        font.family: "Google Sans"
+        font.capitalization: Font.MixedCase
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 8
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        highlighted: true
+        Material.background: Material.primary
+    }
+
+    Rectangle {
+        id: profilePicture
+        width: 80
+        height: 80
+        color: "#f0e6fc"
+        radius: 100
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: toolbar.bottom
+        anchors.topMargin: 32
+
+        RoundButton {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            flat: true
+            display: AbstractButton.IconOnly
+            icon.name: "camera-icon"
+            icon.source: "/components/icons/photo_camera_24px.svg"
+            icon.color: "#6D22E9"
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}D{i:1;anchors_width:640}
+}
+##^##*/
+
diff --git a/features/EmailForm.ui.qml b/features/EmailForm.ui.qml
new file mode 100644
index 0000000..610d461
--- /dev/null
+++ b/features/EmailForm.ui.qml
@@ -0,0 +1,123 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+
+Rectangle {
+    id: rectangle
+    color: "#fff"
+    border.width: 0
+
+    property alias backButton: backButton
+    property alias instructionLabel: instructionLabel
+    property alias emailTextField: emailTextField
+    property alias loginButton: loginButton
+
+    ToolBar {
+        id: toolbar
+        height: 56
+        font.family: "Google Sans"
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#FFF"
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/components/icons/arrow-back-24px.svg"
+                highlighted: true
+            }
+        }
+    }
+
+    Label {
+        id: instructionLabel
+        x: 16
+        y: 398
+        color: "#2b2626"
+        text: qsTr("Sign up")
+        font.letterSpacing: 0.25
+        lineHeight: 1
+        font.weight: Font.Bold
+        wrapMode: Text.WordWrap
+        anchors.bottom: emailLayout.top
+        anchors.bottomMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 88
+
+        font.family: "Google Sans"
+        font.pointSize: 34
+    }
+
+    RowLayout {
+        id: emailLayout
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.bottom: loginButton.top
+        anchors.bottomMargin: 16
+        width: parent.width
+        height: 56
+        spacing: 8
+
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/email-24px.svg"
+            antialiasing: true
+        }
+
+        TextField {
+            id: emailTextField
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            font.pointSize: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Email")
+        }
+    }
+
+    RoundButton {
+        id: loginButton
+        text: qsTr("Next")
+        enabled: false
+        font.family: "Google Sans"
+        font.capitalization: Font.MixedCase
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 8
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        highlighted: true
+        Material.background: Material.primary
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
+
diff --git a/features/ExistingLoginForm.ui.qml b/features/ExistingLoginForm.ui.qml
new file mode 100644
index 0000000..3785fea
--- /dev/null
+++ b/features/ExistingLoginForm.ui.qml
@@ -0,0 +1,128 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+
+Rectangle {
+    id: rectangle
+    color: "#fff"
+    border.width: 0
+
+    property alias backButton: backButton
+    property alias passTextField: passTextField
+    property alias createPassButton: loginButton
+
+    ToolBar {
+        id: toolbar
+        height: 56
+        font.family: "Google Sans"
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#FFF"
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/components/icons/arrow-back-24px.svg"
+                highlighted: true
+            }
+        }
+    }
+
+    Label {
+        x: 16
+        y: 232
+        color: "#2b2626"
+        text: qsTr("Welcome Back!")
+        anchors.bottom: userEmail.top
+        anchors.bottomMargin: 16
+        font.letterSpacing: 0.25
+        lineHeight: 1
+        font.weight: Font.Bold
+        wrapMode: Text.WordWrap
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 88
+
+        font.family: "Google Sans"
+        font.pointSize: 34
+    }
+
+    Rectangle {
+        id: userEmail
+        y: 299
+        height: 48
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.bottom: passTextField.top
+        anchors.bottomMargin: 16
+
+        Label {
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+
+            text: qsTr("your@email.com")
+            font.family: "Google Sans"
+            font.pointSize: 16
+            color: "#99000000"
+        }
+    }
+
+    TextField {
+        id: passTextField
+        y: 362
+        font.pointSize: 16
+        anchors.bottom: loginButton.top
+        anchors.bottomMargin: 16
+        font.family: "Google Sans"
+        Layout.fillWidth: true
+        placeholderText: qsTr("Password")
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        Layout.maximumHeight: 56
+        echoMode: TextInput.Password
+    }
+
+    RoundButton {
+        id: loginButton
+        x: 34
+        y: 278
+        text: qsTr("Login")
+        font.family: "Google Sans"
+        font.capitalization: Font.MixedCase
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 8
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        highlighted: true
+        Material.background: Material.primary
+    }
+}
+
+
+
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+ ##^##*/
diff --git a/features/HomeForm.ui.qml b/features/HomeForm.ui.qml
index c44aac5..299cf77 100644
--- a/features/HomeForm.ui.qml
+++ b/features/HomeForm.ui.qml
@@ -5,7 +5,6 @@ import QtQuick.Layouts 1.12
 
 Page {
     property alias menuButton: menuButton
-    property alias titleLabel: titleLabel
     property alias profileButton: profileButton
     property alias contentView: contentView
 
@@ -19,10 +18,11 @@ Page {
             ToolButton {
                 id: menuButton
                 icon.name: "menu-button"
+		icon.source: "/components/icons/menu-24px.svg"
                 highlighted: true
             }
             Label {
-                id: titleLabel
+                text: contentView.currentItem.title
                 Layout.leftMargin: 16
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignLeft
@@ -36,6 +36,7 @@ Page {
             ToolButton {
                 id: profileButton
                 icon.name: "profile-button"
+		icon.source: "/components/icons/profile-24px.svg"
                 highlighted: true
             }
         }
diff --git a/features/LoginEmailForm.ui.qml b/features/LoginEmailForm.ui.qml
index 7f57599..991da16 100644
--- a/features/LoginEmailForm.ui.qml
+++ b/features/LoginEmailForm.ui.qml
@@ -62,7 +62,7 @@ Page {
             sourceSize.width: 24
             Layout.leftMargin: 16
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/email-24px.svg"
+            source: "/components/icons/email-24px.svg"
             antialiasing: true
         }
 
@@ -123,7 +123,7 @@ Page {
             Material.background: Material.primary
             display: AbstractButton.IconOnly
             icon.name: "arrow-forward-icon"
-            icon.source: "../assets/arrow-forward-24px.svg"
+            icon.source: "/components/icons/arrow-forward-24px.svg"
             highlighted: true
             enabled: false
         }
diff --git a/features/LoginForm.ui.qml b/features/LoginForm.ui.qml
new file mode 100644
index 0000000..2b241f1
--- /dev/null
+++ b/features/LoginForm.ui.qml
@@ -0,0 +1,29 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+import QtQuick.Layouts 1.12
+
+Page {
+	property alias toolButton: toolButton
+	property alias contentView: contentView
+
+	header: ToolBar {
+		background: Rectangle {
+			color: "#FAFFFFFF"
+		}
+		RowLayout {
+			ToolButton {
+				id: toolButton
+				icon.name: "back-button"
+				icon.source: "/components/icons/arrow-back-24px.svg"
+				highlighted: true
+			}
+		}
+	}
+
+	StackView {
+		id: contentView
+		anchors.topMargin: 432
+		anchors.fill: parent
+	}
+}
diff --git a/features/LoginPasswordForm.ui.qml b/features/LoginPasswordForm.ui.qml
index dee7709..dba6752 100644
--- a/features/LoginPasswordForm.ui.qml
+++ b/features/LoginPasswordForm.ui.qml
@@ -63,7 +63,7 @@ Page {
             sourceSize.width: 24
             Layout.leftMargin: 16
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/email-24px.svg"
+            source: "/components/icons/email-24px.svg"
             antialiasing: true
         }
 
@@ -100,7 +100,7 @@ Page {
             sourceSize.width: 24
             Layout.leftMargin: 16
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/lock-24px.svg"
+            source: "/components/icons/lock-24px.svg"
             antialiasing: true
         }
 
@@ -161,7 +161,7 @@ Page {
             Material.background: Material.primary
             display: AbstractButton.IconOnly
             icon.name: "arrow-forward-icon"
-            icon.source: "../../assets/arrow-forward-24px.svg"
+            icon.source: "/components/icons/arrow-forward-24px.svg"
             highlighted: true
             enabled: false
         }
diff --git a/features/PasswordForm.ui.qml b/features/PasswordForm.ui.qml
new file mode 100644
index 0000000..b5d34a2
--- /dev/null
+++ b/features/PasswordForm.ui.qml
@@ -0,0 +1,159 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+
+Rectangle {
+    id: rectangle
+    color: "#fff"
+    border.width: 0
+
+    property alias backButton: backButton
+    property alias instructionLabel: instructionLabel
+    property alias userEmail: userEmail
+    property alias passTextField: passTextField
+    property alias createPassButton: createPassButton
+    property alias emailAddressLabel: emailAddressLabel
+
+    ToolBar {
+        id: toolbar
+        height: 56
+        font.family: "Google Sans"
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#FFF"
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/components/icons/arrow-back-24px.svg"
+                highlighted: true
+            }
+        }
+    }
+
+    Label {
+        id: instructionLabel
+        x: 16
+        y: 232
+        color: "#2b2626"
+        text: qsTr("Create password")
+        anchors.bottom: userEmail.top
+        anchors.bottomMargin: 16
+        font.letterSpacing: 0.25
+        lineHeight: 1
+        font.weight: Font.Bold
+        wrapMode: Text.WordWrap
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 88
+
+        font.family: "Google Sans"
+        font.pointSize: 34
+    }
+
+    RowLayout {
+        id: userEmail
+        height: 56
+        anchors.bottom: passTextFieldLayout.top
+        anchors.bottomMargin: 16
+        anchors.horizontalCenterOffset: 0
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        spacing: 8
+
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/email-24px.svg"
+            antialiasing: true
+        }
+
+        Label {
+            id: emailAddressLabel
+            Layout.fillWidth: true
+            text: qsTr("your@email.com")
+            Layout.leftMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            font.family: "Google Sans"
+            font.pointSize: 16
+            color: "#99000000"
+        }
+    }
+    RowLayout {
+        id: passTextFieldLayout
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: createPassButton.top
+        anchors.bottomMargin: 16
+        width: parent.width
+        spacing: 8
+        height: 56
+
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.leftMargin: 16
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/lock-24px.svg"
+            antialiasing: true
+        }
+
+        TextField {
+            id: passTextField
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            font.pointSize: 16
+            anchors.bottomMargin: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Password")
+            echoMode: TextInput.Password
+        }
+    }
+    RoundButton {
+        id: createPassButton
+        x: 34
+        y: 278
+        text: qsTr("Next")
+        enabled: false
+        font.family: "Google Sans"
+        font.capitalization: Font.MixedCase
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 8
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        highlighted: true
+        Material.background: Material.primary
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
+
diff --git a/features/ProfileEditForm.ui.qml b/features/ProfileEditForm.ui.qml
index e6777d0..aa907a7 100644
--- a/features/ProfileEditForm.ui.qml
+++ b/features/ProfileEditForm.ui.qml
@@ -26,7 +26,7 @@ Page {
             ToolButton {
                 id: backButton
                 icon.name: "back-button"
-                icon.source: "../../assets/arrow-back-24px.svg"
+                icon.source: "/components/icons/arrow-back-24px.svg"
                 highlighted: true
             }
             Label {
@@ -85,7 +85,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/profile-24px.svg"
+            source: "/components/icons/profile-24px.svg"
             antialiasing: true
         }
 
@@ -118,7 +118,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/user-24px.svg"
+            source: "/components/icons/user-24px.svg"
             antialiasing: true
         }
 
@@ -152,7 +152,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/email-24px.svg"
+            source: "/components/icons/email-24px.svg"
             antialiasing: true
         }
 
diff --git a/features/ProfileForm.ui.qml b/features/ProfileForm.ui.qml
index f365740..74cb183 100644
--- a/features/ProfileForm.ui.qml
+++ b/features/ProfileForm.ui.qml
@@ -42,7 +42,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/profile-24px.svg"
+            source: "/components/icons/profile-24px.svg"
             antialiasing: true
         }
 
@@ -75,7 +75,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/user-24px.svg"
+            source: "/components/icons/user-24px.svg"
             antialiasing: true
         }
 
@@ -109,7 +109,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/email-24px.svg"
+            source: "/components/icons/email-24px.svg"
             antialiasing: true
         }
 
diff --git a/features/TaskDetailForm.ui.qml b/features/TaskDetailForm.ui.qml
index c227a1c..48e3a49 100644
--- a/features/TaskDetailForm.ui.qml
+++ b/features/TaskDetailForm.ui.qml
@@ -54,7 +54,7 @@ Page {
                 sourceSize.height: 24
                 sourceSize.width: 24
                 Layout.leftMargin: 16
-                source: "../../assets/attachment-24px.svg"
+                source: "/components/icons/attachment-24px.svg"
             }
             ItemDelegate {
                 id: itemDelegate
diff --git a/features/TaskForm.ui.qml b/features/TaskForm.ui.qml
index 57cfbce..50ae148 100644
--- a/features/TaskForm.ui.qml
+++ b/features/TaskForm.ui.qml
@@ -76,7 +76,7 @@ GridLayout {
                 sourceSize.height: 24
                 sourceSize.width: 24
                 Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-                source: "/assets/chevron-right-24px.svg"
+                source: "/components/icons/chevron-right-24px.svg"
             }
         }
     }
diff --git a/features/TaskListForm.ui.qml b/features/TaskListForm.ui.qml
index 0016bb8..61579c9 100644
--- a/features/TaskListForm.ui.qml
+++ b/features/TaskListForm.ui.qml
@@ -32,7 +32,7 @@ Page {
         anchors.right: parent.right
         anchors.rightMargin: 8
         highlighted: true
-        icon.source: "../assets/add-24px.svg"
+        icon.source: "/components/icons/add-24px.svg"
         height: 64
         width: 64
     }
diff --git a/features/UsernameForm.ui.qml b/features/UsernameForm.ui.qml
new file mode 100644
index 0000000..5412533
--- /dev/null
+++ b/features/UsernameForm.ui.qml
@@ -0,0 +1,35 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+RowLayout {
+
+    id: userName
+    width: fillWidth
+    height: 54
+    anchors.topMargin: 8
+    anchors.right: parent.right
+    anchors.rightMargin: 0
+    anchors.left: parent.left
+    anchors.leftMargin: 0
+    spacing: 16
+
+    Image {
+        id: icon
+        width: 24
+        height: 24
+        Layout.leftMargin: 16
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+        fillMode: Image.PreserveAspectFit
+        source: "/components/icons/user-24px.svg"
+    }
+
+    TextField {
+        id: textField
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+        font.pointSize: 16
+        font.family: "Google Sans"
+        Layout.fillWidth: true
+        placeholderText: qsTr("Username")
+    }
+}
diff --git a/material-design-icons.qrc b/material-design-icons.qrc
new file mode 100644
index 0000000..e08b3b8
--- /dev/null
+++ b/material-design-icons.qrc
@@ -0,0 +1,16 @@
+<RCC>
+	<qresource prefix="/">
+		<file>components/icons/add-24px.svg</file>
+		<file>components/icons/arrow-back-24px.svg</file>
+		<file>components/icons/arrow-forward-24px.svg</file>
+		<file>components/icons/attachment-24px.svg</file>
+		<file>components/icons/check-box-outline-24px.svg</file>
+		<file>components/icons/chevron-right-24px.svg</file>
+		<file>components/icons/email-24px.svg</file>
+		<file>components/icons/lock-24px.svg</file>
+		<file>components/icons/menu-24px.svg</file>
+		<file>components/icons/photo_camera_24px.svg</file>
+		<file>components/icons/profile-24px.svg</file>
+		<file>components/icons/user-24px.svg</file>
+	</qresource>
+</RCC>