diff --git a/content/en/docs/quickstarts/native-mobile-app.md b/content/en/docs/quickstarts/native-mobile-app.md
index a34e18c0ecf..9603a1ea554 100644
--- a/content/en/docs/quickstarts/native-mobile-app.md
+++ b/content/en/docs/quickstarts/native-mobile-app.md
@@ -1,205 +1,176 @@
 ---
-title: "Adding a Native Mobile App"
-url: /quickstarts/native-mobile-app/
+title: "Add a Native Mobile App"
+url: /quickstarts/part2/
 weight: 20
 description: "Learn the basics of making a native mobile app."
+tags: ["hello world", "microflows", "widgets", "app", "nanoflow", "app development"]
 aliases:
-    - /quickstarts/part2/
     - /refguide/quickstart-part2/
     - /refguide9/quickstart-part2/
 ---
 
-## Introduction 
+## 1. Introduction 
 
-In this quick start tutorial, you will add on to the app you created in [Building a Responsive Web App](/quickstarts/responsive-web-app/). If you decided to skip that tutorial, you can [download](https://quickstartguidev1.s3.eu-west-2.amazonaws.com/Quickstart_App.mpk) a copy of its completed app package so that you can start this tutorial right away.
+This guide is a continuation of part one, and in it, you will recreate the web application you created in part one as a native mobile application.  The guide aims to get you started with Mendix Native Mobile and walks you through the steps on how to develop your first native app using the Studio Pro IDE.
 
-In this tutorial, you will learn to use a native mobile navigation profile. Apps built in the native mobile profile are typically installed natively on your iOS or Android device (usually via an app store). The native app you create will take pictures and upload them to the same database as configured in the [Creating Your App’s Domain Model](/quickstarts/responsive-web-app/#domain-model) section of *Building a Responsive Web App*. This will enable viewing the pictures in a browser or native app on a mobile device. You will also use the [Make it Native](/releasenotes/mobile/make-it-native/) app to test your app on a mobile device.
+By following this guide, you will:
 
-### Getting to Know Mendix Native Mobile
+* Learn how to **create, run, and deploy** a native mobile application.
 
-Mendix native mobile apps are based on React Native. These apps use native UI elements, which means faster performance, advanced features like gesture functionality (swiping, multi-tap, and more), and improved access to device functionalities like geolocation and the camera. 
+* Use **nanoflows** to build logic.
 
-Native mobile apps are offline first and only fetch data from the server when programmed to do so. This tutorial will familiarize you with the following Mendix native mobile concepts:
+* Learn about **offline-first** development and **data synchronization**.
 
-* [Offline-first design](/refguide/mobile/building-efficient-mobile-apps/offlinefirst-data/)
-* [Data synchronization](/refguide/mobile/building-efficient-mobile-apps/offlinefirst-data/synchronization/) between mobile devices and web apps
-* [Nanoflows](/refguide/nanoflows/), which are the native mobile JavaScript equivalent to microflows
-* Using custom [JavaScript actions](/refguide/javascript-actions/) in your nanoflows
+* Test your native app using the **Make it Native app**
 
-For more information, see [Building Native Apps](/refguide/mobile/distributing-mobile-apps/building-native-apps/). 
+## 2. Mobile development essentials
 
-In summary, Mendix lets you [build an app for distribution](/refguide/mobile/distributing-mobile-apps/building-native-apps/native-build-locally/) and get it running on a native device. As you develop the app further, you can [debug native app issues](/refguide/mobile/distributing-mobile-apps/native-debug/) to improve the user experience. You can also add [custom fonts](/refguide/mobile/designing-mobile-user-interfaces/images-icons-and-fonts/) to make your app feel more like your brand. And if you need help, Mendix provides [troubleshooting help](/refguide/mobile/getting-started-with-mobile/prerequisites/) for you just in case..
+The Mendix Platform enables you to build apps of many different kinds, including web, native mobile, and PWA. When choosing to build native mobile applications, there are some special requirements to keep in mind:
 
-## Prerequisites
+* [Offline-first development](https://docs.mendix.com/refguide/mobile/building-efficient-mobile-apps/offlinefirst-data/): Native mobile apps run on devices that cannot guarantee a stable connection to the internet all the time. When developing these types of apps, it's important to design your app with this in mind. Data is stored in a local database on the mobile device and is periodically synchronized with the server.
 
-Before starting this tutorial, make sure you have completed the following prerequisites:
+* [Data synchronization](https://docs.mendix.com/refguide/mobile/building-efficient-mobile-apps/offlinefirst-data/synchronization/): In order to send and receive updates to the server, the native mobile application will need to synchronize its local database with the cloud environment’s server. This is triggered using the synchronize action in nanoflows and the synchronize to device action in microflows. You can configure your sync behavior to only update what is needed for each specific user to minimize data use and load times.
+
+## 3. Prerequisites
 
-* Read through [Building a Responsive Web App](/quickstarts/responsive-web-app/)
-* Download the [Make It Native](/refguide/getting-the-make-it-native-app/) app on your mobile device
-    * The [Make it Native](/refguide/getting-the-make-it-native-app/) mobile app is available for Android and iOS devices
-    * Once installed, the app lets you quickly test your native mobile app as you develop it by connecting to your local development machine’s running copy of your app and displaying the app inside its mobile testing environment
-    * This lets you make changes to your app on your development machine, then instantly see those changes in the mobile app
+Before starting this tutorial, make sure you have completed the following prerequisites:
+* Download and install the [Make It Native](/refguide/getting-the-make-it-native-app/) app on your mobile device
+* Complete part one of this guide series, [Building a Responsive Web App](/quickstarts/responsive-web-app/)
 * If you are working on a Mac, complete [Configuring Parallels](/refguide/using-mendix-studio-pro-on-a-mac/) to install Studio Pro on your Mac
 
-## Building the Native Mobile Picture App
 
-Starting in Studio Pro, open the **Home_Native** page by double-clicking it in the **App Explorer**. You can also press <kbd>Ctrl</kbd> + <kbd>G</kbd> to open the **Go to** menu and search for the page (the **Go to** menu is used for quick navigation in the app; for more Mendix shortcuts, see [Edit Menu](/refguide/edit-menu/#overview)).
+## 4. Creating the App
 
-{{% alert type="info" %}}
-The **Home_Native** page has a different icon than the **Home_Web** page. Mendix uses these icons to help you develop the right aspect of your app.
-{{% /alert %}}
+To get started building your first native mobile app, click **Create New App** in the Studio Pro **Select App screen**. Then select the **Blank Native Mobile App** template as the starting point for your app.
+
+{{< figure src="/attachments/quickstarts/part2/4.a Create New App.png" width="450px" alt="Create Blank Native Mobile App">}}
+
+Next, click **Use This Starting Point**.
 
-You should see this in Studio Pro:
+{{< figure src="/attachments/quickstarts/part2/4.b Blank Native Mobile Template.png" width="450px" alt="Use this starting point">}}
 
-{{< figure src="/attachments/quickstarts/native-mobile-app/studio-pro-check.png" width="400px" alt="What you should see" class="no-border" >}}
+In the pop-up window that appears, enter a **name** for your app. Leave all other options as default and click **Create app**.
 
-The content on this page comes pre-made as a part of the template. To get started, do the following:
+{{< figure src="/attachments/quickstarts/part2/4.c Confirm Create App.png" width="450px" alt="Confirm your choices and create app">}}
 
-1. Delete everything from the page.
-2. Add a **List view** to the page via the **Toolbox**. A list view works like the template grid used in [Building a Responsive Web App](/quickstarts/responsive-web-app/#template-grid), except that it can scroll, which is better for mobile users.
-3. Right-click the list view, then click **Select data source**.
-4. Click **Select** next to **Entity**, then search for and select the **Picture** entity: 
+## 5. Creating the Domain Model
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/list-view-fill.png" width="400px" alt="List view" class="no-border" >}}
-    
-5. When prompted to automatically fill the contents of the list view, click **No**.
+Just as in part one, we will need to create the entity to store employee data. In the **domain model** for the Native Mobile Module, add a **new entity**.
 
-### Creating the UI
+1. Name the entity Employee.
 
-Next, you are going to create the UI for your native app:
+2. The entity should be a generalization of the Account entity.
 
-1. Right-click the empty space inside the list view and select **Add building block**.
-2. Search for and select the **Image** building block under **Cards**.
-3. Replace the static image with the image the end-user uploads to the database by right-clicking the **Static Image** viewer and selecting **Convert to dynamic image**. 
-4. Right-click the image viewer and select  **Select data source**.
-5. Search for and select your **Picture** entity, and when prompted to automatically fill the contents of the widget, click **Yes**.
-6. The **Images** will now be displayed from the database, but the **Labels** on the page will still display their default text. To fix this, double-click the label captioned **Card title** to open its properties.
-7. Click the **Edit** button next to **Caption**.
-8. In the new dialog box, replace the caption with the placeholder *{1}*. 
-9. Click to add a new **Parameter** and select the **Title** attribute:
+3. Add three attributes to the entity:
+    * FirstName as String
+    * LastName as String
+    * JobRole as String
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/add-title-param.png" width="400px" alt="Configure edit button" class="no-border" >}}
+4. Click **OK** to confirm your changes.
 
-10. Repeat this process for the other label, making sure to select the **Description** attribute this time.
+{{< figure src="/attachments/quickstarts/part2/5. Creating The Domain Model.png" width="450px" alt="Create the Domain Model">}}
 
-Now, the existing images are displayed from the database. 
+## 6. Creating the User Interface
 
-Next, you will develop functionality that allows the end-user to take new pictures with the app and then upload them to the server.
+With the domain model finished, it’s time to start creating a user interface for your app. To get started, open the page **Home_Native** in the app explorer.
 
-## Using a Nanoflow to Call a JavaScript Action {#nanoflow-use-case}
+1. **Delete** all prefilled “Welcome” text and containers from the page.
 
-Your app needs a button that allows the end-user to take a picture. Instead of a regular button, you can use a floating action button optimized for mobile users that calls a nanoflow: 
+2. From the **Toolbox**, drag a **List View** onto your page.
 
-1. Drag the **Floating action button** from the **Toolbox** onto the page:
+3. Double-click on the **List view** to open its **properties**.
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/floating-action-button.png" width="500px" alt="Floating action button" class="no-border" >}}
+4. In the **properties window**, go to the **Data source tab**, ensure **Database** is selected next to **Type**.
 
-    The location is managed in the widget's properties, so it does not matter where the widget is placed on the page. You can place it above the list view and still have it display in the bottom-right corner by configuring the widget correctly.
+5. Under entity, click the **Select** button.
 
-2. Double-click the button to open its properties. 
-3. Select an **Icon** for the button, then search for the **Camera** icon. 
-4. Set the position to the **Right** and **Bottom** side of the page. 
-5. Set the **On click action** to **Call a nanoflow**.
-6. Click **Nanoflow** > **Select**, then create a new nanoflow called *ACT_TakeNewPicture*:
+6. Choose the **Employee** entity we created earlier and click **Select**.
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/make-pic-nano.png" width="300px" alt="New nanoflow" class="no-border" >}}
+7. Click **OK** to confirm your choices.
 
-### Configuring the Nanoflow
+{{< figure src="/attachments/quickstarts/part2/6.a Creating the UI.png" width="450px" alt="The User Interface">}}
 
-[Nanoflows](/refguide/nanoflows/) are the native mobile equivalent of microflows, but with several key differences. Nanoflows are based on JavaScript, and they are offline-first. This means they can execute without an online data connection, and they execute on mobile devices instead of the server. Therefore, certain functionality—like calling a REST API, which is available in microflows—is not available in nanoflows.
+8. When asked if you would like to automatically fill in the content, select **Yes**.
 
-Nanoflows also interact with the database on the user's mobile device, which is a copy of the server's database. All database transactions need to be synchronized from the device to the server in order for the data to reflect online.
+9. Delete all the content except for the attributes we created (**FirstName, LastName, JobRole**).
 
-Do the following for your new **ACT_TakeNewPicture** nanoflow:
+10. Add a **Layout Grid** to the page (4x4x4), then move each of the remaining labels into their **own cells** in the layout grid.
 
-1. Drag a **Create object** action from the **Toolbox** into the nanoflow. 
-2. Double-click the action and set the entity type as **Picture**, then click **OK**. 
-3. Drag a **Take Picture** action and position it after the Create object activity:
+{{< figure src="/attachments/quickstarts/part2/6.b Layout Grid.png" width="450px" alt="add the layout grid">}}
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/add-activities.png" width="450px" alt="Take picture action" class="no-border" >}}
+11. Add a **Create** button from the toolbox in the empty header section of the page.
 
-4. Double-click the **Take Picture** action configure the properties like this:
-    * **Picture** – **$NewPicture**
-    * **Picture source** – **camera**
-    * **Picture quality** – **original**
-    * **Maximum width** – **empty**
-    * **Maximum height** – **empty**
-    * **Use return value** – **Yes**
-    * **Variable name** – **PictureTaken**
+12. After adding the button to the page, a window will appear for you to select the entity that will be created when the button is clicked. Select the **Employee** entity and click **Select**.
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/config-take-pic.png" width="350px" alt="Configure take picture" class="no-border" >}}
-    
-5. Finally you need to create a page where the end-user can view and edit their new picture. Add a **Show page** action to the nanoflow. 
-6. Open the action's properties:
-    1. Set the **Object to pass** to be **$NewPicture entity**. 
-    1. Click **Page** > **Select** and create a new page. 
-    1. Set the **Page name** to be *Picture_NewEdit_Native* at the top of the screen.
-    1. Change the profile type to **Native mobile**.
-    1. Select the **Edit with Data View** template.
+{{< figure src="/attachments/quickstarts/part2/6.c Select Entity.png" width="450px" alt="Select entity to display">}}
 
-You should now see the new page:
+13. Next we must select the on-click page that will be displayed when the button is clicked. In the properties for the button, in the events section, next to **on-click** page, click **Select**.
 
-{{< figure src="/attachments/quickstarts/native-mobile-app/native-pic-page.png" width="450px" alt="New page" class="no-border" >}}
+14. In the pop-up window that appears, click to create a **New page**.
 
-### Adding Validation
+15. In the next window, enter the name for the new page as Employee_NewEdit. Leave the layout as is and select the **Edit With Dataview template** before clicking **OK** to confirm your choices.
+
+## 7. Application Logic
+
+Now that we have finished with the domain model and user interface, we can continue to create logic using nanoflows. Let’s create a nanoflow to replace the default save button for the Employee_NewEdit page. This nanoflow will validate that the details have been entered correctly, and then commit the changes and synchronize with the server.
+
+{{% alert type="info" %}}
+**What is a nanoflow?**
+
+Nanoflows are similar to microflows, as they allow you to build complex logic for your application. Visually, they appear similar, and some actions can be used in both microflows and nanoflows (You can also convert microflows to nanoflows automatically!). Nanoflows run on the client and are based on JavaScript. Microflows run on the server and are based on Java
+{{% /alert %}}
 
-Your app needs to validate that the end-user enters the title and description. Instead of validating that data in a nanoflow, you can configure validation on the text boxes:
+1. Open the **properties** of the **save button**.
 
-1. Double-click the **Title** field to open its properties. 
-2. Set **Validation Type** to **Required** and set the message as, *Please provide a title for this picture*.
-3. Repeat the step above for the **Description** field, and set the message as, *Please provide a description for this picture*.
+2. Under **on-click** action, select **Call a Nanoflow**.
 
-### Enabling Auto-Synchronization
+3. In the window that appears, click New to create a new nanoflow.
 
-Finally, you need to ensure all the data captured by the end-user is synchronized from the device to the server. You can do this quickly by editing the properties of this page's Save button: 
+4. **Name** the new nanoflow ACT_Employe_NewEdit
 
-1. Double-click the **Save** button to open its properties.
-2. Set **Auto-synchronize** to **Yes**:
+5. In the newly created nanoflow, look for an **orange Decision** in the toolbox and drag it onto the flow.
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/edit-button-props.png" width="300px" alt="Auto sync set to yes" class="no-border" >}}
-    
-## Testing
+6. **Double-click** the decision to open its **properties**.
 
-All done! You can now run your app and test all the features you have built. To test your native mobile app without creating a deployable package, do the following:
+7.Enter the caption Has Firstname?
 
-1. Open the Make it Native app on your mobile device:
+8. Under **Expression**, add 'trim($Employee/FirstName)!= empty'. This will remove any whitespace from the string and then check to ensure there are characters in the string attribute.
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/min-start-screen.png" width="350px" alt="MIN start screen" class="no-border" >}}
+9. As the expression above results in a true and false result, we need to **create a branching path** from the decision - a path for each possible result. Select the **decision**, then from a corner **click and drag away** to create the new alternative path. Ensure to define which path is for the true result and the false result by **right-clicking** them both and under condition value choosing **true** and **false**.
 
-2. Click the drop-down menu in Studio Pro and select **View app on your device**.
-3. Click the **View Native Mobile App** tab.
-4. Scan the QR code with the Make it Native app on your mobile device to begin testing (Mac users: be sure to use forward ports 8080/8083 as [explained here](/refguide/using-mendix-studio-pro-on-a-mac/)):
+10. On the **false** path, add a **validation feedback action**. Double click to open its **properties**, enter the following details, and click **OK**:
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/min-qr.png" width="400px" alt="Scan QR code" class="no-border" >}}
-    
-    {{% alert color="info" %}}If you are using a Mac, be sure to use forward ports 8080/8083, as explained in [Configuring Your Windows Virtual Machine for Mendix Studio Pro](/refguide/using-mendix-studio-pro-on-a-mac/#configuring).{{% /alert %}}
+    * Variable ->Employee
+    * Member → FirstName
+    * Template → Please enter a Firstname for the employee
 
-If you need more information, see [Native App Prerequisites and Troubleshooting](/refguide/mobile/getting-started-with-mobile/prerequisites/).
+11. Now on the **true path**, repeat this step for the **LastName** and **JobRole** attributes as well.
+    * You can copy and paste the decision and validation feedback action to save time (But don’t forget to update the actions for each attribute)
 
-## Finishing Up
+12. At the end of the flow on the true path, add a **commit action**. Open its **properties** by double-clicking the action and ensure **Employee** is selected for **Object or List**, and change **refresh in client** to **Yes**. Click **OK** to close to window.
 
-This is what we saw when we started testing our native mobile photo app:
+13. Add a **synchronize action** after the commit action and choose to synchronize only unsynchronized objects.
 
-{{< figure src="/attachments/quickstarts/native-mobile-app/mobile-pic-1.png" width="200px" class="no-border" >}}
+14. Add a **close page action** after the synchronize action.
 
-While we were testing, we were lucky to see a dinosaur nearby:
+{{< figure src="/attachments/quickstarts/part2/7. Completed Nanoflow.png" width="450px" alt="Completed nanoflow">}}
 
-{{< figure src="/attachments/quickstarts/native-mobile-app/mobile-pic-2.png" width="150px" alt="Stegosaurus plant holder in a mobile device camera" class="no-border" >}}
+## 8. Deploying Your App
 
-After taking a photo with the native mobile app and tapping the **Save** button, we saw the new picture automatically appear in the responsive profile:
+In order to easily test your application on a device, run your application in Studio Pro and then open the **Make it Native app** on your mobile device. Once your app is running, click the **dropdown arrow** next to **View App** and choose **View on a Device**. Locate the **QR code** used to view your native mobile app, and then scan it using the Make it Native app (If you are using [Parallels](https://docs.mendix.com/refguide/using-mendix-studio-pro-on-a-mac/), you may need some special configurations).
 
-{{< figure src="/attachments/quickstarts/native-mobile-app/mobile-pic-3.png" width="200px" alt="Updated app with new photo" class="no-border" >}}
+Once you scan the **QR code** using **Make it Native**, the app should load, and you will be able to test your application. In order to deploy your application to the app stores (Apple and Android), you will need to create a signed build of your application. Mendix recommends using [Bitrise](https://docs.mendix.com/refguide/mobile/distributing-mobile-apps/building-native-apps/bitrise/) to package your app for distribution.
 
-After reloading the page in our browser, we could also see the new picture there:
+## 9. Finished
 
-{{< figure src="/attachments/quickstarts/native-mobile-app/responsive-app.png" width="550px" alt="Browser view" class="no-border" >}}
+Congratulations on completing and deploying your very first Native Mobile App! Next, head over to the [Academy](https://academy.mendix.com/link/home) and get started with our **Crash Course** learning plan, or continue learning here in our docs pages by searching for topics you are interested in. For videos on the latest news and updates, head to our [YouTube page](https://www.youtube.com/c/MendixCommunity). Or see what our awesome community is up to on our [Medium publication](https://medium.com/mendix). 
 
-Congratulations on completing this quick start tutorial! You are on your way to successful app development with the Mendix Platform.
+Looking to get in touch with us or the community? Join our [Slack community workspace](https://join.slack.com/t/mendixcommunity/shared_invite/zt-39m9sfzsl-so7j70WRyj_4gJ33gaVXOw) and get involved.
 
-## Read More
+## 10 Read More
 
 * [Studio Pro Overview](/refguide/studio-pro-overview/) – describes Studio Pro tabs, menus, and shortcut keys
 * [Mendix Best Practices for Development](/refguide/dev-best-practices/) – a reference for adopting consistent naming and modeling conventions while developing your Mendix apps
 * [Starting with App from a Spreadsheet](/refguide/app-from-spreadsheet/) – describes importing a Microsoft Excel spreadsheet and building an app using your data
-* [Become a Rapid Developer (Mendix Academy)](https://academy.mendix.com/link/paths/31/Become-a-Rapid-Developer) – the learning path recommended for new Mendix users who want to create their first app using low-code
-* [Crash Course (Mendix Academy)](https://academy.mendix.com/link/paths/82/Crash-Course) – the learning path recommended for new Mendix users who are also experienced developers
+* [Mendix Academy Become a Rapid Developer](https://academy.mendix.com/link/paths/31/Become-a-Rapid-Developer) – the learning path recommended for new Mendix users who want to create their first app using low-code
+* [Mendix Academy Crash Course](https://academy.mendix.com/link/paths/82/Crash-Course) – the learning path recommended for new Mendix users who are also experienced developers
diff --git a/content/en/docs/quickstarts/responsive-web-app.md b/content/en/docs/quickstarts/responsive-web-app.md
index a712676927d..debf03a51cb 100644
--- a/content/en/docs/quickstarts/responsive-web-app.md
+++ b/content/en/docs/quickstarts/responsive-web-app.md
@@ -1,312 +1,322 @@
 ---
-title: "Building a Responsive Web App"
-url: /quickstarts/responsive-web-app/
+title: "Build a Responsive Web App"
+url: /quickstarts/part1/
 weight: 10
-description: "Learn the basics of making an app in a responsive web profile."
+description: "Learn the basics of making an app in a Responsive Web profile."
+tags: ["hello world", "microflows", "widgets", "app", "nanoflow", "app development"]
 aliases:
-    - /quickstarts/part1/
     - /refguide/quickstart-part1/
     - /refguide9/quickstart-part1/
 ---
+## 1. Introduction 
 
-## Introduction
+This guide aims to get you started with the Mendix Platform and walks you through the steps on how to develop your first app using the **Studio Pro IDE** (integrated development environment). You will build a web app to store employee data. While Mendix can be used to create much more complex applications, we're starting with a simple use case to help you get comfortable with Studio Pro.
 
-This quick start tutorial teaches you how to get up and running with the Mendix Platform and start developing your first app in Mendix Studio Pro. You will learn the basics of Studio Pro, handle data using the domain model, populate your app's pages with dynamic data, and create custom app logic using a microflow. You will be building a responsive web app that is compatible with all desktop, tablet, and mobile browsers.
+By following this guide, you will:
 
-After completing this tutorial, you will have a photo album app that allows app end-users to upload, edit, and display pictures for their cherished memories to be preserved. 
+* Learn how to install and navigate Studio Pro
 
-### Getting to Know Mendix
+* Explore the platform's key features
 
-This tutorial teaches you several key Mendix concepts, such as adding an entity to the [domain model](/refguide/domain-model/) (a visual model that describes your app's information or data in an abstract way), creating basic pages that use building blocks and design properties, and modeling your first microflow. 
+* Find resources and learning materials to deepen your knowledge
 
-A [microflow](/refguide/microflows/) is a visual way of expressing logic or code that is compiled into executable code at runtime. Microflows are commonly used to perform actions such as creating and changing objects, showing pages, and making choices.
+## 2. Getting to know Mendix
 
-[Mendix Studio Pro](/refguide/) is the Mendix integrated development environment (IDE) for professional developers. Use the [latest version of Studio Pro](https://marketplace.mendix.com/link/studiopro/) when completing the tutorial for ease of use and security. Please note some of the screenshots in this tutorial might look a little different than your your version
+The Mendix Platform consists of:
 
-Every app created with Studio Pro automatically provisions a [Free App environment](/developerportal/deploy/mendix-cloud-deploy/#free-app) the first time it is deployed to Mendix Cloud, so you do not have to waste time provisioning a testing environment.
+* **Mendix Portal** - a web-based interface for developers, administrators, and other stakeholders to manage the entire application lifecycle and collaborate through.
 
-You do not need any additional software configured on your machine in order to start.
+* **Studio Pro** - a desktop IDE for developers to create, view, and edit Mendix applications.
 
-To learn more about Mendix concepts, check out the various sections of the [Platform Evaluation Guide](https://www.mendix.com/evaluation-guide/).
+Make sure you're using the [latest version of Studio Pro](https://marketplace.mendix.com/link/studiopro/) when following this guide.
+
+{{% alert type="info" %}}
+When you create an app in Mendix, a [free app environment](https://docs.mendix.com/developerportal/deploy/mendix-cloud-deploy/#free-app) is automatically set up for you in the Mendix Cloud (public cloud service). You can run and test your app right away - no additional configuration or infrastructure setup is required to get started.
+{{% /alert %}}
+
+## 3. Prerequisites
+
+Before you begin, complete the following steps:
+
+* Create your free [Mendix Account](https://signup.mendix.com/link/signup).
+
+* [Download](https://marketplace.mendix.com/link/studiopro) and [install](https://docs.mendix.com/refguide/install/) Studio Pro .
+
+* Open Studio Pro and sign in with your Mendix Account details (click **Go to Web Sign In**).
+
+ {{< figure src="/attachments/quickstarts/part1/3. login.png" width="450px" alt="Sign in to Studio Pro">}}
+
+## 4. Create the App
+
+You can start building your first app directly in Studio Pro by clicking **Create New App**. Next, select **Create a new app in the Mendix Portal** (unless you're working offline, in which case you can only create a blank template locally). 
+{{< figure src="/attachments/quickstarts/part1/4.1 CreateNewApp.png" width="450px" alt="Sign in to Studio Pro">}}
+
+Open a page to **choose your starting point**.
+
+You’ll find a wide variety of Starter Apps to choose from in the [Mendix Marketplace](https://marketplace.mendix.com/link/contenttype/102). From web and native mobile, to GenAI and augmented reality, there are dozens of platform-supported templates to start from and many more templates created by our amazing community.
+
+Select the **blank web app template**, and on the next screen, click **Use This Starting Point.**
+
+{{< figure src="/attachments/quickstarts/part1/4.2 UseThisStartingPoint" width="450px" alt="se the Blank web app template as a starting point">}}
+
+Next, a window will appear to enter a name for your app, whether or not to enable online services, as well as choose the file path for the project, and the default language for the app. **Enter a name for the app** and leave everything else as **default**.
+
+{{< figure src="/attachments/quickstarts/part1/4.3 ConfirmCreateApp.png" width="450px" alt="Confirm your choice by clicking create app.">}}
+
+ Confirm by clicking **Create App**. 
+
+{{% alert type="info" %}}
+A starter app is a ready-to-use app template that gives you a basic structure, like navigation, layout, and common components, so you don’t have to start from scratch. It helps you get up and running faster while still giving you full control to customize your app as needed.
+{{% /alert %}}
 
-## Prerequisites 
 
-Before starting this tutorial, make sure you have completed the following prerequisites:
+## 5. Explore Studio Pro Interface
 
-* Create your [free Mendix account](https://signup.mendix.com/link/signup/?source=quickstart-part1&medium=mxdocs), which takes only two minutes to complete
-* [Download](https://marketplace.mendix.com/link/studiopro/) and [install](/refguide/install/) Mendix Studio Pro
-* If you are working on a Mac, complete [Configuring Parallels](/refguide/using-mendix-studio-pro-on-a-mac/) to install Studio Pro on your Mac
+You should see the app open in **Studio Pro**, with the **welcome page** open. Before we continue, let's take a quick tour of the main interface.
 
-## Starting Your App
+{{< figure src="/attachments/quickstarts/part1/5. StudioProInterface.png" width="450px" alt="Have a look around the Studio Pro Interface">}}
 
-You can select one from many starting points for your Mendix app. It is key that you select a starting point with a configured responsive web navigation profile for this quick start tutorial, as the app you will develop needs to work for web browsers.
+## 5.1. Top Bar
 
-A page defines the end-user interface in a Mendix app. You can create and edit pages using the page editor. All the pages are based on layouts and templates. A page [layout](/refguide/layout/) defines a page's structure (such as, navigation element location and areas for content), and a page [template](/refguide/page-templates/) is a completely editable starting point for a new page (you can also start with a blank template to build from scratch).
+The top bar includes several key elements:
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/3-startingtemplate.png" width="450px" alt="Blank template" class="no-border" >}}
+* The Global Navigation Menu (Bento menu), with links to the Mendix Portal
 
-### Selecting the App Template
+* Several dropdown menus with items for fundamental app development tasks such as creating a deployment package, uploading to a version control server, and more.
 
-To select the best app template, follow these steps:
+* Quick-access buttons to:
 
-1. Starting from Studio Pro, click **Create New App**:
+* * Publish, run locally, and view your app
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/starting-point.png" width="450px" alt="New app" class="no-border" >}}
+* * Access the [Community](https://community.mendix.com/index3.html), [Marketplace](https://marketplace.mendix.com/link/contenttype/102), and [Maia](https://docs.mendix.com/refguide/mendix-ai-assistance/#maia-capabilities-in-mendix-studio-pro)
 
-2. Search for the **Blank Native Mobile App** and click **Use this starting point**:
+## 5.2 Working Area 
 
-    {{% alert color="info" %}}**Why select this template?**</br>
-    Selecting the **Blank Native Mobile App** template lets you start with a native mobile navigation profile that is already configured and set up for your app. {{% /alert %}}
+**At the center of the screen** is the **working area**, where you'll see the currently open document tab. It's the main space within the IDE where you design, model, and configure application components visually. Think of it as the code editor in a text-based programming IDE.
+
+{{% alert type="info" %}}
+When you launch **Studio Pro** for the first time, you’ll see the **Welcom** tab. From here, you can access:
+
+* [Maia Learn](https://docs.mendix.com/refguide/maia-learn/) – learning materials to help you get started
+
+* [Maia Chat](https://docs.mendix.com/refguide/maia-chat/) – an AI-powered assistant for quick support and guidance
+
+We recommend watching the introduction videos to get familiar with the basic concepts of Mendix development before you start building your app.
+{{% /alert %}}
 
-    {{% alert color="info" %}}**Does that mean this app is native mobile only?**</br>
-    No. The blank native mobile app template also comes with a responsive web navigation profile configured. This means your app is accessible on both web browsers and natively on mobile devices.{{% /alert %}}
+## 5.3. App Explorer
 
-3. Name your app *Quickstart App* and click **Create app**:
+On the **left side** of the screen, you'll find the **App Explorer**, which shows the complete structure of your app that consists of individual files (documents) and settings that are grouped in folders and modules.
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/3-createnameapp3.png" width="400px" alt="Create app" class="no-border" >}}
+## 5.4. Dockable Panels
 
-4. Wait a few minutes for your app to be created, its [Team Server](/developerportal/general/team-server/) to be initialized, and a local copy of the app to be downloaded to your machine. After that, the app opens with your app’s home page called **Home_Web**.
+On the **right** and **bottom** of the screen are **dockable panes** that display context-specific information and tools. These include panes for managing data, seeing changes, and errors, accessing AI features, and more. You can customize your workspace by resizing, docking, or hiding these panes to suit your workflow. More options can be found under the **View** menu item.
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/home-web.png" width="400px" alt="Home Web page" class="no-border" >}}
-    
-## Exploring Studio Pro
+## 6. Modules
 
-Now that you have started your app in Studio Pro, you can take a quick (and optional) tour. If you know Studio Pro already, you can skip this section.
+Before you start building your app, it's essential to understand the concept of **modules**, which is a way to split the functionality of your Mendix application into separate parts. Learn more about modules and different module types [here](https://docs.mendix.com/refguide/modules/).
 
-Open up your version of Studio Pro and take a look at it all at once. There is a lot of power, but it can be confusing at first glance. Luckily it is easy to understand in sections. For even more detail, see the [Studio Pro Overview](/refguide/studio-pro-overview/).
+Each module has its own security and access settings, which you can configure to accommodate different users and use cases. Modules can access data, logic, and pages from other modules. 
 
-Simply put, the center of Studio Pro hosts a [working area](/refguide/studio-pro-overview/#working-area) where you can work on an open document. Surrounding this work area are various panes, which you will learn more about in the sections below. Finally, if you wish to change the language you work in (and that your end-user will use), see the [status bar](/refguide/studio-pro-overview/#status-bar) at the bottom.
+When your app is deployed locally or in a cloud environment, all modules are bundled together into a single package.
 
-The Studio Pro configuration you see is completely editable. You can add or hide panes as desired (you can find more panes under the [View](/refguide/view-menu/) menu as well as reset your view back to the default settings if you wish). You can also quickly hide all of Studio Pro's panes by enabling **Distraction Free Mode** with <kbd>Shift</kbd> + <kbd>F11</kbd>.
+## 7. Create a Domain Model
 
-### Top Bar
+After getting familiar with the Studio Pro interface, you can begin building your app, starting with the data model. In Mendix, the data structure of your app is defined using the [domain model](https://docs.mendix.com/refguide/domain-model/). Each module has a domain model that describes the data used within that [module](https://docs.mendix.com/refguide/modules/). 
 
-The top bar contains the menus, buttons, and other UI elements you need for fundamental app development tasks. For example, you can run your app by clicking **Run Locally** ({{% icon name="controls-play" %}}). 
+{{% alert type="info" %}}
+Domain models are comprised of [entities](https://docs.mendix.com/refguide/entities/) (similar to a table in traditional SQL). Entities have [attributes](https://docs.mendix.com/refguide/attributes/) (similar to fields). [Properties](https://docs.mendix.com/refguide10/entities/#properties) define the names of the entities. Entities can relate to each other as one-to-one, one-to-many, or many-to-many. The relations between entities are called [associations](https://docs.mendix.com/refguide/associations/). Entities can inherit their properties and attributes from other entities by creating a [Generalization](https://docs.mendix.com/refguide/generalization-and-association/#generalization-specialization-and-inheritance) of an entity.
+{{% /alert %}}
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/4.1-topbar1.png" width="450px" alt="Studio Pro" class="no-border" >}}
 
-For more information on menus and functions, see the [Top Bar](/refguide/studio-pro-overview/#top-bar) section of *Studio Pro Overview*.
+## 7.1 Create an Entity 
 
-### App Explorer
+To create an entity, follow these steps:
 
-You can navigate through your app using the [App Explorer](/refguide/app-explorer/), which is the pane on the left side of your screen. This is where you can create and explore new documents and [modules](/refguide/modules/) in your app:
+1. In the **App Explorer** (on the left), double-click **Domain Model** under **MyFirstModule**.
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/tour-left.png" width="300px" alt="App Explorer as left dockable pane" class="no-border" >}}
+2. From the **Toolbox** (on the right), drag and drop the entity (blue box) into the central **Working Area**.
 
-Any [Marketplace modules](/appstore/modules/) you download appear under **Marketplace Modules** > **App**.
+3. Double-click the newly added entity in the **Working Area** to open its **properties** dialog box.
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/4.2-styles.png" width="300px" alt="Modules" class="no-border" >}}
+4. Name the entity **Employee**
 
-### Bottom Dockable Panes
+{{< figure src="/attachments/quickstarts/part1/7.1 EntityPropertiesWindow.png" width="450px" alt="The properties window of the Employee Entity">}}
 
-Look at the bottom dockable pane of Studio Pro:
+## 7.2. Create Attributes
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/tour-bottom.png" width="400px" alt="Bottom Dockable Pane" class="no-border" >}}
+You have created a new persistable entity called **Employee**. This means the entity and its attributes will be stored in the Database when it is committed.  Next, you have to add attributes. You only have to add fields for the employee's name, job role, and employee ID.
 
-Here you will find some separate default dockable panes:
+1. In the properties dialog box, click **New** under **Attributes**.
 
-* [Stories](/refguide/stories-pane/) – displays the active user stories added in your [project management tool](/developerportal/project-management/)
-* [Changes](/refguide/changes-pane/) – displays a list of all changes in the app since the last commit to the Team Server
-* [Errors](/refguide/errors-pane/) – displays any errors found within your app 
+2. Name your attribute **FirstName**, leave all the other settings default, then click **OK**.
 
-For more information on available panes, see the [Best Practice Recommender](/refguide/view-menu/#best-practice-recommender) and [Console](/refguide/view-menu/#console) sections of *View Menu*.
+3. Repeat the steps above to create two additional **string** attributes, called **LastName** and **JobRole**.
 
-### Right Dockable Panes
+4. Add a final attribute called **EmployeeID**, as an **Autonumber** (an automatically generated number).
 
-Look at the right dockable pane of Studio Pro:
+5. Click OK to close the properties dialog box. 
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/tour-right.png" width="300px" alt="Right Dockable Pane" class="no-border" >}}
+{{< figure src="/attachments/quickstarts/part1/7.2 CreateAttributes.png" width="450px" alt="Create attributes on an entity">}}
 
-Here you will find some more separate default dockable panes:
+{{% alert type="info" %}}
+You can create a domain model by simply describing your application using [Maia for Domain Model](https://docs.mendix.com/refguide/maia-for-domain-model/) an AI-powered tool that generates domain models based on your input.
 
-* [Properties](/refguide/view-menu/#properties) – displays all the properties of the currently selected context element 
-* [Toolbox](/refguide/view-menu/#toolbox) – a list of things (which change depending on the context) you can add to the current document
+To use it, **click Maia for Domain Model** in the **Working Area**, then describe your application in the chat box on the right.
 
-For additional information on available panes, see the [Integration](/refguide/view-menu/#data-hub) and [Connector](/refguide/view-menu/#connector) sections of *View Menu*.
+In our case, you can ask Maia: “Create a domain model that stores employee information: first name, last name, job role, and employee ID.” 
+{{% /alert %}}
 
-## Creating Your App's Domain Model {#domain-model}
+7.3 Add an Association
 
-In Mendix, you define your app's data structure in the [domain model](/refguide/domain-model/).
+An employee will be required to complete and upload important documents and contracts connected to their role. We need to adapt our domain model to store these documents. To do this, we can create a new entity, called Document, and connect it to the Employee entity using an association. Associations define how entities relate to each other. Associations can either be one-to-many, one-to-one, or many-to-many.
 
-The domain model is a visual representation of your app’s database. Each module in your app (meaning, modules created by you or your app team, modules downloaded from the Marketplace, or system nodules) can have their own individual models, which are combined and translated into a database automatically at runtime. 
+1. Add a new entity and name it Document.
 
-Domain models are comprised of [entities](/refguide/entities/) similar to a table in traditional SQL. Entities have [attributes](/refguide/attributes/) (similar to fields), and they can relate to other entities (including ones in other modules or even other apps). They can relate to each other as one-to-one, one-to-many, or many-to-many associations.
+2. Next to Generalization, click **Select**.
 
-When you run your app locally or deploy it for the first time, the Mendix Runtime compiles your app’s domain models and creates the underlying database. Any subsequent changes will be seen as updates to the database.
+3. Search for **FileDocument**, and select it.
 
-Mendix by default uses its own built-in HSSQL database, but Mendix also supports several alternative database types, such as PostgreSQL and Microsoft SQL Server. 
+4. Click **OK** to confirm your choices.
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/5.1-log.png" width="400px" alt="Log" class="no-border" >}}
+5. Click the new Document entity to select it. Then, once it is selected, **click and drag** from its border towards the Employee entity. A line should appear and connect to the employee entity. This is the association, created as a one-to-many (1 employee can upload many documents)
 
-### Creating an Entity to Store the Images
+{{< figure src="/attachments/quickstarts/part1/7.3 CreateAssociation.png" width="450px" alt="Create an Association between the two entities">}}
 
-To create an entity to store the images used in your app, follow these steps:
+{{% alert type="info" %}}
+**Generalizations** allow an entity to inherit properties from another. When an entity is a generalization of another, it inherits all the attributes of the original. In this case, Document is a generalization of FileDocument, which will allow it to store anything you might consider a file (this includes images, PDFs, Microsoft Office documents, and more).
+{{% /alert %}}
 
-1. Open the domain model for the native mobile module by double-clicking it in the **App Explorer**:
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/5.2-loginentity.png" width="400px" alt="Login entity" class="no-border" >}}
-    
-    Notice there is already an entity here called **Login**, which is part of the template and is used only for native mobile authentication. You can ignore this for now.
+## 8. Create User Interface
 
-2. Drag a new **Entity** from the **Toolbox** into the domain model (or right-click in the domain model and select **Add entity**). This entity will store all your uploaded images in the database. 
+Now that you have created your domain model, you can develop the front-end of your application. Your page is pre-filled with some elements you can add to, edit, or delete. At the top of the page, the label **Home**, along with some welcome text below it, can be seen. 
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/5.2-newentity2.png" width="400px" alt="Open properties" class="no-border" >}}
-    
-3. Double-click the new entity to open its properties dialog box:
+## 8.1. Add Page Element
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/5.3-entityprops3.png" width="400px" alt="Edit configuration" class="no-border" >}}
+1. Double click on **Home_Web** under **MyFirstModule** in App Explorer
 
-4. Name the entity *Picture*, then click **Generalization** > **Select**. 
-5. Search for and select the **Image** entity (found in the **System** module).
+2. Select the **Home label** and start typing to update the caption to Employee Overview.
 
-    A generalization is a parent entity from which the child entity inherits properties. This is the Mendix equivalent of inheritance. You can have multiple levels of generalizations. 
-    
-### Creating Attributes
+3. Select the **Getting Started** label below, and delete it by either right-clicking it and choosing delete or by hitting the delete button on your keyboard.
 
-You have created a new entity called **Picture** that inherits from the **System** entity called **Image**. However, the **Image** entity also inherits some of its properties from another **System** entity called **FileDocument**. This means you must add some attributes. Remember, your entity now inherits many properties from its parent entity **Image**. Therefore, you only have to add fields for the image's **Title** and **Description** information.
+4. **Delete** all other pre-populated content on the screen (select the element and hit delete on your keyboard)
 
-1. Under the **Attributes** tab in the entity’s properties, click **New**, name your attribute *Title*, and click **OK**:
+5. Drag-and-drop a **Data Grid 2** from the **Toolbox (Widgets > Data containers)** onto your page in the **Working Area**. 
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/5.3-addattribute4.png" width="400px" alt="Name attribute" class="no-border" >}}
+6. **Double-click** the data grid element to open its properties. 
 
-2. Repeat the step above to add an attribute called *Description*, but select **Unlimited** for the string's **Length**:
+7. Under **Data source**, click **edit**, then ensure **Database** is selected for **Type**.
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/5.3-picentityprops5.png" width="400px" alt="Entity properties" class="no-border" >}}
-    
-3. Click **OK** to close the entity’s properties dialog box.
+8. On the **General tab**, next to **Entity**, select the **Employee entity** that you’ve created and Click **OK**.
 
-## Creating Your App's User Interface
+9. When Studio Pro prompts you to select the columns, leave everything selected and click **Generate**.
 
-Now that you have created your domain model, it is time to create your photo album app’s front end. To do so, you will employ regular widgets and context widgets:
+10. Click **OK** to close the properties Window.
 
-* [Widgets](/refguide/page-resources/) – Widgets are pre-made user interface components. Widget development in Mendix is based on React for both web and native mobile. A widget can either be a single visual component (like a button), or a collection of components grouped together for ease of use. There are also many [platform-supported widgets](/appstore/widgets/) available in the Mendix Marketplace.
-* Context widgets – A context widget displays data from the domain model. In Mendix, there are four main context widgets: 
-    * [Data view](/refguide/data-view/) – displays a single record
-    * [Data grid](/refguide/data-grid/) – displays many records in a table format
-    * [List view](/refguide/list-view/) – displays many records in a scrollable list
-    * [Template grid](/refguide/template-grid/) – displays many records in configurable columns and rows
+{{< figure src="/attachments/quickstarts/part1/8.1 DataGrid2.png" width="450px" alt="A data grid 2 connected to the Employee Entity">}}
 
-### Configuring a Template Grid {#template-grid}
+{{% alert type="info" %}}
+A Data Grid is a Context Widget. To display data from the domain model using a widget, the widget needs to be within the context widget (Data view, Data grid, Template grid, and List view are examples of context widgets)
+{{% /alert %}}
 
-Now it is time to build your photo album app:
 
-1. Open the **Home_Web** page from the **App Explorer**. 
-2. Drag a **Template Grid** from the **Toolbox** onto the page. You can find this by opening the **Data containers** section, or by searching for this container.
-3. In Mendix, in order to display data from the domain model on a page element, the element needs to be within a context. Double-click the template grid to open its properties:
+## 8.2. Edit Page Elements
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-database1.png" width="450px" alt="Open data properties" class="no-border" >}}
+Next, we need to modify some of the elements on the page.
 
-4. On the **Data source** tab, select the **Picture** entity you created earlier for the **Entity (path)**, then click **OK** to close the window:
+1. On the **Data Grid 2**, you should have a button captioned **New Employee**. It will have a red notification next to it indicating there is no page connected to the button. Right-click the button and choose **Generate on click page**.
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-database2.png" width="400px" alt="Configure data source" class="no-border" >}}
+2. In the dialog window, **enter a name** for the new page as Employee_NewEdit.
 
-5. When Studio Pro prompts you to automatically fill the contents of the template grid, click **Yes**.
-6. Note the red error pointers on the **New** and **Edit** buttons of the template grid. This is because there is no page connected to the buttons.
+3. Under Navigation layout, click the dropdown and select **PopupLayout(Atlas_Core)**.
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-newbuttons4.png" width="450px" alt="Connect page" class="no-border" >}}
+4. Select the **Form Vertical layout** for the page and click **OK**.
 
-7. To resolve this, right-click each button and select **Generate Page**.
-8. In the **Create Page** wizard that opens, leave the page name as is, and select the **Form Vertical** template for the page.
+{{< figure src="/attachments/quickstarts/part1/8.2a AddNewPage.png" width="450px" alt="Add a New Page called Employee_NewEdit">}}
 
-### Using Building Blocks
+5. In the **Data Grid 2**, there is another button with the image of a pencil. This button needs to be connected to the same page we just created as well, so that users may edit the details of the employees. **Right-click** the button, choose **Select on click page**, then select the **Employee_NewEdit** page we just created.
 
-Next, you need to replace some of the auto-generated content inside the template grid with some sleeker building blocks. A building block is a collection of pre-styled display widgets, and it is similar to a component in React.js. Building blocks are data agnostic, which means they are created without data and you need to link the relevant data sources for the building block’s components when including them in a page.
+6. Next, **open** the **Employee_NewEdit** page.
 
-To add a building block to your app's UI, follow these steps:
+7. **Add** a **Data grid 2** from the toolbox onto the page below the Employee ID field. **Double-click** it to open its properties.
 
-1. Delete all the display widgets inside the grid (ensure you have switched from **Design** mode to **Structure** mode so you can delete the widgets easily).
-2. Right-click in the empty space and select **Add building block**.
-3. Search for and select **Card action with image**:
+8. Next to **Data source**, click **Select**.
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-card5.png" width="400px" alt="Card action" class="no-border" >}}
+9. Search for the **Document entity** (But via the page parameter “Employee”), and click select.
 
-### Configuring the Display Widgets
+{{< figure src="/attachments/quickstarts/part1/8.2b DataOverAssociation.png" width="450px" alt="Display Data connected over association in the new datagrid 2">}}
 
-Next, you need to connect your data to the display widgets, because your page is currently displaying only static resources. 
+10. The new Data grid 2 will have new and edit buttons, which will expect a new page to be connected. Once again, **right-click** either button and choose to **generate page**.
 
-To start, replace the static image with the image the app end-user uploads to the database by following these steps:
+11. **Name** the page **Document_NewEdit**, select the **Pop-up layout** under Navigation Layout, and choose the **Form Vertical template**.
 
-1. Right-click the static image viewer and click **Convert to dynamic image**. 
-2. Right-click the image viewer again, click **Select data source**, and then search for and select your **Picture** entity. Click **Yes** when prompted to automatically fill the contents of the widget:
+12. Click **OK** to confirm your choices. (Don’t forget to connect the edit button inside the Data grid to the new page as well)
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-fillcontents6.png" width="400px" alt="Autofill" class="no-border" >}}
+## 9. Create Application Logic 
 
-3. The **Images** will now be displayed from the database, but the **Labels** on the page will still display their default text. To fix this, double-click the label captioned **Card title** to open its properties.
-4. Click the **Edit** button next to **Caption**.
-5. In the new dialog box, replace the caption with the placeholder *{1}*. 
-6. Click to add a new **Parameter** and select the **Title** attribute:
+Now that we have created a basic front end for your app, we can add some logic. Let's add a microflow that will validate the employee’s details when the user clicks on save.
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-addattributes7.png" width="400px" alt="Add attributes" class="no-border" >}}
+1. Starting on the **Employee_NewEdit** page in the **App Explorer**, **right-click** the save button at the bottom of the page and choose to **edit the on-click action**.
 
-7. Repeat this process for the other label with the caption **Supporting text**, making sure to select the **Description** attribute this time.
+2. In the on-click option dropdown, select **Call a Microflow**.
 
-## Defining Logic Using Microflows {#microflow-use-case}
+3. Next to Microflow, click **Select**.
 
-There is only one step left before you can run and test your photo album app. You have created a place for storing images and a page for displaying them. Most of the functionality for creating, editing, and deleting images has been handled automatically. 
+4. A window will appear, allowing you to select an existing microflow or **create a new one**.
 
-But what if you want your app to perform some custom [logic](/refguide/application-logic/)? For example, what if you wanted to validate that the end-user entered text for the **Title** and **Description** fields before they clicked **Save**? In Mendix, you can achieve this using a microflow.
+5. Click to create a **New Microflow**.
 
-A microflow is a piece of custom logic that is represented visually in [Business Process Model and Notation](https://en.wikipedia.org/wiki/Business_Process_Model_and_Notation) (BPMN). Think of a function in traditional code, except written visually. When your app compiles, it translates all your microflows into code executable by your browser. Microflows are based on Java and are executed on the server, which means an internet connection is required for it to execute. A microflow can only have one start point, but it can often have multiple end points.
+6. **Name** the microflow **Act_Employee_NewEdit** and click **OK**.
 
-### Implementing Custom Logic
+7. In the newly created microflow, look for an orange **Decision** and **drag it** onto the flow.
 
-To implement custom logic with a microflow, follow these steps:
+8. **Double-click** the decision to open its **properties**.
 
-1. Open the page **Picture_NewEdit** using the App Explorer.
-2. Scroll down to the **Save** button at the bottom of the page. 
-3. Right-click the button and select **Edit on click action**. 
-4. Set the **On click** action to **Call a microflow**.
-5. Click **New** in the **Select Microflow** dialog box in order to create a new microflow.
-6. Create a new microflow in the **Native Mobile** module called *ACT_ValidateAndSavePicture*:
+9. **Enter the caption** as "Has Firstname?"
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/7-editonclick1.png" width="450px" alt="Edit microflow" class="no-border" >}}
+10. **Under Expression**, add "trim($Employee/FirstName)!= empty". This will remove any whitespace from the string and then check to ensure there are characters in the string attribute.
 
-7. Click **Show** to quickly navigate to the new microflow and see it open in your editor:
+11. As the expression above results in a **true** and **false** result, we need to create a **branching path** from the decision - a path for each possible result. **Select** the decision, then from a corner **click and drag** away to create the new alternative path. Ensure to **define** which path is for the true result and the false result by **right-clicking** them both and under **condition value** choosing true and false.
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/7-microflow2.png" width="450px" alt="Microflow" class="no-border" >}}
+12. On the **false path**, add a **validation feedback action**. Double click to open its **properties**, enter the following details, and click **OK**:
 
-8. Add a **Decision** to the microflow (via the orange diamond icon in the editor's top bar).
-9. Give the decision the caption *Has title?* and input the following **Expression**:
+ a. Variable ->Employee
 
-    ```text
-    trim($Picture/Title) != ''
-    ```
-    
-    The [trim](/refguide/string-function-calls/#trim) function always returns a string:
+ b. Member → FirstName
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/decision.png" width="450px" alt="Decision expression" class="no-border" >}}
+ c. Template → Please enter a Firstname for the employee
 
-10. Click **OK** to close the dialog box and notice the microflow line has changed to red. This is because a decision creates multiple paths within the microflow. You need to add another path for when this expression evaluates as false.
-11. Add the additional path by clicking the activity's red dot and dragging a connection out of it, making sure to select the **False** path as the one that goes down. 
-12. Add the **Validation feedback** action to the false path (so that feedback is provided to the end-user).
-13. Double-click the validation feedback action, select **Variable** > **Picture (NativeMobile.Picture)**, then select **Member** > **Title**, and in **Template**, add some error text (for example, *Please provide a title for your picture.*).
-14. Repeat these steps for the **Description** attribute until your microflow looks like this:
+13. Now on the **true path**, repeat this step for the **LastName** and **JobRole** attributes as well.
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/7-reddots4.png" width="450px" alt="Your microflow" class="no-border" >}}
-    
-### Finishing Up
+ a. You can copy and paste the decision and validation feedback action to save time (But don’t forget to update the actions for each attribute)
 
-Finally, the image needs to be committed to the database and the paged closed:
+14. At the end of the flow on the true path, add a **commit action**. Open its properties by double-clicking the action and ensure **Employee** is selected for Object or List, and change **refresh in client** to **Yes**. Click **OK** to close to window.
 
-1. Add a **Commit object(s)** action from the **Toolbox** to the true path.
-2. Select the **Picture (NativeMobile.Picture)** entity to commit, and configure **Events** > **No** and **Refresh in Client** > **Yes**:
+15. Add a **close page action** after the commit action.
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/7-configurecommit5.png" width="450px" alt="Configure commit object" class="no-border" >}}
+{{< figure src="/attachments/quickstarts/part1/9. Microflow.png" width="450px" alt="The completed validation microflow">}}
 
-3. Add a **Close page** action to the end of the microflow to ensure the end-user is directed back to the home page after clicking **Save**. 
+## 10. Deploy App
 
-You have now finished developing your responsive app! You can run your photo album app and test it by pressing <kbd>F5</kbd> or by clicking **Run Locally** ({{% icon name="controls-play" %}}). Your app should look like this:
+Your app is ready to deploy! Click the **green run** button in the top bar menu to run your app locally (you can also hit **F5** on your keyboard). Once your app is running, clicking the red **Stop** button will shut down your local copy of the app. These options can also be found in the console, above the console log entries.
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/7-closepageaction6.png" width="450px" alt="Run your app" class="no-border" >}}
+To deploy your app to a cloud environment, you can hit **publish** to deploy your app to the Mendix Free cloud. The Mendix Free cloud is a free testing environment that every app has access to. The environment is automatically created the first time you publish your app, and there is no configuration required to set it up.
 
 {{% alert type="info" %}}
-Running your app compiles it locally on your development machine (your local host). Publishing your app pushes it to a cloud environment or web container connected to the app. If none exists, an environment is initialized for your app on Mendix Cloud Free Tier EU.
+To deploy your app to the Mendix Cloud (Paid), there are multiple options for hosting. Please refer to this guide on [our hosting options](https://docs.mendix.com/developerportal/deploy/mendix-cloud-deploy/) for more information on which plan is best for your project.
 {{% /alert %}}
 
-Congratulations! You successfully completed this quickstart tutorial. You have your first Mendix app to prove it, and it works on almost any device. Well done! 
+## 11. Finished!
+
+Congratulations on completing and deploying your very first Mendix App! Next, head over to the [Academy](https://academy.mendix.com/link/home) and get started with our **Crash Course** learning plan, or continue learning here in our docs pages by continuing onto part two. For videos on the latest news and updates, head to our [YouTube page](https://www.youtube.com/c/MendixCommunity). Or see what our awesome community is up to on our [Medium publication](https://medium.com/mendix). 
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/8-congrats1.png" width="550px" alt="Congratulations" class="no-border" >}}
+Looking to get in touch with us or the community? Join our [Slack community workspace](https://join.slack.com/t/mendixcommunity/shared_invite/zt-39m9sfzsl-so7j70WRyj_4gJ33gaVXOw) and get involved.
 
-## Continuing with the Next Tutorial
+## 12 Read More
 
-To continue learning, see [Add a Native Mobile App](/quickstarts/native-mobile-app/).
+* [Studio Pro Overview](/refguide/studio-pro-overview/) – describes Studio Pro tabs, menus, and shortcut keys
+* [Mendix Best Practices for Development](/refguide/dev-best-practices/) – a reference for adopting consistent naming and modeling conventions while developing your Mendix apps
+* [Starting with App from a Spreadsheet](/refguide/app-from-spreadsheet/) – describes importing a Microsoft Excel spreadsheet and building an app using your data
+* [Mendix Academy Become a Rapid Developer](https://academy.mendix.com/link/paths/31/Become-a-Rapid-Developer) – the learning path recommended for new Mendix users who want to create their first app using low-code
+* [Mendix Academy Crash Course](https://academy.mendix.com/link/paths/82/Crash-Course) – the learning path recommended for new Mendix users who are also experienced developers
diff --git a/static/attachments/quickstarts/part1/3. login.png b/static/attachments/quickstarts/part1/3. login.png
new file mode 100644
index 00000000000..d9e82ec3215
Binary files /dev/null and b/static/attachments/quickstarts/part1/3. login.png differ
diff --git a/static/attachments/quickstarts/part1/4.1 CreateNewApp.png b/static/attachments/quickstarts/part1/4.1 CreateNewApp.png
new file mode 100644
index 00000000000..008927f107c
Binary files /dev/null and b/static/attachments/quickstarts/part1/4.1 CreateNewApp.png differ
diff --git a/static/attachments/quickstarts/part1/4.2 UseThisStartingPoint.png b/static/attachments/quickstarts/part1/4.2 UseThisStartingPoint.png
new file mode 100644
index 00000000000..f3d84382a53
Binary files /dev/null and b/static/attachments/quickstarts/part1/4.2 UseThisStartingPoint.png differ
diff --git a/static/attachments/quickstarts/part1/4.3 ConfirmCreateApp.png b/static/attachments/quickstarts/part1/4.3 ConfirmCreateApp.png
new file mode 100644
index 00000000000..8610c42ea08
Binary files /dev/null and b/static/attachments/quickstarts/part1/4.3 ConfirmCreateApp.png differ
diff --git a/static/attachments/quickstarts/part1/5. StudioProInterface.png b/static/attachments/quickstarts/part1/5. StudioProInterface.png
new file mode 100644
index 00000000000..e57d29d25a4
Binary files /dev/null and b/static/attachments/quickstarts/part1/5. StudioProInterface.png differ
diff --git a/static/attachments/quickstarts/part1/7.1 EntityPropertiesWindow.png b/static/attachments/quickstarts/part1/7.1 EntityPropertiesWindow.png
new file mode 100644
index 00000000000..c013b192f35
Binary files /dev/null and b/static/attachments/quickstarts/part1/7.1 EntityPropertiesWindow.png differ
diff --git a/static/attachments/quickstarts/part1/7.2 CreateAttributes.png b/static/attachments/quickstarts/part1/7.2 CreateAttributes.png
new file mode 100644
index 00000000000..f2282291589
Binary files /dev/null and b/static/attachments/quickstarts/part1/7.2 CreateAttributes.png differ
diff --git a/static/attachments/quickstarts/part1/7.3 CreateAssociation.png b/static/attachments/quickstarts/part1/7.3 CreateAssociation.png
new file mode 100644
index 00000000000..a14a792afc9
Binary files /dev/null and b/static/attachments/quickstarts/part1/7.3 CreateAssociation.png differ
diff --git a/static/attachments/quickstarts/part1/8.1 DataGrid2.png b/static/attachments/quickstarts/part1/8.1 DataGrid2.png
new file mode 100644
index 00000000000..fd3e5db2c5f
Binary files /dev/null and b/static/attachments/quickstarts/part1/8.1 DataGrid2.png differ
diff --git a/static/attachments/quickstarts/part1/8.2a AddNewPage.png b/static/attachments/quickstarts/part1/8.2a AddNewPage.png
new file mode 100644
index 00000000000..4c96f39a148
Binary files /dev/null and b/static/attachments/quickstarts/part1/8.2a AddNewPage.png differ
diff --git a/static/attachments/quickstarts/part1/8.2b DataOverAssociation.png b/static/attachments/quickstarts/part1/8.2b DataOverAssociation.png
new file mode 100644
index 00000000000..88b82350b8c
Binary files /dev/null and b/static/attachments/quickstarts/part1/8.2b DataOverAssociation.png differ
diff --git a/static/attachments/quickstarts/part1/9. Microflow.png b/static/attachments/quickstarts/part1/9. Microflow.png
new file mode 100644
index 00000000000..875c2bb3bdd
Binary files /dev/null and b/static/attachments/quickstarts/part1/9. Microflow.png differ
diff --git a/static/attachments/quickstarts/part2/4.a Create New App.png b/static/attachments/quickstarts/part2/4.a Create New App.png
new file mode 100644
index 00000000000..e9428a8b559
Binary files /dev/null and b/static/attachments/quickstarts/part2/4.a Create New App.png differ
diff --git a/static/attachments/quickstarts/part2/4.b Blank Native Mobile Template.png b/static/attachments/quickstarts/part2/4.b Blank Native Mobile Template.png
new file mode 100644
index 00000000000..9250993b6b4
Binary files /dev/null and b/static/attachments/quickstarts/part2/4.b Blank Native Mobile Template.png differ
diff --git a/static/attachments/quickstarts/part2/4.c Confirm Create App.png b/static/attachments/quickstarts/part2/4.c Confirm Create App.png
new file mode 100644
index 00000000000..db08bda5b84
Binary files /dev/null and b/static/attachments/quickstarts/part2/4.c Confirm Create App.png differ
diff --git a/static/attachments/quickstarts/part2/5. Creating The Domain Model.png b/static/attachments/quickstarts/part2/5. Creating The Domain Model.png
new file mode 100644
index 00000000000..71eab1b24e9
Binary files /dev/null and b/static/attachments/quickstarts/part2/5. Creating The Domain Model.png differ
diff --git a/static/attachments/quickstarts/part2/6.a Creating the UI.png b/static/attachments/quickstarts/part2/6.a Creating the UI.png
new file mode 100644
index 00000000000..7297cc046b3
Binary files /dev/null and b/static/attachments/quickstarts/part2/6.a Creating the UI.png differ
diff --git a/static/attachments/quickstarts/part2/6.b Layout Grid.png b/static/attachments/quickstarts/part2/6.b Layout Grid.png
new file mode 100644
index 00000000000..e17972aefc8
Binary files /dev/null and b/static/attachments/quickstarts/part2/6.b Layout Grid.png differ
diff --git a/static/attachments/quickstarts/part2/6.c Select Entity.png b/static/attachments/quickstarts/part2/6.c Select Entity.png
new file mode 100644
index 00000000000..3ec5f227fd9
Binary files /dev/null and b/static/attachments/quickstarts/part2/6.c Select Entity.png differ
diff --git a/static/attachments/quickstarts/part2/7. Completed Nanoflow.png b/static/attachments/quickstarts/part2/7. Completed Nanoflow.png
new file mode 100644
index 00000000000..16a258de79d
Binary files /dev/null and b/static/attachments/quickstarts/part2/7. Completed Nanoflow.png differ