diff --git a/docs/ff-concepts/adding-customization/cloud-functions.md b/docs/ff-concepts/adding-customization/cloud-functions.md
index e8b909dc..f7c923f1 100644
--- a/docs/ff-concepts/adding-customization/cloud-functions.md
+++ b/docs/ff-concepts/adding-customization/cloud-functions.md
@@ -48,7 +48,7 @@ Here are the step-by-step instructions to build such an example:
 ### 1. Add page state variables
 
 For this example, you'll need to set up two 
-[Page State variables](../../resources/ui-building-blocks/pages/page-lifecycle.md#creating-a-page-state):
+[Page State variables](../../resources/ui/pages/page-lifecycle.md#creating-a-page-state):
 
 1. **generatingImage (*****Type: Boolean*****)**: This is used to control the visibility of a 
 loading indicator during the logo creation process. Its value is set to *True* before initiating the API call and switched to *False* once the logo generation is complete.
diff --git a/docs/ff-concepts/adding-customization/custom-functions.md b/docs/ff-concepts/adding-customization/custom-functions.md
index e1f01ac1..a6ca3da9 100644
--- a/docs/ff-concepts/adding-customization/custom-functions.md
+++ b/docs/ff-concepts/adding-customization/custom-functions.md
@@ -71,7 +71,7 @@ You can't have imports in a custom function. To be able to add imports, consider
 <details>
 <summary>Getting error: The function 'FFAppState' isn't defined.</summary>
 
-You can't use the app state variable (i.e., FFAppState().variablename) directly in your custom 
+You can't use the app state variable (i.e., `FFAppState().variablename`) directly in your custom 
 function code. Instead, you can pass the app state variable as a parameter and then use it in your code.
 
 </details>
diff --git a/docs/ff-concepts/animations/page_transitions.md b/docs/ff-concepts/animations/page_transitions.md
index b4e10b15..c3376cda 100644
--- a/docs/ff-concepts/animations/page_transitions.md
+++ b/docs/ff-concepts/animations/page_transitions.md
@@ -27,7 +27,7 @@ Here, the transitions are recorded with the duration set to 1000ms to make the a
 
 ## Animate single navigate transition
 
-To set a transition animation for a single navigate action, first, ensure that you have added a [**Navigate To**](../../resources/ui-building-blocks/pages/navigation#navigate-to-action) action and then select an animation from the **Transition Type** dropdown. By default, the animations use 300 milliseconds as the duration for which it plays but you can change it by specifying a value inside the **Duration** (ms) field.
+To set a transition animation for a single navigate action, first, ensure that you have added a [**Navigate To**](../../resources/ui/pages/navigation#navigate-to-action) action and then select an animation from the **Transition Type** dropdown. By default, the animations use 300 milliseconds as the duration for which it plays but you can change it by specifying a value inside the **Duration** (ms) field.
 
 ![single-navigate-transition-animation.avif](animation_gifs/single-navigate-transition-animation.avif)
 
diff --git a/docs/ff-concepts/layout/building-layout.md b/docs/ff-concepts/layout/building-layout.md
index 0d8dba45..6b9289c5 100644
--- a/docs/ff-concepts/layout/building-layout.md
+++ b/docs/ff-concepts/layout/building-layout.md
@@ -9,7 +9,7 @@ keywords: [FlutterFlow, Building Layout, Concepts]
 
 # Building Layout
 
-In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui-building-blocks/widgets/built-in-widgets/text.md), [Buttons](#), [Images](#), and [Icons](#), are visible on the screen. Others, like [Containers](#), [Rows](#), [Columns](#), and [Stacks](#), are not directly visible but help arrange and position the visible elements on the page.
+In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui/widgets/built-in-widgets/text.md), [Buttons](#), [Images](#), and [Icons](#), are visible on the screen. Others, like [Containers](#), [Rows](#), [Columns](#), and [Stacks](#), are not directly visible but help arrange and position the visible elements on the page.
 
 These widgets are categorized into four main types: [Layout Elements](#), [Base Elements](#), 
 [Page Elements](#), and [Form Elements](#). To build a page, you combine different widgets from these categories to get the desired look and feel of your app.
diff --git a/docs/ff-concepts/layout/responsive-widgets/conditional-builder-widget.md b/docs/ff-concepts/layout/responsive-widgets/conditional-builder-widget.md
index 11e28510..5b4910c3 100644
--- a/docs/ff-concepts/layout/responsive-widgets/conditional-builder-widget.md
+++ b/docs/ff-concepts/layout/responsive-widgets/conditional-builder-widget.md
@@ -8,7 +8,7 @@ keywords: [FlutterFlow, ConditionalBuilder, Concepts]
 ---
 # ConditionalBuilder
 
-The `ConditionalBuilder` widget allows you to dynamically display different widgets based on certain conditions (either [single](/advanced-functionality/conditional-logic#single-condition) or [multiple](/advanced-functionality/conditional-logic#multiple-conditions-and-or)). Using this widget, you can define different conditions, each associated with a specific widget to be displayed when that condition is true. It's like having a switch that shows different things depending on what's happening in your app.
+The `ConditionalBuilder` widget allows you to dynamically display different widgets based on certain conditions (either [single](../../../resources/control-flow/functions/conditional-logic.md#single-condition) or [multiple](../../../resources/control-flow/functions/conditional-logic.md#multiple-conditions-andor)). Using this widget, you can define different conditions, each associated with a specific widget to be displayed when that condition is true. It's like having a switch that shows different things depending on what's happening in your app.
 
 For example, displaying different charts based on user roles. For team members, an individual progress chart can be shown. Team leads can view the overall progress of the entire team, while project managers can see over project progress chart. Just like the below:
 
@@ -20,11 +20,11 @@ To add the `ConditionalBuilder` widget to your app:
 
 1. Add the **ConditionalBuilder** widget (from the **Base Elements**) to where you want to display dynamic widgets.
 
-2. Move to the **Properties Panel** **>** **Conditional Builder Properties,** andUnder the **First Condition**, provide the **IF** [condition](/advanced-functionality/conditional-logic) by clicking on **UNSET**.
+2. Move to the **Properties Panel** **>** **Conditional Builder Properties,** andUnder the **First Condition**, provide the **IF** [condition](../../../resources/control-flow/functions/conditional-logic.md) by clicking on **UNSET**.
 3. Now, besides the **THEN**, click **Empty**. This will automatically select the **IF** widget in the widget tree. Inside that, add a widget that you want to display if this condition is true.
 4. To add one more condition-based widget, click on the "+" button, add a condition for the **ELSE IF** section, and add a widget inside the **Else If** widget in the widget tree.
 5. If none of the conditions are satisfied, add a default widget to display inside the **Else** widget.
-6. Use the **Show In UI Builder** option to see that particular widget in the [canvas area](/getting-started/ui-builder/canvas-area). You can see only one widget at a time.
+6. Use the **Show In UI Builder** option to see that particular widget in the [canvas area](../../../intro/ff-ui/canvas.md). You can see only one widget at a time.
 
 <div class="video-container"><iframe src="https://www.loom.
 com/embed/fe8edb48bdf744abab13f3ba7f925c5c?sid=85533669-195d-4f5e-aeae-029ceee40cb5" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
diff --git a/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md b/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md
index 784f1e83..76c2ad84 100644
--- a/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md
+++ b/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md
@@ -110,7 +110,7 @@ To set the page URL:
 #### 3. Sharing deep link
 
 You can share the deep link of the current page by adding
-the [share action](/actions/actions/share/share).
+the [share action](share-action.md).
 
 To share the deep link of the current page:
 
@@ -320,7 +320,7 @@ To set the page URL:
 
 You can share the dynamic link of the current page by adding the [**Generate Current Page Link
 **](generate-current-page-link.md)
-action and then sharing it using the [**Share Action**](/actions/actions/share/share).
+action and then sharing it using the [**Share Action**](share-action.md).
 
 To share the dynamic link of the page:
 
diff --git a/docs/ff-concepts/state-management/generated-code.md b/docs/ff-concepts/state-management/generated-code.md
index fbe3e126..8679280e 100644
--- a/docs/ff-concepts/state-management/generated-code.md
+++ b/docs/ff-concepts/state-management/generated-code.md
@@ -24,13 +24,13 @@ Additionally, they provide space for action blocks, which are a set of actions t
 
 ## Page State
 
-Variables used exclusively within a page—such as a text field validator or the value of a checkbox—are stored in the Model of each page. These variables can be accessed by other component children on the same page. For instance, on a page with a form, tapping a button in one component may need to access the value of a text field in a different component.
+[Variables](../../resources/ui/pages/page-lifecycle.md) used exclusively within a page — such as a text field validator or the value of a checkbox — are stored in the `Model` of each page. These variables can be accessed by other component children on the same page. For instance, on a page with a form, tapping a button in one component may need to access the value of a text field in a different component.
 
-Variables within a page are tracked through StatefulWidgets and are encapsulated into that page’s Model.
+Variables within a page are tracked through `StatefulWidget` and are encapsulated into that page’s Model.
 
 ## Component State
 
-Similar to page state, component variables are accessible within the component where they are defined. Each component has a corresponding Model and Widget class. Variables may be passed in from their parent as parameters. Additionally, you can access component state values from its parent Page widget.
+Similar to page state, [**Component State variables**](../../resources/ui/components/custom-components/component-lifecycle.md) are accessible within the component where they are defined. Each component has a corresponding `Model` and `Widget` class. Variables may be passed in from their parent as parameters. Additionally, you can access component state values from its parent Page widget.
 
 This accessibility is possible because the Model of a component is instantiated within the parent Page model. It utilizes the Provider method `context.read()`, which returns any existing model in the tree before instantiating a new one. Thus, any updates to the state in the component model will reflect in the parent’s instance of that component model.
 
diff --git a/docs/ff-concepts/state-management/state-management.md b/docs/ff-concepts/state-management/state-management.md
index 965194e1..2b95508b 100644
--- a/docs/ff-concepts/state-management/state-management.md
+++ b/docs/ff-concepts/state-management/state-management.md
@@ -2,10 +2,12 @@
 title: State Management
 description: An overview of state management in FlutterFlow
 ---
-
+# State Management 
 State management is a crucial concept focused on maintaining and controlling the **state** of an application. Simply put, it involves monitoring the changes within your app and updating the user interface to reflect these changes. 
 
-You can think of the UI as a function of your state variables, where changes in these variables directly influence what the UI displays.
+The UI (user interface) displays information based on state variables. When these state variables change, the UI updates to reflect the changes.
+
+## State Variables
 
 In FlutterFlow, there are a few types of state variables that you can create:
 
@@ -15,27 +17,35 @@ In FlutterFlow, there are a few types of state variables that you can create:
 </figure>
 
 
-- State variables are themselves **variables** - meaning they have a *name* and a *data type*. 
+- State variables are themselves [**variables**](../../resources/data-representation/overview.md#variable) - meaning they have a *name* and a *data type*. 
 - They also have an initial value that is set when you create the variable. 
 - Once you create a state variable, it's value can be used to change the configuration of widget properties - like any other variable. 
-- You can update the value of state variables using the *Update State Variable* action.
+- You can update the value of state variables using the **[Update State Variable](#updating-state-variables)** action.
+
+### Creating State Variables
+- To create an **App State variable**, refer to this **[guide](../../resources/data-representation/app-state.md#create-app-state-variable)**.
+- To create a **Page State variable**, refer to this [**guide**](../../resources/ui/pages/page-lifecycle.md#creating-a-page-state).
+- To create a **Component State variable**, refer to this [**guide**](../../resources/ui/components/custom-components/component-lifecycle.md#creating-a-component-state).
+
+Note: Users cannot create **widget state variables**. These are automatically exposed by FlutterFlow when a Form widget is used.
+
+
+
+### Updating State Variables
+- To update an **App State variable**, refer to this **[guide](../../resources/data-representation/app-state.md#update-app-state-action)**.
+- Refer to the [**Page Lifecycle**](../../resources/ui/pages/page-lifecycle.md) guide to learn about updating **[Page State variables](../../resources/ui/pages/page-lifecycle.md#update-page-state-action)**.
+- Refer to the [**Component Lifecycle**](../../resources/ui/components/custom-components/component-lifecycle.md) guide to learn about updating **[Component State variables](../../resources/ui/components/custom-components/component-lifecycle.md#update-component-state-action)**.
 
+<p></p>
+
+
+:::tip[Learn from video]
 You can learn more about state management from this video:
 <div class="video-container">
 <iframe src="https://www.youtube.com/embed/jD6L4xjYjJA?si=-RjniUB-K0ZsMoB1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
-
-<p></p>
-
-:::tip
-To learn more about state management in FlutterFlow, read up on 
-[**Variables**](../../resources/data-representation/overview.md#variable) and how 
-[**Page 
-State**](../../resources/ui-building-blocks/pages/page-lifecycle.md#page-state), or 
-[**Component State**](#) or [**App State variables**](#) are modified in FlutterFlow. 
 :::
 
 
 
 
-
diff --git a/docs/ff-integrations/authentication/_category_.json b/docs/ff-integrations/authentication/_category_.json
index d0d5c1d3..3eb458e5 100644
--- a/docs/ff-integrations/authentication/_category_.json
+++ b/docs/ff-integrations/authentication/_category_.json
@@ -1,4 +1,3 @@
 {
-    "label": "Authentication",
-    "position": 1
+    "label": "Authentication"
 }
\ No newline at end of file
diff --git a/docs/ff-integrations/database/cloud-firestore/firestore-actions.md b/docs/ff-integrations/database/cloud-firestore/firestore-actions.md
index 7be57f67..d95ab731 100644
--- a/docs/ff-integrations/database/cloud-firestore/firestore-actions.md
+++ b/docs/ff-integrations/database/cloud-firestore/firestore-actions.md
@@ -274,7 +274,7 @@ To do so:
 :::
 
 Here is an example showing the 
-[**Snackbar**](../../../resources/ui-building-blocks/pages/page-elements.md#show-snackbar-action)
+[**Snackbar**](../../../resources/ui/pages/page-elements.md#show-snackbar-action)
 message when the data 
 changes in a collection.
 
diff --git a/docs/ff-integrations/database/local-sql/sqlite/img.png b/docs/ff-integrations/database/local-sql/imgs/img.png
similarity index 100%
rename from docs/ff-integrations/database/local-sql/sqlite/img.png
rename to docs/ff-integrations/database/local-sql/imgs/img.png
diff --git a/docs/ff-integrations/database/local-sql/sqlite/img_1.png b/docs/ff-integrations/database/local-sql/imgs/img_1.png
similarity index 100%
rename from docs/ff-integrations/database/local-sql/sqlite/img_1.png
rename to docs/ff-integrations/database/local-sql/imgs/img_1.png
diff --git a/docs/ff-integrations/database/local-sql/sqlite/img_2.png b/docs/ff-integrations/database/local-sql/imgs/img_2.png
similarity index 100%
rename from docs/ff-integrations/database/local-sql/sqlite/img_2.png
rename to docs/ff-integrations/database/local-sql/imgs/img_2.png
diff --git a/docs/ff-integrations/database/local-sql/sqlite/img_3.png b/docs/ff-integrations/database/local-sql/imgs/img_3.png
similarity index 100%
rename from docs/ff-integrations/database/local-sql/sqlite/img_3.png
rename to docs/ff-integrations/database/local-sql/imgs/img_3.png
diff --git a/docs/ff-integrations/database/local-sql/sqlite/quickstart.md b/docs/ff-integrations/database/local-sql/quickstart.md
similarity index 95%
rename from docs/ff-integrations/database/local-sql/sqlite/quickstart.md
rename to docs/ff-integrations/database/local-sql/quickstart.md
index d21fd200..6f1e5405 100644
--- a/docs/ff-integrations/database/local-sql/sqlite/quickstart.md
+++ b/docs/ff-integrations/database/local-sql/quickstart.md
@@ -1,5 +1,5 @@
 ---
-slug: /integrations/database/sqlite/quickstart
+slug: /integrations/database/sqlite
 title: SQLIte Quickstart
 description: Learn how to quickly get started with SQLite in your FlutterFlow app for local data storage.
 tags: [FlutterFlow, SQLite, Database, Quickstart, Local Storage]
@@ -38,7 +38,7 @@ Here are the steps to build such an example:
 
 To enable SQLite in FlutterFlow, navigate to Settings and Integrations > Integrations > SQLite > switch on the **Enable SQLite** toggle.
 
-![img.png](img.png)
+![img.png](imgs/img.png)
 
 ## 2. Database configuration
 
@@ -86,7 +86,7 @@ In general, to add any query, you need to provide a name, the query statement, a
 
 * To use variables, simply use the syntax `${variableName}`. For example: `SELECT \* FROM Notes WHERE id = ${noteId}`
 * When passing string or text data in queries, enclose variables in single quotes, like `${title}`, to signify them as strings.
-![img_1.png](img_1.png)
+![img_1.png](imgs/img_1.png)
 :::
 
 Below are the queries that we'll require for this example:
@@ -154,7 +154,7 @@ com/embed/aa0bb7bea67145c8b0b61ce57485a5c2?sid=9d950aba-c498-484c-8507-c795bee74
 
 To show a list of notes, you can use the **ListView** > **Container** widgets to design a page that looks like the following:
 
-![img_2.png](img_2.png)
+![img_2.png](imgs/img_2.png)
 
 Now, on the ListView widget, add a [SQLite backend query](/data-and-backend/backend-query/sqlite-query) and display data in UI elements.
 
@@ -204,7 +204,7 @@ com/embed/bb775d5da5614117ac6fbe6542b6c29f?sid=877e565c-be16-4c77-a92c-9a6a95408
 
 For updating note values, like marking a note as completed or modifying other fields, utilize 
 the SQLite Query Action and set the type to **Update Query**. Here, set the Query Name to 
-[UpdateNote](#3-updatenote).
+[Update Note](#3-updatenote).
 
 
 
@@ -215,19 +215,19 @@ com/embed/35564ad5e8be4f58aa72527bc6818183?sid=2740d823-df42-49c3-ae54-8e0e95a72
 
 :::info
 
-* In this example, we are updating the note on a bottom sheet component. To provide a better user experience, we initially display the current values of the note, ensuring that users have a clear idea of what they are going to edit. To display the note values in bottom sheet, we [pass](../../../../ff-concepts/navigation-routing/passing-data.md) the current note with **Type** set to **SQLite Row**.
+* In this example, we are updating the note on a bottom sheet component. To provide a better user experience, we initially display the current values of the note, ensuring that users have a clear idea of what they are going to edit. To display the note values in bottom sheet, we [pass](../../../ff-concepts/navigation-routing/passing-data.md) the current note with **Type** set to **SQLite Row**.
 
-![img_3.png](img_3.png)
+![img_3.png](imgs/img_3.png)
 
 * When updating a date value, we also verify if the date has been modified. If there's no change, we simply pass back the same value we received.
 :::
 
 ## 7. Delete note
 
-You can delete an existing note from the database using the [SQLite query action](../../../../resources/control-flow/backend-logic/backend-query/sqlite-query.md) with the type set to *Update Query* and Query Name to **Delete Note**.
+You can delete an existing note from the database using the [SQLite query action](../../../resources/control-flow/backend-logic/backend-query/sqlite-query.md) with the type set to *Update Query* and Query Name to **Delete Note**.
 
 :::tip[Pro Tip] 
-To refresh the page, simply add an [**Update App State Action**](../../../../resources/data-representation/app-state.md) Action with the Update Type set 
+To refresh the page, simply add an [**Update App State Action**](../../../resources/data-representation/app-state.md) Action with the Update Type set 
 to 'Rebuild Current Page'.
 :::
 Here's how you do it:
diff --git a/docs/ff-integrations/database/local-sql/sqlite/_category_.json b/docs/ff-integrations/database/local-sql/sqlite/_category_.json
deleted file mode 100644
index 937b0023..00000000
--- a/docs/ff-integrations/database/local-sql/sqlite/_category_.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "label": "SQLite"
-}
\ No newline at end of file
diff --git a/docs/ff-integrations/database/refresh-db-request.md b/docs/ff-integrations/database/refresh-db-request.md
index f95fd92e..81582150 100644
--- a/docs/ff-integrations/database/refresh-db-request.md
+++ b/docs/ff-integrations/database/refresh-db-request.md
@@ -3,7 +3,7 @@ slug: /integrations/database/refresh-db-request
 title: Refresh DB Request Action
 description: Learn how to use the Refresh DB Request action in your FlutterFlow app to refresh your database content.
 tags: [FlutterFlow, Database, Refresh, Action]
-sidebar_position: 1
+sidebar_position: 4
 keywords: [FlutterFlow, Database, Refresh, Action]
 ---
 
diff --git a/docs/ff-integrations/database/supabase/_category_.json b/docs/ff-integrations/database/supabase/_category_.json
index 603fa9f6..84f46365 100644
--- a/docs/ff-integrations/database/supabase/_category_.json
+++ b/docs/ff-integrations/database/supabase/_category_.json
@@ -1,3 +1,4 @@
 {
-    "label": "Supabase"
+    "label": "Supabase",
+    "position": 2
 }
\ No newline at end of file
diff --git a/docs/ff-integrations/gemini/_category_.json b/docs/ff-integrations/gemini/_category_.json
index edd1d1cc..1065afcc 100644
--- a/docs/ff-integrations/gemini/_category_.json
+++ b/docs/ff-integrations/gemini/_category_.json
@@ -1,3 +1,4 @@
 {
-  "label": "Gemini"
+  "label": "Gemini",
+  "position": 3
 }
\ No newline at end of file
diff --git a/docs/ff-integrations/notifications/one-signal/one-signal.md b/docs/ff-integrations/notifications/one-signal/one-signal.md
index e4f71c17..7b10df6c 100644
--- a/docs/ff-integrations/notifications/one-signal/one-signal.md
+++ b/docs/ff-integrations/notifications/one-signal/one-signal.md
@@ -109,7 +109,7 @@ You can find out if the user was successfuly added to the subscription by naviga
 ![img_2.png](img_2.png)
 
 :::info[OneSignal for Supabase Users]
-Currently, Our OneSignal integration supports Firebase authentication. If you want to use Supabase authentication, you may need to provide custom code to notify your users for now.
+Currently, our OneSignal integration supports only Firebase authentication. If you want to use [**Supabase authentication**](../../authentication/supabase-auth/initial-setup.md), you may need to use [**custom code**](../../../ff-concepts/adding-customization/custom-code.md) to notify your users.
 :::
 
 
diff --git a/docs/ff-integrations/streaming/mux/integrate-mux.md b/docs/ff-integrations/streaming/mux/integrate-mux.md
index f1854fe5..6dcfe13e 100644
--- a/docs/ff-integrations/streaming/mux/integrate-mux.md
+++ b/docs/ff-integrations/streaming/mux/integrate-mux.md
@@ -440,7 +440,7 @@ To customize a button that allows you to start a stream:
    under the **Start Button Style** section.
 
 3. To change the button's text, open the **Start Button Text** section and set the **Text**. You can
-   also [customize the text](../../../resources/ui-building-blocks/widgets/widget-commonalities.md#styling-text) if
+   also [customize the text](../../../resources/ui/widgets/widget-commonalities.md#styling-text) if
    needed.
 
 4. To change the button's icon, open the **Start Button Icon** section and select the new icon. You
@@ -504,7 +504,7 @@ screen).
 To customize the duration indicator:
 
 1. Open the **Duration Text Style** section
-   and [change its text style](../../../resources/ui-building-blocks/widgets/widget-commonalities.md#styling-text).
+   and [change its text style](../../../resources/ui/widgets/widget-commonalities.md#styling-text).
 2. To change the indicator appearance, open the **Duration Container** section and use the property
     such as **Background Color** and **Border Radius**.
 
diff --git a/docs/ff-integrations/supabase/supabase-setup.md b/docs/ff-integrations/supabase/supabase-setup.md
index 0e22f624..3664fb19 100644
--- a/docs/ff-integrations/supabase/supabase-setup.md
+++ b/docs/ff-integrations/supabase/supabase-setup.md
@@ -1,6 +1,6 @@
 ---
 slug: /integrations/supabase/setup
-title: SupabaseSetup
+title: Supabase Setup
 description: Learn how to set up Supabase in your FlutterFlow app for database and authentication functionalities.
 tags: [Supabase, Setup, Integration]
 sidebar_position: 1
@@ -16,7 +16,7 @@ use in FlutterFlow. With this integration, you can authenticate users and store
 Follow the steps below to setup the Supabase:
 ## Create Keys
 
-- Create a new **Supabase account** from [here](https://app.supabase.com/sign-up). If you already 
+- Create a new [**Supabase account**](https://app.supabase.com/sign-up). If you already 
 have an account, [login](https://app.supabase.com/sign-in).
 
 - To use Supabase with your FlutterFlow project, you'll need to create a project in Supabase 
diff --git a/docs/index.md b/docs/index.md
index beb81828..bcabc703 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,9 +1,8 @@
 ---
-title: FlutterFlow Documentation
+title: Getting Started
 custom_edit_url: null
 showLastUpdateTime: false
 hide_title: true
-sidebar_label: Overview
 slug: /
 hide_table_of_contents: true
 ---
diff --git a/docs/intro/before-you-begin/setting-up-flutterflow.md b/docs/intro/before-you-begin/setting-up-flutterflow.md
index 12b53493..d3716688 100644
--- a/docs/intro/before-you-begin/setting-up-flutterflow.md
+++ b/docs/intro/before-you-begin/setting-up-flutterflow.md
@@ -8,7 +8,7 @@ description: Ensure you meet system requirements and grasp technical concepts fo
 
 Create your free account to get started with FlutterFlow. After you've set up your account, you'll be able to create as many projects as you like.
 
-You can [sign up](https://app.flutterflow.io/create-account) via Apple, Google, or Github.
+You can [**sign up**](https://app.flutterflow.io/create-account) via Apple, Google, or Github.
 
 ## System Requirements
 
@@ -20,7 +20,9 @@ The FlutterFlow application can be accessed from your browser or installed as a
 ### Browser recommendations:
 - FlutterFlow works best on **Google Chrome** 
 - We recommend keeping your browser up-to-date, specifically within the latest two versions
-- You should [allow pop-up and redirects and ClipBoard](/troubleshooting/miscellaneous#i-cant-copy-paste-widgets.) from app.flutterflow.io.
+- You should allow pop-up and redirects and ClipBoard from _app.flutterflow.io_.
+
+<!---link to /troubleshooting/miscellaneous#i-cant-copy-paste-widgets-->
 
 ### Desktop recommendations:
 - **macOS**: While FlutterFlow should work on 10.13 or higher, we recommend using 13 or higher
@@ -29,7 +31,7 @@ The FlutterFlow application can be accessed from your browser or installed as a
 For details on target platform system requirements, please see the [Flutter documentation](https://docs.flutter.dev/reference/supported-platforms).
 
 ### Desktop vs Web:
-We recommend using the desktop application for improved performance and access to features like [local run](TOD0). 
+We recommend using the desktop application for improved performance and access to features like [**local run**](../../testing-deployment-publishing/running-your-app/local-run.md). 
 
 However, our desktop applications are currently in a preview phase, which may result in some instability. 
 
diff --git a/docs/intro/ff-ui/builder.md b/docs/intro/ff-ui/builder.md
index 40eb9cad..08a6998d 100644
--- a/docs/intro/ff-ui/builder.md
+++ b/docs/intro/ff-ui/builder.md
@@ -28,7 +28,7 @@ Here is a list of all the features accessible from the navigation menu:
 5. **Storyboard**: Visualize app's design and navigation.
 6. **Firestore**: Create collections and adjust Firestore-related settings.
 7. **Data Types**: Create custom data types for your app.
-8. **App Values**: Manage App State variables and Constants.
+8. **App Values**: Manage [App State variables](../../resources/data-representation/app-state.md) and Constants.
 9. **API Calls**: Define API calls.
 10. **Media Assets**: Upload assets for your app and team.
 11. **Custom Functions**: Add custom functionalities, widgets, and actions.
diff --git a/docs/intro/ff-ui/resource-hierarchy.md b/docs/intro/ff-ui/resource-hierarchy.md
index 6b434271..7abed7fb 100644
--- a/docs/intro/ff-ui/resource-hierarchy.md
+++ b/docs/intro/ff-ui/resource-hierarchy.md
@@ -19,8 +19,8 @@ The diagram below illustrates how a FlutterFlow app is structured.
 ![FlutterFlow app part.avif](imgs/ff-app-part.avif)
 
 1. **Project**: Represents the overall application you are building in FlutterFlow. It encompasses all the other elements listed below and serves as the container for your entire app development effort within FlutterFlow. Learn more about creating a project [here](../../resources/projects/how-to-create-find-organize-projects#how-to-create-a-project).
-2. **Page**: Refers to individual screens within the FlutterFlow project. Each page represents a part of the user interface where users can interact with the app. Multiple pages collectively make up the complete user interface of your application. Learn more about pages in FlutterFlow [here](../../resources/ui-building-blocks/pages/pages#creating-a-page).
-3. **Built-in-widgets**: These are pre-designed widgets provided by FlutterFlow that you can use to build your app’s user interface. Built-in widgets simplify the development process by offering common UI elements such as buttons, text fields, sliders, etc. Learn more about widgets [here](../../resources/ui-building-blocks/overview#widgets).
+2. **Page**: Refers to individual screens within the FlutterFlow project. Each page represents a part of the user interface where users can interact with the app. Multiple pages collectively make up the complete user interface of your application. Learn more about pages in FlutterFlow [here](../../resources/ui/pages/pages#creating-a-page).
+3. **Built-in-widgets**: These are pre-designed widgets provided by FlutterFlow that you can use to build your app’s user interface. Built-in widgets simplify the development process by offering common UI elements such as buttons, text fields, sliders, etc. Learn more about widgets [here](../../resources/ui/overview#widgets).
 4. **Component**: A component in FlutterFlow is a reusable UI block that can be used across different pages within the project. Components are useful for maintaining consistency and reducing redundancy in the app design, as the same component (like a custom dialog box) can be inserted wherever needed. Learn more about creating a component [here](#).
 5. **Design System**: This refers to a set of standards for design within your FlutterFlow project. A design system in FlutterFlow includes predefined styles that ensure visual consistency throughout the app. Learn more about design system [here](#).
 
@@ -31,7 +31,7 @@ If you are coming from Flutter, it is beneficial for you to understand the Flutt
 ![Flutter to FlutterFlow app parts](imgs/flutter-to-flutterflow.avif)
 
 1. **MyApp to Project**: In Flutter, `MyApp` typically represents the root of your application, where you set up routes and other global configurations. In FlutterFlow, the equivalent is the "Project," which encompasses the entire application you are building, including its configurations and settings. Learn more about creating a project [here](../../resources/projects/how-to-create-find-organize-projects#how-to-create-a-project).
-2. **MyPage to Page**: `MyPage` in Flutter represents a specific screen in the app. Similarly, In FlutterFlow, each "Page" corresponds to a screen, where you build the layout and functionality specific to that page of the project. Learn more about pages in FlutterFlow [here](../../resources/ui-building-blocks/pages/pages#creating-a-page).
-3. **Column, Button, Text to Built-in widgets**: In FlutterFlow, widgets are categorized under "Built-in widgets," which users can drag and drop onto their canvas to build the UI. Learn more about widgets [here](../../resources/ui-building-blocks/overview#widgets).
+2. **MyPage to Page**: `MyPage` in Flutter represents a specific screen in the app. Similarly, In FlutterFlow, each "Page" corresponds to a screen, where you build the layout and functionality specific to that page of the project. Learn more about pages in FlutterFlow [here](../../resources/ui/pages/pages#creating-a-page).
+3. **Column, Button, Text to Built-in widgets**: In FlutterFlow, widgets are categorized under "Built-in widgets," which users can drag and drop onto their canvas to build the UI. Learn more about widgets [here](../../resources/ui/overview#widgets).
 4. **Custom widget to Component**: `CustomWidget` in Flutter indicates user-defined widgets that serve specific functions not covered by built-in widgets. FlutterFlow translates this into "Component" allowing you to create and use custom components within your projects. Learn more about creating a component [here](#).
 5. **Theme/style constants to Design System**: In Flutter, theme and style constants are used to ensure consistent styling across an app. FlutterFlow uses a "Design System" to manage and apply uniform styles and themes throughout the application. Learn more about design system [here](#).
\ No newline at end of file
diff --git a/docs/intro/ff-ui/widget-palette.md b/docs/intro/ff-ui/widget-palette.md
index 45c01b6f..65a917ca 100644
--- a/docs/intro/ff-ui/widget-palette.md
+++ b/docs/intro/ff-ui/widget-palette.md
@@ -19,7 +19,7 @@ From the Widgets tab, you can access all standard FlutterFlow widgets. They are
 
 ## 2. Components
 
-Components are widgets with certain functionalities that can be reused throughout your app. They are constructed from either standard or custom widgets. Once you have created a [component](../../resources/ui-building-blocks/components/user-defined-components/getting-started.md) or [custom widget](../../ff-concepts/adding-customization/custom-widgets.md), you can access it from here.
+Components are widgets with certain functionalities that can be reused throughout your app. They are constructed from either standard or custom widgets. Once you have created a [component](../../resources/ui/components/custom-components/getting-started.md) or [custom widget](../../ff-concepts/adding-customization/custom-widgets.md), you can access it from here.
 
 ## 3. Templates
 
diff --git a/docs/intro/quickstart.md b/docs/intro/quickstart.md
index c8bcfdfb..38965f70 100644
--- a/docs/intro/quickstart.md
+++ b/docs/intro/quickstart.md
@@ -25,15 +25,15 @@ Below is a preview of what your app will look like once completed:
 <br/>
 The steps to build the app are as follows:
 
-1. [Clone or create project](#clone-project)
+1. [Clone or create project](#1-clone-or-create-project)
 2. [Building UI](#build-ui)
 3. [Customize style](#customize-style)
 4. [Manage state](#manage-state)
 5. [Run the app](#run-app)
 
-## 1. Clone or create project {#clone-project}
+## 1. Clone or create project
 
-To kick off your project, the first step is to [create a new project](#). However, to make things easier, we've already created a starter app for you. Simply open [this link](https://app.flutterflow.io/project/f-f-quick-start-app-umu392), click the '**Clone**' button, and the project will be instantly added to your account. 
+To kick off your project, the first step is to [create a new project](../resources/projects/how-to-create-find-organize-projects.md#how-to-create-a-project). However, to make things easier, we've already created a starter app for you. Simply open [this link](https://app.flutterflow.io/project/f-f-quick-start-app-umu392), click the '**Clone**' button, and the project will be instantly added to your account. 
 
 ![clone-project.png](clone-project.png)
 
@@ -115,7 +115,7 @@ Once your UI is set up, it's time to make your app interactive by adding a state
 
 ### 4.1 Add state variable
 
-We can achieve this behavior by adding state variables. A state variable stores data that can change over time. For this specific use case, let's add a [page state variable](#) that will hold the current quantity value. When a user interacts with the buttons, we update this variable, which in turn updates the UI.
+We can achieve this behavior by adding state variables. A state variable stores data that can change over time. For this specific use case, let's add a [page state variable](../resources/ui/pages/page-lifecycle.md) that will hold the current quantity value. When a user interacts with the buttons, we update this variable, which in turn updates the UI.
 
 Here's how to add and use state variables:
 
@@ -147,7 +147,7 @@ Here's how to add and use state variables:
 
 ### 4.2 Update state variable
 
-To update the state variable, we will need to add actions. Actions are essentially functions that are triggered by the user's interaction, in this case, by clicking either the "Increase" or "Decrease" buttons. You can add actions to your buttons via the [actions panel](#). 
+To update the state variable, we will need to add actions. Actions are essentially functions that are triggered by the user's interaction, in this case, by clicking either the "Increase" or "Decrease" buttons. You can add actions to your buttons via the [Actions Panel](../resources/control-flow/functions/action-flow-editor.md). 
 
 Here's how to add actions to your buttons and update the state variable:
 
@@ -179,7 +179,7 @@ Here's how to add actions to your buttons and update the state variable:
 
 ## 5. Run the App {#run-app}
 
-Now that you've built and customized your app, it's time to run it. FlutterFlow allows you to test a fully-functional version of your app in [Test](#) and [Run](#) mode. The Run mode requires 2-4 minutes (or more, depending on the size of your project). However, to see your changes immediately, you can run your app in a Test mode that uses Flutter's "[Hot Reload](#)" feature.
+Now that you've built and customized your app, it's time to run it. FlutterFlow allows you to test a fully-functional version of your app in [**Test**](../testing-deployment-publishing/running-your-app/run-your-app.md#test-mode) and [**Run**](../testing-deployment-publishing/running-your-app/run-your-app.md#run-mode) mode. The Run mode requires 2-4 minutes (or more, depending on the size of your project). However, to see your changes immediately, you can run your app in a Test mode that uses Flutter's "[**Hot Reload**](https://docs.flutter.dev/tools/hot-reload)" feature.
 
 <div style={{
     position: 'relative',
@@ -211,4 +211,6 @@ Congratulations! You've built your first app with FlutterFlow.
 
 ## **Problems?**
 
-If you're experiencing any issues with the app, ensure that you have followed the instructions correctly. For troubleshooting, refer to our [comprehensive guide](#) or seek assistance from the [Community Forum](https://flutterflow.bettermode.io/). If you're still encountering problems, don't hesitate to report the issue to our support team.
\ No newline at end of file
+If you're experiencing any issues with the app, ensure that you have followed the instructions correctly. 
+<!-- For troubleshooting, refer to our [comprehensive guide](#) or -->
+To seek assistance from the [Community Forum](https://community.flutterflow.io/). If you're still encountering problems, don't hesitate to report the issue to our support team.
\ No newline at end of file
diff --git a/docs/resources/control-flow/backend-logic/api/streaming-api.md b/docs/resources/control-flow/backend-logic/api/streaming-api.md
index 2f560ff6..e2ad99ed 100644
--- a/docs/resources/control-flow/backend-logic/api/streaming-api.md
+++ b/docs/resources/control-flow/backend-logic/api/streaming-api.md
@@ -99,7 +99,7 @@ The steps to build the app are as follows:
 
 The user interface includes a section for the average rating, and number of reviews, followed by a detailed summary of the reviews including pros, cons, and sentiment distribution visualization. Here are key widgets to build the page:
 
-* [**Text Widget**](../../../../resources/ui-building-blocks/widgets/built-in-widgets/text.md): 
+* [**Text Widget**](../../../ui/widgets/built-in-widgets/text.md): 
   Displays 
   the AI-generated summary of the reviews and a list of the positive and negative points mentioned in the reviews.
 * [**Chart (Bar chart) Widget**](/widgets-and-components/widgets/base-elements/chart/bar-chart): Visual representation of the sentiment distribution (positive, neutral, negative) in a bar chart.
diff --git a/docs/resources/control-flow/backend-logic/backend-query/algolia-search-query.md b/docs/resources/control-flow/backend-logic/backend-query/algolia-search-query.md
index ebc0ab42..31edc01d 100644
--- a/docs/resources/control-flow/backend-logic/backend-query/algolia-search-query.md
+++ b/docs/resources/control-flow/backend-logic/backend-query/algolia-search-query.md
@@ -31,8 +31,7 @@ You will need a text to be used as the **search term** while using the Algolia s
 
 Follow the steps below to create this UI:
 
-1. Drag a TextField widget from the [Widget Panel]
-(/getting-started/ui-builder/navigation-menu/widget-and-component-panel) and drop it onto the canvas. (In the demo below, the TextField is placed inside the AppBar of the app).
+1. Drag a TextField widget from the [Widget Panel](/getting-started/ui-builder/navigation-menu/widget-and-component-panel) and drop it onto the canvas. (In the demo below, the TextField is placed inside the AppBar of the app).
 2. You can customize the TextField properties to match your app's design style. Add a search Icon to signify that it's a search field.
 3. Check the **Update Page On Change** checkbox. This helps to update the page as the user types inside the TextField. This would be required to use the latest text field value as the search term.
 4. Set an **Update Delay** (in milliseconds). This specifies the amount of time after the user stops typing to update the page.
diff --git a/docs/resources/control-flow/backend-logic/backend-query/backend-query.md b/docs/resources/control-flow/backend-logic/backend-query/backend-query.md
index dcd00259..a932a308 100644
--- a/docs/resources/control-flow/backend-logic/backend-query/backend-query.md
+++ b/docs/resources/control-flow/backend-logic/backend-query/backend-query.md
@@ -75,9 +75,9 @@ To change the loading indicator:
 
 1. Ensure you have added a backend query.
 2. Open the **Backend Query** section (on the right side) and scroll down to the **Backend Query Loading Widget**. Open it by clicking on the arrow icon.
-3. Set the **Loading Widget Type** to **Image**. You can also choose a [**Component**](../../../../resources/ui-building-blocks/components/user-defined-components/getting-started.md) if you have already designed a loading component.
+3. Set the **Loading Widget Type** to **Image**. You can also choose a [**Component**](../../../ui/components/custom-components/getting-started.md) if you have already designed a loading component.
 4. Enable the **View in UI Builder**. This allows you to see your custom loading indicator on canvas (before you actually run the app).
-5. Choose the **Image Type**, [add the image](../../../../resources/ui-building-blocks/widgets/built-in-widgets/image.md#image-type), and adjust its **Padding** and **Width**.
+5. Choose the **Image Type**, [add the image](../../../ui/widgets/built-in-widgets/image.md#image-type), and adjust its **Padding** and **Width**.
 6. To show the indicator in the center, turn on the **Center Image** toggle.
 7. Run the app, and your custom loading indicator will appear while the data is being loaded.
 
@@ -239,7 +239,7 @@ page is loaded) and set the *isCacheOverride* variable accordingly. Here is how
     1. First, check if the *lastCacheTime* is set or not. If not, set the current time to it.
     2. Then the idea is to create one custom action that checks if the current time is more than 30 minutes ahead of the *lastCacheTime*. **Note** that 30 minutes is the cache expiration time, and here, it is kept minimum just for simplification purposes; It's important to carefully choose the appropriate expiration time for your cache based on the nature of your data.
     3. if **True** :
-        1. [Update](/actions/actions/state-management/update-app-state) the **lastCacheTime** with 
+        1. [Update](../../../../resources/data-representation/app-state.md#update-app-state-action) the **lastCacheTime** with 
        the current time and **isCacheOverride** to True. Make sure you keep the **Update Type** to **Rebuild Current Page** so that the backend query is made again, which will invalidate the cache and display updated data.
         2. You can also add an action to [Clear Query Cache](/actions/actions/state-management/clear-query-cache).
         3. Continuing the same action flow, [wait](../../../../resources/control-flow/time-based-logic/wait-action.md) for 1 sec and again update **isCacheOverride** to **False** so that the cached result won't override on page load for the next 30 min.
diff --git a/docs/resources/control-flow/concepts.md b/docs/resources/control-flow/concepts.md
index ae59b256..e3e6e0b3 100644
--- a/docs/resources/control-flow/concepts.md
+++ b/docs/resources/control-flow/concepts.md
@@ -91,7 +91,7 @@ In FlutterFlow, you can implement conditional logic in two primary ways:
   Example: If the user clicks a button and a form is valid, navigate to the next screen; otherwise, show an error message.
 
 :::info 
-Check out the [**complete guide**](functions/conditional-logic.md) here. Are you looking to learn about implementing conditional UI instead? Check out our **[Responsiveness 101](#)** guide instead. 
+Check out the [**complete guide**](functions/conditional-logic.md) here. Are you looking to learn about implementing conditional UI instead? Check out our **[Responsiveness 101](../../ff-concepts/layout/responsive-layout.md)** guide instead. 
 :::
 
 ## Sequential vs Parallel Logic Flow
diff --git a/docs/resources/control-flow/functions/action-blocks.md b/docs/resources/control-flow/functions/action-blocks.md
index eef77e4c..8b894559 100644
--- a/docs/resources/control-flow/functions/action-blocks.md
+++ b/docs/resources/control-flow/functions/action-blocks.md
@@ -13,7 +13,7 @@ Action Blocks have different scopes, which determine their availability:
 | **Action Block Type**            | **Description**                                                                                                                                                          | **Scope**                                                                                                                                                     |
 |----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | **App Level Action Blocks**      | Usable across the entire app. You can create an App Level Action Block from any page or component, and it will be accessible for viewing or editing from any page or component as well. | Internally, an App Level Action Block can only access the state variables available in its scope (e.g., app state variables).                                  |
-| **Page Level Action Blocks**     | Restricted to the page in which they were created. These can access the state variables available in their scope, such as page state variables, as well as variables above their scope, such as App State variables. | Page Level Action Blocks can access page state variables and App State variables.                                                                              |
+| **Page Level Action Blocks**     | Restricted to the page in which they were created. These can access the state variables available in their scope, such as page state variables, as well as variables above their scope, such as [App State variables](../../../resources/data-representation/app-state.md). | Page Level Action Blocks can access page state variables and App State variables.                                                                              |
 | **Component Level Action Blocks**| Restricted to the component in which they were created. These can access the state variables available in their scope, such as component state variables, as well as variables from higher scopes, like page and App State variables. | Component Level Action Blocks can access component state variables, page state variables, and App State variables.                                             |
 
 
diff --git a/docs/resources/control-flow/user-interactivity/forms/form-validation.md b/docs/resources/control-flow/user-interactivity/forms/form-validation.md
index cdf48b2f..9176fd26 100644
--- a/docs/resources/control-flow/user-interactivity/forms/form-validation.md
+++ b/docs/resources/control-flow/user-interactivity/forms/form-validation.md
@@ -57,7 +57,7 @@ A form widget can only validate if there are any input fields. Here's an example
 1. First, add the **Form** widget itself from the **Form Elements**.
 2. Inside the form, add the **Column** widget from the **Layout Elements** tab.
 3. Now, add two [**TextFields**](form-widgets/text-field.md) (one for email and one for password).
-4. Add a [**Button**](../../../../resources/ui-building-blocks/widgets/built-in-widgets/button) widget and then add [Date/Time Picker](#) action to get the date of birth.
+4. Add a [**Button**](../../../ui/widgets/built-in-widgets/button) widget and then add [Date/Time Picker](#) action to get the date of birth.
 5. Add one more **Button** to validate and submit the form.
 
 Here's how it looks:
diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md
index 1bc7cc5c..730142d2 100644
--- a/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md
+++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md
@@ -265,5 +265,5 @@ To customize the checkbox border:
 <p></p>
 
 :::info[Trigger action on change]
-See how to [**trigger an action when a selection changes**](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
+See how to [**trigger an action when a selection changes**](../../../../ui/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
 :::
\ No newline at end of file
diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md
index 81cfd78a..cf846baf 100644
--- a/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md
+++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md
@@ -45,7 +45,7 @@ Let's see how to add a *DropDown* widget and build an example that shows the sel
 
 1. Add the **DropDown** widget, move to the **Properties Panel > Define Options >** click **Add Options** to add items.
 2. To display the default value, move to the **Initial Configuration** section and enter the value. Ensure it matches one of the options added in the previous step.
-3. The selected dropdown value can be accessed via *Widget State > DropDown*. To display it on the *Text* widget, add a [**Text**](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/text) widget, move to the properties panel, click on **Set from Variable** and choose the **Widget State > DropDown** (i.e., name of your dropdown).
+3. The selected dropdown value can be accessed via *Widget State > DropDown*. To display it on the *Text* widget, add a [**Text**](../../../../ui/widgets/built-in-widgets/text) widget, move to the properties panel, click on **Set from Variable** and choose the **Widget State > DropDown** (i.e., name of your dropdown).
 
 <div style={{
     position: 'relative',
@@ -116,7 +116,7 @@ To set an initial value:
 
 You might want to save the dropdown value as soon as the selection changes. This approach is useful when you want to ensure that the user's selection is immediately saved without having to wait for them to submit the form. By doing so, you can provide a better user experience and reduce the risk of data loss in case of any interruption.
 
-You can do so by adding an action such as [update app state](../../../../../resources/data-representation/app-state#update-app-state-variable), [update Firestore record](../../../../../integrations/database/cloud-firestore/firestore-actions#update-document-action) that [triggers when a selection changes](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
+You can do so by adding an action such as [update app state](../../../../../resources/data-representation/app-state.md#update-app-state-action), [update Firestore record](../../../../../integrations/database/cloud-firestore/firestore-actions#update-document-action) that [triggers when a selection changes](../../../../ui/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
 
 ![Saving *DropDown* value on selection change](../../imgs/saving-dp-value-on-selection-change.webp)
 
@@ -364,7 +364,7 @@ The higher value draws the bigger size of the shadow.
 
 ### Adding border
 
-See how to [add a border](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#adding-border).
+See how to [add a border](../../../../ui/widgets/widget-commonalities#adding-border).
 
 ### Show/hide underline
 
@@ -403,5 +403,5 @@ By default, the dropdown options are displayed over/above the dropdown button. T
 ![Fix position for dropdown options](../../imgs/fix-position.webp)
 
 :::info[Trigger action on change]
-See how to [**trigger an action when a selection changes**](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
+See how to [**trigger an action when a selection changes**](../../../../ui/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
 :::
\ No newline at end of file
diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md
index c3c3fbb4..b880fdad 100644
--- a/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md
+++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md
@@ -229,7 +229,7 @@ For simplification purposes, the selected option is shown in the Text widget. In
 
 To retrieve the user's selection:
 
-1. Add the [**Text**](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/text/) widget to your page.
+1. Add the [**Text**](../../../../ui/widgets/built-in-widgets/text/) widget to your page.
 2. Move to property editor and click on the **Set from Variable** text. (This will open a new panel)
 3. Set the **Source** to **Widget State**.
 4. Set the **Available Options** to **RadioButton**.
@@ -487,5 +487,5 @@ To change the color of selected and unselected options:
 
 
 :::info[Trigger action on change]
-See how to [**trigger an action when a selection changes**](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
+See how to [**trigger an action when a selection changes**](../../../../ui/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
 :::
\ No newline at end of file
diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md
index 05753504..edf77f52 100644
--- a/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md
+++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md
@@ -46,7 +46,7 @@ Let's see how to add a TextField widget and see an example of displaying its val
 Here are the steps:
 
 1. First, add the TextField widget, move to the properties panel and give it a name.
-2. Add the [**Button**](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/button) widget and on tap of it, add an [Alert Dialog action](#). While adding this action, provide the Message **From Variable > Widget State > [TextFieldName]**.
+2. Add the [**Button**](../../../../ui/widgets/built-in-widgets/button) widget and on tap of it, add an [Alert Dialog action](#). While adding this action, provide the Message **From Variable > Widget State > [TextFieldName]**.
 
 <div style={{
     position: 'relative',
@@ -307,7 +307,7 @@ To reduce TextField's height to as minimum as possible, select the TextField wid
 
 ### Changing error message styling
 
-You can also change the text styling for the error message. To do so, head over to **Properties Panel > Input Decoration Properties >** enable **Custom Error Style** and [change the text styling](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/text.md#common-text-styling-properties).
+You can also change the text styling for the error message. To do so, head over to **Properties Panel > Input Decoration Properties >** enable **Custom Error Style** and [change the text styling](../../../../ui/widgets/built-in-widgets/text.md#common-text-styling-properties).
 
 ![changing-error-message-styling](../../imgs/changing-error-message-styling.avif)
 
@@ -317,7 +317,7 @@ You might want to add an icon inside the TextField, either at the start or end.
 
 To add a leading or trailing icon, move to the **Properties Panel >** find the **Leading** and **Trailing Icon** property > Click on the **None** button **>** search and select the icon.
 
-You can also [customize the icon's size and color](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/icons#common-icon-properties).
+You can also [customize the icon's size and color](../../../../ui/widgets/built-in-widgets/icons#common-icon-properties).
 
 ![adding-icon](../../imgs/adding-icon.avif)
 
@@ -832,7 +832,7 @@ Let's see an example of controlling the visibility of a Text widget based on the
 
 To do so:
 
-1. On a Text widget, add a [Conditional Visibility](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#conditional) based on the TextField's Focus state. You can access via **Set from Variable** menu **> Widget Focus State > [TextField name]**.
+1. On a Text widget, add a [Conditional Visibility](../../../../ui/widgets/widget-commonalities#conditional) based on the TextField's Focus state. You can access via **Set from Variable** menu **> Widget Focus State > [TextField name]**.
 2. Now, on a TextField widget, under the [On Focus Change](#trigger-action--listen-callback) callback, simply add an action to refresh the page by adding the update app state variable.
 
 <div style={{
diff --git a/docs/resources/data-representation/app-state.md b/docs/resources/data-representation/app-state.md
index 85fe2c05..1c143453 100644
--- a/docs/resources/data-representation/app-state.md
+++ b/docs/resources/data-representation/app-state.md
@@ -18,11 +18,11 @@ App state variables should be used in scenarios where the same data needs to be
 
 App state variables should not be used for temporary data that doesn't impact the overall state of the application. For instance, a user's temporary input in a form should not be stored in an app state variable. It would be more appropriate to use a [page state](#) or [component state](#) variable instead.
 
-## Working with App State Variables
+## App State Variables
 
 Let’s see how you can manage the app state variable using an example of adding items to a cart in a shopping app. 
 
-### Create app state variable
+### Create App State variable
 
 Head over to the left-side navigation menu and follow the steps below to create a variable.
 
@@ -51,9 +51,38 @@ Head over to the left-side navigation menu and follow the steps below to create
         allow="clipboard-write">
     </iframe>
 </div>
-### Update app state variable
 
-To update the app state variable, we need to add an action to the 'Add to Bag' button. Within this action, we'll provide the product details and configure it to add to the current cart list.
+#### App State Properties
+
+- **isList:** Whether this field is a list type (e.g List of String or List of Custom Data Type)
+- **Persisted:** Whether this app state is saved to disk so that it can be loaded when the app is restarted. Otherwise the field will be reset on restart.
+ 
+:::tip[Generated Code]
+  Curious about what happens when the **Persisted** toggle is on? Check out the [**Generated Code**](../../ff-concepts/state-management/generated-code.md#persisting-app-state) guide.
+ :::
+
+
+### Use App State
+
+The variable can now be accessed via set from variable menu. For example, on the cart page, you can loop through the app state variable to display each item.
+
+![access-app-state-variable.avif](../imgs/access-app-state-variable.avif)
+
+### Update App State [Action]
+
+You can update an app state from the Actions Panel anywhere in the app, whether it's on tap of a widget in a component or page, or via custom code in FlutterFlow.
+
+When you update the app state via the Action Flow Editor, you will find the following options in the Action Settings.
+![update-app-state-action.png](..%2Fimgs%2Fupdate-app-state-action.png)
+
+#### Update Type
+How this app state update will affect your app.
+
+- **Rebuild All Pages:** Rebuilds all pages in the app when this app state is updated. 
+- **Rebuild Current Page:** Rebuilds only the current page when this app state is updated. 
+- **No Rebuild:** No rebuild is required. 
+
+Here's a quick guide to updating the app state variable. We need to add an action to the 'Add to Bag' button. Within this action, we'll provide the product details and configure it to add to the current cart list.
 
 <div style={{
     position: 'relative',
@@ -81,8 +110,3 @@ To update the app state variable, we need to add an action to the 'Add to Bag' b
     </iframe>
 </div>
 
-### Use app state variable
-
-The variable can now be accessed via set from variable menu. For example, on the cart page, you can loop through the app state variable to display each item.
-
-![access-app-state-variable.avif](../imgs/access-app-state-variable.avif)
\ No newline at end of file
diff --git a/docs/resources/data-representation/global-properties.md b/docs/resources/data-representation/global-properties.md
index 6f8a1f48..9ea4a971 100644
--- a/docs/resources/data-representation/global-properties.md
+++ b/docs/resources/data-representation/global-properties.md
@@ -39,4 +39,9 @@ A list of all the available global properties is as follows:
 - **Is Debug Mode:** Indicates if the app is currently running in debug mode, useful for displaying features or performing actions only during debugging.
 - **Is Dark Mode:** Checks if the app's current theme mode is set to dark.
 - **Is Light Mode:** Checks if the app's current theme mode is set to light.
-- **Is On-Screen Keyboard Visible:** Checks if the on-screen or soft keyboard is visible. This is helpful in making UI adjustments if keyboard is visible on screen.
\ No newline at end of file
+- **Is On-Screen Keyboard Visible:** Checks if the on-screen or soft keyboard is visible. This is helpful in making UI adjustments if keyboard is visible on screen.
+
+
+:::tip[Generated Code]
+Learn more about the [**Generated Code**](../../ff-concepts/state-management/generated-code.md#global-state) behind Global Properties.
+:::
\ No newline at end of file
diff --git a/docs/resources/data-representation/overview.md b/docs/resources/data-representation/overview.md
index d6f124d5..bfae2444 100644
--- a/docs/resources/data-representation/overview.md
+++ b/docs/resources/data-representation/overview.md
@@ -35,9 +35,9 @@ Learn more about creating [app state variables](app-state), [page state variable
 You can set the value of variables using [actions](#) in FlutterFlow. For instance, when a button is clicked, you can set a variable to a certain value. Variables can be accessed to control the behavior of UI components, such as visibility, text content, and styling. For example, a text widget can display the value of a variable.
 
 Here are examples of setting and using an app state variable ([update]
-(app-state#update-app-state-variable) and [use](app-state#use-app-state-variable)), as well as a 
-page state variable ([set](../ui-building-blocks/pages/page-lifecycle.md#creating-a-page-state) 
-and [use](../ui-building-blocks/pages/page-lifecycle.md#get-page-state-value)).
+(app-state#update-app-state-variable) and [use](app-state#use-app-state)), as well as a 
+page state variable ([set](../ui/pages/page-lifecycle.md#creating-a-page-state) 
+and [use](../ui/pages/page-lifecycle.md#get-page-state-value)).
 
 ## Data types
 
diff --git a/docs/resources/imgs/update-app-state-action.png b/docs/resources/imgs/update-app-state-action.png
new file mode 100644
index 00000000..f96f27f5
Binary files /dev/null and b/docs/resources/imgs/update-app-state-action.png differ
diff --git a/docs/resources/ui-building-blocks/_category_.json b/docs/resources/ui/_category_.json
similarity index 100%
rename from docs/resources/ui-building-blocks/_category_.json
rename to docs/resources/ui/_category_.json
diff --git a/docs/resources/ui-building-blocks/components/_category_.json b/docs/resources/ui/components/_category_.json
similarity index 100%
rename from docs/resources/ui-building-blocks/components/_category_.json
rename to docs/resources/ui/components/_category_.json
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/_category_.json b/docs/resources/ui/components/built-in-components/_category_.json
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/_category_.json
rename to docs/resources/ui/components/built-in-components/_category_.json
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/badge.md b/docs/resources/ui/components/built-in-components/badge.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/badge.md
rename to docs/resources/ui/components/built-in-components/badge.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/barcode.md b/docs/resources/ui/components/built-in-components/barcode.md
similarity index 96%
rename from docs/resources/ui-building-blocks/components/built-in-components/barcode.md
rename to docs/resources/ui/components/built-in-components/barcode.md
index 5e8b40ac..abe4a09b 100644
--- a/docs/resources/ui-building-blocks/components/built-in-components/barcode.md
+++ b/docs/resources/ui/components/built-in-components/barcode.md
@@ -86,7 +86,7 @@ To change the size of the barcode widget, select the **Barcode** widget, move to
 
 ### Changing color
 
-To change barcode colors, select the **Barcode** widget, move to the properties panel, and [change the colors](../../../../resources/ui-building-blocks/widgets/widget-commonalities.md#change-color) for the following properties:
+To change barcode colors, select the **Barcode** widget, move to the properties panel, and [change the colors](../../widgets/widget-commonalities.md#change-color) for the following properties:
 
 * **Foreground Color**: This sets the line or pattern color.
 * **Background Color**: This sets the background color behind the line or pattern.
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/calendar.md b/docs/resources/ui/components/built-in-components/calendar.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/calendar.md
rename to docs/resources/ui/components/built-in-components/calendar.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/carousel.md b/docs/resources/ui/components/built-in-components/carousel.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/carousel.md
rename to docs/resources/ui/components/built-in-components/carousel.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/chart/_category_.json b/docs/resources/ui/components/built-in-components/chart/_category_.json
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/chart/_category_.json
rename to docs/resources/ui/components/built-in-components/chart/_category_.json
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/chart/bar-chart.md b/docs/resources/ui/components/built-in-components/chart/bar-chart.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/chart/bar-chart.md
rename to docs/resources/ui/components/built-in-components/chart/bar-chart.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/chart/chart.md b/docs/resources/ui/components/built-in-components/chart/chart.md
similarity index 99%
rename from docs/resources/ui-building-blocks/components/built-in-components/chart/chart.md
rename to docs/resources/ui/components/built-in-components/chart/chart.md
index d73c0b24..9a08d2ae 100644
--- a/docs/resources/ui-building-blocks/components/built-in-components/chart/chart.md
+++ b/docs/resources/ui/components/built-in-components/chart/chart.md
@@ -113,7 +113,7 @@ You can change the appearance of the legend box by following the instructions be
 To customize the legend text and indicator:
 
 1. First, [enable the legend](#showing-legend).
-2. To style the legend text, scroll down to the **Legend Properties** > **Legend Text Properties** and change the style as per [here](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/text.md#common-text-styling-properties).
+2. To style the legend text, scroll down to the **Legend Properties** > **Legend Text Properties** and change the style as per [here](../../../../../resources/ui/widgets/built-in-widgets/text.md#common-text-styling-properties).
 3. To add space between the indicator and the text, adjust the **Text Padding** property.
 4. You can change the indicator size by entering a value inside the **Indicator Size** property.
 5. To create rounded corners around the indicator, you can use the **Indicator Border Radius** property.
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/chart/line-chart.md b/docs/resources/ui/components/built-in-components/chart/line-chart.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/chart/line-chart.md
rename to docs/resources/ui/components/built-in-components/chart/line-chart.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/chart/pie-chart.md b/docs/resources/ui/components/built-in-components/chart/pie-chart.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/chart/pie-chart.md
rename to docs/resources/ui/components/built-in-components/chart/pie-chart.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/choicechips.md b/docs/resources/ui/components/built-in-components/choicechips.md
similarity index 98%
rename from docs/resources/ui-building-blocks/components/built-in-components/choicechips.md
rename to docs/resources/ui/components/built-in-components/choicechips.md
index 2ac6cef1..680f4121 100644
--- a/docs/resources/ui-building-blocks/components/built-in-components/choicechips.md
+++ b/docs/resources/ui/components/built-in-components/choicechips.md
@@ -51,14 +51,14 @@ To add the ChoiceChips widget to your app:
 
 ## Trigger action on change
 
-See how to [trigger an action when a selection changes](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
+See how to [trigger an action when a selection changes](../../../../resources/ui/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
 
 ## Select or clear all choices [Action]
 
 Users may need to swiftly deselect all chips or choose all available choice chips at once. You can do so by adding the **Clear All/Select All** action.
 
 :::info
-Before you add this action, ensure you [**allow multiselect**](#allow-mulitselect) on this widget.
+Before you add this action, ensure you [**allow multiselect**](#allow-multiselect) on this widget.
 :::
 
 ## Customizing
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/count-controller.md b/docs/resources/ui/components/built-in-components/count-controller.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/count-controller.md
rename to docs/resources/ui/components/built-in-components/count-controller.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/creditcardform.md b/docs/resources/ui/components/built-in-components/creditcardform.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/creditcardform.md
rename to docs/resources/ui/components/built-in-components/creditcardform.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/datatable.md b/docs/resources/ui/components/built-in-components/datatable.md
similarity index 97%
rename from docs/resources/ui-building-blocks/components/built-in-components/datatable.md
rename to docs/resources/ui/components/built-in-components/datatable.md
index d505f0ab..555c01d1 100644
--- a/docs/resources/ui-building-blocks/components/built-in-components/datatable.md
+++ b/docs/resources/ui/components/built-in-components/datatable.md
@@ -231,9 +231,9 @@ To achieve this, create a page state variable to store the selected list. Upon b
 
 Here are the exact steps:
 
-1. First, create a [page state](../../../../resources/ui-building-blocks/pages/page-lifecycle.md#creating-a-page-state) variable that will hold the list of selected rows.
+1. First, create a [page state](../../../../resources/ui/pages/page-lifecycle.md#creating-a-page-state) variable that will hold the list of selected rows.
 2. Select the **DataTable**, move to the **Properties Panel > Paginated Data Table Properties >** turn on the **Selectable** toggle.
-3. On button click, [update the page state](../../../../resources/ui-building-blocks/pages/page-lifecycle.md#update-page-state-action) variable with the selected rows. While adding this action, use the following custom function to retrieve the selected items based on the indices. You can get the list of selected rows indices via **Widget State > DataTable Selected Rows**.
+3. On button click, [update the page state](../../../../resources/ui/pages/page-lifecycle.md#update-page-state-action) variable with the selected rows. While adding this action, use the following custom function to retrieve the selected items based on the indices. You can get the list of selected rows indices via **Widget State > DataTable Selected Rows**.
 4. Optionally, you could pass this variable to a new page to display the selection.
 
 Custom function:
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/draggable.md b/docs/resources/ui/components/built-in-components/draggable.md
similarity index 91%
rename from docs/resources/ui-building-blocks/components/built-in-components/draggable.md
rename to docs/resources/ui/components/built-in-components/draggable.md
index 4156e9f1..4655f114 100644
--- a/docs/resources/ui-building-blocks/components/built-in-components/draggable.md
+++ b/docs/resources/ui/components/built-in-components/draggable.md
@@ -28,9 +28,9 @@ The steps to build such an example are as follows:
 In this example, we have two images of a shelf: one with empty space for one plant and another 
 with all plants on the shelf. To control which image to show based on whether the correct item 
 is dropped on the shelf, we need a 
-[page state variable](../../../../resources/ui-building-blocks/pages/page-lifecycle.md#page-state). 
+[page state variable](../../pages/page-lifecycle.md#page-state). 
 Therefore, 
-[create a page state variable](../../../../resources/ui-building-blocks/pages/page-lifecycle.md#creating-a-page-state)
+[create a page state variable](../../pages/page-lifecycle.md#creating-a-page-state)
 named `isShelfFull` with the datatype *Boolean* and set its default value to *False*.
 
 <figure>
@@ -101,8 +101,8 @@ and click **Open**. This will open an **Action Flow Editor** in a new popup wind
     1. Select the **On Drag Accept** and select **+ Add Conditional Action**.
     5. From the **set variable** menu, select **Drag Target > Dragged Data**. This captures the data of the draggable item that we added in [step 2](/widgets-and-components/widgets/base-elements/draggable-+-dragtarget#id-2.-add-draggable-widgets).
     8. Check if the captured data matches the expected item, i.e., plant.
-    11. In the **TRUE** branch, you can add a [snackbar message](../../../ui-building-blocks/pages/page-elements.md#snackbar) and [update](../../../ui-building-blocks/pages/page-lifecycle.md#page-state) the `isShelfFull` variable to True. This will create an effect like the user has actually dragged and dropped the item onto the shelf.
-3. Now, select the **On Drag Exit** andadd an action to [update](../../../ui-building-blocks/pages/page-lifecycle.md#page-state) the `isShelfFull` variable to False. This ensures that if the user decides not to drop the item and moves it away, the shelf image reverts to the empty one.
+    11. In the **TRUE** branch, you can add a [snackbar message](../../pages/page-elements.md#snackbar) and [update](../../pages/page-lifecycle.md#page-state) the `isShelfFull` variable to True. This will create an effect like the user has actually dragged and dropped the item onto the shelf.
+3. Now, select the **On Drag Exit** andadd an action to [update](../../pages/page-lifecycle.md#page-state) the `isShelfFull` variable to False. This ensures that if the user decides not to drop the item and moves it away, the shelf image reverts to the empty one.
 
 <details>
 <summary>On Drag Accept</summary>
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/expandable.md b/docs/resources/ui/components/built-in-components/expandable.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/expandable.md
rename to docs/resources/ui/components/built-in-components/expandable.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/img.png b/docs/resources/ui/components/built-in-components/img.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/img.png
rename to docs/resources/ui/components/built-in-components/img.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/img_1.png b/docs/resources/ui/components/built-in-components/img_1.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/img_1.png
rename to docs/resources/ui/components/built-in-components/img_1.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/img_2.png b/docs/resources/ui/components/built-in-components/img_2.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/img_2.png
rename to docs/resources/ui/components/built-in-components/img_2.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/img_3.png b/docs/resources/ui/components/built-in-components/img_3.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/img_3.png
rename to docs/resources/ui/components/built-in-components/img_3.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/add-dividers.avif b/docs/resources/ui/components/built-in-components/imgs/add-dividers.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/add-dividers.avif
rename to docs/resources/ui/components/built-in-components/imgs/add-dividers.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/adjust-row-border.avif b/docs/resources/ui/components/built-in-components/imgs/adjust-row-border.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/adjust-row-border.avif
rename to docs/resources/ui/components/built-in-components/imgs/adjust-row-border.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable-2.avif b/docs/resources/ui/components/built-in-components/imgs/app-state-variable-2.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable-2.avif
rename to docs/resources/ui/components/built-in-components/imgs/app-state-variable-2.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable-calendar.avif b/docs/resources/ui/components/built-in-components/imgs/app-state-variable-calendar.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable-calendar.avif
rename to docs/resources/ui/components/built-in-components/imgs/app-state-variable-calendar.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable.avif b/docs/resources/ui/components/built-in-components/imgs/app-state-variable.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variable.avif
rename to docs/resources/ui/components/built-in-components/imgs/app-state-variable.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variables.avif b/docs/resources/ui/components/built-in-components/imgs/app-state-variables.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/app-state-variables.avif
rename to docs/resources/ui/components/built-in-components/imgs/app-state-variables.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/bar-collection-to-document.avif b/docs/resources/ui/components/built-in-components/imgs/bar-collection-to-document.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/bar-collection-to-document.avif
rename to docs/resources/ui/components/built-in-components/imgs/bar-collection-to-document.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/calendar-prepare-data.avif b/docs/resources/ui/components/built-in-components/imgs/calendar-prepare-data.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/calendar-prepare-data.avif
rename to docs/resources/ui/components/built-in-components/imgs/calendar-prepare-data.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/chart-with-axis-bound.avif b/docs/resources/ui/components/built-in-components/imgs/chart-with-axis-bound.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/chart-with-axis-bound.avif
rename to docs/resources/ui/components/built-in-components/imgs/chart-with-axis-bound.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/chart-without-axis-bound.png b/docs/resources/ui/components/built-in-components/imgs/chart-without-axis-bound.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/chart-without-axis-bound.png
rename to docs/resources/ui/components/built-in-components/imgs/chart-without-axis-bound.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/collection-to-document.avif b/docs/resources/ui/components/built-in-components/imgs/collection-to-document.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/collection-to-document.avif
rename to docs/resources/ui/components/built-in-components/imgs/collection-to-document.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/customize-unselected-choice.png b/docs/resources/ui/components/built-in-components/imgs/customize-unselected-choice.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/customize-unselected-choice.png
rename to docs/resources/ui/components/built-in-components/imgs/customize-unselected-choice.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/data-table-header.avif b/docs/resources/ui/components/built-in-components/imgs/data-table-header.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/data-table-header.avif
rename to docs/resources/ui/components/built-in-components/imgs/data-table-header.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/firestore-data-to-chart.avif b/docs/resources/ui/components/built-in-components/imgs/firestore-data-to-chart.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/firestore-data-to-chart.avif
rename to docs/resources/ui/components/built-in-components/imgs/firestore-data-to-chart.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/firestore-data.avif b/docs/resources/ui/components/built-in-components/imgs/firestore-data.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/firestore-data.avif
rename to docs/resources/ui/components/built-in-components/imgs/firestore-data.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/get-notified-on-row-changed-per-page.avif b/docs/resources/ui/components/built-in-components/imgs/get-notified-on-row-changed-per-page.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/get-notified-on-row-changed-per-page.avif
rename to docs/resources/ui/components/built-in-components/imgs/get-notified-on-row-changed-per-page.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/img.png b/docs/resources/ui/components/built-in-components/imgs/img.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/img.png
rename to docs/resources/ui/components/built-in-components/imgs/img.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/img_1.png b/docs/resources/ui/components/built-in-components/imgs/img_1.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/img_1.png
rename to docs/resources/ui/components/built-in-components/imgs/img_1.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/img_2.png b/docs/resources/ui/components/built-in-components/imgs/img_2.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/img_2.png
rename to docs/resources/ui/components/built-in-components/imgs/img_2.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/img_3.png b/docs/resources/ui/components/built-in-components/imgs/img_3.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/img_3.png
rename to docs/resources/ui/components/built-in-components/imgs/img_3.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/img_4.png b/docs/resources/ui/components/built-in-components/imgs/img_4.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/img_4.png
rename to docs/resources/ui/components/built-in-components/imgs/img_4.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/legend.webp b/docs/resources/ui/components/built-in-components/imgs/legend.webp
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/legend.webp
rename to docs/resources/ui/components/built-in-components/imgs/legend.webp
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/loopcard.avif b/docs/resources/ui/components/built-in-components/imgs/loopcard.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/loopcard.avif
rename to docs/resources/ui/components/built-in-components/imgs/loopcard.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/numbers-to-chart.avif b/docs/resources/ui/components/built-in-components/imgs/numbers-to-chart.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/numbers-to-chart.avif
rename to docs/resources/ui/components/built-in-components/imgs/numbers-to-chart.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/paginated-data-table-fi.avif b/docs/resources/ui/components/built-in-components/imgs/paginated-data-table-fi.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/paginated-data-table-fi.avif
rename to docs/resources/ui/components/built-in-components/imgs/paginated-data-table-fi.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-app-state-variable-2.avif b/docs/resources/ui/components/built-in-components/imgs/pie-app-state-variable-2.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-app-state-variable-2.avif
rename to docs/resources/ui/components/built-in-components/imgs/pie-app-state-variable-2.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-app-state-variable.avif b/docs/resources/ui/components/built-in-components/imgs/pie-app-state-variable.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-app-state-variable.avif
rename to docs/resources/ui/components/built-in-components/imgs/pie-app-state-variable.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-collection-document.avif b/docs/resources/ui/components/built-in-components/imgs/pie-collection-document.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-collection-document.avif
rename to docs/resources/ui/components/built-in-components/imgs/pie-collection-document.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-firestored-data.avif b/docs/resources/ui/components/built-in-components/imgs/pie-firestored-data.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-firestored-data.avif
rename to docs/resources/ui/components/built-in-components/imgs/pie-firestored-data.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-single-value.avif b/docs/resources/ui/components/built-in-components/imgs/pie-single-value.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/pie-single-value.avif
rename to docs/resources/ui/components/built-in-components/imgs/pie-single-value.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/searching-through-table.avif b/docs/resources/ui/components/built-in-components/imgs/searching-through-table.avif
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/searching-through-table.avif
rename to docs/resources/ui/components/built-in-components/imgs/searching-through-table.avif
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/styling-selected-date.png b/docs/resources/ui/components/built-in-components/imgs/styling-selected-date.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/styling-selected-date.png
rename to docs/resources/ui/components/built-in-components/imgs/styling-selected-date.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/imgs/styling-unselected-date.png b/docs/resources/ui/components/built-in-components/imgs/styling-unselected-date.png
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/imgs/styling-unselected-date.png
rename to docs/resources/ui/components/built-in-components/imgs/styling-unselected-date.png
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/markdown.md b/docs/resources/ui/components/built-in-components/markdown.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/markdown.md
rename to docs/resources/ui/components/built-in-components/markdown.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/pincode.md b/docs/resources/ui/components/built-in-components/pincode.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/pincode.md
rename to docs/resources/ui/components/built-in-components/pincode.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/progressbar.md b/docs/resources/ui/components/built-in-components/progressbar.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/progressbar.md
rename to docs/resources/ui/components/built-in-components/progressbar.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/ratingbar.md b/docs/resources/ui/components/built-in-components/ratingbar.md
similarity index 98%
rename from docs/resources/ui-building-blocks/components/built-in-components/ratingbar.md
rename to docs/resources/ui/components/built-in-components/ratingbar.md
index 50354de0..2c4160c5 100644
--- a/docs/resources/ui-building-blocks/components/built-in-components/ratingbar.md
+++ b/docs/resources/ui/components/built-in-components/ratingbar.md
@@ -267,5 +267,5 @@ To change the Axis:
 <p></p>
 
 :::info[Trigger action on change]
-See how to [**trigger an action when a selection changes**](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
+See how to [**trigger an action when a selection changes**](../../widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
 :::
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/slider.md b/docs/resources/ui/components/built-in-components/slider.md
similarity index 98%
rename from docs/resources/ui-building-blocks/components/built-in-components/slider.md
rename to docs/resources/ui/components/built-in-components/slider.md
index 25fd9947..b1aaafb4 100644
--- a/docs/resources/ui-building-blocks/components/built-in-components/slider.md
+++ b/docs/resources/ui/components/built-in-components/slider.md
@@ -300,5 +300,5 @@ To show the slider value:
 
 
 :::info[Trigger action on change]
-See how to [**trigger an action when a selection changes**](../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
+See how to [**trigger an action when a selection changes**](../../widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
 :::
\ No newline at end of file
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/sticky-header.md b/docs/resources/ui/components/built-in-components/sticky-header.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/sticky-header.md
rename to docs/resources/ui/components/built-in-components/sticky-header.md
diff --git a/docs/resources/ui-building-blocks/components/built-in-components/swipeablestack.md b/docs/resources/ui/components/built-in-components/swipeablestack.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/built-in-components/swipeablestack.md
rename to docs/resources/ui/components/built-in-components/swipeablestack.md
diff --git a/docs/resources/ui-building-blocks/components/user-defined-components/_category_.json b/docs/resources/ui/components/custom-components/_category_.json
similarity index 100%
rename from docs/resources/ui-building-blocks/components/user-defined-components/_category_.json
rename to docs/resources/ui/components/custom-components/_category_.json
diff --git a/docs/resources/ui-building-blocks/components/user-defined-components/component-lifecycle.md b/docs/resources/ui/components/custom-components/component-lifecycle.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/user-defined-components/component-lifecycle.md
rename to docs/resources/ui/components/custom-components/component-lifecycle.md
diff --git a/docs/resources/ui-building-blocks/components/user-defined-components/getting-started.md b/docs/resources/ui/components/custom-components/getting-started.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/user-defined-components/getting-started.md
rename to docs/resources/ui/components/custom-components/getting-started.md
diff --git a/docs/resources/ui-building-blocks/components/user-defined-components/using-components.md b/docs/resources/ui/components/custom-components/using-components.md
similarity index 100%
rename from docs/resources/ui-building-blocks/components/user-defined-components/using-components.md
rename to docs/resources/ui/components/custom-components/using-components.md
diff --git a/docs/resources/ui-building-blocks/components/overview.md b/docs/resources/ui/components/overview.md
similarity index 97%
rename from docs/resources/ui-building-blocks/components/overview.md
rename to docs/resources/ui/components/overview.md
index 5832dd08..9ae0c517 100644
--- a/docs/resources/ui-building-blocks/components/overview.md
+++ b/docs/resources/ui/components/overview.md
@@ -47,7 +47,7 @@ Leveraging components effectively helps you build a consistent, efficient, and m
   out-of-the-box solutions provided by FlutterFlow that can be directly integrated into any project
   to offer specific functionalities.
 
-- **[User-Defined Components](user-defined-components/getting-started.md):** You can also build your own 
+- **[User-Defined Components](custom-components/getting-started.md):** You can also build your own 
   components by assembling 
   multiple
   widgets using FlutterFlow’s drag-and-drop interface. This method involves strategically
diff --git a/docs/resources/ui-building-blocks/imgs/Class-Instance.png b/docs/resources/ui/imgs/Class-Instance.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/Class-Instance.png
rename to docs/resources/ui/imgs/Class-Instance.png
diff --git a/docs/resources/ui-building-blocks/imgs/Page-State.png b/docs/resources/ui/imgs/Page-State.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/Page-State.png
rename to docs/resources/ui/imgs/Page-State.png
diff --git a/docs/resources/ui-building-blocks/imgs/action-props.png b/docs/resources/ui/imgs/action-props.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/action-props.png
rename to docs/resources/ui/imgs/action-props.png
diff --git a/docs/resources/ui-building-blocks/imgs/actions-triggers.png b/docs/resources/ui/imgs/actions-triggers.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/actions-triggers.png
rename to docs/resources/ui/imgs/actions-triggers.png
diff --git a/docs/resources/ui-building-blocks/imgs/actions.png b/docs/resources/ui/imgs/actions.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/actions.png
rename to docs/resources/ui/imgs/actions.png
diff --git a/docs/resources/ui-building-blocks/imgs/advanced-configs-widgets.png b/docs/resources/ui/imgs/advanced-configs-widgets.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/advanced-configs-widgets.png
rename to docs/resources/ui/imgs/advanced-configs-widgets.png
diff --git a/docs/resources/ui-building-blocks/imgs/advanced-configs.png b/docs/resources/ui/imgs/advanced-configs.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/advanced-configs.png
rename to docs/resources/ui/imgs/advanced-configs.png
diff --git a/docs/resources/ui-building-blocks/imgs/backend-query.png b/docs/resources/ui/imgs/backend-query.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/backend-query.png
rename to docs/resources/ui/imgs/backend-query.png
diff --git a/docs/resources/ui-building-blocks/imgs/body-page.png b/docs/resources/ui/imgs/body-page.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/body-page.png
rename to docs/resources/ui/imgs/body-page.png
diff --git a/docs/resources/ui-building-blocks/imgs/column-cross.png b/docs/resources/ui/imgs/column-cross.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/column-cross.png
rename to docs/resources/ui/imgs/column-cross.png
diff --git a/docs/resources/ui-building-blocks/imgs/column-main-axis.png b/docs/resources/ui/imgs/column-main-axis.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/column-main-axis.png
rename to docs/resources/ui/imgs/column-main-axis.png
diff --git a/docs/resources/ui-building-blocks/imgs/component-actions.png b/docs/resources/ui/imgs/component-actions.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/component-actions.png
rename to docs/resources/ui/imgs/component-actions.png
diff --git a/docs/resources/ui-building-blocks/imgs/components-configurations.png b/docs/resources/ui/imgs/components-configurations.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/components-configurations.png
rename to docs/resources/ui/imgs/components-configurations.png
diff --git a/docs/resources/ui-building-blocks/imgs/everything-widget.png b/docs/resources/ui/imgs/everything-widget.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/everything-widget.png
rename to docs/resources/ui/imgs/everything-widget.png
diff --git a/docs/resources/ui-building-blocks/imgs/fab-comparison.png b/docs/resources/ui/imgs/fab-comparison.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/fab-comparison.png
rename to docs/resources/ui/imgs/fab-comparison.png
diff --git a/docs/resources/ui-building-blocks/imgs/img.png b/docs/resources/ui/imgs/img.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/img.png
rename to docs/resources/ui/imgs/img.png
diff --git a/docs/resources/ui-building-blocks/imgs/nav-bar-default.png b/docs/resources/ui/imgs/nav-bar-default.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/nav-bar-default.png
rename to docs/resources/ui/imgs/nav-bar-default.png
diff --git a/docs/resources/ui-building-blocks/imgs/nav-bar-floating.png b/docs/resources/ui/imgs/nav-bar-floating.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/nav-bar-floating.png
rename to docs/resources/ui/imgs/nav-bar-floating.png
diff --git a/docs/resources/ui-building-blocks/imgs/nav-bar-google.png b/docs/resources/ui/imgs/nav-bar-google.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/nav-bar-google.png
rename to docs/resources/ui/imgs/nav-bar-google.png
diff --git a/docs/resources/ui-building-blocks/imgs/nav-bar.png b/docs/resources/ui/imgs/nav-bar.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/nav-bar.png
rename to docs/resources/ui/imgs/nav-bar.png
diff --git a/docs/resources/ui-building-blocks/imgs/props-panel.png b/docs/resources/ui/imgs/props-panel.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/props-panel.png
rename to docs/resources/ui/imgs/props-panel.png
diff --git a/docs/resources/ui-building-blocks/imgs/props.png b/docs/resources/ui/imgs/props.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/props.png
rename to docs/resources/ui/imgs/props.png
diff --git a/docs/resources/ui-building-blocks/imgs/row-col-stack.png b/docs/resources/ui/imgs/row-col-stack.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/row-col-stack.png
rename to docs/resources/ui/imgs/row-col-stack.png
diff --git a/docs/resources/ui-building-blocks/imgs/row-cross.png b/docs/resources/ui/imgs/row-cross.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/row-cross.png
rename to docs/resources/ui/imgs/row-cross.png
diff --git a/docs/resources/ui-building-blocks/imgs/row-main-axis.png b/docs/resources/ui/imgs/row-main-axis.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/row-main-axis.png
rename to docs/resources/ui/imgs/row-main-axis.png
diff --git a/docs/resources/ui-building-blocks/imgs/scaffold-elements.png b/docs/resources/ui/imgs/scaffold-elements.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/scaffold-elements.png
rename to docs/resources/ui/imgs/scaffold-elements.png
diff --git a/docs/resources/ui-building-blocks/imgs/set-initial-index.png b/docs/resources/ui/imgs/set-initial-index.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/set-initial-index.png
rename to docs/resources/ui/imgs/set-initial-index.png
diff --git a/docs/resources/ui-building-blocks/imgs/snackbar-action-props.png b/docs/resources/ui/imgs/snackbar-action-props.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/snackbar-action-props.png
rename to docs/resources/ui/imgs/snackbar-action-props.png
diff --git a/docs/resources/ui-building-blocks/imgs/snackbar-scr.png b/docs/resources/ui/imgs/snackbar-scr.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/snackbar-scr.png
rename to docs/resources/ui/imgs/snackbar-scr.png
diff --git a/docs/resources/ui-building-blocks/imgs/snackbar.png b/docs/resources/ui/imgs/snackbar.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/snackbar.png
rename to docs/resources/ui/imgs/snackbar.png
diff --git a/docs/resources/ui-building-blocks/imgs/statemgm.png b/docs/resources/ui/imgs/statemgm.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/statemgm.png
rename to docs/resources/ui/imgs/statemgm.png
diff --git a/docs/resources/ui-building-blocks/imgs/tree.png b/docs/resources/ui/imgs/tree.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/tree.png
rename to docs/resources/ui/imgs/tree.png
diff --git a/docs/resources/ui-building-blocks/imgs/widget-properties.png b/docs/resources/ui/imgs/widget-properties.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/widget-properties.png
rename to docs/resources/ui/imgs/widget-properties.png
diff --git a/docs/resources/ui-building-blocks/imgs/widget-tree.png b/docs/resources/ui/imgs/widget-tree.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/widget-tree.png
rename to docs/resources/ui/imgs/widget-tree.png
diff --git a/docs/resources/ui-building-blocks/imgs/wrap-items-in-center-widget.png b/docs/resources/ui/imgs/wrap-items-in-center-widget.png
similarity index 100%
rename from docs/resources/ui-building-blocks/imgs/wrap-items-in-center-widget.png
rename to docs/resources/ui/imgs/wrap-items-in-center-widget.png
diff --git a/docs/resources/ui-building-blocks/overview.md b/docs/resources/ui/overview.md
similarity index 99%
rename from docs/resources/ui-building-blocks/overview.md
rename to docs/resources/ui/overview.md
index 034cdcb6..102af65f 100644
--- a/docs/resources/ui-building-blocks/overview.md
+++ b/docs/resources/ui/overview.md
@@ -145,7 +145,7 @@ In FlutterFlow, the **Page Elements** category comprises of widgets like `AppBar
 facilitating navigation throughout the app.
 
 :::note
-To learn more about **Page Elements** and how to use them, refer to [**this doc**](#)
+Learn more about **[Page Elements](pages/page-elements.md)** and how to use them.
 :::
 
 #### Form Elements
diff --git a/docs/resources/ui-building-blocks/pages/_category_.json b/docs/resources/ui/pages/_category_.json
similarity index 100%
rename from docs/resources/ui-building-blocks/pages/_category_.json
rename to docs/resources/ui/pages/_category_.json
diff --git a/docs/resources/ui-building-blocks/pages/page-elements.md b/docs/resources/ui/pages/page-elements.md
similarity index 99%
rename from docs/resources/ui-building-blocks/pages/page-elements.md
rename to docs/resources/ui/pages/page-elements.md
index 741e18c8..c21092ef 100644
--- a/docs/resources/ui-building-blocks/pages/page-elements.md
+++ b/docs/resources/ui/pages/page-elements.md
@@ -7,10 +7,12 @@ toc_max_heading_level: 5
 
 # Scaffold Elements
 
+<!--
 :::info
 To learn about Scaffold and the various page elements under it, refer to the [**Behind a
 FlutterFlow Page**](#) section.
 :::
+-->
 
 ## AppBar
 
diff --git a/docs/resources/ui-building-blocks/pages/page-lifecycle.md b/docs/resources/ui/pages/page-lifecycle.md
similarity index 95%
rename from docs/resources/ui-building-blocks/pages/page-lifecycle.md
rename to docs/resources/ui/pages/page-lifecycle.md
index 38315d97..ec734bd8 100644
--- a/docs/resources/ui-building-blocks/pages/page-lifecycle.md
+++ b/docs/resources/ui/pages/page-lifecycle.md
@@ -43,10 +43,10 @@ and ready for use by the time the first version of the **Page** is initialized.
 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](#)** section
+To learn more, head over to **[Action Flow Editor](../../../resources/control-flow/functions/action-flow-editor.md)** section
 :::
 
-As you open the [Action Flow Editor](#) for your Scaffold (Page), you can see the following Action
+As you open the [Action Flow Editor](../../../resources/control-flow/functions/action-flow-editor.md) for your Scaffold (Page), you can see the following Action
 Triggers exposed for your Page.
 
 ![actions-triggers.png](../imgs/actions-triggers.png)
@@ -99,9 +99,9 @@ trigger specific actions in response to a phone shake gesture.
 
 ## Page state
 
-:::note[STATE VARIABLES]
+:::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](#)**
+about **states and state management, [refer here](../../../ff-concepts/state-management/state-management.md)**
 :::
 
 
@@ -198,7 +198,7 @@ the above example:
 You can set the Data Type of your Page 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.** ](#)
+Representation Section.** ](../../data-representation/overview.md)
 :::
 
 ### Get Page State value
diff --git a/docs/resources/ui-building-blocks/pages/pages-configuration.md b/docs/resources/ui/pages/pages-configuration.md
similarity index 95%
rename from docs/resources/ui-building-blocks/pages/pages-configuration.md
rename to docs/resources/ui/pages/pages-configuration.md
index 35ed00ba..5c42ecc7 100644
--- a/docs/resources/ui-building-blocks/pages/pages-configuration.md
+++ b/docs/resources/ui/pages/pages-configuration.md
@@ -103,7 +103,7 @@ user profiles, product lists, or any other data your app needs to retrieve from
 a server.
 
 :::info[LEARN MORE]
-To learn more about how to connect to a backend source, refer to our [**Database section**](#)
+To learn more about how to connect to a backend source, refer to our [**Database section**](../../../resources/control-flow/backend-logic/backend-query/backend-query.md)
 :::
 
 ### State Management
@@ -114,5 +114,5 @@ tracking user inputs, remembering user choices, or preserving the app's state
 during navigation between pages. 
 
 :::info[LEARN MORE]
-Learn how to **[how to create and manage the update lifecycle](#)** of Page State variables
+Learn how to create and **[manage the update lifecycle](page-lifecycle.md)** of Page State variables.
 :::
diff --git a/docs/resources/ui-building-blocks/pages/pages.md b/docs/resources/ui/pages/pages.md
similarity index 91%
rename from docs/resources/ui-building-blocks/pages/pages.md
rename to docs/resources/ui/pages/pages.md
index 42f286ca..1828ddf7 100644
--- a/docs/resources/ui-building-blocks/pages/pages.md
+++ b/docs/resources/ui/pages/pages.md
@@ -13,14 +13,14 @@ consistent framework for each page, allowing you to define and organize its stru
 
 Here's how the `Scaffold` contributes to page design in FlutterFlow:
 
-- **AppBar** : Scaffold allows you to easily include an `AppBar` at the top of the
+- **[AppBar](page-elements.md#appbar)** : Scaffold allows you to easily include an `AppBar` at the top of the
   page,
   which can house the title, navigation controls, and other actions.
 
-- **Floating Action Button (FAB)**: An action button that is commonly used for
+- **[Floating Action Button (FAB)](page-elements.md#floating-action-button-fab)**: An action button that is commonly used for
   primary actions on the screen, like adding a new contact or composing a message.
 
-- **Drawer & End-Drawer**: A slide-out menu for app navigation, accessible from
+- **[Drawer & End-Drawer](page-elements.md#drawers)**: A slide-out menu for app navigation, accessible from
   the `AppBar` or by swiping from the side.
 
 - **Body:** The main content area where you place your widgets for the body of the Page.
@@ -32,7 +32,7 @@ In FlutterFlow, you won't find a section explicitly labeled as "Body". For examp
 ![scaffold-elements.png](../imgs/scaffold-elements.png)
 :::
 
-In FlutterFlow, you will find these Page Widgets under **Page Elements** in Widget Palette.
+In FlutterFlow, you will find these Page Widgets under **[Page Elements](page-elements.md)** in Widget Palette.
 
 <!--
 :::tip[Generated Code]
diff --git a/docs/resources/ui-building-blocks/widgets/_category_.json b/docs/resources/ui/widgets/_category_.json
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/_category_.json
rename to docs/resources/ui/widgets/_category_.json
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/_category_.json b/docs/resources/ui/widgets/built-in-widgets/_category_.json
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/_category_.json
rename to docs/resources/ui/widgets/built-in-widgets/_category_.json
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/button.md b/docs/resources/ui/widgets/built-in-widgets/button.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/button.md
rename to docs/resources/ui/widgets/built-in-widgets/button.md
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/card.md b/docs/resources/ui/widgets/built-in-widgets/card.md
similarity index 93%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/card.md
rename to docs/resources/ui/widgets/built-in-widgets/card.md
index ad9b7e84..2068a981 100644
--- a/docs/resources/ui-building-blocks/widgets/built-in-widgets/card.md
+++ b/docs/resources/ui/widgets/built-in-widgets/card.md
@@ -33,7 +33,7 @@ Styling helps you customize a widget that matches your design. The Card widget a
 Here's how you stylize the Card widget:
 
 1. Select the **Card** widget and move to the **Properties Panel > Card Properties**.
-2. To change the background color, [modify the Color](../../../../resources/ui-building-blocks/widgets/widget-commonalities.md#change-color) property.
+2. To change the background color, [modify the Color](../../widgets/widget-commonalities.md#change-color) property.
 3. To change the elevation (depth or Z-axis), enter the value in the **Elevation** property.
 4. To create the rounded border, use the **Border Radius** property. For uniform curvature on all sides, use the **Uniform Radius** option by sliding the adjustment bar or inputting your preferred value directly.
 
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/container.md b/docs/resources/ui/widgets/built-in-widgets/container.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/container.md
rename to docs/resources/ui/widgets/built-in-widgets/container.md
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/dividers.md b/docs/resources/ui/widgets/built-in-widgets/dividers.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/dividers.md
rename to docs/resources/ui/widgets/built-in-widgets/dividers.md
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/icons.md b/docs/resources/ui/widgets/built-in-widgets/icons.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/icons.md
rename to docs/resources/ui/widgets/built-in-widgets/icons.md
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/image.md b/docs/resources/ui/widgets/built-in-widgets/image.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/image.md
rename to docs/resources/ui/widgets/built-in-widgets/image.md
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img.png b/docs/resources/ui/widgets/built-in-widgets/img.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img.png
rename to docs/resources/ui/widgets/built-in-widgets/img.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_1.png b/docs/resources/ui/widgets/built-in-widgets/img_1.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_1.png
rename to docs/resources/ui/widgets/built-in-widgets/img_1.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_10.png b/docs/resources/ui/widgets/built-in-widgets/img_10.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_10.png
rename to docs/resources/ui/widgets/built-in-widgets/img_10.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_11.png b/docs/resources/ui/widgets/built-in-widgets/img_11.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_11.png
rename to docs/resources/ui/widgets/built-in-widgets/img_11.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_12.png b/docs/resources/ui/widgets/built-in-widgets/img_12.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_12.png
rename to docs/resources/ui/widgets/built-in-widgets/img_12.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_2.png b/docs/resources/ui/widgets/built-in-widgets/img_2.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_2.png
rename to docs/resources/ui/widgets/built-in-widgets/img_2.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_3.png b/docs/resources/ui/widgets/built-in-widgets/img_3.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_3.png
rename to docs/resources/ui/widgets/built-in-widgets/img_3.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_4.png b/docs/resources/ui/widgets/built-in-widgets/img_4.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_4.png
rename to docs/resources/ui/widgets/built-in-widgets/img_4.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_5.png b/docs/resources/ui/widgets/built-in-widgets/img_5.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_5.png
rename to docs/resources/ui/widgets/built-in-widgets/img_5.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_6.png b/docs/resources/ui/widgets/built-in-widgets/img_6.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_6.png
rename to docs/resources/ui/widgets/built-in-widgets/img_6.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_7.png b/docs/resources/ui/widgets/built-in-widgets/img_7.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_7.png
rename to docs/resources/ui/widgets/built-in-widgets/img_7.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_8.png b/docs/resources/ui/widgets/built-in-widgets/img_8.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_8.png
rename to docs/resources/ui/widgets/built-in-widgets/img_8.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/img_9.png b/docs/resources/ui/widgets/built-in-widgets/img_9.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/img_9.png
rename to docs/resources/ui/widgets/built-in-widgets/img_9.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/button-disabled.png b/docs/resources/ui/widgets/built-in-widgets/imgs/button-disabled.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/button-disabled.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/button-disabled.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/button.png b/docs/resources/ui/widgets/built-in-widgets/imgs/button.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/button.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/button.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/container-props.png b/docs/resources/ui/widgets/built-in-widgets/imgs/container-props.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/container-props.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/container-props.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/divider.png b/docs/resources/ui/widgets/built-in-widgets/imgs/divider.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/divider.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/divider.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/expanded.png b/docs/resources/ui/widgets/built-in-widgets/imgs/expanded.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/expanded.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/expanded.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/flex.png b/docs/resources/ui/widgets/built-in-widgets/imgs/flex.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/flex.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/flex.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/flexible.png b/docs/resources/ui/widgets/built-in-widgets/imgs/flexible.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/flexible.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/flexible.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/gradient-cont.png b/docs/resources/ui/widgets/built-in-widgets/imgs/gradient-cont.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/gradient-cont.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/gradient-cont.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/icon.png b/docs/resources/ui/widgets/built-in-widgets/imgs/icon.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/icon.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/icon.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/image-boxfit.png b/docs/resources/ui/widgets/built-in-widgets/imgs/image-boxfit.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/image-boxfit.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/image-boxfit.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/img.png b/docs/resources/ui/widgets/built-in-widgets/imgs/img.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/img.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/img.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/img_1.png b/docs/resources/ui/widgets/built-in-widgets/imgs/img_1.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/img_1.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/img_1.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/list-tile.png b/docs/resources/ui/widgets/built-in-widgets/imgs/list-tile.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/list-tile.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/list-tile.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/listview-axis.png b/docs/resources/ui/widgets/built-in-widgets/imgs/listview-axis.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/listview-axis.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/listview-axis.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/listview-reverse.png b/docs/resources/ui/widgets/built-in-widgets/imgs/listview-reverse.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/listview-reverse.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/listview-reverse.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/richtext-eg.png b/docs/resources/ui/widgets/built-in-widgets/imgs/richtext-eg.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/richtext-eg.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/richtext-eg.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/spacer-widget.png b/docs/resources/ui/widgets/built-in-widgets/imgs/spacer-widget.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/spacer-widget.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/spacer-widget.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/spacer.png b/docs/resources/ui/widgets/built-in-widgets/imgs/spacer.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/spacer.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/spacer.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/stack-align.png b/docs/resources/ui/widgets/built-in-widgets/imgs/stack-align.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/stack-align.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/stack-align.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/text-example.png b/docs/resources/ui/widgets/built-in-widgets/imgs/text-example.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/text-example.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/text-example.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/text-props.png b/docs/resources/ui/widgets/built-in-widgets/imgs/text-props.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/text-props.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/text-props.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/toggle.png b/docs/resources/ui/widgets/built-in-widgets/imgs/toggle.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/toggle.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/toggle.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/v-divider.png b/docs/resources/ui/widgets/built-in-widgets/imgs/v-divider.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/imgs/v-divider.png
rename to docs/resources/ui/widgets/built-in-widgets/imgs/v-divider.png
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/list-grid.md b/docs/resources/ui/widgets/built-in-widgets/list-grid.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/list-grid.md
rename to docs/resources/ui/widgets/built-in-widgets/list-grid.md
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/mouse-region.md b/docs/resources/ui/widgets/built-in-widgets/mouse-region.md
similarity index 95%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/mouse-region.md
rename to docs/resources/ui/widgets/built-in-widgets/mouse-region.md
index 0385442d..7f3b4970 100644
--- a/docs/resources/ui-building-blocks/widgets/built-in-widgets/mouse-region.md
+++ b/docs/resources/ui/widgets/built-in-widgets/mouse-region.md
@@ -95,9 +95,9 @@ the next step, we will add the same actions for both MouseRegion widgets so that
 3. Create a boolean [App State variable](../../../../resources/data-representation/app-state.md) 
    and use it 
 to 
-[add conditional visibility](../../../../resources/ui-building-blocks/widgets/widget-commonalities.md#conditional) 
+[add conditional visibility](../../widgets/widget-commonalities.md#conditional) 
    on menu options.
-4. On both MouseRegion widgets, add an [update app state variable](/actions/actions/state-management/update-app-state) action to set **True** when the mouse enters and **False** when the mouse exit.
+4. On both MouseRegion widgets, add an [update app state variable](../../../../resources/data-representation/app-state.md#update-app-state-action) action to set **True** when the mouse enters and **False** when the mouse exit.
 
 <figure>
     <div style={{
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/spacer.md b/docs/resources/ui/widgets/built-in-widgets/spacer.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/spacer.md
rename to docs/resources/ui/widgets/built-in-widgets/spacer.md
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/text.md b/docs/resources/ui/widgets/built-in-widgets/text.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/text.md
rename to docs/resources/ui/widgets/built-in-widgets/text.md
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/tooltip.md b/docs/resources/ui/widgets/built-in-widgets/tooltip.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/tooltip.md
rename to docs/resources/ui/widgets/built-in-widgets/tooltip.md
diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/transform.md b/docs/resources/ui/widgets/built-in-widgets/transform.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/built-in-widgets/transform.md
rename to docs/resources/ui/widgets/built-in-widgets/transform.md
diff --git a/docs/resources/ui-building-blocks/widgets/composing-widgets.md b/docs/resources/ui/widgets/composing-widgets.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/composing-widgets.md
rename to docs/resources/ui/widgets/composing-widgets.md
diff --git a/docs/resources/ui-building-blocks/widgets/generate-dynamic-children.md b/docs/resources/ui/widgets/generate-dynamic-children.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/generate-dynamic-children.md
rename to docs/resources/ui/widgets/generate-dynamic-children.md
diff --git a/docs/resources/ui-building-blocks/widgets/img.png b/docs/resources/ui/widgets/img.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/img.png
rename to docs/resources/ui/widgets/img.png
diff --git a/docs/resources/ui-building-blocks/widgets/img_1.png b/docs/resources/ui/widgets/img_1.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/img_1.png
rename to docs/resources/ui/widgets/img_1.png
diff --git a/docs/resources/ui-building-blocks/widgets/img_2.png b/docs/resources/ui/widgets/img_2.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/img_2.png
rename to docs/resources/ui/widgets/img_2.png
diff --git a/docs/resources/ui-building-blocks/widgets/img_3.png b/docs/resources/ui/widgets/img_3.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/img_3.png
rename to docs/resources/ui/widgets/img_3.png
diff --git a/docs/resources/ui-building-blocks/widgets/img_4.png b/docs/resources/ui/widgets/img_4.png
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/img_4.png
rename to docs/resources/ui/widgets/img_4.png
diff --git a/docs/resources/ui-building-blocks/widgets/widget-commonalities.md b/docs/resources/ui/widgets/widget-commonalities.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/widget-commonalities.md
rename to docs/resources/ui/widgets/widget-commonalities.md
diff --git a/docs/resources/ui-building-blocks/widgets/widget-configurations.md b/docs/resources/ui/widgets/widget-configurations.md
similarity index 100%
rename from docs/resources/ui-building-blocks/widgets/widget-configurations.md
rename to docs/resources/ui/widgets/widget-configurations.md
diff --git a/sidebars.ts b/sidebars.ts
index 2944ba33..3d34bfb2 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -6,11 +6,10 @@ const sidebars: SidebarsConfig = {
     changelogSidebar: [{type: 'autogenerated', dirName: 'changelog'}], // Adjust `dirName` as needed
     docsSidebar: [
         {
-            type: 'category',
+            type: 'doc',
+            id: 'index',
             label: 'Getting Started',
-            collapsed: false,
-            items: ['index'],
-        },
+        },,
         'intro/quickstart',
         {
             type: 'category',
@@ -37,7 +36,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Resources',
-            collapsed: false,
+            collapsed: true,
             link: {
                 type: 'generated-index',
                 title: 'FlutterFlow Resources',
@@ -55,7 +54,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Building Concepts',
-            collapsed: false,
+            collapsed: true,
             link: {
                 type: 'generated-index',
                 title: 'Key Concepts',
@@ -73,7 +72,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Testing & Publishing',
-            collapsed: false,
+            collapsed: true,
             items: [
                 {
                     type: 'autogenerated',
@@ -87,8 +86,8 @@ const sidebars: SidebarsConfig = {
             collapsed: true,
             link: {
                 type: 'generated-index',
-                title: 'FF Guides',
-                description: 'Learn about the various integrations available in FlutterFlow!',
+                title: 'Third Party Integrations',
+                description: 'Learn about the various third-party integrations available in FlutterFlow!',
                 slug: '/integrations',
                 keywords: ['guides'],
             },