diff --git a/resources/qml/PrinterSelector/MachineSelectorButton.qml b/resources/qml/PrinterSelector/MachineSelectorButton.qml
index 39e63d27c3..ec99dff6c9 100644
--- a/resources/qml/PrinterSelector/MachineSelectorButton.qml
+++ b/resources/qml/PrinterSelector/MachineSelectorButton.qml
@@ -1,12 +1,13 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.7
-import QtQuick.Controls 2.1
+import QtQuick 2.10
+import QtQuick.Controls 2.3
 
 import UM 1.1 as UM
 import Cura 1.0 as Cura
 
+
 Button
 {
     id: machineSelectorButton
diff --git a/resources/qml/WelcomePages/AddPrinterNetwork.qml b/resources/qml/WelcomePages/AddPrinterNetwork.qml
new file mode 100644
index 0000000000..a9ce982f80
--- /dev/null
+++ b/resources/qml/WelcomePages/AddPrinterNetwork.qml
@@ -0,0 +1,106 @@
+// Copyright (c) 2019 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import UM 1.3 as UM
+import Cura 1.1 as Cura
+
+import "../PrinterSelector"
+
+//
+// This component contains the content for the "Add a printer" (network) page of the welcome on-boarding process.
+//
+Item
+{
+    UM.I18nCatalog { id: catalog; name: "cura" }
+
+    Label
+    {
+        id: titleLabel
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
+        text: catalog.i18nc("@label", "Add a printer")
+        color: UM.Theme.getColor("primary_button")
+        font: UM.Theme.getFont("large_bold")
+        renderType: Text.NativeRendering
+    }
+
+    DropDownWidget
+    {
+        id: addNetworkPrinterDropDown
+
+        anchors.top: titleLabel.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 20
+
+        title: catalog.i18nc("@label", "Add a network printer")
+
+        contentComponent: networkPrinterListComponent
+
+        Component
+        {
+            id: networkPrinterListComponent
+
+            ScrollView
+            {
+                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+                ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+
+                property int maxItemCountAtOnce: 5  // show at max 10 items at once, otherwise you need to scroll.
+                height: maxItemCountAtOnce * (UM.Theme.getSize("action_button").height)
+
+                clip: true
+
+                ListView
+                {
+                    id: listView
+                    anchors.fill: parent
+                    model: Cura.GlobalStacksModel {} // TODO: change this to the network printers
+
+                    delegate: MachineSelectorButton
+                    {
+                        text: model.name
+                        width: listView.width - UM.Theme.getSize("default_margin").width
+                        outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
+
+                        checked: ListView.view.currentIndex == index
+                        onClicked:
+                        {
+                            ListView.view.currentIndex = index
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    DropDownWidget
+    {
+        id: addLocalPrinterDropDown
+
+        anchors.top: addNetworkPrinterDropDown.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 20
+
+        title: catalog.i18nc("@label", "Add a non-network printer")
+    }
+
+    Cura.PrimaryButton
+    {
+        id: nextButton
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: 40
+        enabled: true  // TODO
+        text: catalog.i18nc("@button", "Next")
+        width: 140
+        fixedWidthMode: true
+        onClicked: base.showNextPage()
+    }
+}
diff --git a/resources/qml/WelcomePages/DropDownHeader.qml b/resources/qml/WelcomePages/DropDownHeader.qml
new file mode 100644
index 0000000000..b115efe3d2
--- /dev/null
+++ b/resources/qml/WelcomePages/DropDownHeader.qml
@@ -0,0 +1,71 @@
+// Copyright (c) 2019 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import UM 1.3 as UM
+import Cura 1.1 as Cura
+
+import ".."
+
+
+//
+// This is DropDown Header bar of the expandable drop down list.
+//
+Cura.RoundedRectangle
+{
+    UM.I18nCatalog { id: catalog; name: "cura" }
+
+    id: base
+
+    border.width: UM.Theme.getSize("default_lining").width
+    border.color: UM.Theme.getColor("lining")
+    color: hovered ? UM.Theme.getColor("secondary_button_hover") : UM.Theme.getColor("secondary_button")
+    radius: UM.Theme.getSize("default_radius").width
+
+    cornerSide: contentShown ? Cura.RoundedRectangle.Direction.Up : Cura.RoundedRectangle.Direction.All
+
+    property string title: ""
+    property url rightIconSource: UM.Theme.getIcon("arrow_bottom")
+
+    // If the tab is under hovering state
+    property bool hovered: false
+    // If the content is shown
+    property bool contentShown: false
+
+    MouseArea
+    {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: base.hovered = true
+        onExited: base.hovered = false
+
+        onClicked: base.contentShown = !base.contentShown
+    }
+
+    Label
+    {
+        id: title
+        anchors.left: parent.left
+        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        anchors.verticalCenter: parent.verticalCenter
+        verticalAlignment: Text.AlignVCenter
+        text: base.title
+        font: UM.Theme.getFont("medium")
+        renderType: Text.NativeRendering
+        color: base.hovered ? UM.Theme.getColor("small_button_text_hover") : UM.Theme.getColor("small_button_text")
+    }
+
+    UM.RecolorImage
+    {
+        id: rightIcon
+        anchors.right: parent.right
+        anchors.rightMargin: UM.Theme.getSize("default_margin").width
+        anchors.verticalCenter: parent.verticalCenter
+        width: UM.Theme.getSize("message_close").width
+        height: UM.Theme.getSize("message_close").height
+        color: base.hovered ? UM.Theme.getColor("small_button_text_hover") : UM.Theme.getColor("small_button_text")
+        source: base.rightIconSource
+    }
+}
diff --git a/resources/qml/WelcomePages/DropDownWidget.qml b/resources/qml/WelcomePages/DropDownWidget.qml
new file mode 100644
index 0000000000..5addac13ed
--- /dev/null
+++ b/resources/qml/WelcomePages/DropDownWidget.qml
@@ -0,0 +1,78 @@
+// Copyright (c) 2019 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import UM 1.3 as UM
+import Cura 1.1 as Cura
+
+
+Item
+{
+    UM.I18nCatalog { id: catalog; name: "cura" }
+
+    id: base
+
+    implicitWidth: 200
+    height: header.contentShown ? childrenRect.height : header.height
+
+    property var contentComponent: null
+
+    property alias title: header.title
+    property alias contentShown: header.contentShown
+
+    DropDownHeader
+    {
+        id: header
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: UM.Theme.getSize("expandable_component_content_header").height
+        rightIconSource: contentShown ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_right")
+    }
+
+    Cura.RoundedRectangle
+    {
+        id: contentRectangle
+        anchors.top: header.bottom
+        anchors.horizontalCenter: header.horizontalCenter
+        width: header.width
+        height: childrenRect.height
+
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("lining")
+        color: "white"
+        radius: UM.Theme.getSize("default_radius").width
+        visible: base.contentShown
+        cornerSide: Cura.RoundedRectangle.Direction.Down
+
+        Loader
+        {
+            id: contentLoader
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: childrenRect.height
+            anchors.margins: 1
+            sourceComponent: base.contentComponent != null ? base.contentComponent : emptyComponent
+        }
+
+        // This is the empty component/placeholder that will be shown when the widget gets expanded.
+        // It contains a text line "Empty"
+        Component
+        {
+            id: emptyComponent
+
+            Label
+            {
+                text: catalog.i18nc("@label", "Empty")
+                height: UM.Theme.getSize("action_button").height
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                font: UM.Theme.getFont("medium")
+                renderType: Text.NativeRendering
+            }
+        }
+    }
+}
diff --git a/resources/qml/WelcomePages/StepPanel.qml b/resources/qml/WelcomePages/StepPanel.qml
index 78ce53dbd3..40569fe39b 100644
--- a/resources/qml/WelcomePages/StepPanel.qml
+++ b/resources/qml/WelcomePages/StepPanel.qml
@@ -5,6 +5,7 @@ import QtQuick 2.10
 import QtQuick.Controls 2.3
 import QtGraphicalEffects 1.0 // For the dropshadow
 
+import UM 1.3 as UM
 import Cura 1.1 as Cura
 
 import "../Widgets"