Add new rst guide files

Issue-ID: CCSDK-3070

Issue-ID: CCSDK-3081

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I25c2488ac1ad12966a357f11ecca6e630f440ec0

16 files changed, 1232 insertions, 337 deletions

diff --git a/docs/api-reference/api-doc-template.rst b/docs/api-reference/api-doc-template.rst
index 689180ef6..a0dc0cec5 100644
--- a/docs/api-reference/api-doc-template.rst
+++ b/docs/api-reference/api-doc-template.rst
@@ -2,7 +2,6 @@
 .. International License. http://creativecommons.org/licenses/by/4.0
 .. Copyright (C) 2020 Deutsche Telekom AG.
 
-
 .. This is a template to document new APIs for CDS blueprint processor
 
 .. make use of tabs whenever it fits
@@ -27,7 +26,7 @@ Method 1 Endpoint 1 description
 Request
 ...........
 
-.. code-block:: curl
+.. code-block:: bash
    :caption: **(sample) request**
 
    request command
diff --git a/docs/api-reference/bp-processor.rst b/docs/api-reference/bp-processor.rst
index 00dd7cce6..eb29b093c 100644
--- a/docs/api-reference/bp-processor.rst
+++ b/docs/api-reference/bp-processor.rst
@@ -9,9 +9,9 @@ Introduction
 --------------
 
 This section shows all resources and endpoints which CDS BP processor currently provides through a swagger file
-which is automatically created during CDS build process by Swagger Maven Plugin. A corresponding Postman collection is 
+which is automatically created during CDS build process by Swagger Maven Plugin. A corresponding Postman collection is
 also included. Endpoints can also be described using this template
-:download:`api-doc-template.rst <api-doc-template.rst>` but this is not the prefered way to describe the CDS API.
+:download:`api-doc-template.rst <api-doc-template.rst>` but this is not the preferred way to describe the CDS API.
 
 You can find a sample workflow tutorial :ref:`below <workflow-tutorial>` which will show how to use the endpoints
 in the right order. This will give you a better understanding of the CDS Blueprint Processor API.
@@ -19,7 +19,7 @@ in the right order. This will give you a better understanding of the CDS Bluepri
 Getting Started
 -----------------
 
-If you cant access a running CDS Blueprint Processor yet, you can choose one of the below options to run it. 
+If you cant access a running CDS Blueprint Processor yet, you can choose one of the below options to run it.
 Afterwards you can start trying out the API.
 
 * CDS in Microk8s: https://wiki.onap.org/display/DW/Running+CDS+on+Microk8s (RDT link to be added)
@@ -62,7 +62,7 @@ GET ``http://{{host}}:{{port}}/actuator/mappings``
 
 Lists all endpoints from blueprints processor.
 
-.. code-block:: curl
+.. code-block:: bash
    :caption: **request**
 
    curl --location --request GET 'http://localhost:8081/actuator/mappings' \
diff --git a/docs/index.rst b/docs/index.rst
index ef2d94f91..62e749342 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -116,7 +116,6 @@ User Guides
    userguides/developer-guide/index
    userguides/installation
    userguides/design-time-guide/designtime
-   userguides/resourceassignment
 
 Use Cases
 ---------
@@ -132,7 +131,7 @@ CDS Designer UI
 .. toctree::
    :maxdepth: 2
 
-   ui/designer
+   ui/designer-guide
 
 
 Offered APIs
diff --git a/docs/modelingconcepts/data-dictionary.rst b/docs/modelingconcepts/data-dictionary.rst
index bfc86d0c9..9f9699a05 100644
--- a/docs/modelingconcepts/data-dictionary.rst
+++ b/docs/modelingconcepts/data-dictionary.rst
@@ -84,28 +84,28 @@ Here is how input-key-mapping, output-key-mapping and key-dependencies can be us
    * - vf-module-label data dictionary
    * - .. code-block:: json
 
-        {
-          "name" : "vf-module-label",
-          "tags" : "vf-module-label",
-          "updated-by" : "adetalhouet",
-          "property" : {
-            "description" : "vf-module-label",
-            "type" : "string"
-          },
-          "sources" : {
-            "primary-db" : {
-              "type" : "source-primary-db",
-              "properties" : {
-                "type" : "SQL",
-                "query" : "select sdnctl.VF_MODULE_MODEL.vf_module_label as vf_module_label from sdnctl.VF_MODULE_MODEL where sdnctl.VF_MODULE_MODEL.customization_uuid=:customizationid",
-                "input-key-mapping" : {
-                  "customizationid" : "vf-module-model-customization-uuid"
-                },
-                "output-key-mapping" : {
-                  "vf-module-label" : "vf_module_label"
-                },
-                "key-dependencies" : [ "vf-module-model-customization-uuid" ]
+            {
+              "name" : "vf-module-label",
+              "tags" : "vf-module-label",
+              "updated-by" : "adetalhouet",
+              "property" : {
+                "description" : "vf-module-label",
+                "type" : "string"
+              },
+              "sources" : {
+                "primary-db" : {
+                  "type" : "source-primary-db",
+                  "properties" : {
+                    "type" : "SQL",
+                    "query" : "select sdnctl.VF_MODULE_MODEL.vf_module_label as vf_module_label from sdnctl.VF_MODULE_MODEL where sdnctl.VF_MODULE_MODEL.customization_uuid=:customizationid",
+                    "input-key-mapping" : {
+                      "customizationid" : "vf-module-model-customization-uuid"
+                    },
+                    "output-key-mapping" : {
+                      "vf-module-label" : "vf_module_label"
+                    },
+                    "key-dependencies" : [ "vf-module-model-customization-uuid" ]
+                  }
+                }
               }
-            }
-          }
-        }
\ No newline at end of file
+            }
\ No newline at end of file
diff --git a/docs/modelingconcepts/data-type.rst b/docs/modelingconcepts/data-type.rst
index 29143de80..ee5908002 100644
--- a/docs/modelingconcepts/data-type.rst
+++ b/docs/modelingconcepts/data-type.rst
@@ -41,7 +41,7 @@ Users can **create** as many **data type** as needed.
    To create a custom data-type you can use a POST call to CDS endpoint:
    "<cds-ip>:<cds-port>/api/v1/model-type"
 
-   .. code-block:: python
+   .. code-block:: json
       :caption: **Payload:**
 
       {
@@ -51,7 +51,7 @@ Users can **create** as many **data type** as needed.
         "definition": {
           "description": "<description>",
           "version": "<version-number: eg 1.0.0>",
-          "properties": {<add properties of your custom data type in JSON format>},
+          "properties": "code-block::{<add properties of your custom data type in JSON format>}",
           "derived_from": "tosca.datatypes.Root"
         },
         "description": "<description",
@@ -111,44 +111,44 @@ List of existing data type:
       .. code-block:: json
          :caption: **datatype-resource-assignment**
 
-        {
-          "version": "1.0.0",
-          "description": "This is Resource Assignment Data Type",
-          "properties": {
-            "property": {
-              "required": true,
-              "type": "datatype-property"
-            },
-            "input-param": {
-              "required": true,
-              "type": "boolean"
-            },
-            "dictionary-name": {
-              "required": false,
-              "type": "string"
-            },
-            "dictionary-source": {
-              "required": false,
-              "type": "string"
-            },
-            "dependencies": {
-              "required": true,
-              "type": "list",
-              "entry_schema": {
-                "type": "string"
-              }
-            },
-            "updated-date": {
-              "required": false,
-              "type": "string"
-            },
-            "updated-by": {
-              "required": false,
-              "type": "string"
-            }
-          },
-          "derived_from": "tosca.datatypes.Root"
-        }
+         {
+           "version": "1.0.0",
+           "description": "This is Resource Assignment Data Type",
+           "properties": {
+             "property": {
+               "required": true,
+               "type": "datatype-property"
+             },
+             "input-param": {
+               "required": true,
+               "type": "boolean"
+             },
+             "dictionary-name": {
+               "required": false,
+               "type": "string"
+             },
+             "dictionary-source": {
+               "required": false,
+               "type": "string"
+             },
+             "dependencies": {
+               "required": true,
+               "type": "list",
+               "entry_schema": {
+                 "type": "string"
+               }
+             },
+             "updated-date": {
+               "required": false,
+               "type": "string"
+             },
+             "updated-by": {
+               "required": false,
+               "type": "string"
+             }
+           },
+           "derived_from": "tosca.datatypes.Root"
+         }
 
    .. tab:: property
 
diff --git a/docs/modelingconcepts/dynamic-payload.rst b/docs/modelingconcepts/dynamic-payload.rst
index f9c8157d4..d5a2976a4 100644
--- a/docs/modelingconcepts/dynamic-payload.rst
+++ b/docs/modelingconcepts/dynamic-payload.rst
@@ -23,45 +23,45 @@ Here is how the a **generic request** and **response** look like.
      - response
    * - .. code-block:: json
 
-        {
-          "commonHeader": {
-            "originatorId": "",
-            "requestId": "",
-            "subRequestId": ""
-          },
-          "actionIdentifiers": {
-            "blueprintName": "",
-            "blueprintVersion": "",
-            "actionName": "",
-            "mode": ""
-          },
-          "payload": {
-            "$actionName-request": {
-              "$actionName-properties": {
+            {
+              "commonHeader": {
+                "originatorId": "",
+                "requestId": "",
+                "subRequestId": ""
+              },
+              "actionIdentifiers": {
+                "blueprintName": "",
+                "blueprintVersion": "",
+                "actionName": "",
+                "mode": ""
+              },
+              "payload": {
+                "$actionName-request": {
+                  "$actionName-properties": {
+                  }
+                }
               }
             }
-          }
-        }
 
      - .. code-block:: json
 
-        {
-          "commonHeader": {
-            "originatorId": "",
-            "requestId": "",
-            "subRequestId": ""
-          },
-          "actionIdentifiers": {
-            "blueprintName": "",
-            "blueprintVersion": "",
-            "actionName": "",
-            "mode": ""
-          },
-          "payload": {
-            "$actionName-response": {
+            {
+              "commonHeader": {
+                "originatorId": "",
+                "requestId": "",
+                "subRequestId": ""
+              },
+              "actionIdentifiers": {
+                "blueprintName": "",
+                "blueprintVersion": "",
+                "actionName": "",
+                "mode": ""
+              },
+              "payload": {
+                "$actionName-response": {
+                }
+              }
             }
-          }
-        }
 
 The ``actionName``, under the ``actionIdentifiers`` refers to the name of a
 Workflow (see :ref:`workflow`)
diff --git a/docs/modelingconcepts/node-type.rst b/docs/modelingconcepts/node-type.rst
index 070f6f65c..034a6b063 100644
--- a/docs/modelingconcepts/node-type.rst
+++ b/docs/modelingconcepts/node-type.rst
@@ -965,7 +965,6 @@ listed in the other section.
             .. code-block:: json
                :caption: **vnf-netconf-device**
 
-
                {
                  "description": "This is VNF Device with Netconf  Capability",
                  "version": "1.0.0",
diff --git a/docs/modelingconcepts/workflow.rst b/docs/modelingconcepts/workflow.rst
index f76fdea96..7e21cfe0c 100644
--- a/docs/modelingconcepts/workflow.rst
+++ b/docs/modelingconcepts/workflow.rst
@@ -250,9 +250,10 @@ Properties of a workflow
                 :caption: **dynamic input**
 
                 "resource-assignment-properties": {
-                "required": true,
-                "type": "dt-resource-assignment-properties"
+                  "required": true,
+                  "type": "dt-resource-assignment-properties"
                 }
+
    * - outputs
      - | Defines the outputs of the execution; there can be as many output as needed.
        | Depending on the Component (see :ref:`node_type` -> Component) of use, some attribute might be retrievable.
diff --git a/docs/resourcedefinition/resourcesource.rst b/docs/resourcedefinition/resourcesource.rst
index f05f09c84..942422814 100644
--- a/docs/resourcedefinition/resourcesource.rst
+++ b/docs/resourcedefinition/resourcesource.rst
@@ -390,32 +390,32 @@ To tell the resolution framework what is of interest in the response, the output
 
 .. code-block:: json
 
-  {
-    "tags" : "oam-local-ipv4-address",
-    "name" : "create_netbox_ip",
-    "property" : {
-      "description" : "netbox ip",
-      "type" : "dt-netbox-ip"
-    },
-    "updated-by" : "adetalhouet",
-    "sources" : {
-      "config-data" : {
-        "type" : "source-rest",
-        "properties" : {
-          "type" : "JSON",
-          "verb" : "POST",
-          "endpoint-selector" : "ipam-1",
-          "url-path" : "/api/ipam/prefixes/$prefixId/available-ips/",
-          "path" : "",
-          "input-key-mapping" : {
-            "prefixId" : "prefix-id"
-          },
-          "output-key-mapping" : {
-            "address" : "address",
-            "id" : "id"
-          },
-          "key-dependencies" : [ "prefix-id" ]
-        }
-      }
-    }
-  }
\ No newline at end of file
+     {
+       "tags" : "oam-local-ipv4-address",
+       "name" : "create_netbox_ip",
+       "property" : {
+         "description" : "netbox ip",
+         "type" : "dt-netbox-ip"
+       },
+       "updated-by" : "adetalhouet",
+       "sources" : {
+         "config-data" : {
+           "type" : "source-rest",
+           "properties" : {
+             "type" : "JSON",
+             "verb" : "POST",
+             "endpoint-selector" : "ipam-1",
+             "url-path" : "/api/ipam/prefixes/$prefixId/available-ips/",
+             "path" : "",
+             "input-key-mapping" : {
+               "prefixId" : "prefix-id"
+             },
+             "output-key-mapping" : {
+               "address" : "address",
+               "id" : "id"
+             },
+             "key-dependencies" : [ "prefix-id" ]
+           }
+         }
+       }
+     }
\ No newline at end of file
diff --git a/docs/ui/designer.rst b/docs/ui/designer-guide.rst
index 3f78c1fe9..bd1960726 100644
--- a/docs/ui/designer.rst
+++ b/docs/ui/designer-guide.rst
@@ -1,26 +1,29 @@
+
 .. This work is licensed under a Creative Commons Attribution 4.0 International License.
 .. http://creativecommons.org/licenses/by/4.0
 .. Copyright (C) 2019 IBM.
 
-CDS Designer UI
-===============
+.. _designer_guide:
 
+Designer Guide
+==============
 .. toctree::
-   :caption: Table of Contents
    :maxdepth: 4
 
+.. note::
+    **How to Get Started with CDS Designer UI**
 
-Getting Started
----------------
+    If you’re new to CDS Designer UI and need to get set up, the following guides may be helpful:
 
-This is your CDS Designer UI guide. No matter how experienced you are or
-what you want to achieve, it should cover everything you need to know —
-from navigating the interface to making the most of different features.
+    -  :ref:`running_cds_ui_locally`
 
+Getting Started
+---------------
+This is your CDS Designer UI guide. No matter how experienced you are or what you want to achieve,
+it should cover everything you need to know — from navigating the interface to making the most of different features.
 
 What is CDS Designer UI?
 ------------------------
-
 +----------------------------------------------+--------------+
 | CDS Designer UI is a framework to automate   |              |
 | the **resolution of resources** for          |    |image1|  |
@@ -28,15 +31,15 @@ What is CDS Designer UI?
 | provisioning operation, such as day0, day1,  |              |
 | or day2 configuration.                       |              |
 |                                              |              |
+|                                              |              |
 | CDS has both **design-time** and             |              |
 | **run-time** activities; during design time, |              |
 | **Designer** can **define** what **actions** |              |
 | are required for a given service, along with |              |
 | anything comprising the action. The design   |              |
-| produces a `CBA                              |              |
-| Package <https://wik                         |              |
-| i.onap.org/display/DW/Modeling+Concepts#Mode |              |
-| lingConcepts-ControllerBlueprintArchive>`__. |              |
+| produces a  :ref:`CBA Package <cba>`         |              |
+|                                              |              |
+|                                              |              |
 | Its **content** is driven from a **catalog** |              |
 | of **reusable data dictionary** and          |              |
 | **component**, delivering a reusable and     |              |
@@ -46,10 +49,8 @@ What is CDS Designer UI?
 | standard**, using JSON as a representation.  |              |
 +----------------------------------------------+--------------+
 
-
 What's new?
 -----------
-
 +----------------------+----------------------+----------------------+
 | |image2|             | |image3|             | |image4|             |
 |                      |                      |                      |
@@ -69,76 +70,43 @@ What's new?
 |                      | management)          |                      |
 +----------------------+----------------------+----------------------+
 
-
 Overview of CDS Interface
 -------------------------
-
-Full CDS UI screens are available in
-`InVision <https://invis.io/PAUI9GLJH3Q>`__
+Full CDS UI screens are available in `InVision <https://invis.io/PAUI9GLJH3Q>`__
 
 |image8|
 
-1. **CDS main menu:** Access all CDS module list including Packages,
-   Data Dictionary, Controller Catalog, etc.
-
+1. **CDS main menu:** Access all CDS module list including Packages, Data Dictionary, Controller Catalog, etc.
 2. **Profile:** Access user profile information
-
-3. **Module Title:** See the current module name and the total number of
-   items in the module list
-
-4. **Module list:** View all active items in module and tools for search
-   and filtering
-
+3. **Module Title:** See the current module name and the total number of items in the module list
+4. **Module list:** View all active items in module and tools for search and filtering
 
 CBA Packages
 ------------
 
 Package List
 ~~~~~~~~~~~~
-
 It gives you quick access to all and most recent created/edit packages
 
 |image9|
 
-1.  **Module Tabs:** Access All, Deployed, Under Construction, or
-    Archived packages
-
+1.  **Module Tabs:** Access All, Deployed, Under Construction, or Archived packages
 2.  **Search:** Search for a package by title
-
 3.  **Filter:** Filter packages by package tags
-
-4.  **Package Sort:** Sort packages by recent or alphanumeric (name) or
-    version
-
+4.  **Package Sort:** Sort packages by recent or alphanumeric (name) or version
 5.  **List Pagination:** navigate between package list pages
-
 6.  **Create Package:** Create a new CBA package
-
-7.  **Import Package:** Import other packages that are created
-    previously on CDS Editor or Designer or created by other/current
-    user
-
-8.  **Package box:** It shows a brief detail of the package and gives
-    access to some actions of the package
-
-9.  **Package name and version**
-
-10. **More menu:** Access a list of actions including Clone, Archive,
-    Download, and Delete
-
-11. **Last modified:** Shows user name and date and time of last
-    modifications made in the package
-
-12. **Package Description**
-
-13. **Collaborators:** See who's collaborating to edit in the package
-
-14. **Configuration button:** Go directly to package configuration
-
-15. **Designer Mode:** It indicates package mode (Designer, Scripting,
-    and Generic scripting) and by clicking on it, it will load to mode
-    screen
-
+7.  **Import Package:** Import other packages that are created previously on CDS Editor or Designer or created by other/current user
+8.  **Package box:** It shows a brief detail of the package and gives access to some actions of the package
+9.  **Deployed package indicator**
+10. **Package name and version**
+11. **More menu:** Access a list of actions including Clone, Archive, Download, and Delete
+12. **Last modified:** Shows user name and date and time of last modifications made in the package
+13. **Package Description**
+14. **Package Tags**
+15. **Collaborators:** See who's collaborating to edit in the package
+16. **Configuration button:** Go directly to package configuration
+17. **Designer Mode:** It indicates package mode (Designer, Scripting, and Generic scripting) and by clicking on it, it will load to mode screen
 
 Create a New CBA Package
 ------------------------
@@ -148,93 +116,72 @@ User Flow
 
 |image10|
 
-
 Create a New Package
 ~~~~~~~~~~~~~~~~~~~~
+You can create a new CBA Package by creating a new custom package or by import a package file that is already created before.
 
-You can create a new CBA Package by creating a new custom package or by
-import package file that is already created before.
-
-**Create/Import Package**
-
-You can’t create/import a CBA package that has the same name and version
-of an existing package. Packages can be in the same name but in
-different version number (ex., Package one v1.0.0 & Package one v1.0.1).
+.. note::
+	**Create/Import Package**
+	You can’t create/import a CBA package that has the same name and version
+	of an existing package. Packages can be in the same name but in
+	different version numbers (ex., Package one v1.0.0 & Package one v1.0.1).
 
 **Create a New Custom CBA Package**
-
-From the Packages page, click on the **Create Package** button to
-navigate to **Package** **Configuration**
+From the Packages page, click on the **Create Package** button to navigate to **Package** **Configuration**
 
 |image11|
 
-
-`MetaData <https://wiki.onap.org/display/DW/Modeling+Concepts#Concepts-958933373>`__
-~~~~~~~~~
+:ref:`MetaData <tosca_meta>`
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 In **MetaData Tab,** select Package Mode, enter package Name, Version,
 Description and other configurations
 
 |image12|
 
-Once you fill all required inputs, you can save this package by click
-**Save** button in the Actions menu
+Once you fill in all required inputs, you can save this package by clicking the **Save** button in the Actions menu
 
 |image13|
 
-**Package Info Box:** It is in top of configurations tabs and it appears
-after you save a package for the first time
+**Package Info Box:** It is in top of configurations tabs and it appears after you save a package for the first time
 
 |image14|
 
-You can continue adding package configuration or go directly to
-**Designer Mode** screen from Package infobox
+You can continue adding package configuration or go directly to the **Designer Mode** screen from Package info box
 
-All changes will be saved when you click on **Save** button
+All changes will be saved when you click on the **Save** button
 
-To close the package configuration and go back to the Package list,
-navigate to the top left in breadcrumb and click the **CBA Packages**
-link or click on **Packages** link in the Main menu.
+To close the package configuration and go back to the Package list, navigate to the top left in breadcrumb and click the **CBA Packages**
+link or click on the **Packages** link in the Main menu.
 
-
-`Template & Mapping <https://wiki.onap.org/display/DW/Modeling+Concepts#Concepts--1256902502>`__
-~~~~~~~~~~~~~~~~~~~
+:ref:`Template & Mapping <template>`
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 You can create as many templates using
-`artifact-mapping-resource <https://wiki.onap.org/display/DW/Modeling+Concepts#ModelingConcepts-artifact-mapping-resource>`__
+
+artifact-mapping-resource (:ref:`artifact_type` -> Mapping)
 or/and
-`artifact-template-velocity. <https://wiki.onap.org/display/DW/Modeling+Concepts#ModelingConcepts-artifact-template-velocity>`__
+artifact-template-velocity  (:ref:`artifact_type` -> Velocity)
 
 |image15|
 
 1. **Template name**
-
 2. **Template Section:** Where you include template attributes
-
-3. **Manage Mapping:** Here the automapping process occurs to template
-   attributes to refer to the data dictionary that will be used to
-   resolve a particular resource.
+3. **Manage Mapping:** Here the automapping process occurs to template attributes to refer to the data dictionary that will be used to resolve a particular resource.
 
 **Template Section**
 
 |image16|
 
-1. **Template Type:** Template is defined by one of three templates
-   (Velocity, Jinja, Kotlin)
-
-2. **Import Template Attributes/Parameters:** You can add attributes by
-   Import attribute list file or by
-
-3. **Insert Template Attributes/Parameters Manually:** You can insert
-   Attributes manually in the code editor. Code editor validates
-   attributes according to the pre-selected template type
+1. **Template Type:** Template is defined by one of three templates (Velocity, Jinja, Kotlin)
+2. **Import Template Attributes/Parameters:** You can add attributes by Import attribute list file or by
+3. **Insert Template Attributes/Parameters Manually:** You can insert Attributes manually in the code editor. Code editor validates attributes according to the pre-selected template type
 
 **Import Template Attributes**
 
 |image17|
 
-After import attributes, you can add/edit/delete attributes in the code
-editor.
+After import attributes, you can add/edit/delete attributes in the code editor.
 
 |image18|
 
@@ -242,15 +189,10 @@ editor.
 
 |image19|
 
-1. **Use current Template Instance:** You can use attributes from
-   Template section
-
-2. **Upload Attributes List:** In case you don’t have existing
-   attributes in Template section or have different attributes, you can
-   upload attributes list
+1. **Use current Template Instance:** You can use attributes from the Template section
+2. **Upload Attributes List:** In case you don’t have existing attributes in Template section or have different attributes, you can upload the attributes list
 
-Once you select the source of attributes, you get a confirmation of
-success fetching.
+Once you select the source of attributes, you get a confirmation of success fetching.
 
 |image20|
 
@@ -258,74 +200,86 @@ Then the Mapped Table appears to show the Resource Dictionary reference.
 
 |image21|
 
-When you finish the creation process, you must click on **the Finish
-button (1)** to submit the template, or you can clear all data by click
-on **the Clear button** **(2).**
+When you finish the creation process, you must click on **the Finish button (1)**
+to submit the template, or you can clear all data by click on **the Clear button** **(2).**
 
 |image22|
 
+:ref:`Scripts <scripts>`
+~~~~~~~~~~~~~~~~~~~~~~~~
 
-`Scripts <https://wiki.onap.org/display/DW/Modeling+Concepts#Concepts--703799064>`__
-~~~~~~~~
-
-Allowed file type: Kotlin(kt), Python(py)
+*Allowed file type: Kotlin(kt), Python(py), Jython, Ansible*
 
 To add script file/s, you have two options:
 
+1. **Create Script**
+2. **Import File**
+
 **Enter file URL:** Script file can be stored in server and you can add this script file by copy and paste file URL in URL input then
 **press ENTER** key from the keyboard
 
 |image23|
 
-**Import File**
+**Create a Script File**
+
+1. **File Name:** Add the script file name
+2. **Script Type:** Choose script type (Kotlin, Jython, Ansible)
+3. **Script Editor:** Enter the script file content
 
 |image24|
 
-By adding script file/s, you can:
+After you type the script, click on the **Create Script** button to save it
 
-1. Edit file: You can edit each script file from the code editor
+|image25|
 
+By adding script file/s, you can:
+1. Edit file: You can edit each script file from the code editor
 2. Delete file
 
-|image25|
+|image26|
 
+:ref:`Definitions <data_type>`
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-`Definitions <https://wiki.onap.org/display/DW/Modeling+Concepts#ModelingConcepts-dataType>`__
-~~~~~~~~~~~~
+To define a data type that represents the **schema** of a specific type of **data**,
+you have to **enrich** the package to automatically generate all definition files:
 
-Allowed file type: JSON
+1. **Enrich Package:** from the package details box, click on the Enrich button
 
-To define a data type that represents the **schema** of a specific type
-of **data**, you have two options:
+|image27|
 
-**Enter file URL:**  Definition file can be stored in server and user can add this script file by copy and paste file URL in URL input then
-**press ENTER** key from the keyboard
+Once you successfully enrich the package, all definition files will be listed.
 
-|image26|
+|image28|
 
-**Import File**
+By definition file/s, you can Delete file
 
-|image27|
+|image29|
 
-By adding definition file/s, you can:
+:ref:`External System Authentication Properties <external_system>`
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+In order to populate the system information within the package, you have to provide **dsl_definitions**
 
-1. Edit file: You can edit each definition file from the code editor
+|image30|
 
-2. Delete file
+Topology Template
+~~~~~~~~~~~~~~~~~
+Here you can **manually** add your package:
 
-|image28|
+1. :ref:`Workflow <workflow>` that define an overall action to be taken on the service
+2. :ref:`Node/Component template <node_type>` that is used to represent a **functionality** along with its **contracts**, such as **inputs**, **outputs**, and **attributes**
 
+|image31|
 
-`External System Authentication Properties <https://wiki.onap.org/display/DW/Modeling+Concepts#ModelingConcepts-FlexiblePlugIn>`__
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-In order to populate the system information within the package, you have
-to provide **dsl_definitions**
+Hello World CBA Reference
+-------------------------
 
-|image29|
+-  :ref:`hello_world_resource_resolution_cba`
+-  :ref:`hello_world_script_executor_cba`
 
 
-.. |image1| image:: https://wiki.onap.org/download/attachments/84650426/CDS%20Logo.png?version=1&modificationDate=1591034588000&api=v2
+.. |image1| image:: https://wiki.onap.org/download/attachments/84650426/CDS%20Logo.png?version=4&modificationDate=1591723580000&api=v2
    :width: 200pt
 .. |image2| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%201.png?version=1&modificationDate=1591032224000&api=v2
    :width: 50pt
@@ -339,47 +293,51 @@ to provide **dsl_definitions**
    :width: 50pt
 .. |image7| image:: https://wiki.onap.org/download/thumbnails/84650426/Feature%206.png?version=1&modificationDate=1591032228000&api=v2
    :width: 30pt
-.. |image8| image:: https://wiki.onap.org/download/attachments/84650426/Interface.jpg?version=1&modificationDate=1591033366000&api=v2
-   :width: 500pt
-.. |image9| image:: https://wiki.onap.org/download/attachments/84650426/Package%20List.jpg?version=1&modificationDate=1591033938000&api=v2
-   :width: 500pt
-.. |image10| image:: https://wiki.onap.org/download/attachments/84650426/Create%20Package%20User%20flow.jpg?version=1&modificationDate=1591034050000&api=v2
-   :width: 500pt
-.. |image11| image:: https://wiki.onap.org/download/attachments/84650426/Create%20Package.jpg?version=1&modificationDate=1591034193000&api=v2
-   :width: 500pt
-.. |image12| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20MetaData.jpg?version=1&modificationDate=1591034297000&api=v2
-   :width: 500pt
-.. |image13| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20Action%20Menu.jpg?version=1&modificationDate=1591034344000&api=v2
-   :width: 500pt
-.. |image14| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20Info%20Box.jpg?version=1&modificationDate=1591034382000&api=v2
-   :width: 500pt
-.. |image15| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%201.jpg?version=1&modificationDate=1591638883000&api=v2
-   :width: 500pt
-.. |image16| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%202.jpg?version=1&modificationDate=1591638960000&api=v2
-   :width: 500pt
-.. |image17| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%203.jpg?version=1&modificationDate=1591639023000&api=v2
-   :width: 500pt
-.. |image18| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%206.jpg?version=1&modificationDate=1591639059000&api=v2
-   :width: 500pt
-.. |image19| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%207.jpg?version=1&modificationDate=1591639152000&api=v2
-   :width: 500pt
-.. |image20| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%208.jpg?version=1&modificationDate=1591639203000&api=v2
-   :width: 500pt
-.. |image21| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%209.jpg?version=1&modificationDate=1591639235000&api=v2
-   :width: 500pt
-.. |image22| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%2011.jpg?version=1&modificationDate=1591639260000&api=v2
-   :width: 500pt
-.. |image23| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%201.jpg?version=1&modificationDate=1591639325000&api=v2
-   :width: 500pt
-.. |image24| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%202.jpg?version=1&modificationDate=1591639391000&api=v2
-   :width: 500pt
-.. |image25| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%203.jpg?version=1&modificationDate=1591639425000&api=v2
-   :width: 500pt
-.. |image26| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%201.jpg?version=1&modificationDate=1591639459000&api=v2
-   :width: 500pt
-.. |image27| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%202.jpg?version=1&modificationDate=1591639514000&api=v2
-   :width: 500pt
-.. |image28| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%203.jpg?version=1&modificationDate=1591639556000&api=v2
+.. |image8| image:: https://wiki.onap.org/download/attachments/84650426/Interface.jpg?version=2&modificationDate=1609155664000&api=v2
+   :width: 1000pt
+.. |image9| image:: https://wiki.onap.org/download/attachments/84650426/Package%20List.jpg?version=3&modificationDate=1609322704000&api=v2
+   :width: 1000pt
+.. |image10| image:: https://wiki.onap.org/download/attachments/84650426/Create%20Package%20User%20flow.jpg?version=2&modificationDate=1609156805000&api=v2
+   :width: 1000pt
+.. |image11| image:: https://wiki.onap.org/download/attachments/84650426/Create%20Package.jpg?version=2&modificationDate=1609157022000&api=v2
+   :width: 1000pt
+.. |image12| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20MetaData.jpg?version=2&modificationDate=1609157275000&api=v2
+   :width: 1000pt
+.. |image13| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20Action%20Menu.jpg?version=2&modificationDate=1609157671000&api=v2
+   :width: 1000pt
+.. |image14| image:: https://wiki.onap.org/download/attachments/84650426/Package%20Configuration%20-%20Info%20Box.jpg?version=2&modificationDate=1609158391000&api=v2
+   :width: 1000pt
+.. |image15| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%201.jpg?version=2&modificationDate=1609158797000&api=v2
+   :width: 1000pt
+.. |image16| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%202.jpg?version=2&modificationDate=1609158980000&api=v2
+   :width: 1000pt
+.. |image17| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%203.jpg?version=2&modificationDate=1609159240000&api=v2
    :width: 500pt
-.. |image29| image:: https://wiki.onap.org/download/attachments/84650426/External%20system.jpg?version=1&modificationDate=1591639581000&api=v2
-   :width: 500pt
\ No newline at end of file
+.. |image18| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%204.jpg?version=1&modificationDate=1609159448000&api=v2
+   :width: 1000pt
+.. |image19| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%205.jpg?version=1&modificationDate=1609159694000&api=v2
+   :width: 1000pt
+.. |image20| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%206.jpg?version=2&modificationDate=1609159862000&api=v2
+   :width: 1000pt
+.. |image21| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%207.jpg?version=3&modificationDate=1609162172000&api=v2
+   :width: 1000pt
+.. |image22| image:: https://wiki.onap.org/download/attachments/84650426/Temp%20%26%20Mapp%208.jpg?version=2&modificationDate=1609162135000&api=v2
+   :width: 1000pt
+.. |image23| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%201.jpg?version=2&modificationDate=1609163160000&api=v2
+   :width: 1000pt
+.. |image24| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%202.jpg?version=2&modificationDate=1609164336000&api=v2
+   :width: 1000pt
+.. |image25| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%203.jpg?version=2&modificationDate=1609164337000&api=v2
+   :width: 1000pt
+.. |image26| image:: https://wiki.onap.org/download/attachments/84650426/Scripts%204.jpg?version=1&modificationDate=1609164989000&api=v2
+   :width: 1000pt
+.. |image27| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%201.jpg?version=2&modificationDate=1609167774000&api=v2
+   :width: 1000pt
+.. |image28| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%202.jpg?version=2&modificationDate=1609168384000&api=v2
+   :width: 1000pt
+.. |image29| image:: https://wiki.onap.org/download/attachments/84650426/Definitions%203.jpg?version=2&modificationDate=1609168385000&api=v2
+   :width: 1000pt
+.. |image30| image:: https://wiki.onap.org/download/attachments/84650426/DSL.jpg?version=1&modificationDate=1609168557000&api=v2
+   :width: 1000pt
+.. |image31| image:: https://wiki.onap.org/download/attachments/84650426/Topology%20Template.jpg?version=1&modificationDate=1609169308000&api=v2
+   :width: 1000pt
diff --git a/docs/ui/hello-world-resource-resolution-cba.rst b/docs/ui/hello-world-resource-resolution-cba.rst
new file mode 100644
index 000000000..62c113406
--- /dev/null
+++ b/docs/ui/hello-world-resource-resolution-cba.rst
@@ -0,0 +1,357 @@
+.. This work is licensed under a Creative Commons Attribution 4.0 International License.
+.. http://creativecommons.org/licenses/by/4.0
+.. Copyright (C) 2019 IBM.
+
+.. _hello_world_resource_resolution_cba:
+
+How to create a “Hello World” Package with CDS Designer UI? The Resource Resolution Type
+========================================================================================
+
+.. toctree::
+   :maxdepth: 2
+
+.. note::
+    **How to Get Started with CDS Designer UI**
+
+    If you’re new to CDS Designer UI and need to get set up, the following guides may be helpful:
+
+    -  :ref:`running_cds_ui_locally`
+    -  :ref:`designer_guide`
+
+.. note::
+    **NOTE:**
+
+    In order to see the latest version described below in the tutorial, we will need to use the latest cds-ui-server docker image:
+    nexus3.onap.org:10001/onap/ccsdk-cds-ui-server:1.1.0-STAGING-latest
+
+
+Create New CBA Package
+~~~~~~~~~~~~~~~~~~~~~~
+
+In the Package List, click on the **Create Package** button.
+
+|image1|
+
+Define Package MetaData
+~~~~~~~~~~~~~~~~~~~~~~~
+
+In MetaData Tab:
+
+1. Package name (Required), type **"hello_world"**
+2. Package version (Required), type **"1.0.0"**
+3. Package description (Required), type **"Hello World, the New CBA Package created with CDS Designer UI"**
+4. Package Tags (Required), type **"tag1"** then use the **Enter** key on the keyboard
+
+|image2|
+
+Once you enter all fields you will be able to save your package. Click on the **Save** button and continue to define your package.
+
+|image3|
+
+Define Template And Mapping
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+In the Template & Mapping Tab:
+
+1. Enter template name **"hello_world_template"**, then go to **Template section**
+2. Choose the template type **"Velocity"**
+3. Type the Template parameter **"Hello, ${image_name}!"** in the code editor
+
+|image4|
+
+Now, go to the **Manage Mapping section.**
+
+|image5|
+
+Click on the **Use Current Template Instance** button to resolve the value within the template and to auto-map it.
+
+|image6|
+
+Inside the **Mapping table**, change **Dictionary Source** from **default** to **input**
+
+|image7|
+
+Click on the **Finish** button to save the template and close it.
+
+|image8|
+
+After the new template is added to the **Template and Mapping list**, click on the **Save** button to save the package updates.
+
+|image9|
+
+Create An Action
+~~~~~~~~~~~~~~~~~
+
+From the Package information box on top, click on the **Designer Mode** button.
+
+|image10|
+
+Click on the **Skip to Designer Canvas** button to go directly to Designer Mode.
+
+|image11|
+
+Now the designer has zero action added. Let's start adding the first Action.
+
+|image12|
+
+Go to the left side of the designer screen and in the **ACTIONS tab**, click on the **+ New Action** button.
+
+|image13|
+
+Now, the first Action **Action1** is added to the **Actions list** and in the **Workflow canvas**.
+
+|image14|
+
+Add Resource Resolution Function To The Action
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+On the left side of the designer screen, Click on the **FUNCTIONS tab** to view all the **Functions List.**
+
+|image15|
+
+**Drag** the function type **"component-resource-resolution"**
+
+|image16|
+
+**Drop** the function to the **"Action1"** Action container.
+
+|image17|
+
+Define Action Attributes
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+Click on **Action1** from the ACTIONS tab to open **the ACTION ATTRIBUTES** section on designer screens’ right side.
+
+|image18|
+
+Let's customize the first action's attribute by click on the **+ Create Custom** button to open **Add Custom Attributes** modal window.
+
+|image19|
+
+In the **Add Custom Attributes** **Window**, and the **INPUTS tab** starts to add the first input attribute for **Action1**.
+
+**INPUTS Tab:** Enter the required properties for the inputs’ attribute:
+
+1. Name: **"template-prefix"**
+2. Type: **"List"**
+3. Required: **"True"**
+
+|image20|
+
+After you add the **template-prefix** input's attribute, click on In the OUTPUT Tab to create the output attribute too.
+
+|image21|
+
+**OUTPUTS Tab:** Enter the required properties for the output’ attribute:
+
+1. Name: **"hello-world-output"**
+2. Required: **"True"**
+3. Type: **"other"**
+4. Type name: **"json"**
+5. Value (get_attribute): From the **Functions list**, select **"component-resource-resolution"** that will show all attributes included in this function
+6. Select parameter name **"assignment-params"**
+7. Click on the **Submit Attributes** button to add input and output attributes to **Actions' Attributes list**
+8. Click on the **Close** button to close the modal window and go backto the designer screen.
+
+|image22|
+
+Now, you can see all the added attributes listed in the **ACTION ATTRIBUTES** area.
+
+|image23|
+
+Define Function Attributes
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+From **ACTIONS** List, Click on the function name **"component-resource-resolution"**.
+
+|image24|
+
+When you click on the **component-resource-resolution** function, the **FUNCTION ATTRIBUTES** section will be open on the right side of the designers' screen.
+
+|image25|
+
+Now, you need to add the values of **Inputs** or **Outputs** required attributes in **the Interfaces** **section**.
+
+-  **artifact-prefix-names**:
+
+1. Click on the **Select Templates** button
+2. In the modal window that lists all templates you created, click on the **"hello_world_template"** name
+3. Click on the **Add Template** button to insert it in **the Artifacts** section and to close the modal window.
+
+|image26|
+
+|image27|
+
+Now, the **hello_world_template** template is listed inside the **Artifacts section.**
+
+|image28|
+
+Click on the **"Save"** button to save the added template.
+
+|image29|
+
+From the page header and inside **the Save** **menu**, click on the **Save** button to save all the changes.
+
+|image30|
+
+Enrich And Deploy The CBA Package
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+From the page header and inside the **Save menu**, click on the **Enrich & Deploy** button.
+
+|image31|
+
+Once the process is done, a confirmation message will appear.
+
+|image32|
+
+Test The CBA package With CDS REST API
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+To test the CDS hello_world package we created, we can use the REST API shown below to run the resource resolution workflow in the hello_wold
+package, which will resolve the value of the "image_name" resource from the REST Call input, and will send it back to the user in the form of
+"Hello, $image_name!".
+
+**CURL Request to RUN CBA Package**
+
+.. code-block:: bash
+
+     curl --location --request POST
+     'http://cds-blueprint-processor:8080/api/v1/execution-service/process'\\
+     --header 'Content-Type: application/json;charset=UTF-8'\\
+     --header 'Accept: application/json;charset=UTF-8,application/json'\\
+     --header 'Authorization: BasicY2NzZGthcHBzOmNjc2RrYXBwcw=='\\
+     --data-raw '{
+         "actionIdentifiers": {
+             "mode": "sync",
+             "blueprintName": "hello_world",
+             "blueprintVersion": "1.0.0",
+             "actionName": "Action1"
+         },
+         "payload": {
+             "Action1-request": {
+                  "Action1-properties": {
+                      "image_name": "Sarah Abouzainah"
+                  }
+             }
+         },
+         "commonHeader": {
+              "subRequestId": "143748f9-3cd5-4910-81c9-a4601ff2ea58",
+              "requestId": "e5eb1f1e-3386-435d-b290-d49d8af8db4c",
+              "originatorId": "SDNC_DG"
+         }
+     }'
+
+
+**CDS Response showing result of running package**
+
+.. code-block:: json
+
+    200 OK
+       {
+            "correlationUUID": null,
+            "commonHeader": {
+                "timestamp": "2020-12-13T11:43:10.993Z",
+                "originatorId": "SDNC_DG",
+                "requestId": "e5eb1f1e-3386-435d-b290-d49d8af8db4c",
+                "subRequestId": "143748f9-3cd5-4910-81c9-a4601ff2ea58",
+                "flags": null
+            },
+            "actionIdentifiers": {
+                "blueprintName": "hello_world",
+                "blueprintVersion": "1.0.0",
+                "actionName": "Action1",
+                "mode": "sync"
+            },
+            "status": {
+                "code": 200,
+                "eventType": "EVENT_COMPONENT_EXECUTED",
+                "timestamp": "2020-12-13T11:43:11.028Z",
+                "errorMessage": null,
+                "message": "success"
+            },
+            "payload": {
+                "Action1-response": {
+                    "hello-world-output": {
+                        "hello_world_template": "Hello, Sarah Abouzainah!"
+                     }
+                 }
+            }
+      }
+
+Screenshot from POSTMAN showing how to run the hello_world package, and the CDS Response:
+
+|image33|
+
+Next:
+-----
+
+    :ref:`Script Executor Type Hello World CBA Package <hello_world_script_executor_cba>`
+
+
+.. |image1| image:: https://wiki.onap.org/download/attachments/93003036/1.png?version=4&modificationDate=1607534831000&api=v2
+   :width: 1000pt
+.. |image2| image:: https://wiki.onap.org/download/attachments/93003036/2.png?version=5&modificationDate=1609170583000&api=v2
+   :width: 1000pt
+.. |image3| image:: https://wiki.onap.org/download/attachments/93003036/3.png?version=4&modificationDate=1609170695000&api=v2
+   :width: 1000pt
+.. |image4| image:: https://wiki.onap.org/download/attachments/93003036/4.png?version=3&modificationDate=1609170995000&api=v2
+   :width: 1000pt
+.. |image5| image:: https://wiki.onap.org/download/attachments/93003036/5.png?version=3&modificationDate=1607538358000&api=v2
+   :width: 1000pt
+.. |image6| image:: https://wiki.onap.org/download/attachments/93003036/6.png?version=2&modificationDate=1607538455000&api=v2
+   :width: 1000pt
+.. |image7| image:: https://wiki.onap.org/download/attachments/93003036/7.png?version=2&modificationDate=1607538653000&api=v2
+   :width: 1000pt
+.. |image8| image:: https://wiki.onap.org/download/attachments/93003036/8.png?version=3&modificationDate=1609171068000&api=v2
+   :width: 1000pt
+.. |image9| image:: https://wiki.onap.org/download/attachments/93003036/9.png?version=3&modificationDate=1609171129000&api=v2
+   :width: 1000pt
+.. |image10| image:: https://wiki.onap.org/download/attachments/93003036/10.png?version=3&modificationDate=1609171172000&api=v2
+   :width: 1000pt
+.. |image11| image:: https://wiki.onap.org/download/attachments/93003036/11.png?version=2&modificationDate=1607540629000&api=v2
+   :width: 1000pt
+.. |image12| image:: https://wiki.onap.org/download/attachments/93003036/12.png?version=2&modificationDate=1607540920000&api=v2
+   :width: 1000pt
+.. |image13| image:: https://wiki.onap.org/download/attachments/93003036/13.png?version=3&modificationDate=1607542672000&api=v2
+   :width: 200pt
+.. |image14| image:: https://wiki.onap.org/download/attachments/93003036/14.png?version=2&modificationDate=1607541858000&api=v2
+   :width: 800pt
+.. |image15| image:: https://wiki.onap.org/download/attachments/93003036/15.png?version=2&modificationDate=1607542785000&api=v2
+   :width: 300pt
+.. |image16| image:: https://wiki.onap.org/download/attachments/93003036/16.png?version=3&modificationDate=1607543088000&api=v2
+   :width: 700pt
+.. |image17| image:: https://wiki.onap.org/download/attachments/93003036/17.png?version=2&modificationDate=1607543299000&api=v2
+   :width: 700pt
+.. |image18| image:: https://wiki.onap.org/download/attachments/93003036/18.png?version=2&modificationDate=1607543587000&api=v2
+   :width: 300pt
+.. |image19| image:: https://wiki.onap.org/download/attachments/93003036/19.png?version=3&modificationDate=1607543849000&api=v2
+   :width: 300pt
+.. |image20| image:: https://wiki.onap.org/download/attachments/93003036/20.png?version=2&modificationDate=1607544576000&api=v2
+   :width: 700pt
+.. |image21| image:: https://wiki.onap.org/download/attachments/93003036/21.png?version=2&modificationDate=1607544745000&api=v2
+   :width: 700pt
+.. |image22| image:: https://wiki.onap.org/download/attachments/93003036/22.png?version=2&modificationDate=1607545959000&api=v2
+   :width: 800pt
+.. |image23| image:: https://wiki.onap.org/download/attachments/93003036/23.png?version=2&modificationDate=1607546223000&api=v2
+   :width: 300pt
+.. |image24| image:: https://wiki.onap.org/download/attachments/93003036/24.png?version=2&modificationDate=1607548321000&api=v2
+   :width: 300pt
+.. |image25| image:: https://wiki.onap.org/download/attachments/93003036/25.png?version=2&modificationDate=1607550168000&api=v2
+   :width: 300pt
+.. |image26| image:: https://wiki.onap.org/download/attachments/93003036/26.png?version=2&modificationDate=1607551324000&api=v2
+   :width: 340pt
+.. |image27| image:: https://wiki.onap.org/download/attachments/93003036/27.png?version=3&modificationDate=1607551567000&api=v2
+   :width: 800pt
+.. |image28| image:: https://wiki.onap.org/download/attachments/93003036/28.png?version=2&modificationDate=1607551732000&api=v2
+   :width: 300pt
+.. |image29| image:: https://wiki.onap.org/download/attachments/93003036/29.png?version=3&modificationDate=1607553177000&api=v2
+   :width: 300pt
+.. |image30| image:: https://wiki.onap.org/download/attachments/93003036/30.png?version=2&modificationDate=1607552712000&api=v2
+   :width: 1000pt
+.. |image31| image:: https://wiki.onap.org/download/attachments/93003036/32.png?version=3&modificationDate=1607554129000&api=v2
+   :width: 1000pt
+.. |image32| image:: https://wiki.onap.org/download/attachments/93003036/33.png?version=1&modificationDate=1607554073000&api=v2
+   :width: 1000pt
+.. |image33| image:: https://wiki.onap.org/download/attachments/93003036/34.png?version=1&modificationDate=1607608398000&api=v2
+   :width: 1000pt
diff --git a/docs/ui/hello-world-script-executor-cba.rst b/docs/ui/hello-world-script-executor-cba.rst
new file mode 100644
index 000000000..edd8ad7d3
--- /dev/null
+++ b/docs/ui/hello-world-script-executor-cba.rst
@@ -0,0 +1,407 @@
+.. This work is licensed under a Creative Commons Attribution 4.0 International License.
+.. http://creativecommons.org/licenses/by/4.0
+.. Copyright (C) 2019 IBM.
+
+.. _hello_world_script_executor_cba:
+
+How to create a “Hello World” Package with CDS Designer UI? The Script Executor Type
+====================================================================================
+
+.. toctree::
+   :maxdepth: 2
+
+.. note::
+    **How to Get Started with CDS Designer UI**
+
+    If you’re new to CDS Designer UI and need to get set up, the following guides may be helpful:
+
+    -  :ref:`running_cds_ui_locally`
+    -  :ref:`designer_guide`
+
+.. note::
+    **NOTE:**
+
+    In order to see the latest version described below in the tutorial, we will need to use the latest cds-ui-server docker image:
+    nexus3.onap.org:10001/onap/ccsdk-cds-ui-server:1.1.0-STAGING-latest
+
+
+Create New CBA Package
+~~~~~~~~~~~~~~~~~~~~~~
+
+In the Package List, click on the **Create Package** button.
+
+|image1|
+
+Define Package MetaData
+~~~~~~~~~~~~~~~~~~~~~~~
+
+In METADATA Tab:
+
+1. Package name (Required), type **"Hello-world-package-kotlin"**
+2. Package version (Required), type **"1.0.0"**
+3. Package description (Required), type **"just description"**
+4. Package Tags (Required), type **"kotlin"** then use the **Enter** key on the keyboard
+5. In the Custom Key section, add Key name **"template_type"** and
+6. For Key Value **"DEFAULT"**
+
+|image2|
+
+Once you enter all fields you will be able to save your package. Click on the **Save** button and continue to define your package.
+
+|image3|
+
+Define Scripts
+~~~~~~~~~~~~~~
+
+In the SCRIPTS Tab:
+
+1. Click on the **Create Script** button
+
+|image4|
+
+In the **Create Script File** modal:
+
+|image5|
+
+1. Enter script file name **"Test"**
+2. Choose the script type **"Kotlin"**
+3. Type or copy and paste the below script in the code editor
+
+.. code-block:: kotlin
+
+    /*
+     \* Copyright © 2020, Orange
+     \*
+     \* Licensed under the Apache License, Version 2.0 (the "License");
+     \* you may not use this file except in compliance with the License.
+     \* You may obtain a copy of the License at
+     \*
+     \* http://www.apache.org/licenses/LICENSE-2.0
+     \*
+     \* Unless required by applicable law or agreed to in writing, software
+     \* distributed under the License is distributed on an "AS IS" BASIS,
+     \* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     \* See the License for the specific language governing permissions and
+     \* limitations under the License.
+    */
+
+    package org.onap.ccsdk.cds.blueprintsprocessor.services.execution.scripts
+
+    import org.onap.ccsdk.cds.blueprintsprocessor.core.api.data.ExecutionServiceInput
+    import org.onap.ccsdk.cds.blueprintsprocessor.services.execution.AbstractScriptComponentFunction
+    import org.onap.ccsdk.cds.blueprintsprocessor.services.execution.ComponentRemoteScriptExecutor
+    import org.onap.ccsdk.cds.controllerblueprints.core.asJsonPrimitive
+    import org.slf4j.LoggerFactory
+
+    open class HelloWorld : AbstractScriptComponentFunction() {
+        private val log = LoggerFactory.getLogger(HelloWorld::class.java)!!
+
+        override fun getName(): String {
+             return "Check"
+        }
+
+        override suspend fun processNB(executionRequest: ExecutionServiceInput) {
+              log.info("executing hello world script ")
+              val username = getDynamicProperties("username").asText()
+              log.info("username : $username")
+              //executionRequest.payload.put("Action1-response","hello from $username")
+              setAttribute("response-data", "Hello, $username".asJsonPrimitive())
+        }
+
+        override suspend fun recoverNB(runtimeException: RuntimeException, executionRequest: ExecutionServiceInput) {
+               log.info("Executing Recovery")
+               bluePrintRuntimeService.getBluePrintError().addError("${runtimeException.message}")
+         }
+    }
+
+4. Click on the **Create Script** button to save the script file
+
+|image6|
+
+Now, you can view and edit your script file.
+
+|image7|
+
+After the new script is added to the **scripts list**, click on the **Save** button to save the package updates.
+
+|image8|
+
+Define DSL Properties
+~~~~~~~~~~~~~~~~~~~~~
+
+In the DSL PROPERTIES Tab:
+
+1. Copy and paste the below DSL definition
+
+.. code-block::
+
+    {
+        "Action1-properties": {
+            "username": {
+                "get_input": "username"
+            }
+        }
+    }
+
+|image9|
+
+Then click on the **Save** button to update the package.
+
+|image10|
+
+Create An Action
+~~~~~~~~~~~~~~~~~
+
+From the Package information box on top, click on the **Designer Mode** button.
+
+|image11|
+
+Click on the **Skip to Designer Canvas** button to go directly to Designer Mode.
+
+|image12|
+
+Now the designer has zero action added. Let's start adding the first Action.
+
+|image13|
+
+Go to the left side of the designer screen and in the **ACTIONS tab**, click on the **+ New Action** button.
+
+|image14|
+
+Now, the first Action **Action1** is added to the **Actions list** and in the **Workflow canvas**.
+
+|image15|
+
+Add Script Executor Function To The Action
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+On the left side of the designer screen, Click on the **FUNCTIONS tab** to view all the **Functions List.**
+
+|image16|
+
+**Drag** the function type **"component-script-executor"**
+
+|image17|
+
+**Drop** the function to the **"Action1"** Action container.
+
+|image18|
+
+Define Action Attributes
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+Click on **Action1** from the ACTIONS tab to open **the ACTION ATTRIBUTES** section on designer screens’ right side.
+
+|image19|
+
+Let's customize the first action's attribute by click on the **+ Create Custom** button to open **Add Custom Attributes** modal window.
+
+|image20|
+
+In the **Add Custom Attributes** **Window**, and the **INPUTS tab** starts to add the first input attribute for **Action1**.
+**INPUTS Tab:** Enter the required properties for the inputs’ attribute:
+
+1. Name: **"username"**
+2. Type: **"Other"**
+3. Attribute type name:  **"dt-resource-assignment-properties"**
+4. Required: **"True"**
+
+|image21|
+
+After you add the **username** input's attribute, click on In the OUTPUT Tab to create the output attribute too.
+
+|image22|
+
+**OUTPUTS Tab:** Enter the required properties for the output’ attribute:
+
+1. Name: **"hello-world-output"**
+2. Required: **"True"**
+3. Type: **"Other"**
+4. Type name: **"json"**
+5. Value (get_attribute): From the **Functions list**, select **"component-script-executor"** that will show all attributes included in this function
+6. Select parameter name **"response-data"**
+7. Click on the **Submit Attributes** button to add input and output attributes to **Actions' Attributes list**
+8. Click on the **Close** button to close the modal window and go back to the designer screen.
+
+|image23|
+
+Now, you can see all the added attributes listed in the **ACTION ATTRIBUTES** area.
+
+|image24|
+
+Define Function Attributes
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+From **ACTIONS** List, Click on the function nam **"component-script-executor"**.
+
+|image25|
+
+When you click on the **component-script-executor** function, the **FUNCTION ATTRIBUTES** section will be open on the right side of the designers' screen.
+Now, you need to add the values of **Inputs** required attributes in **the Interfaces** **section**.
+
+|image26|
+
+1. **script-type:** **"kotlin"**
+2. **script-class-reference: "org.onap.ccsdk.cds.blueprintsprocessor.services.execution.scripts.HelloWorld"**
+3. Add optional attribute by click on **Add Optional Attributes** button, add **"dynamic-properties"** then enter the value **"*Action1-properties"**
+
+|image27|
+
+Click on the **Save** button to update the package with the function attributes.
+
+|image28|
+
+From the page header and inside **the Save** **menu**, click on the **Save** button to save all the changes.
+
+|image29|
+
+Enrich And Deploy The CBA Package
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+From the page header and inside the **Save menu**, click on the **Enrich & Deploy** button.
+
+|image30|
+
+Once the process is done, a confirmation message will appear.
+
+|image31|
+
+Test The CBA package With CDS REST API
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+To test the CDS hello_world package we created, we can use the REST API shown below to run the **script executor** workflow in the **Hello-world-package-kotlin** package, which will resolve the value of the "username" resource from the REST Call input, and will send it back to the user in the form of "Hello, $username!".
+
+**CURL Request to RUN CBA Package**
+
+.. code-block:: bash
+
+     curl --location --request POST 'http://10.1.1.9:8080/api/v1/execution-service/process' \
+     --header 'Content-Type: application/json;charset=UTF-8' \
+     --header 'Accept: application/json;charset=UTF-8,application/json' \
+     --header 'Authorization: Basic Y2NzZGthcHBzOmNjc2RrYXBwcw==' \
+     --header 'Host: cds-blueprints-processor-http:8080' \
+     --header 'Cookie: JSESSIONID=7E69BC3F752FD5A3D7D1663FE583ED71' \
+     --data-raw '{
+                    "actionIdentifiers": {
+                        "mode": "sync",
+                        "blueprintName": "Hello-world-package-kotlin",
+                        "blueprintVersion": "1.0.0",
+                        "actionName": "Action1"
+                    },
+                    "payload": {
+                        "Action1-request": {
+                            "username":"Orange Egypt"
+                        }
+                    },
+                    "commonHeader": {
+                        "subRequestId": "143748f9-3cd5-4910-81c9-a4601ff2ea58",
+                        "requestId": "e5eb1f1e-3386-435d-b290-d49d8af8db4c",
+                        "originatorId": "SDNC_DG"
+                    }
+                 }'
+
+
+**CDS Response showing result of running package**
+
+.. code-block:: bash
+
+    200 OK
+        {
+            "correlationUUID": null,
+            "commonHeader": {
+                "timestamp": "2021-01-12T13:22:26.518Z",
+                "originatorId": "SDNC_DG",
+                "requestId": "e5eb1f1e-3386-435d-b290-d49d8af8db4c",
+                "subRequestId": "143748f9-3cd5-4910-81c9-a4601ff2ea58",
+                "flags": null
+            },
+            "actionIdentifiers": {
+                "blueprintName": "Hello-world-package-kotlin",
+                "blueprintVersion": "1.0.0",
+                "actionName": "Action1",
+                "mode": "sync"
+            },
+            "status": {
+                "code": 200,
+                "eventType": "EVENT_COMPONENT_EXECUTED",
+                "timestamp": "2021-01-12T13:22:56.144Z",
+                "errorMessage": null,
+                "message": "success"
+            },
+            "payload": {
+                "Action1-response": {
+                    "hello-world-output": {
+                        "hello_world_template": "Hello, Orange Egypt"
+                     }
+                 }
+            }
+        }
+
+Screenshot from POSTMAN showing how to run the **Hello_world-package-kotlin** package, and the CDS Response:
+
+|image32|
+
+.. |image1| image:: https://wiki.onap.org/download/attachments/93006316/1.png?version=1&modificationDate=1610364491000&api=v2
+   :width: 1000pt
+.. |image2| image:: https://wiki.onap.org/download/attachments/93006316/02.png?version=1&modificationDate=1610390913000&api=v2
+   :width: 1000pt
+.. |image3| image:: https://wiki.onap.org/download/attachments/93006316/03.png?version=1&modificationDate=1610390934000&api=v2
+   :width: 1000pt
+.. |image4| image:: https://wiki.onap.org/download/attachments/93006316/04.png?version=1&modificationDate=1610391083000&api=v2
+   :width: 1000pt
+.. |image5| image:: https://wiki.onap.org/download/attachments/93006316/05.png?version=1&modificationDate=1610391137000&api=v2
+   :width: 1000pt
+.. |image6| image:: https://wiki.onap.org/download/attachments/93006316/06.png?version=1&modificationDate=1610391364000&api=v2
+   :width: 1000pt
+.. |image7| image:: https://wiki.onap.org/download/attachments/93006316/07.png?version=1&modificationDate=1610391427000&api=v2
+   :width: 1000pt
+.. |image8| image:: https://wiki.onap.org/download/attachments/93006316/08.png?version=1&modificationDate=1610391642000&api=v2
+   :width: 1000pt
+.. |image9| image:: https://wiki.onap.org/download/attachments/93006316/09.png?version=1&modificationDate=1610391749000&api=v2
+   :width: 1000pt
+.. |image10| image:: https://wiki.onap.org/download/attachments/93006316/10.png?version=2&modificationDate=1610391971000&api=v2
+   :width: 1000pt
+.. |image11| image:: https://wiki.onap.org/download/attachments/84650426/Create%20Package.jpg?version=1&modificationDate=1591034193000&api=v2
+   :width: 1000pt
+.. |image12| image:: https://wiki.onap.org/download/attachments/93006316/11.png?version=1&modificationDate=1610364492000&api=v2
+   :width: 1000pt
+.. |image13| image:: https://wiki.onap.org/download/attachments/93006316/12.png?version=2&modificationDate=1610392150000&api=v2
+   :width: 1000pt
+.. |image14| image:: https://wiki.onap.org/download/attachments/93006316/13.png?version=2&modificationDate=1610392171000&api=v2
+   :width: 300pt
+.. |image15| image:: https://wiki.onap.org/download/attachments/93006316/14.png?version=2&modificationDate=1610392192000&api=v2
+   :width: 1000pt
+.. |image16| image:: https://wiki.onap.org/download/attachments/93006316/15.png?version=2&modificationDate=1610392224000&api=v2
+   :width: 300pt
+.. |image17| image:: https://wiki.onap.org/download/attachments/93006316/16.png?version=2&modificationDate=1610392392000&api=v2
+   :width: 800pt
+.. |image18| image:: https://wiki.onap.org/download/attachments/93006316/17.png?version=3&modificationDate=1610392589000&api=v2
+   :width: 800pt
+.. |image19| image:: https://wiki.onap.org/download/attachments/93006316/18.png?version=2&modificationDate=1610392609000&api=v2
+   :width: 300pt
+.. |image20| image:: https://wiki.onap.org/download/attachments/93006316/19.png?version=1&modificationDate=1610364492000&api=v2
+   :width: 300pt
+.. |image21| image:: https://wiki.onap.org/download/attachments/93006316/20.png?version=2&modificationDate=1610392718000&api=v2
+   :width: 700pt
+.. |image22| image:: https://wiki.onap.org/download/attachments/93006316/21.png?version=2&modificationDate=1610392773000&api=v2
+   :width: 800pt
+.. |image23| image:: https://wiki.onap.org/download/attachments/93006316/22.png?version=2&modificationDate=1610392886000&api=v2
+   :width: 400pt
+.. |image24| image:: https://wiki.onap.org/download/attachments/93006316/23.png?version=2&modificationDate=1610392915000&api=v2
+   :width: 300pt
+.. |image25| image:: https://wiki.onap.org/download/attachments/93006316/24.png?version=2&modificationDate=1610392939000&api=v2
+   :width: 300pt
+.. |image26| image:: https://wiki.onap.org/download/attachments/93006316/25.png?version=3&modificationDate=1610393699000&api=v2
+   :width: 378pt
+.. |image27| image:: https://wiki.onap.org/download/attachments/93006316/26.png?version=4&modificationDate=1610393629000&api=v2
+   :width: 300pt
+.. |image28| image:: https://wiki.onap.org/download/attachments/93006316/26.png?version=4&modificationDate=1610393629000&api=v2
+   :width: 200pt
+.. |image29| image:: https://wiki.onap.org/download/attachments/93006316/28.png?version=4&modificationDate=1610394025000&api=v2
+   :width: 1000pt
+.. |image30| image:: https://wiki.onap.org/download/attachments/93006316/29.png?version=3&modificationDate=1610394097000&api=v2
+   :width: 1000pt
+.. |image31| image:: https://wiki.onap.org/download/attachments/93006316/29.png?version=3&modificationDate=1610394097000&api=v2
+   :width: 1000pt
+.. |image32| image:: https://wiki.onap.org/download/attachments/93006316/31.png?version=1&modificationDate=1610459101000&api=v2
+   :width: 1000pt
\ No newline at end of file
diff --git a/docs/usecases/pnf-simulator.rst b/docs/usecases/pnf-simulator.rst
index 83883a241..765b70abd 100644
--- a/docs/usecases/pnf-simulator.rst
+++ b/docs/usecases/pnf-simulator.rst
@@ -456,7 +456,7 @@ For creating day-2 configuration call the same endpoint and use the following pa
 Now we will make the CDS REST API calls to push the day-1 and day-2 configuration changes to the PNF simulator.
 Call the same endpoint `process` with the following payload:
 
-.. code-block::  JSON
+.. code-block:: JSON
 
    {
       "actionIdentifiers": {
diff --git a/docs/userguides/developer-guide/index.rst b/docs/userguides/developer-guide/index.rst
index 129ff7cd6..0a711b7b0 100644
--- a/docs/userguides/developer-guide/index.rst
+++ b/docs/userguides/developer-guide/index.rst
@@ -5,6 +5,16 @@
 Developer Guide
 =================
 
+.. note::
+    **Get Started with CDS**
+
+    .. toctree::
+       :maxdepth: 1
+
+       running-bp-processor-in-ide
+       running-cds-ui-locally
+
+
 Blueprints Processor Microservice
 ----------------------------------
 
@@ -12,12 +22,6 @@ Micro service to Manage Controller Blueprint Models, such as Resource Dictionary
 
 This microservice is used to deploy Controller Blueprint Archive file in Run time database. This also helps to test the Valid CBA.
 
-.. toctree::
-   :caption: Guide how to run Blueprint Processor in an IDE:
-   :maxdepth: 1
-
-   running-bp-processor-in-ide
-
 Architecture
 ~~~~~~~~~~~~~
 
diff --git a/docs/userguides/developer-guide/running-cds-ui-locally.rst b/docs/userguides/developer-guide/running-cds-ui-locally.rst
new file mode 100644
index 000000000..030ae356b
--- /dev/null
+++ b/docs/userguides/developer-guide/running-cds-ui-locally.rst
@@ -0,0 +1,168 @@
+.. This work is licensed under a Creative Commons Attribution 4.0 International License.
+.. http://creativecommons.org/licenses/by/4.0
+.. Copyright (C) 2019 IBM.
+
+.. _running_cds_ui_locally:
+
+Running CDS UI Locally
+======================
+
+.. toctree::
+   :maxdepth: 2
+
+Prerequisites
+-------------
+
+Node version: >= 8.9
+NPM version: >=6.4.1
+
+Check-out code
+--------------
+
+.. code-block:: bash
+
+     git clone "https://gerrit.onap.org/r/ccsdk/cds"
+
+Install Node Modules (UI)
+-------------------------
+
+From cds-ui/client directory, execute **npm install** to fetch project dependent Node modules
+
+Install Node Modules (Server)
+-----------------------------
+
+From cds-ui/server directory, execute **npm install** to fetch project dependent Node modules
+
+Run UI in Development Mode
+--------------------------
+
+From cds-ui/client directory, execute **npm start** to run the Angular Live Development Server
+
+.. code-block:: bash
+
+    nirvanr01-mac:client nirvanr$ npm start
+    > cds-ui@0.0.0 start /Users/nirvanr/dev/git/onap/ccsdk/cds/cds-ui/client
+    > ng serve
+
+    ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
+
+Run UI Server
+-------------
+
+From cds-ui/client directory, execute **mvn clean compile** then **npm run build** to copy all front-end artifacts to server/public directory
+
+.. code-block:: bash
+
+   nirvanr01-mac:client nirvanr$ npm run build
+   > cds-ui@0.0.0 build /Users/nirvanr/dev/git/onap/ccsdk/cds/cds-ui/client
+   > ng build
+
+From cds-ui/server directory, execute **npm run start** to build and start the front-end server
+
+.. code-block:: bash
+
+   nirvanr01-mac:server nirvanr$ npm run start
+   > cds-ui-server@1.0.0 prestart /Users/nirvanr/dev/git/onap/ccsdk/cds/cds-ui/server
+   > npm run build
+   > cds-ui-server@1.0.0 build /Users/nirvanr/dev/git/onap/ccsdk/cds/cds-ui/server
+   > lb-tsc es2017 --outDir dist
+   > cds-ui-server@1.0.0 start /Users/nirvanr/dev/git/onap/ccsdk/cds/cds-ui/server
+   > node .
+
+   Server is running at http://127.0.0.1:3000
+   Try http://127.0.0.1:3000/ping
+
+Build UI Docker Image
+---------------------
+
+From cds-ui/server directory, execute docker **build -t cds-ui .** to build a local CDS-UI Docker image
+
+.. code-block:: bash
+
+   nirvanr01-mac:server nirvanr$ docker build -t cds-ui .
+   Sending build context to Docker daemon 96.73MB
+   Step 1/11 : FROM node:10-slim
+   ---> 914bfdbef6aa
+   Step 2/11 : USER node
+   ---> Using cache
+   ---> 04d66cc13b46
+   Step 3/11 : RUN mkdir -p /home/node/app
+   ---> Using cache
+   ---> c9a44902da43
+   Step 4/11 : WORKDIR /home/node/app
+   ---> Using cache
+   ---> effb2329a39e
+   Step 5/11 : COPY --chown=node package*.json ./
+   ---> Using cache
+   ---> 4ad01897490e
+   Step 6/11 : RUN npm install
+   ---> Using cache
+   ---> 3ee8149b17e2
+   Step 7/11 : COPY --chown=node . .
+   ---> e1c72f6caa15
+   Step 8/11 : RUN npm run build
+   ---> Running in 5ec69a1961d0
+   > cds-ui-server@1.0.0 build /home/node/app
+   > lb-tsc es2017 --outDir dist
+   Removing intermediate container 5ec69a1961d0
+   ---> ec9fb899e52c
+   Step 9/11 : ENV HOST=0.0.0.0 PORT=3000
+   ---> Running in 19963303a09c
+   Removing intermediate container 19963303a09c
+   ---> 6b3b45709e27
+   Step 10/11 : EXPOSE ${PORT}
+   ---> Running in 78b9833c5050
+   Removing intermediate container 78b9833c5050
+   ---> 3835c14ad17b
+   Step 11/11 : CMD [ "node", "." ]
+   ---> Running in 79a98e6242dd
+   Removing intermediate container 79a98e6242dd
+   ---> c41f6e6ba4de
+   Successfully built c41f6e6ba4de
+   Successfully tagged cds-ui:latest
+
+Run UI Docker Image
+-------------------
+
+Create **docker-compose.yaml** as below.
+
+**Note:**
+
+-  Replace <ip> with host/port where controller & processor mS are running.
+
+.. code-block:: bash
+
+   version: '3.3'
+   services:
+        cds-ui:
+            image: cds-ui:latest
+            container_name: cds-ui
+            ports:
+            - "3000:3000"
+            restart: always
+            environment:
+            - HOST=0.0.0.0
+            - API_BLUEPRINT_CONTROLLER_HTTP_BASE_URL=http://<ip>:8080/api/v1
+            - API_BLUEPRINT_CONTROLLER_HTTP_AUTH_TOKEN=Basic Y2NzZGthcHBzOmNjc2RrYXBwcw==
+            - API_BLUEPRINT_PROCESSOR_HTTP_BASE_URL=http://<ip>:8081/api/v1
+            - API_BLUEPRINT_PROCESSOR_HTTP_AUTH_TOKEN=Basic Y2NzZGthcHBzOmNjc2RrYXBwcw==
+            - API_BLUEPRINT_PROCESSOR_GRPC_HOST=<IP>
+            - API_BLUEPRINT_PROCESSOR_GRPC_PORT=9111
+            - API_BLUEPRINT_PROCESSOR_GRPC_AUTH_TOKEN=Basic Y2NzZGthcHBzOmNjc2RrYXBwcw==
+
+
+Execute **docker-compose up cds-ui**
+
+.. code-block:: bash
+
+   nirvanr01-mac:cds nirvanr$ docker-compose up cds-ui
+   Creating cds-ui ... done
+   Attaching to cds-ui
+   cds-ui         | Server is running at http://127.0.0.1:3000
+   cds-ui         | Try http://127.0.0.1:3000/ping
+
+
+Next
+----
+
+:ref:`CDS Designer UI <designer_guide>`
diff --git a/docs/userguides/installation.rst b/docs/userguides/installation.rst
index 10997294c..a45292f6f 100644
--- a/docs/userguides/installation.rst
+++ b/docs/userguides/installation.rst
@@ -78,6 +78,8 @@ Result
 Running CDS UI:
 ---------------
 
+:ref:`running_cds_ui_locally`
+
 Client:
 ~~~~~~~
 Install Node.js and angularCLI. Refer https://angular.io/guide/quickstart
@@ -89,3 +91,4 @@ Loopback Server:
 
 npm install in the directory cds/cds-ui/server
 npm start should bring you the CDS UI page in your local machine with the link https://127.0.0.1:3000/
+