diff --git a/docs/ff-concepts/navigation-routing/bottom-sheet.md b/docs/ff-concepts/navigation-routing/bottom-sheet.md
index f119cd6b..2811edc9 100644
--- a/docs/ff-concepts/navigation-routing/bottom-sheet.md
+++ b/docs/ff-concepts/navigation-routing/bottom-sheet.md
@@ -49,7 +49,7 @@ Follow the steps below to add an action that opens the bottom sheet:
 
 1. First, create a bottom sheet [component](../../resources/ui/components/intro-components.md).
 :::tip
-You can also create one from the 'BottomSheet' [**templates**](../../resources/ui/components/creating-components.md#creating-a-component-from-a-popular-template).
+You can also create one from the 'BottomSheet' [**templates**](../../resources/ui/components/creating-components.md#creating-component-from-template).
 :::
     
 <div style={{
diff --git a/docs/resources/ui/components/callbacks.md b/docs/resources/ui/components/callbacks.md
index a0135af6..c536f833 100644
--- a/docs/resources/ui/components/callbacks.md
+++ b/docs/resources/ui/components/callbacks.md
@@ -12,7 +12,7 @@ In FlutterFlow, callbacks are a way to pass down actions from parent entities (l
 components) to child entities (such as custom widgets or components). This allows the parent to
 define specific behaviors that the child entity should execute when certain events occur.
 
-It enables dynamic and interactive behavior in child components, allowing them to perform actions
+Callbacks enable dynamic and interactive behavior in child components, allowing them to perform actions
 defined by the parent, such as navigation, data updates, or displaying dialogs.
 
 For example, if you have an *image upload component*, the parent can define what should happen after an image is successfully uploaded. Using callbacks, the *image upload component* can execute a parent-defined action, such as:
@@ -21,14 +21,14 @@ For example, if you have an *image upload component*, the parent can define what
 - Update the user's database record with the new image URL.
 - Refresh the UI to display the updated profile picture.
 
-This makes the *image upload component* component reusable, as it doesn't need to know the specifics of what should happen post-upload. Instead, the parent controls the behavior by passing the appropriate actions via a callback.
+This makes the *image upload component* reusable, as it doesn't need to know the specifics of what should happen after upload. Instead, the parent controls the behavior by passing the appropriate actions via a callback.
 
 ![action-parameters-callbacks](imgs/action-parameters-callbacks.avif)
 
 :::tip[Benefits of Using Callbacks in FlutterFlow]
 
 - **Modularity:** Separate the logic of what happens when an event occurs from the child component,
-  making your component widget more modular and reusable.
+  making your component more modular and reusable.
 - **Reusability:** Use the same child component in different contexts with different behaviors,
   simply by passing different callbacks.
   :::
@@ -36,15 +36,15 @@ This makes the *image upload component* component reusable, as it doesn't need t
 
 ## Adding Callbacks
 
-Let’s continue with our previous example (*image upload component*) and see how to add callbacks on it:
+Let’s continue with our previous example (*image upload component*) and see how to add callbacks to it:
 
 ### Creating a Callback Parameter
 
-In order to create a component that will execute a callback, you must create a component with a parameter of **Type** **Action**. You can create an action parameter called `uploadAction`, which represents the action that will be executed after the image is uploaded.
+To create a component that will execute a callback, you must create a component with a parameter with the **Action** type. You can create an action parameter called `uploadAction`, which represents the action that will be executed after the image is uploaded.
 
-When you create an action parameter, you can also specify parameters that will be passed into the action. For this example, the action that will be executed will likely need to know the uploaded image URL to process it further. So, you can specify an action parameter called uploadedURL.
+When you create an action parameter, you can also specify parameters that will be passed into the action. For this example, the action will likely need to know the uploaded image URL to process it further. So, you can specify an action parameter called `uploadedURL`.
 
-Now, the page or component that uses this button can utilize this parameter in its own action flow. An example of this is shown below.
+Now, the page or component that uses this button can use this parameter in its own action flow. An example of this is shown below.
 
 <div style={{
     position: 'relative',
@@ -76,7 +76,7 @@ Now, the page or component that uses this button can utilize this parameter in i
 
 You can execute the action passed into the component by using the **Execute Callback** action within the component's action flows.
 
-For example, you can execute the above callback after the image is successfully uploaded and the pass the uploaded image URL into the callback.
+For example, you can execute the above callback after the image is successfully uploaded and pass the uploaded image URL into the callback.
 
 
 <div style={{
@@ -105,11 +105,11 @@ For example, you can execute the above callback after the image is successfully
 </div>
 <p></p>
 
-### Passing in an Action to a Component
+### Passing an Action to a Component
 
 When you add a component to the widget tree of a page or another component, you can define values for its parameters, including action parameters.
 
-For instance, when you add an *image upload component*, you can specify the action flows to be executed when the callback is triggered. For this example, we simply update the profile picture.
+For instance, when you add an *image upload component*, you can specify the action flows that should run when the callback is triggered. For this example, we simply update the profile picture.
 
 :::info
 
@@ -145,26 +145,26 @@ You can access the value passed to the callback by navigating to the **Set Varia
 <p></p>
 
 
-Now that we have an *image upload component* with action parameters set up, it can be reused across different pages or contexts, as it relies on the parent to define the post-upload logic. For example, the same component can be used to upload an image while posting reviews for a product, eliminating the need to create a separate component for this functionality.
+Now that we have an *image upload component* with action parameters set up, it can be reused across different pages or contexts, because it relies on the parent to define the after-upload logic. For example, the same component can be used to upload an image while posting reviews for a product, eliminating the need to create a separate component for this functionality.
 
 ![component-action-parameters.avif](imgs/component-action-parameters.avif)
 
 
 ## More Examples
 
-Let's see some more examples of adding action parameters (callbacks) to deepen the understanding and use it in real-world scenarios.
+Let's look at a few more examples of action parameters (callbacks) in real-world scenarios.
 
 ### Example 1: Dynamic Dialog Component
 
 Let’s take another example of a reusable dialog component that uses callbacks to handle context-specific actions like confirming a deletion, logging out, or saving data. In one context, "Yes" deletes an item. In another, it logs out a user.
 
-The specific logic for each action is defined by the parent component or page using the dialog. The dialog itself does not need to know of what should happen—it simply executes the callback passed to it when users click on the "Yes" button.
+The specific logic for each action is defined by the parent component or page using the dialog. The dialog itself does not need to know what should happen—it simply executes the callback passed to it when users click the "Yes" button.
 
 ![dialog-component-action-parameters.avif](imgs/dialog-component-action-parameters.avif)
 
 ### Example 2: Custom Navigation Bar in Super App
 
-Using Action Parameters to build a Custom Navigation Bar in a Super App is an excellent way to create a dynamic, reusable, and modular navigation solution. A **Super App** typically hosts multiple mini-apps or features, each requiring specific navigation logic. Action Parameters allows you to define navigation behavior dynamically, depending on the active context, making it perfect for this scenario.
+Using action parameters to build a custom navigation bar in a super app is an excellent way to create a dynamic, reusable, and modular navigation solution. A **super app** typically hosts multiple mini-apps or features, each requiring specific navigation logic. Action parameters allow you to define navigation behavior dynamically, depending on the active context, making it perfect for this scenario.
 
 Here, the navigation bar doesn’t require hardcoded routes. Instead, the navigation logic can be customized for each mini-app, allowing the navigation bar to remain focused solely on its UI role.
 
diff --git a/docs/resources/ui/components/child-widget.md b/docs/resources/ui/components/child-widget.md
index c735cfb4..b18a4686 100644
--- a/docs/resources/ui/components/child-widget.md
+++ b/docs/resources/ui/components/child-widget.md
@@ -11,9 +11,9 @@ keywords: [FlutterFlow, Child Widget, Components, UI, Reusable Components]
 
 Child Widget allows you to create reusable components while keeping part of the layout flexible. Instead of building multiple variations of the same component, you define a fixed structure and leave a specific area open for customization.
 
-- The position is fixed within the component layout
-- It accepts any widget (text, button, image, custom widget, and components, etc.)
-- Each instance of the component can have different content inside it
+- Its position is fixed within the component layout.
+- It accepts any widget, such as text, buttons, images, custom widgets, and components.
+- Each component instance can contain different content.
 - The overall structure of the component remains consistent
 
 This allows you to reuse the same component while adapting its content as needed.
@@ -35,7 +35,7 @@ Let’s see how to use the Child Widget by building a simple example of displayi
 1. In your Component, add a new parameter and give it a clear name (e.g., `childWidget`).
 2. Set the parameter **Type** to **Child Widget**.
 3. In the component layout, add a **Child Widget placeholder** where you want dynamic content to appear.
-4. Now go to the component instance (the place where you add this component), locate the Child Widget area, and add any widget into it.
+4. Go to the component instance (the place where you add this component), locate the Child Widget area, and add any widget to it.
 
 <div style={{
     position: 'relative',
@@ -66,9 +66,9 @@ Let’s see how to use the Child Widget by building a simple example of displayi
 
 ### Child Widget vs Widget Builder Parameter
 
-Both let you insert custom UI into a component, but they are designed for different workflows. One focuses on visual flexibility, while the other focuses on structured and scalable component design.
+Both options let you insert custom UI into a component, but they are designed for different workflows. One focuses on visual flexibility, while the other focuses on structured and scalable component design.
 
-**Child Widget**: A Child Widget allows you to drag and drop any widget directly into a component instance. It requires no setup from the component creator and is handled entirely in the visual editor. Each instance can have different content, making it ideal for quick, flexible customization.
+**Child Widget**: A Child Widget allows you to drag and drop any widget directly into a component instance. It does not require setup from the component creator and is handled entirely in the visual editor. Each instance can have different content, making it ideal for quick, flexible customization.
 
 [**Widget Builder Parameter**](widget-builder-parameters.md): A Widget Builder Parameter is defined by the component creator and lets you pass UI into a component as a parameter. It works like a function input, providing a more structured and controlled way to customize components, especially for reusable and scalable designs.
 
@@ -76,13 +76,13 @@ Both let you insert custom UI into a component, but they are designed for differ
 ### Best Practices
 
 - Place the Child Widget in a predictable area of the layout, such as a trailing section, content block, or action area. Avoid placing it in positions that affect the overall structure (e.g., between tightly coupled layout elements).
-- Keep the role of the Child Widget clear. It should represent a specific purpose (e.g. “action area”, “content area”), not a random insertion point.
-- Avoid adding too many Child Widgets in a single component, as it can make the component harder to understand and use.
+- Keep the role of the Child Widget clear. It should represent a specific purpose, such as "action area" or "content area", not a random insertion point.
+- Avoid adding too many Child Widget placeholders in a single component, as it can make the component harder to understand and use.
 - Test the component with different widget types (small, large, interactive) to ensure the layout remains stable across variations.
 
 ### Limitations
 
 - The Child Widget position is fixed inside the component. You cannot move or reposition it differently for each instance.
-- It does not enforce any structure on what gets inserted, so inconsistent widgets across instances can lead to inconsistent UI if not carefully designed.
+- It does not enforce any structure on what is inserted, so inconsistent widgets across instances can lead to inconsistent UI if not carefully designed.
 - It is not ideal for highly dynamic, repeated layouts such as product lists or grids, where content is driven entirely by data.
-- It relies on manual placement per instance, which can be less efficient for large-scale or system-driven designs.
\ No newline at end of file
+- It relies on manual placement per instance, which can be less efficient for larger or system-driven designs.
diff --git a/docs/resources/ui/components/component-lifecycle.md b/docs/resources/ui/components/component-lifecycle.md
index 168b8f3d..cee1162f 100644
--- a/docs/resources/ui/components/component-lifecycle.md
+++ b/docs/resources/ui/components/component-lifecycle.md
@@ -6,14 +6,14 @@ toc_max_heading_level: 5
 
 # Component Actions & Lifecycle
 
-In FlutterFlow, knowing component lifecycle is crucial for managing state and optimizing your
+In FlutterFlow, understanding the component lifecycle is crucial for managing state and optimizing your
 app's performance.
 
 Let's delve into the key moments in the lifecycle of a **Component**:
 
-- **Creation**: Component instances are created dynamically when they are utilized within a page
-  or another component. This means that component instances are created as needed, which helps in
-  managing resources efficiently and avoiding unnecessary overhead.
+- **Creation**: Component instances are created dynamically when they are used within a page
+  or another component. This means that component instances are created as needed, which helps
+  manage resources efficiently and avoid unnecessary overhead.
 
 - **Initialization:** Actions defined in the `On Initialization` **Action Trigger** are executed
   during this phase. For instance, you can initialize local state variables with initial values, or
@@ -32,15 +32,15 @@ Let's delve into the key moments in the lifecycle of a **Component**:
   from the page or the component is explicitly removed, it is destroyed.
 
 In FlutterFlow, most of these lifecycle stages are handled internally by FlutterFlow's architecture.
-However, we expose some of the methods so that you, as a developer, can decide what additional
+However, FlutterFlow exposes some lifecycle methods so that you, as a developer, can decide what additional
 configurations to load upon initialization and when to re-render the UI based on interactions.
 
-Let's read more about them in the following sections:
+Let's look at them in the following sections:
 
 ## Initialization Action Triggers
 
 During the initialization of a **Component**, FlutterFlow exposes the `On Initialization` **Action
-Trigger** that assist you in loading resources or initializing data when the Component is loaded in
+Trigger** that assists you in loading resources or initializing data when the Component is loaded in
 a Page or a Component.
 
 :::info[What are Action Triggers?]
@@ -48,7 +48,7 @@ a Page or a Component.
 specific events or user interactions within an application. FlutterFlow provides
 developers with a way to define logic that responds to various events, such as
 button clicks, page loads, form submissions, or data changes.
-To learn more, head over to [**Action Flow Editor**](../../control-flow/functions/action-flow-editor.md) section.
+To learn more, see the [**Action Flow Editor**](../../control-flow/functions/action-flow-editor.md) section.
 :::
 
 As you open the Action Flow Editor for your Component, you can see the `On Initialization`
@@ -57,11 +57,11 @@ As you open the Action Flow Editor for your Component, you can see the `On Initi
 ### On Initialization [Action Trigger]
 
 The `On Initialization` action trigger in FlutterFlow allows you to define actions that should occur
-when a component loads or initializes, such as setting up necessary data, state variables, or other
+when a component loads or is initialized, such as setting up necessary data, state variables, or other
 initialization tasks.
 
 If the component stops being shown in the UI and then becomes visible again,
-the actions under the **On Initialization** action trigger will be re-triggered so any
+the actions under the **On Initialization** action trigger will run again so any
 setup tasks are re-executed. For dynamically generated components, such as those in a ListView with
 a query, each instance will trigger the actions under `On Initialization` action trigger when it is
 created.
@@ -74,29 +74,29 @@ keyboard shortcuts](/resources/ui/pages/page-lifecycle#on-shortcut-press-action-
 ### On Dispose [Action Trigger]
 The **On Dispose** action trigger for components allows you to define actions that execute when the page containing the component is navigated away or removed from memory. It is particularly useful for stopping ongoing operations.
 
-Imagine a scenario where a [periodic action](../../../resources/control-flow/time-based-logic/periodic-action.md), such as fetching live weather updates, is started in a component when it is loaded (i.e, [On Initialization](#on-initialization-action-trigger)). The action runs periodically, providing real-time data updates as long as the component is active. However, when the page containing the component is navigated away, you need to stop the periodic action to conserve resources and prevent unnecessary processing. By using the On Dispose action trigger, you can safely stop the periodic updates and clean up any associated resources.
+Imagine a scenario where a [periodic action](../../../resources/control-flow/time-based-logic/periodic-action.md), such as fetching live weather updates, is started in a component when it is loaded (i.e., [On Initialization](#on-initialization-action-trigger)). The action runs periodically, providing real-time data updates as long as the component is active. However, when the page containing the component is navigated away, you need to stop the periodic action to conserve resources and prevent unnecessary processing. By using the **On Dispose** action trigger, you can safely stop the periodic updates and clean up any associated resources.
 
 :::info
-The **On Dispose** action trigger is always executed before the [**parent page’s On Dispose**](../pages/page-lifecycle.md#on-dispose-action-trigger). This ensures that the component cleans up its resources first, allowing the parent to finalize its disposal without dependencies on the child.
+The **On Dispose** action trigger always runs before the [**parent page’s On Dispose**](../pages/page-lifecycle.md#on-dispose-action-trigger). This ensures that the component cleans up its resources first, allowing the parent to finalize its disposal without dependencies on the child.
 :::
 
-## Component state
+## Component State
 
 :::note[STATE VARIABLES]
 A state variable holds information or data about your UI at any given moment. To learn more
-about **states and state management, [refer here.](../../../ff-concepts/state-management/state-variables.md)**
+about **states and state management, [refer to this guide.](../../../ff-concepts/state-management/state-variables.md)**
 :::
 
 **Component state** refers to the information that a component tracks about its current condition or
 the data it manages internally. This can include data such as whether a button is enabled, the value
 of a slider, or the entries in a dynamically updated list. Component state variables are only
-accessible within the given component's scope.
+accessible within the current component's scope.
 
 This type of variable is particularly useful for storing data that affects how the component behaves
 or appears, such as toggling UI elements, keeping track of user choices within the component, or
 caching data pertinent to the component's functionality.
 
-For example,
+For example:
 
 - In a custom drop-down menu component, you might use a component state variable to keep track of
   which item is currently selected.
@@ -105,12 +105,12 @@ For example,
   This approach ensures that the state of the component is maintained as it interacts with the user
   or other parts of the application.
 
-When the value of a component state variable is changed, the component can be re-rendered with the
+When a component state variable changes, the component can be re-rendered with the
 updated values, displaying the latest state of the component with these updates.
 
 ### Creating a Component State
 
-To create a new **Component State variable** in your component, follow the steps:
+To create a new **Component State variable** in your component, follow these steps:
 
 
 <div style={{
@@ -139,7 +139,7 @@ To create a new **Component State variable** in your component, follow the steps
     </iframe>
 </div>
 
-While creating a Component State, the following properties are included:
+When creating Component State, the following properties are included:
 
 - **Is List:** This property determines whether the variable can hold multiple values of the same
   data type (like a list or array) or just a single value.
@@ -151,19 +151,19 @@ While creating a Component State, the following properties are included:
 - **Nullable:** This property determines whether the variable can have a null value. When "**Nullable**" is set to true, it means the variable can be empty or have a null value. This is
   useful when dealing with optional data or scenarios where the absence of a value is valid.
 
-Now, let's apply these concepts to the `isFavourite` variable in the context of the above example:
+Now, apply these concepts to the `isFavourite` variable in the context of the above example:
 
 - For the `isFavourite` variable, it is a single value (boolean), so **Is List** would be set to
   false.
 
-- The **Initial Field Value** would also be set to **false**, indicating that the item is not
+- Set the **Initial Field Value** to **false**, indicating that the item is not
   favorited by default.
 
-- **Nullable** property will be set to false, as the variable should always have a boolean value
+- Set the **Nullable** property to false, as the variable should always have a boolean value
   (true or false) and never be null.
 
 :::note
-You can set the **Data Type** of your Component State variable to any primitive data types such as **String, Integer, Boolean, Double** or to any other complex built-in data types such as **Enum, Custom Data Type, Document,** etc. To learn more about the available data types, refer the [**Data Representation Section**](../../data-representation/overview.md).
+You can set the **Data Type** of your Component State variable to primitive data types such as **String, Integer, Boolean,** or **Double**, or complex built-in data types such as **Enum, Custom Data Type,** or **Document**. To learn more about the available data types, refer to the [**Data Representation section**](../../data-representation/overview.md).
 :::
 
 ### Get Component State Value
@@ -173,7 +173,7 @@ icon based on the `isFavourite` state variable. We introduce a `Conditional Buil
 allows us to show a widget tree based on **If/Else If/Else** conditions. The goal is to visually
 indicate whether a product has been favorited by the user.
 
-Follow the steps as below:
+Follow these steps:
 
 <div style={{
     position: 'relative',
@@ -204,7 +204,7 @@ Follow the steps as below:
 ### Update Component State [Action]
 
 **Component state** values can only be updated via actions. Whenever you want to update the
-component state, call an action called **Update Component State** from the Action Flow Editor
+component state, add an **Update Component State** action from the Action Flow Editor
 of the component.
 
 In the following demo, we open the Action Flow Editor on the parent widget `Conditional Builder` and
@@ -239,7 +239,7 @@ call the **Update Component State** action to toggle the value of `isFavourite`.
 #### Rebuild on Update
 
 When updating your component state in FlutterFlow, you'll often come across the **Update
-Type** property in your Action properties. Here's what it means:
+Type** property in your action properties. Here's what it means:
 
 - **Rebuild Containing Page:** This option triggers a re-rendering of the page
   containing this component.
@@ -260,10 +260,8 @@ increased battery usage. Therefore, it's essential to consider the trade-offs
 and use rebuilds judiciously to maintain optimal app performance.
 
 To learn more about what happens behind the scenes, refer to
-the [**Generated Page**](#) section.
+the [**Generated Code: Components**](../../../generated-code/component-gen-code.md) section.
 :::
 
 
 
-
-
diff --git a/docs/resources/ui/components/creating-components.md b/docs/resources/ui/components/creating-components.md
index c10e0907..7f265be7 100644
--- a/docs/resources/ui/components/creating-components.md
+++ b/docs/resources/ui/components/creating-components.md
@@ -15,7 +15,7 @@ time, and simplifies maintenance across your project.
 
 ## Creating a Component from Scratch
 
-To create a component from scratch, click the **Add Button** in the **Page Selector** or **Widget Tree** tab. Then choose **New Component.**
+To create a component from scratch, click the **Add Button** in the **Page Selector** or **Widget Tree** tab. Then choose **Add Component > Create Blank Component**.
 
 <div style={{
     position: 'relative',
@@ -24,7 +24,7 @@ To create a component from scratch, click the **Add Button** in the **Page Selec
     width: '100%'
 }}>
     <iframe 
-        src="https://demo.arcade.software/h9WUKl6igLbyoCPewFLr?embed&show_copy_link=true"
+        src="https://demo.arcade.software/shoUH86rXsdpAxtlCOKq?embed&show_copy_link=true"
         title="Create Component From Scratch"
         style={{
             position: 'absolute',
@@ -43,11 +43,11 @@ To create a component from scratch, click the **Add Button** in the **Page Selec
     </iframe>
 </div>
 
-## Convert into a Component
+## Convert to a Component
 
 If you have already built a complex widget in your page, you can convert that entire widget into a component and reuse it throughout your app.
 
-To convert a complex widget into a reusable component, right click on the root widget that contains the
+To convert a complex widget into a reusable component, right-click on the root widget that contains the
 entire widget tree you want to convert, then select **Convert to Component.**
 
 <div style={{
@@ -76,10 +76,10 @@ entire widget tree you want to convert, then select **Convert to Component.**
     </iframe>
 </div>
 
-## Creating a Component from a Popular Template
+## Creating Component from Template
 
 FlutterFlow offers multiple popular templates for components across various use cases that you can
-apply to your project in seconds, saving you a lot of time.
+apply to your project in seconds, saving time.
 
 <div style={{
     position: 'relative',
@@ -88,7 +88,7 @@ apply to your project in seconds, saving you a lot of time.
     width: '100%'
 }}>
     <iframe 
-        src="https://demo.arcade.software/z3yZcGihUz7yGc3jgIbK?embed&show_copy_link=true"
+        src="https://demo.arcade.software/z4aoeN7TK0Zxp6EseLuD?embed&show_copy_link=true"
         title="Create from template"
         style={{
             position: 'absolute',
@@ -107,20 +107,9 @@ apply to your project in seconds, saving you a lot of time.
     </iframe>
 </div>
 
-## Create an AI Generated Component
+## Generate with Designer
 
-You can quickly create a component using FlutterFlow AI by describing what you want in natural language. The AI uses your description or visual reference, along with your project context, to build the component.
-
-To create and add an AI-generated component, open the **Widget Tree**, click **Generate with AI** (magic wand) button and select the **Component** tab. Next, describe the component you want to build, and hit the **Send** (up arrow) button.
-
-FlutterFlow will process your request and display progress in the **AI Generation History** panel in the toolbar. Once the component is ready, you can preview it in both light and dark themes and apply various color schemes. If you're happy with the result, give it a name and add it to your project.
-
-:::tip
-
-- You can also upload a screenshot or image of the component you want to build. FlutterFlow AI will use it as a reference to generate the layout.
-- While the AI is generating your component, you can continue working on other tasks within FlutterFlow, but make sure you don’t close the FlutterFlow app.
-
-:::
+You can quickly create a component with [FlutterFlow Designer](https://designer.flutterflow.io/) by describing what you want in natural language. Designer uses your description along with your project context, to build the component with relevant widgets. 
 
 <div style={{
     position: 'relative',
@@ -129,8 +118,8 @@ FlutterFlow will process your request and display progress in the **AI Generatio
     width: '100%'
 }}>
     <iframe 
-        src="https://demo.arcade.software/BZD7f7OmwPdyHuOia2lY?embed&show_copy_link=true"
-        title="AI Generated Component"
+        src="https://demo.arcade.software/VAsk3ElbFb9ehAV2e94k?embed&show_copy_link=true"
+        title="Generate with Designer"
         style={{
             position: 'absolute',
             top: 0,
@@ -148,17 +137,16 @@ FlutterFlow will process your request and display progress in the **AI Generatio
     </iframe>
 </div>
 
-#### Import from Figma Frame
-
-You can also quickly turn your Figma designs into functional components in FlutterFlow. By providing a Figma Frame URL, FlutterFlow AI will analyze the design and automatically generate UI layouts that closely match your mockup.
+## Import from Figma Frame
+You can quickly turn your Figma designs into functional FlutterFlow components using **Import from Figma**. Provide a Figma Frame URL, and FlutterFlow AI will analyze the design and generate a UI layout that closely matches your mockup.
 
-To import from a Figma Frame, first, connect your Figma account, [import the Figma theme](../../../ff-concepts/design-system/design-system.md#import-figma-theme), and map your colors and typography accordingly. Next, open the **Generate with AI** dialog and click the **Plus (+)** button. Select **Import from Figma**, enter your **Figma frame URL**, and press **Send**.
+To get started, first [connect your Figma account](../../../ff-concepts/design-system/design-system.md#import-figma-theme). Then, when creating a new component, select **Import from Figma** from the available options. Paste the Figma Frame URL and click **Import**.
 
-A preview of the frame you are importing will appear. To finalize the import, click **Send** again. Once completed, the component will appear in the AI Generation History, where you can preview and add it to your project.
+FlutterFlow will display a preview of the selected frame. Review the preview, then click **Generate** to create the component. Once completed, the component will appear in the **AI Generation History**, where you can preview and add it to your project.
 
 :::warning
 
-Currently, we don't support importing SVG elements from Figma frames. However, you can manually add the SVGs directly to your project [**assets**](../../../generated-code/directory-structure.md#assets) after generation is complete, or replace them in Figma with supported image formats like PNG or JPEG.
+Currently, FlutterFlow doesn't support importing SVG elements from Figma frames. However, you can manually add the SVGs directly to your project [**assets**](../../../generated-code/directory-structure.md#assets) after generation is complete, or replace them in Figma with supported image formats like PNG or JPEG.
 
 :::
 
@@ -169,8 +157,8 @@ Currently, we don't support importing SVG elements from Figma frames. However, y
     width: '100%'
 }}>
     <iframe 
-        src="https://demo.arcade.software/cBQGb2T9VXneQ6gSlQMk?embed&show_copy_link=true"
-        title="AI Generated Component"
+        src="https://demo.arcade.software/V4kUtFFezchW03HIeqyY?embed&show_copy_link=true"
+        title="Import from Figma"
         style={{
             position: 'absolute',
             top: 0,
@@ -190,11 +178,11 @@ Currently, we don't support importing SVG elements from Figma frames. However, y
 
 ## Component Properties Panel
 
-When you select a component from the widget tree, the properties panel opens up on the right
-side of the interface. It plays a crucial role in configuring and managing the various aspects of
+When you select a component from the widget tree, the Properties panel opens on the right
+side of the interface. Use it to configure and manage the various aspects of
 your components.
 
-Here’s a detailed look at what you can typically find and modify in this panel:
+Here’s what you can typically find and modify in this panel:
 
 ![components-configurations.png](../imgs/components-configurations.png)
 
@@ -270,11 +258,11 @@ respective widgets and action triggers.
 </div>
 
 
-Aside from standard data types used throughout FlutterFlow, you can also create parameters that are of type:
+Aside from standard data types used throughout FlutterFlow, you can also create parameters of the following types:
 
-- **Action (callback)**: This allows you to pass in actions into the component. The component can then invoke the action, usually referred to as a callback, in its own action flows. Callbacks are often using to handle events, like updating a parent's state when a button has been pressed. [You can learn more about how to use callbacks here.](/resources/ui/components/callbacks)
+- **Action (callback)**: This allows you to pass actions into the component. The component can then invoke the action, usually referred to as a callback, in its own action flows. Callbacks are often used to handle events, like updating a parent's state when a button has been pressed. [You can learn more about how to use callbacks here.](/resources/ui/components/callbacks)
 
-- **Widget Builders**: Widget builders allows you to pass in widgets to be used within the component's widget tree. This is especially useful when you want to dynamically substitute content for some part of a component - like displaying an item in a custom dropdown, or creating a component for some consistent layout. [You can learn more about how to use Widget Builders here.](widget-builder-parameters.md)
+- **Widget Builders**: Widget builders allows you to pass in widgets to be used within the component's widget tree. This is especially useful when you want to dynamically substitute content for part of a component, such as displaying an item in a custom dropdown, or creating a component for some consistent layout. [You can learn more about how to use Widget Builders here.](widget-builder-parameters.md)
 
 
 ### Actions
@@ -283,7 +271,7 @@ This tab allows you to define and manage interactions or events triggered by use
 example, you can configure a button to navigate to another page or execute a callback action from
 the page using the current component.
 
-Adding an action to a component element is exactly the same experience as adding actions to any page elements. Here's a quick overview:
+Adding an action to a component element is exactly the same experience as adding actions to any page element. Here's a quick overview:
 
 ![component-actions.png](../imgs/component-actions.png)
 
diff --git a/docs/resources/ui/components/imgs/component-unique-id.avif b/docs/resources/ui/components/imgs/component-unique-id.avif
new file mode 100644
index 00000000..f80e4ac0
Binary files /dev/null and b/docs/resources/ui/components/imgs/component-unique-id.avif differ
diff --git a/docs/resources/ui/components/intro-components.md b/docs/resources/ui/components/intro-components.md
index 2e16b013..a0435229 100644
--- a/docs/resources/ui/components/intro-components.md
+++ b/docs/resources/ui/components/intro-components.md
@@ -6,12 +6,12 @@ slug: /resources/ui/components
 
 # Components
 
-Components in FlutterFlow are reusable widgets. You design the widget once and can use it throughout your app
+Components in FlutterFlow are reusable widgets. You design a widget once and can reuse it throughout your app
 to save time, ensure consistency, and make it easier to maintain.
 
 When you add a component to a [**Page**](../pages/intro-pages.md), it becomes part of that page's **[Widget Tree](../widgets/intro-widgets.md#widget-tree)**. This allows the component to interact with other widgets, inherit properties, and respond to state changes as part of the page's structure.
 
-Components help in the following ways:
+Components help in several ways:
 
 - **Consistency:** Components provide a consistent look and behavior, reducing the likelihood of
   discrepancies that can occur when the same UI elements are created multiple times.
@@ -22,7 +22,7 @@ Components help in the following ways:
   app automatically reflect those changes. This significantly reduces the effort required to
   maintain and update the app.
 
-  :::info[CLasses vs Instances]
+  :::info[Classes vs. Instances]
   Learn more about **[Classes and their Instances](../overview.md)** and what they mean in
   FlutterFlow.
   :::
@@ -43,19 +43,19 @@ Components help in the following ways:
 Leveraging components effectively helps you build a consistent, efficient, and maintainable app.
 
 
-## Common Use-cases
+## Common Use Cases
 
 Components can be used in various scenarios to accelerate your app development process. Here are
-some common use-cases.
+some common use cases:
 
 - Design a **standard button once** and reuse it across multiple screens to maintain a cohesive
    look.
 
-- Utilize components for **card designs** frequently used in your app, such as product cards, user
+- Use components for **card designs** frequently used in your app, such as product cards, user
    profiles, or news articles.
 
 - **Standardize input forms** for tasks like user registration, login, or feedback collection,
-   ensuring
+   to ensure
    a consistent user experience.
 
 - Design **pop-up messages or dialogs** that match the overall theme of your app, enhancing visual
@@ -67,11 +67,10 @@ some common use-cases.
 - Design sections of a screen that are frequently repeated, such as testimonials, image galleries,
    or feature highlights, and reuse them to maintain a cohesive layout.
 
-Here's an example of all the widely used components used in the [EcommerceFlow demo](https://bit.ly/ff-docs-demo-v2) app.
+Here's an example of commonly used components in the [EcommerceFlow demo](https://bit.ly/ff-docs-demo-v2) app.
 
 
 <figure>
     ![custom-components-demo-list.png](../imgs/custom-components-demo-list.png)
   <figcaption class="centered-caption">Some of the custom components from the Ecommerce Demo App</figcaption>
 </figure>
-
diff --git a/docs/resources/ui/components/using-components.md b/docs/resources/ui/components/using-components.md
index 9fa6a609..abf05794 100644
--- a/docs/resources/ui/components/using-components.md
+++ b/docs/resources/ui/components/using-components.md
@@ -8,13 +8,13 @@ sidebar_position: 2
 Components in FlutterFlow can be added to the widget tree of a page or another component. They help streamline
 development by allowing you to reuse design and functionality throughout your app. Components can
 accept parameters, making them adaptable to specific contexts. Additionally, you can use [callbacks](/resources/ui/components/callbacks)
-to pass actions from parent entities to child components, enabling dynamic and interactive behavior. You can also use [widget builders](widget-builder-parameters.md) to subsitute dynamic content into the component's widget tree.
+to pass actions from parent entities to child components, enabling dynamic and interactive behavior. You can also use [widget builders](widget-builder-parameters.md) to substitute dynamic content into the component's widget tree.
 
-To learn more about creating components, see [this page](/resources/ui/components/creating-components).
+To learn more about creating components, see [Creating a Component](/resources/ui/components/creating-components).
 
-## To add a Component to a Widget Tree
+## Add a Component to a Widget Tree
 
-To add a component to thr widget tree of a page or another component, choose the parent entity where you want to add the new component. Next, you can see the component appear in the widgete palette, under the **Components** section.
+To add a component to the widget tree of a page or another component, choose the parent entity where you want to add the new component. Next, you can find the component in the Widget Palette, under the **Components** section.
 
 <div style={{
     position: 'relative',
@@ -45,7 +45,7 @@ To add a component to thr widget tree of a page or another component, choose the
 ### Specify Parameter Values
 
 In FlutterFlow, each component instance can receive unique values from its parent entity.
-When you add a component to the widget tree, you can set the parameter values by clicking on the instance of the component and going to the **Property Panel.**
+When you add a component to the widget tree, you can set the parameter values by clicking on the instance of the component and going to the **Properties panel**.
 
 <div style={{
     position: 'relative',
@@ -76,28 +76,25 @@ When you add a component to the widget tree, you can set the parameter values by
 
 
 ## Setting a Unique Key
-When you have a component in a dynamically generated list, you have an option to set a unique key. Imagine you have a dynamic list where items can change frequently – like a to-do list where tasks are added and removed. Think of it as giving each task a unique ID number. This is important for a few reasons:
+When you use a component in a dynamically generated list, you can set a unique key. For example, imagine a dynamic list where items change frequently, such as a to-do list where tasks are added and removed. Think of it as giving each task a unique ID number. This is important for a few reasons:
 
-- **Tracking Changes:** The 'Unique Key' helps the app recognize which tasks are new, completed, or removed, ensuring accurate updates.
+- **Tracking Changes:** The **Unique Key** helps the app recognize which tasks are new, completed, or removed, ensuring accurate updates.
 
 - **Efficiency:** With unique IDs, the app updates only the tasks that have changed instead of the entire list, improving performance.
 
-- **Retaining Details:** When you modify a task and move away from it, the 'Unique Key' ensures the changes are remembered and displayed correctly when you return.
+- **Retaining Details:** When you modify a task and move away from it, the **Unique Key** ensures the changes are remembered and displayed correctly when you return.
 
 :::tip
-If it’s a list of Documents the unique key might be the Document ID.
+If it's a list of documents, the unique key might be the document ID.
 :::
 
-<div class="video-container"><iframe src="https://www.loom.
-com/embed/61d061adf14741bbb25178b439b50b4f?sid=8277e59a-effe-4cf8-a3f6-3f81a7e2a690" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
-
+![component-unique-id.avif](imgs/component-unique-id.avif)
 
 ## Recursive Components
 
-You can create a recursive component, meaning the component can include an instance of itself within its own widget tree. This is especially useful for nested content.
+You can create a recursive component, which means the component can include an instance of itself within its own widget tree. This is especially useful for nested content.
 
 For example, in social media applications or forums, comments can have replies, and each reply can have further replies. A recursive component can display this nested structure effectively.
 
 ![recursive-comp.png](../imgs/recursive-comp.png)
 
-
diff --git a/docs/resources/ui/components/widget-builder-parameters.md b/docs/resources/ui/components/widget-builder-parameters.md
index 9579b4fb..28f5c01c 100644
--- a/docs/resources/ui/components/widget-builder-parameters.md
+++ b/docs/resources/ui/components/widget-builder-parameters.md
@@ -6,19 +6,19 @@ slug: widget-builder
 
 # Widget Builder Parameters
 
-Sometimes, you want to create a component that offers some consistent design, while also allowing for customization. This is where passing widget builder as parameters becomes valuable. 
+Sometimes, you want to create a component that offers some consistent design, while also allowing for customization. This is where passing widget builders as parameters becomes valuable.
 
-Widget builder parameters allow component authors to substitute in dynamic content within the widget tree of the component. This means that when someone uses the component, they can dynamically pass in pieces of UI to be used within the component. 
+Widget builder parameters allow component authors to substitute dynamic content within the widget tree of the component. This means that when someone uses the component, they can dynamically pass in pieces of UI to be used within the component.
 
-For example, consider a custom dropdown component. While the overall structure of the dropdown remains the same, you might need to change the style or content of the dropdown items based on different use cases. By passing the dropdown item widget as a parameter, you can use the dropdown's appearance and behavior without creating new components for each variation.
+For example, consider a custom dropdown component. While the overall structure of the dropdown remains the same, you might need to change the style or content of the dropdown items based on different use cases. By passing the dropdown item widget as a parameter, you can reuse the dropdown's appearance and behavior without creating new components for each variation.
 
-:::tip[possible use casses]
+:::tip[Possible use cases]
 - **Custom Cards**: Imagine you need to display product cards in an e-commerce app. You can build a reusable card component with parameters for the image, header, content, and call-to-action button. This card can be reused across multiple pages but with different content.
 - **Dynamic Forms**: Build a form component where different fields (TextFields, Dropdowns, or Checkboxes) are passed in as parameters. This allows you to reuse the same form structure but adapt to various input fields.
 - **Modular Layouts**: Create a consistent layout structure with areas like headers and footers that remain the same while passing in different body content as parameters to adapt to different pages.
 :::
 
-Let’s see an example from an eCommerce app. On the shipping address page, you may want to maintain a consistent design for the various input fields (where the user can specify their name, email, etc). However, you may want to allow some customization different inputs - for example, you want to use a `TextField` to allow the user to type their name, and a `DropDown` to allow the user to select their country. 
+Let’s see an example from an ecommerce app. On the shipping address page, you may want to maintain a consistent design for the various input fields (where the user can specify their name, email, etc.). However, you may want to allow customization for different inputs - for example, you want to use a `TextField` to allow the user to type their name, and a `DropDown` to allow the user to select their country.
 
 ![widget-builder-as-parameter-example.avif](imgs/widget-builder-as-parameter-example.avif)
 
@@ -27,7 +27,7 @@ Let’s see an example from an eCommerce app. On the shipping address page, you
 To create a component with a widget builder as a parameter, use the steps outlined below. 
 
 ### Create a Parameter of Type Widget Builder
-Create a new component and add the base widgets that will be unmodified. Next, define a parameter and set its type to **Widget Builder**. To pass data from the current component to the widget builder, you can specify a parameter for the widget builder.
+Create a new component and add the base widgets that will be unchanged. Next, define a parameter and set its type to **Widget Builder**. To pass data from the current component to the widget builder, you can specify a parameter for the widget builder.
 
     <div style={{
         position: 'relative',
@@ -56,7 +56,7 @@ Create a new component and add the base widgets that will be unmodified. Next, d
     <p></p>
 
 ### Add the Widget Builder to the Widget Tree
-Add the widget builder placeholder into the desired spot in the component’s widget tree where the dynamic element should appear. Widget Builders appear in the **Components** section of the **Widget Palette** when adding a widget to the widget tree.
+Add the widget builder placeholder to the desired spot in the component’s widget tree where the dynamic element should appear. Widget builders appear in the **Components** section of the **Widget Palette** when adding a widget to the widget tree.
 
     <div style={{
         position: 'relative',
@@ -115,15 +115,15 @@ Here’s how you do it:
 </div>
 <p></p>
 
-#### Preview the Widget Builder using Different Components
+#### Preview the Widget Builder Using Different Components
 You can select different components to use as a preview while building the component that has a widget builder parameter. 
 
-To select a component to use in the preview, select the Widget Builder, then go to the **Widget Builder UI Properties** section of the **Property Panel**.
+To select a component to use in the preview, select the Widget Builder, then go to the **Widget Builder UI Properties** section of the **Properties panel**.
 
 ![preview-component.png](imgs/preview-component.png)
 
 ## Using Components with Widget Builders as Parameters
-When you use a component that has a widget builder as a parameter, you can pass in [components](/resources/ui/components) to customize the content according to your needs.
+When you use a component that has a widget builder parameter, you can pass [components](/resources/ui/components) to customize the content according to your needs.
 
 In this example, we create two additional components for `TextField` and `Dropdown` — and pass them as widget builders. 
 
@@ -152,4 +152,3 @@ In this example, we create two additional components for `TextField` and `Dropdo
         </iframe>
     </div>
     <p></p>
-
diff --git a/docs/resources/ui/widgets/composing-widgets/rows-column-stack.md b/docs/resources/ui/widgets/composing-widgets/rows-column-stack.md
index ff9bf513..81ed0996 100644
--- a/docs/resources/ui/widgets/composing-widgets/rows-column-stack.md
+++ b/docs/resources/ui/widgets/composing-widgets/rows-column-stack.md
@@ -31,7 +31,7 @@ depends on how you need to arrange your UI components:
 ![row-col-stack.png](../../imgs/row-col-stack.png)
 
 :::tip[Minimum Layout Nesting]
-Use the minimum amount of rows/columns necessary to achieve your layout to avoid unnecessary complexity. No page or component should nest more than 10 levels deep. Reaching this limit likely signals the need for **[converting a part of the widget tree into components](../../components/creating-components.md#convert-into-a-component)**.
+Use the minimum amount of rows/columns necessary to achieve your layout to avoid unnecessary complexity. No page or component should nest more than 10 levels deep. Reaching this limit likely signals the need for **[converting a part of the widget tree into components](../../components/creating-components.md#convert-to-a-component)**.
 :::
 
 <!---TODO #### Choosing your parent widget