diff --git a/content/en/docs/quickstarts/native-mobile-app.md b/content/en/docs/quickstarts/native-mobile-app.md
index a34e18c0ecf..276f1a2e46f 100644
--- a/content/en/docs/quickstarts/native-mobile-app.md
+++ b/content/en/docs/quickstarts/native-mobile-app.md
@@ -1,205 +1,150 @@
 ---
-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 
 
-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
+* Use **nanoflows** to build logic
+* Learn about **offline-first** development and **data synchronization**
+* Test your native app using the **Make it Native app**
 
-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. 
+## Mobile Development Essentials
 
-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:
+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:
 
-* [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
+* [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.
 
-For more information, see [Building Native Apps](/refguide/mobile/distributing-mobile-apps/building-native-apps/). 
-
-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..
+* [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.
 
 ## Prerequisites
 
 Before starting this tutorial, make sure you have completed the following 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
+* Download and install the [Make It Native](/refguide/getting-the-make-it-native-app/) app on your mobile device, and confirm that the Mendix version you are using is [compatible](/refguide/mobile/getting-started-with-mobile/prerequisites/#get-min-app) with your Make It Native app version
+* 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)).
-
-{{% 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 %}}
-
-You should see this in Studio Pro:
-
-{{< figure src="/attachments/quickstarts/native-mobile-app/studio-pro-check.png" width="400px" alt="What you should see" class="no-border" >}}
-
-The content on this page comes pre-made as a part of the template. To get started, do the following:
-
-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: 
-
-    {{< 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**.
-
-### Creating the UI
-
-Next, you are going to create the UI for your native app:
 
-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:
+## Creating the App
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/add-title-param.png" width="400px" alt="Configure edit button" class="no-border" >}}
+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.
 
-10. Repeat this process for the other label, making sure to select the **Description** attribute this time.
+{{< figure src="/attachments/quickstarts/part2/4.a Create New App.png" width="450px" alt="Create Blank Native Mobile App">}}
 
-Now, the existing images are displayed from the database. 
+Next, click **Use This Starting Point**.
 
-Next, you will develop functionality that allows the end-user to take new pictures with the app and then upload them to the server.
+{{< figure src="/attachments/quickstarts/part2/4.b Blank Native Mobile Template.png" width="450px" alt="Use this starting point">}}
 
-## Using a Nanoflow to Call a JavaScript Action {#nanoflow-use-case}
+In the pop-up window that appears, enter a **name** for your app. Leave all other options as default and click **Create app**.
 
-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: 
+{{< figure src="/attachments/quickstarts/part2/4.c Confirm Create App.png" width="450px" alt="Confirm your choices and create app">}}
 
-1. Drag the **Floating action button** from the **Toolbox** onto the page:
+## Creating the Domain Model
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/floating-action-button.png" width="500px" alt="Floating action button" class="no-border" >}}
+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**.
 
-    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.
+1. Name the entity Employee.
+1. The entity should be a generalization of the Account entity.
+1. Add three attributes to the entity:
+    * FirstName as String
+    * LastName as String
+    * JobRole as String
 
-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*:
+1. Click **OK** to confirm your changes.
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/make-pic-nano.png" width="300px" alt="New nanoflow" class="no-border" >}}
+{{< figure src="/attachments/quickstarts/part2/5. Creating The Domain Model.png" width="450px" alt="Create the Domain Model">}}
 
-### Configuring the Nanoflow
+## Creating 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.
+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.
 
-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.
+1. **Delete** all prefilled “Welcome” text and containers from the page.
+1. From the **Toolbox**, drag a **List View** onto your page.
+1. Double-click on the **List view** to open its **properties**.
+1. In the **properties window**, go to the **Data source tab**, ensure **Database** is selected next to **Type**.
+1. Under entity, click the **Select** button.
+1. Choose the **Employee** entity we created earlier and click **Select**.
+1. Click **OK** to confirm your choices.
 
-Do the following for your new **ACT_TakeNewPicture** nanoflow:
+{{< figure src="/attachments/quickstarts/part2/6.a Creating the UI.png" width="450px" alt="The User Interface">}}
 
-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:
+1. When asked if you would like to automatically fill in the content, select **Yes**.
+1. Delete all the content except for the attributes we created (**FirstName, LastName, JobRole**).
+1. Add a **Layout Grid** to the page (4x4x4), then move each of the remaining labels into their **own cells** in the layout grid.
 
-    {{< figure src="/attachments/quickstarts/native-mobile-app/add-activities.png" width="450px" alt="Take picture action" class="no-border" >}}
+{{< figure src="/attachments/quickstarts/part2/6.b Layout Grid.png" width="450px" alt="add the layout grid">}}
 
-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**
+1. Add a **Create** button from the toolbox in the empty header section of the page.
+1. 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:
+1. 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**.
+1. In the pop-up window that appears, click to create a **New page**.
+1. 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.
 
-{{< figure src="/attachments/quickstarts/native-mobile-app/native-pic-page.png" width="450px" alt="New page" class="no-border" >}}
+## Application Logic
 
-### Adding Validation
+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.
 
-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. 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*.
-
-### Enabling Auto-Synchronization
-
-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: 
-
-1. Double-click the **Save** button to open its properties.
-2. Set **Auto-synchronize** to **Yes**:
-
-    {{< figure src="/attachments/quickstarts/native-mobile-app/edit-button-props.png" width="300px" alt="Auto sync set to yes" class="no-border" >}}
-    
-## Testing
-
-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:
-
-1. Open the Make it Native app on your mobile device:
-
-    {{< figure src="/attachments/quickstarts/native-mobile-app/min-start-screen.png" width="350px" alt="MIN start screen" class="no-border" >}}
-
-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/)):
+{{% alert type="info" %}}
+**What is a nanoflow?**
 
-    {{< 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 %}}
+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 %}}
 
-If you need more information, see [Native App Prerequisites and Troubleshooting](/refguide/mobile/getting-started-with-mobile/prerequisites/).
+1. Open the **properties** of the **save button**.
+1. Under **on-click** action, select **Call a Nanoflow**.
+1. In the window that appears, click New to create a new nanoflow.
+1. **Name** the new nanoflow ACT_Employe_NewEdit
+1. In the newly created nanoflow, look for an **orange Decision** in the toolbox and drag it onto the flow.
+1. **Double-click** the decision to open its **properties**.
+1. Enter the caption Has Firstname?
+1. 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.
+1. 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**.
+1. On the **false** path, add a **validation feedback action**. Double click to open its **properties**, enter the following details, and click **OK**:
 
-## Finishing Up
+    * Variable → Employee
+    * Member → FirstName
+    * Template → Please enter a Firstname for the employee
 
-This is what we saw when we started testing our native mobile photo app:
+1. 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)
 
-{{< figure src="/attachments/quickstarts/native-mobile-app/mobile-pic-1.png" width="200px" class="no-border" >}}
+1. 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 **synchronize action** after the commit action and choose to synchronize only unsynchronized objects.
+1. 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" >}}
+## 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:
+## 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 c4af29e06d4..66943fc4b0e 100644
--- a/content/en/docs/quickstarts/responsive-web-app.md
+++ b/content/en/docs/quickstarts/responsive-web-app.md
@@ -1,312 +1,271 @@
 ---
-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/
 ---
+## 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
+* Explore the platform's key features
+* Find resources and learning materials to deepen your knowledge
 
-### Getting to Know Mendix
+## Getting to know Mendix
 
-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. 
+The Mendix Platform consists of:
 
-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.
+* **Mendix Portal** - A web-based interface for developers, administrators, and other stakeholders to manage the entire application lifecycle and collaborate through.
 
-[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
+* **Studio Pro** - A desktop IDE for developers to create, view, and edit Mendix applications.
 
-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.
+Make sure you are using the [latest version of Studio Pro](https://marketplace.mendix.com/link/studiopro/) when following this guide.
 
-You do not need any additional software configured on your machine in order to start.
-
-To learn more about Mendix concepts, check out the various sections of the [Platform Evaluation Guide](https://www.mendix.com/evaluation-guide/).
-
-## Prerequisites 
-
-Before starting this tutorial, make sure you have completed the following prerequisites:
-
-* 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
-
-## Starting Your App
+{{% 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 %}}
 
-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.
+## Prerequisites
 
-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).
+Before you begin, complete the following steps:
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/3-startingtemplate.png" width="450px" alt="Blank template" class="no-border" >}}
+* 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**).
 
-### Selecting the App Template
+ {{< figure src="/attachments/quickstarts/part1/3. login.png" width="450px" alt="Sign in to Studio Pro">}}
 
-To select the best app template, follow these steps:
+## Create the App
 
-1. Starting from Studio Pro, click **Create New 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">}}
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/starting-point.png" width="450px" alt="New app" class="no-border" >}}
+Open a page to **choose your starting point**.
 
-2. Search for the **Blank Native Mobile App** and click **Use this starting point**:
+You can 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.
 
-    {{% 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 %}}
+Select the **blank web app template**, and on the next screen, click **Use This Starting Point.**
 
-    {{% 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 %}}
+{{< figure src="/attachments/quickstarts/part1/4.2 UseThisStartingPoint" width="450px" alt="se the Blank web app template as a starting point">}}
 
-3. Name your app *Quickstart App* and click **Create app**:
+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/responsive-web-app/3-createnameapp3.png" width="400px" alt="Create app" class="no-border" >}}
+{{< figure src="/attachments/quickstarts/part1/4.3 ConfirmCreateApp.png" width="450px" alt="Confirm your choice by clicking create app.">}}
 
-4. Wait a few minutes for your app to be created, its [Team Server](/developerportal/repository/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**.
+ Confirm by clicking **Create App**. 
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/home-web.png" width="400px" alt="Home Web page" class="no-border" >}}
-    
-## Exploring Studio Pro
+{{% 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 %}}
 
-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.
 
-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/).
+## Explore Studio Pro Interface
 
-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.
+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.
 
-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>.
+{{< figure src="/attachments/quickstarts/part1/5. StudioProInterface.png" width="450px" alt="Have a look around the Studio Pro Interface">}}
 
 ### Top Bar
 
-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" %}}). 
-
-{{< 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*.
-
-### App Explorer
-
-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:
-
-{{< figure src="/attachments/quickstarts/responsive-web-app/tour-left.png" width="300px" alt="App Explorer as left dockable pane" class="no-border" >}}
-
-Any [Marketplace modules](/appstore/modules/) you download appear under **Marketplace Modules** > **App**.
-
-{{< figure src="/attachments/quickstarts/responsive-web-app/4.2-styles.png" width="300px" alt="Modules" class="no-border" >}}
-
-### Bottom Dockable Panes
-
-Look at the bottom dockable pane of Studio Pro:
-
-{{< figure src="/attachments/quickstarts/responsive-web-app/tour-bottom.png" width="400px" alt="Bottom Dockable Pane" class="no-border" >}}
-
-Here you will find some separate default dockable panes:
-
-* [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 
-
-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*.
-
-### Right Dockable Panes
+The top bar includes several key elements:
 
-Look at the right dockable pane of Studio Pro:
+* The Global Navigation Menu (Bento menu), with links to the Mendix Portal
+* Several dropdown menus with items for fundamental app development tasks such as creating a deployment package, uploading to a version control server, and more.
+* Quick-access buttons to do the following:
 
-{{< figure src="/attachments/quickstarts/responsive-web-app/tour-right.png" width="300px" alt="Right Dockable Pane" class="no-border" >}}
+    * Publish, run locally, and view your app
+    * 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)
 
-Here you will find some more separate default dockable panes:
+### Working Area 
 
-* [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
+**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.
 
-For additional information on available panes, see the [Integration](/refguide/view-menu/#data-hub) and [Connector](/refguide/view-menu/#connector) sections of *View Menu*.
-
-## Creating Your App's Domain Model {#domain-model}
-
-In Mendix, you define your app's data structure in the [domain model](/refguide/domain-model/).
-
-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. 
-
-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.
-
-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.
-
-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. 
-
-{{< figure src="/attachments/quickstarts/responsive-web-app/5.1-log.png" width="400px" alt="Log" class="no-border" >}}
-
-### Creating an Entity to Store the Images
-
-To create an entity to store the images used in your app, follow these steps:
-
-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.
+{{% alert type="info" %}}
+When you launch **Studio Pro** for the first time, you’ll see the **Welcom** tab. From here, you can access:
 
-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. 
+* [Maia Learn](https://docs.mendix.com/refguide/maia-learn/) – learning materials to help you get started
 
-    {{< 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:
+* [Maia Chat](https://docs.mendix.com/refguide/maia-chat/) – an AI-powered assistant for quick support and guidance
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/5.3-entityprops3.png" width="400px" alt="Edit configuration" class="no-border" >}}
+We recommend watching the introduction videos to get familiar with the basic concepts of Mendix development before you start building your app.
+{{% /alert %}}
 
-4. Name the entity *Picture*, then click **Generalization** > **Select**. 
-5. Search for and select the **Image** entity (found in the **System** module).
+### App Explorer
 
-    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
+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.
 
-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.
+### Dockable Panels
 
-1. Under the **Attributes** tab in the entity’s properties, click **New**, name your attribute *Title*, and click **OK**:
+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/5.3-addattribute4.png" width="400px" alt="Name attribute" class="no-border" >}}
+## Modules
 
-2. Repeat the step above to add an attribute called *Description*, but select **Unlimited** for the string's **Length**:
+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/).
 
-    {{< 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.
+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. 
 
-## Creating Your App's User Interface
+When your app is deployed locally or in a cloud environment, all modules are bundled together into a single package.
 
-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:
+## Create a Domain Model
 
-* [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
+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/). 
 
-### Configuring a Template Grid {#template-grid}
+{{% 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 %}}
 
-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:
+### Create an Entity 
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-database1.png" width="450px" alt="Open data properties" class="no-border" >}}
+To create an entity, follow these steps:
 
-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. In the **App Explorer** (on the left), double-click **Domain Model** under **MyFirstModule**.
+1. From the **Toolbox** (on the right), drag and drop the entity (blue box) into the central **Working Area**.
+1. Double-click the newly added entity in the **Working Area** to open its **properties** dialog box.
+1. Name the entity **Employee**
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-database2.png" width="400px" alt="Configure data source" class="no-border" >}}
+{{< figure src="/attachments/quickstarts/part1/7.1 EntityPropertiesWindow.png" width="450px" alt="The properties window of the Employee Entity">}}
 
-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.
+### Create Attributes
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-newbuttons4.png" width="450px" alt="Connect page" 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.
 
-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.
+1. In the properties dialog box, click **New** under **Attributes**.
+1. Name your attribute **FirstName**, leave all the other settings default, then click **OK**.
+1. Repeat the steps above to create two additional **string** attributes, called **LastName** and **JobRole**.
+1. Add a final attribute called **EmployeeID**, as an **Autonumber** (an automatically generated number).
+1. Click OK to close the properties dialog box. 
 
-### Using Building Blocks
+{{< figure src="/attachments/quickstarts/part1/7.2 CreateAttributes.png" width="450px" alt="Create attributes on an entity">}}
 
-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.
+{{% 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.
 
-To add a building block to your app's UI, follow these steps:
+To use it, **click Maia for Domain Model** in the **Working Area**, then describe your application in the chat box on the right.
 
-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**:
+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 %}}
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-card5.png" width="400px" alt="Card action" class="no-border" >}}
+### Add an Association
 
-### Configuring the Display Widgets
+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.
 
-Next, you need to connect your data to the display widgets, because your page is currently displaying only static resources. 
+1. Add a new entity and name it Document.
+1. Next to Generalization, click **Select**.
+1. Search for **FileDocument**, and select it.
+1. Click **OK** to confirm your choices.
+1. 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)
 
-To start, replace the static image with the image the app end-user uploads to the database by following these steps:
+{{< figure src="/attachments/quickstarts/part1/7.3 CreateAssociation.png" width="450px" alt="Create an Association between the two entities">}}
 
-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:
+{{% 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 %}}
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-fillcontents6.png" width="400px" alt="Autofill" class="no-border" >}}
 
-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:
+## Create User Interface
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/6-addattributes7.png" width="400px" alt="Add attributes" class="no-border" >}}
+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. 
 
-7. Repeat this process for the other label with the caption **Supporting text**, making sure to select the **Description** attribute this time.
+## 8.1. Add Page Element
 
-## Defining Logic Using Microflows {#microflow-use-case}
+1. Double click on **Home_Web** under **MyFirstModule** in App Explorer
+1. Select the **Home label** and start typing to update the caption to Employee Overview.
+1. 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.
+1. **Delete** all other pre-populated content on the screen (select the element and hit delete on your keyboard)
+1. Drag-and-drop a **Data Grid 2** from the **Toolbox (Widgets > Data containers)** onto your page in the **Working Area**. 
+1. **Double-click** the data grid element to open its properties. 
+1. Under **Data source**, click **edit**, then ensure **Database** is selected for **Type**.
+1. On the **General tab**, next to **Entity**, select the **Employee entity** that you’ve created and Click **OK**.
+1. When Studio Pro prompts you to select the columns, leave everything selected and click **Generate**.
+1. Click **OK** to close the properties Window.
 
-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. 
+{{< figure src="/attachments/quickstarts/part1/8.1 DataGrid2.png" width="450px" alt="A data grid 2 connected to the Employee Entity">}}
 
-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.
+{{% 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 %}}
 
-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.
+### Edit Page Elements
 
-### Implementing Custom Logic
+Next, we need to modify some of the elements on the page.
 
-To implement custom logic with a microflow, follow these steps:
+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**.
+1. In the dialog window, **enter a name** for the new page as Employee_NewEdit.
+1. Under Navigation layout, click the dropdown and select **PopupLayout(Atlas_Core)**.
+1. Select the **Form Vertical layout** for the page and click **OK**.
 
-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*:
+{{< figure src="/attachments/quickstarts/part1/8.2a AddNewPage.png" width="450px" alt="Add a New Page called Employee_NewEdit">}}
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/7-editonclick1.png" width="450px" alt="Edit microflow" class="no-border" >}}
+1. 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.
+1. Next, **open** the **Employee_NewEdit** page.
+1. **Add** a **Data grid 2** from the toolbox onto the page below the Employee ID field. **Double-click** it to open its properties.
+1. Next to **Data source**, click **Select**.
+1. Search for the **Document entity** (But via the page parameter “Employee”), and click select.
 
-7. Click **Show** to quickly navigate to the new microflow and see it open in your editor:
+{{< figure src="/attachments/quickstarts/part1/8.2b DataOverAssociation.png" width="450px" alt="Display Data connected over association in the new datagrid 2">}}
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/7-microflow2.png" width="450px" alt="Microflow" class="no-border" >}}
+1. 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**.
+1. **Name** the page **Document_NewEdit**, select the **Pop-up layout** under Navigation Layout, and choose the **Form Vertical template**.
+1. Click **OK** to confirm your choices. (Don’t forget to connect the edit button inside the Data grid to the new page as well)
 
-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**:
+## Create Application Logic 
 
-    ```text
-    trim($Picture/Title) != ''
-    ```
-    
-    The [trim](/refguide/string-function-calls/#trim) function always returns a string:
+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/decision.png" width="450px" alt="Decision expression" 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**.
+1. In the on-click option dropdown, select **Call a Microflow**.
+1. Next to Microflow, click **Select**.
+1. A window will appear, allowing you to select an existing microflow or **create a new one**.
+1. Click to create a **New Microflow**.
+1. **Name** the microflow **Act_Employee_NewEdit** and click **OK**.
+1. In the newly created microflow, look for an orange **Decision** and **drag it** onto the flow.
+1. **Double-click** the decision to open its **properties**.
+1. **Enter the caption** as "Has Firstname?"
+1. **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.
+1. 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.
+1. On the **false path**, add a **validation feedback action**. Double click to open its **properties**, enter the following details, and click **OK**:
 
-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:
+ 1. Variable → Employee
+ 1. Member → FirstName
+ 1. Template → Please enter a Firstname for the employee
 
-    {{< figure src="/attachments/quickstarts/responsive-web-app/7-reddots4.png" width="450px" alt="Your microflow" class="no-border" >}}
-    
-### Finishing Up
+1. Now on the **true path**, repeat this step for the **LastName** and **JobRole** attributes as well.
 
-Finally, the image needs to be committed to the database and the paged closed:
+ 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)
 
-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**:
+1. 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 **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**. 
+## 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