...

Author: harshilp24

website/docs/packages/how-to-guides/use-query-inside-js-module.md

@@ -24,7 +24,7 @@ This page shows how to create a custom authentication module using packages, whi
 
 ## Prerequisites
 
-- A UI Package that has already been created. For more information, see [Package and query modules tutorials](/packages/tutorial/query-module).
+- A UI Package that has already been created. For more information, see [UI Modules tutorials](//packages/tutorial/ui-module).
 - An authenticated datasource with user sign-in endpoints.
 
 

website/docs/packages/overview.md

@@ -31,18 +31,20 @@ For Appsmith version v1.57 or earlier, refer to the legacy documentation for the
 
 A **Package** is a reusable bundle that can be shared across apps in the same workspace. There are two types of packages in Appsmith:
 
-<ZoomImage
-  src="/img/modules-landing.png" 
-  alt="Modules image"
-  caption=""
-/>
 
 ### Code Packages
 
 Code Packages are reusable bundles that group multiple logic-based modules, which can be shared across applications within the same workspace.
 
 Inside a Code Package, you can create two types of modules—Query Modules and JavaScript Modules. These modules allow you to encapsulate backend logic in a reusable, version-controlled way, helping you standardize how data is fetched and processed across your apps.
 
+
+<ZoomImage
+  src="/img/modules-landing.png" 
+  alt="Modules image"
+  caption=""
+/>
+
 * **Query Modules:** Reusable datasource queries that can be used across different apps and pages. You can pass dynamic inputs to the query module, which allows you to change query parameters based on user input or widget actions. They are deployment-independent, meaning updates affect only applications in edit mode and not the deployed version.
 
 * **JavaScript Modules:** Reusable objects containing JavaScript functions and logic, enabling efficient data manipulation and standardized handling. It allows you to pass data between query and JS modules, ensuring smooth integration and reuse across different applications.
@@ -52,12 +54,18 @@ Inside a Code Package, you can create two types of modules—Query Modules and J
 
 UI Packages allow you to create and distribute reusable UI components across multiple applications in the same workspace.
 
-Inside a UI Package, you can create UI Modules—self-contained user interface components that bundle widgets, logic, and internal queries into a configurable unit. These modules are designed to enhance consistency, simplify UI development, and promote reuse across your apps.
 
 * **UI Modules:** Reusable widgets and UI components designed to enhance modularity and reusability in the user interface, streamlining the development and maintenance of consistent UI elements across multiple applications.
 
 
 
+<ZoomImage
+  src="/img/moduleui.png" 
+  alt="Modules image"
+  caption=""
+/>
+
+
 ## Getting started
 
 

website/docs/packages/reference/ui-module-instance.md

@@ -68,9 +68,7 @@ Then inside the module, the corresponding widget (e.g., `Input1`) can use:
 
 <dd>
 
-Allows you to access dynamic values from the UI Module Instance in your parent application. Outputs listed at the instance level are automatically generated based on the Outputs defined when the UI Module was created.
-
-Outputs enable you to retrieve internal module state, computed values, or processing results without needing to understand the module's internal implementation.
+Outputs allow your app to receive data from a UI Module. You can use outputs to access values like user input, results, or internal state from the module. These values are defined inside the module and become available in your app when you use the module instance.
 
 You can access outputs using the module instance name followed by .`outputs.outputName`:
 

website/docs/packages/tutorial/js-module.md

@@ -1,5 +1,5 @@
 ---
-title: JS modules
+title: JS Modules
 hide_title: true
 ---