(docs): Documenting the buttons, changing the structure of the page s…

…o it makes more sense, and adding detailed screenshots from the app instead of the figma designs.

docs/premium-features/break-the-monolith.md

@@ -8,51 +8,82 @@ pagination_prev: null
 
 # Break The Monolith
 
-Amplication's "Break The Monolith" feature helps you seamlessly update monolithic architectures into modern, scalable, and maintainable microservices. It introduces a new project-level tab to simplify the process of moving entities across different services.
+Amplication's "Break The Monolith" feature helps you seamlessly update monolithic architectures into a modern, scalable, and maintainable microservice architecture.
 
-This guide will walk you through the steps to effectively utilize this feature for enhancing your application's architecture.
+It introduces a new project-level _Architecture_ tab to simplify the process of moving entities across different services.
+
+This guide will walk you through the steps to effectively utilize Break The Monolith for improving your application's architecture.
 
 :::note
 The "Break The Monolith" feature is currently in beta and **available to Enterprise workspaces including trial workspaces**.
 :::
 
-## What is "Break The Monolith"?
+## How To Use "Break The Monolith"
 
-"Break The Monolith" helps you transition any monolithic service, including monolithic legacy systems, to a modular microservice architecture. <!-- It allows for both manual and AI-driven restructuring of services. -->
+"Break The Monolith" focuses on the following 3 parts:
 
-This feature focuses on the following 3 parts:
+1. **Overview of Current Services**: Get a comprehensive view of your project's services, their entities, fields, and relationships with Overview mode.
+2. **Redesign and Service Distribution**: <!-- Manually or with AI assistance, r--> Redesign your service and move entities between services to create a new micro-service structure.
+3. **Confirm and Apply the New Architecture**: Amplication handles the creation of new services, moves entities, and manages the relationships between entities automatically. Each service comes complete with their entities, APIs, and data models, to support the new microservice architecture to your code is ready for production.
 
-1. **Overview of Current Services**: Get a comprehensive view of your project's services, their entities, fields, and relationships with our Overview mode.
-2. **Redesign and Service Distribution**: <!-- Manually or with AI assistance, r--> Redesign your service, whether it's a monolith or otherwise, and move entities between services to create a balanced microservice structure.
-3. **Applying the New Architecture**: Amplication facilitates the creation of new microservices, handles all the moved entities, and manages the intricate relations. It comes complete with their entities, APIs, and data models, to support the new microservice architecture and ensure your code is ready for production.
+Let's review each of the various parts of this new feature specifically.
 
-## How To Use "Break The Monolith"
+## Overview Mode
 
-### Step 1: Access the Architecture Tab
+Overview mode is the view-only default mode for viewing your services and entities.
 
-Visit the new "Architecture" tab in your project interface, featuring two modes: **Overview** and **Redesign**.
+:::note
+**Free users** have access to Overview mode _without_ the Redesign capabilities.
+:::
 
-#### Overview Mode
+![Amplication's Break The Monolith View Mode](./assets/break-the-monolith-overview-mode.png)
 
-Overview mode is the view-only default mode for viewing your services and entities.
+Overview Mode introduces several components to ease navigating throughout the interface.
+
+### Service Filter
+
+On the upper left-side of the Architecture tab is the filter component and the associated search bar.
+
+Each individual colored button with an icon represents one of your services. _Hover_ over the button to see the name of your service. _Click_ the button to hide/show the service.
 
-#### Redesign Mode
+The associated search field helps you search through your services by name.
 
-Redesign mode allows you to redesign and restructure services, facilitating the movement of entities between them.
+The filter is useful if you only need to break specific services.
+
+### Drag-and-Drop Interface Management Buttons
+
+Directly below the Service Filter are various buttons to help you manage the drag-and-drop interface.
+
+_Hover_ over each button to see the name of what the button does.
+
+1. **Toggle Field List** toggles the associated field names for all the entities in your service.
+2. **Reset Layout** resets the Zoom level back to normal.
+3. **Zoom In** increases the Zoom level of the interface.
+4. **Zoom Out** decreases the Zoom level of the interface.
+
+## Redesign Mode
+
+Redesign mode allows you to restructure services by facilitating the movement of entities between them using our drag-and-drop interface.
+
+Click on the **Redesign** button to enter Redesign Mode and select a service to redesign.
 
 :::note
-**Free users** have access to Overview mode _without_ the Redesign capabilities.
+You can currently redesign only **one** service at a time.
 :::
 
-![Amplication's Break The Monolith View Mode](./assets/break-the-monolith-view-mode.png)
+You can move entities between services in two ways:
 
-### Step 2: Manual Service Redesign
+1. Drag and drop entities into the appropriate service.
+2. Select multiple entities using the dedicated menu and move them in bulk to create micro-services.
 
-After entering Redesign Mode, manually move entities between services. You can select multiple entities using the dedicated menu and move them in bulk to create micro-services.
+![Amplication's Break The Monolith Redesign Mode](./assets/break-the-monolith-redesign-mode.png)
 
-To migrate entities to other services, you can drag and drop them into the appropriate service. After making changes, you can click on the **Apply** button to implement those changes.
+Redesign mode introduces a few more buttons to help you while redesigning your service.
 
-![Amplication's Break The Monolith Redesign Mode](./assets/break-the-monolith-redesign-mode.png)
+1. **Add New Service** creates a new service so that you can drag-and-drop entities between 
+2. **Fetch Updates From Server** gets any updates from the server. This is useful in case updates were made during the monolith update process.
+3. **Discard Changes** discards all changes and brings you back into Overiew Mode. 
+4. **Apply Plan** applies your changes and brings you to the confirmation screen.
 
 <!--
 ### Step 3: Utilize AI for Smart Architecture Suggestions (Optional)
@@ -78,18 +109,6 @@ The "AI Helper" button in the Architecture tab, also available in both the Proje
 ### Step 4: Manage and Apply Changes
 -->
 
-### Step 3: Manage and Apply Changes
-
-Once you're satisfied with the changes, use the **Apply** button to update your project's architecture. You can also reset modifications to revert everything back to its previous, unmodified state.
-
-After applying changes in the Architecture tab, the "Pending Changes" section of your dashboard will reflect those updates. If everything looks good, click on the **Commit Changes & Build** button and Amplication will create a new PR to your git provider with your changes.
-
-:::note
-Changes made in Redesign Mode are auto-saved, but they're not applied or visible to other team members until you click the **Apply** button.
-:::
-
-![Amplication's Break The Monolith Confirm Architecture Changes](./assets/break-the-monolith-confirm-architecture.png)
-
 <!--
 ## Starting with Prisma Schema in Break The Monolith
 
@@ -100,6 +119,18 @@ This approach allows you to import your existing database structure into Amplica
 To get started with your Prisma schema upload, visit our [Import Prisma Schema](/how-to/import-prisma-schema) documentation for step-by-step instructions.
 -->
 
+## Architecture Change Confirmation
+
+Once you're satisfied with the changes, use the **Apply Plan** button to update your project's architecture.
+
+After applying changes in the Architecture tab, the "Pending Changes" section of your dashboard will reflect those updates. If everything looks good, click on the **Commit Changes & Build** button and Amplication will create a new PR to your git provider with your changes.
+
+:::note
+Changes made in Redesign Mode are auto-saved, but they're not applied or visible to other team members until you click the **Apply** button.
+:::
+
+![Amplication's Break The Monolith Confirm Architecture Changes](./assets/break-the-monolith-confirm-architecture.png)
+
 ## Learn the Technical Workings of Break The Monolith
 
 For a deeper understanding of the technical details behind "Break The Monolith" and how it transforms your monolithic architecture into microservices, visit our detailed technical guide on the [Understanding Break The Monolith](/how-to/understanding-break-the-monolith) page.