diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index f51d577f11..3885cf68a3 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -116,11 +116,12 @@ body:
     validations:
       required: false
 
-  - type: markdown
+  - type: textarea
+    id: acceptance_criteria
     attributes:
-      value: |
-        ### Acceptance Criteria
-        
+      label: "Acceptance Criteria"
+      description: Do not edit the text area below.
+      value: |        
         - [ ] Ensure new code is unit tested, and check code coverage is at least 90%.
         - [ ] Create related issue in taipy-doc for documentation and Release Notes.
 
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml
index af96e8bb34..9441ebf49b 100644
--- a/.github/ISSUE_TEMPLATE/feature-request.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
@@ -41,15 +41,16 @@ body:
     validations:
       required: false
 
-  - type: markdown
+  - type: textarea
+    id: acceptance_criteria
     attributes:
-      value: |
-        ### Acceptance Criteria
-        
+      label: "Acceptance Criteria"
+      description: Do not edit the text area below.
+      value: |     
         - [ ] Ensure new code is unit tested, and check code coverage is at least 90%.
         - [ ] Create related issue in taipy-doc for documentation and Release Notes.
         - [ ] Check if a new demo could be provided based on this, or if legacy demos could be benefit from it.
-        - [ ] Ensure any change is well documented.      
+        - [ ] Ensure any change is well documented.
 
   - type: checkboxes
     id: terms_checklist_feature
diff --git a/.github/ISSUE_TEMPLATE/refactor-code.yml b/.github/ISSUE_TEMPLATE/refactor-code.yml
index 5f63f6c76f..4e8acd8f04 100644
--- a/.github/ISSUE_TEMPLATE/refactor-code.yml
+++ b/.github/ISSUE_TEMPLATE/refactor-code.yml
@@ -15,12 +15,13 @@ body:
       description: "Describe what improvements can be made(performance, API...) in the codebase without introducing breaking changes."
     validations:
       required: true
-
-  - type: markdown
+        
+  - type: textarea
+    id: acceptance_criteria
     attributes:
+      label: "Acceptance Criteria"
+      description: Do not edit the text area below.
       value: |
-        ### Acceptance Criteria
-        
         - [ ] Ensure new code is unit tested, and check code coverage is at least 90%.
         - [ ] Propagate any change on the demos and run all of them to ensure there is no breaking change.
         - [ ] Ensure any change is well documented.
diff --git a/README.md b/README.md
index 1c41cb3a13..dd4363749c 100644
--- a/README.md
+++ b/README.md
@@ -11,52 +11,59 @@
 </div>
 
 <h1 align="center">
-Data and AI algorithms into production-ready web apps
+Build Python Data & AI web applications
 </h1>
 
 <div align="center">
-Taipy is an open-source Python library for easy, end-to-end application development,<br />featuring what-if analyses, smart pipeline execution, built-in scheduling, and deployment tools.
+From simple pilots to production-ready web applications in no time. No more compromise on performance, customization, and scalability.
 </div>
 
-  <p align="center">
+<br />
+
+<div align="center">
+
+**Go beyond existing libraries**
+</div>
+
+
+
+  <p align="left">
+    <br />
+    <a href="https://docs.taipy.io/en/latest/"><strong>📚 Explore the docs </strong></a>
     <br />
-    <a href="https://docs.taipy.io/en/latest/"><strong>Explore the docs »</strong></a>
-    <br/><br/>
-    <a href="https://discord.com/invite/SJyz2VJGxV">Discord support</a>
-    ·
-    <a href="https://docs.taipy.io/en/latest/gallery/">Demos & Examples</a>
+    <a href="https://discord.com/invite/SJyz2VJGxV">  🫱🏼‍🫲🏼 Discord support</a>
+    <br />
+    <a href="https://docs.taipy.io/en/latest/gallery/"> 👀 Demos & Examples</a>
   </p>
 
 &nbsp;
 
 ## ⭐️ What's Taipy?
-
-Taipy is designed for data scientists and machine learning engineers to build full-stack apps.
+Taipy is designed for data scientists and machine learning engineers to build data & AI web applications.
 &nbsp;
 
-⭐️ Enables building production-ready web applications.<br />
-⭐️ No need to learn new languages or full-stack frameworks.<br />
+⭐️ Enables building production-ready web applications. <br />
+⭐️ No need to learn new languages. Only Python is needed.<br />
 ⭐️ Concentrate on Data and AI algorithms without development and deployment complexities.
 
 &nbsp;
 
+<h4 align="left">
+Taipy is a Two-in-One Tool for UI Generation and Scenario/Data Management
+</h4>
+
+ <br />
+
 | User Interface Generation  | Scenario and Data Management |
 | --------  | -------- |
-|<img src="readme_img/gui_creation.webp" alt="Interface Animation"  width="850px" height="250px" /> | <img src="readme_img/scenario_and_data_mgt.gif" alt="Back-End Animation"  width="100%"/>
+|<img src="readme_img/taipy_github_GUI_video.gif" alt="Interface Animation"  width="100%" /> | <img src="readme_img/taipy_github_scenarios_video.gif" alt="Back-End Animation"  width="100%"/>
 
 &nbsp;
 
 ## ✨ Features
-- **Python-Based UI Framework:** Taipy is designed for Python users, particularly those working in AI and data science. It allows them to create full stack applications without needing to learn additional skills like HTML, CSS, or JavaScript.
-
-
-- **Pre-Built Components for Data Pipelines:** Taipy includes pre-built components that allow users to interact with data pipelines, including visualization and management tools.
-
-
-- **Scenario and Data Management Features:** Taipy offers features for managing different business scenarios and data, which can be useful for applications like demand forecasting or production planning.
-
+<img src="readme_img/taipy_github_scenario.png" alt="Scenario Banner"  width="49%" />  <img src="readme_img/taipy-github-optimized.png" alt="Back-End Animation"  width="49.7%"/>
+<img src="readme_img/taipy_github_data_support.png" alt="Back-End Animation"  width="49.7%" />
 
-- **Version Management and Pipeline Orchestration:** It includes tools for managing application versions, pipeline versions, and data versions, which are beneficial for multi-user environments.
 
 &nbsp;
 
diff --git a/doc/gui/examples/controls/metric-hide-value.py b/doc/gui/examples/controls/metric-hide-value.py
new file mode 100644
index 0000000000..bde3c82df3
--- /dev/null
+++ b/doc/gui/examples/controls/metric-hide-value.py
@@ -0,0 +1,24 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# 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.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+page = """
+<|90|metric|don't show_value|>
+"""
+
+
+Gui(page).run()
+
diff --git a/doc/gui/examples/controls/metric-layout.py b/doc/gui/examples/controls/metric-layout.py
new file mode 100644
index 0000000000..e7a8e871ca
--- /dev/null
+++ b/doc/gui/examples/controls/metric-layout.py
@@ -0,0 +1,43 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# 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.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+# Layout reference can be found in the documentation: https://plotly.com/python/reference/layout/
+
+value = 50
+layout = {
+    "width": "1000",
+    "height": "500",
+    "paper_bgcolor": "lightgray",
+    "margin": {
+        "l": 100,
+        "r": 100,
+        "b": 100,
+        "t": 100,
+    },
+    "font": {
+        "size": 20,
+        "color": "black",
+        "family": "Arial",
+    },
+}
+
+page = """
+<|{value}|metric|layout={layout}|>
+"""
+
+Gui(page).run()
+
diff --git a/doc/gui/examples/controls/metric-range.py b/doc/gui/examples/controls/metric-range.py
new file mode 100644
index 0000000000..26c9dc748a
--- /dev/null
+++ b/doc/gui/examples/controls/metric-range.py
@@ -0,0 +1,28 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# 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.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 50
+min_value = 50
+max_value = 150
+
+page = """
+<|{value}|metric|min={min_value}|max={max_value}|>
+"""
+
+
+Gui(page).run()
+
diff --git a/doc/gui/examples/controls/metric-simple.py b/doc/gui/examples/controls/metric-simple.py
new file mode 100644
index 0000000000..0448f89428
--- /dev/null
+++ b/doc/gui/examples/controls/metric-simple.py
@@ -0,0 +1,27 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# 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.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 50
+max_value = 150
+delta_value = 20
+threshold = 100
+
+page = """
+<|{value}|metric|max={max_value}|delta={delta_value}|threshold={threshold}|>
+"""
+
+Gui(page).run()
diff --git a/doc/gui/examples/controls/metric-type.py b/doc/gui/examples/controls/metric-type.py
new file mode 100644
index 0000000000..06d7f5fbac
--- /dev/null
+++ b/doc/gui/examples/controls/metric-type.py
@@ -0,0 +1,26 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# 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.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 50
+
+page = """
+<|{value}|metric|type=linear|>
+<|{value}|metric|type=circular|>
+"""
+
+Gui(page).run()
+
diff --git a/doc/gui/examples/controls/metric-value-format.py b/doc/gui/examples/controls/metric-value-format.py
new file mode 100644
index 0000000000..4c00aacf26
--- /dev/null
+++ b/doc/gui/examples/controls/metric-value-format.py
@@ -0,0 +1,30 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# 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.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 50
+delta_value = 20
+
+# format & delta_format are used to format the value and delta value respectively.
+# They use the printf syntax.
+
+page = """
+<|{value}|metric|delta={delta_value}|format=%d km/h|delta_format=%d km/h|>
+"""
+
+
+Gui(page).run()
+
diff --git a/frontend/taipy/src/CoreSelector.tsx b/frontend/taipy/src/CoreSelector.tsx
index c42a767ac6..e7deb149e6 100644
--- a/frontend/taipy/src/CoreSelector.tsx
+++ b/frontend/taipy/src/CoreSelector.tsx
@@ -62,7 +62,6 @@ import {
     BadgePos,
     BadgeSx,
     BaseTreeViewSx,
-    EmptyArray,
     FlagSx,
     ParentItemSx,
     getUpdateVarNames,
@@ -126,7 +125,7 @@ const tinyPinIconButtonSx = (theme: Theme) => ({
 
 const switchBoxSx = { ml: 2, width: (theme: Theme) => `calc(100% - ${theme.spacing(2)})` };
 const iconInRowSx = { fontSize: "body2.fontSize" };
-const labelInRowSx = {"& .MuiFormControlLabel-label": iconInRowSx};
+const labelInRowSx = { "& .MuiFormControlLabel-label": iconInRowSx };
 
 const CoreItem = (props: {
     item: Entity;
@@ -139,25 +138,27 @@ const CoreItem = (props: {
     hideNonPinned: boolean;
     active: boolean;
 }) => {
-    const [id, label, items = EmptyArray, nodeType, primary] = props.item;
+    const [id, label, items, nodeType, primary] = props.item;
     const isPinned = props.pins[0][id];
     const isShown = props.hideNonPinned ? props.pins[1][id] : true;
 
     return !props.displayCycles && nodeType === NodeType.CYCLE ? (
         <>
-            {items.map((item) => (
-                <CoreItem
-                    key={item[0]}
-                    item={item}
-                    displayCycles={false}
-                    showPrimaryFlag={props.showPrimaryFlag}
-                    leafType={props.leafType}
-                    pins={props.pins}
-                    onPin={props.onPin}
-                    hideNonPinned={props.hideNonPinned}
-                    active={props.active}
-                />
-            ))}
+            {items
+                ? items.map((item) => (
+                      <CoreItem
+                          key={item[0]}
+                          item={item}
+                          displayCycles={false}
+                          showPrimaryFlag={props.showPrimaryFlag}
+                          leafType={props.leafType}
+                          pins={props.pins}
+                          onPin={props.onPin}
+                          hideNonPinned={props.hideNonPinned}
+                          active={props.active}
+                      />
+                  ))
+                : null}
         </>
     ) : isShown ? (
         <TreeItem
@@ -213,20 +214,21 @@ const CoreItem = (props: {
             }
             sx={nodeType === NodeType.NODE ? undefined : ParentItemSx}
         >
-            {items.map((item) => (
-                <CoreItem
-                    key={item[0]}
-                    item={item}
-                    displayCycles={true}
-                    showPrimaryFlag={props.showPrimaryFlag}
-                    leafType={props.leafType}
-                    editComponent={props.editComponent}
-                    pins={props.pins}
-                    onPin={props.onPin}
-                    hideNonPinned={props.hideNonPinned}
-                    active={props.active}
-                />
-            ))}
+            {items ?
+                items.map((item) => (
+                    <CoreItem
+                        key={item[0]}
+                        item={item}
+                        displayCycles={true}
+                        showPrimaryFlag={props.showPrimaryFlag}
+                        leafType={props.leafType}
+                        editComponent={props.editComponent}
+                        pins={props.pins}
+                        onPin={props.onPin}
+                        hideNonPinned={props.hideNonPinned}
+                        active={props.active}
+                    />
+                )) : null}
         </TreeItem>
     ) : null;
 };
@@ -374,7 +376,8 @@ const CoreSelector = (props: CoreSelectorProps) => {
             setSelectedItems(() => {
                 const lovVar = getUpdateVar(updateVars, lovPropertyName);
                 const val = multiple ? nodeId : isSelectable ? nodeId : "";
-                setTimeout( // to avoid set state while render react errors
+                setTimeout(
+                    // to avoid set state while render react errors
                     () => dispatch(createSendUpdateAction(updateVarName, val, module, onChange, propagate, lovVar)),
                     1
                 );
@@ -526,15 +529,19 @@ const CoreSelector = (props: CoreSelectorProps) => {
                     localStoreSet(jsonFilters, id, lovPropertyName, "filter");
                     const filterVar = getUpdateVar(updateCoreVars, "filter");
                     const lovVar = getUpdateVarNames(updateVars, lovPropertyName);
-                    setTimeout(() => dispatch(
-                        createRequestUpdateAction(
-                            id,
-                            module,
-                            lovVar,
-                            true,
-                            filterVar ? { [filterVar]: filters } : undefined
-                        )
-                    ), 1);
+                    setTimeout(
+                        () =>
+                            dispatch(
+                                createRequestUpdateAction(
+                                    id,
+                                    module,
+                                    lovVar,
+                                    true,
+                                    filterVar ? { [filterVar]: filters } : undefined
+                                )
+                            ),
+                        1
+                    );
                     return filters;
                 }
                 return old;
@@ -674,20 +681,22 @@ const CoreSelector = (props: CoreSelectorProps) => {
                 onItemExpansionToggle={onItemExpand}
             >
                 {foundEntities
-                    ? foundEntities.map((item) => (
-                          <CoreItem
-                              key={item ? item[0] : ""}
-                              item={item}
-                              displayCycles={displayCycles}
-                              showPrimaryFlag={showPrimaryFlag}
-                              leafType={leafType}
-                              editComponent={props.editComponent}
-                              onPin={showPins ? onPin : undefined}
-                              pins={pins}
-                              hideNonPinned={hideNonPinned}
-                              active={!!active}
-                          />
-                      ))
+                    ? foundEntities.map((item) =>
+                          item ? (
+                              <CoreItem
+                                  key={item[0]}
+                                  item={item}
+                                  displayCycles={displayCycles}
+                                  showPrimaryFlag={showPrimaryFlag}
+                                  leafType={leafType}
+                                  editComponent={props.editComponent}
+                                  onPin={showPins ? onPin : undefined}
+                                  pins={pins}
+                                  hideNonPinned={hideNonPinned}
+                                  active={!!active}
+                              />
+                          ) : null
+                      )
                     : null}
             </SimpleTreeView>
         </>
diff --git a/frontend/taipy/src/JobSelector.tsx b/frontend/taipy/src/JobSelector.tsx
index 5a5400633c..2d04e05092 100644
--- a/frontend/taipy/src/JobSelector.tsx
+++ b/frontend/taipy/src/JobSelector.tsx
@@ -16,7 +16,6 @@ import { DeleteOutline, StopCircleOutlined, Add, FilterList } from "@mui/icons-m
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Checkbox from "@mui/material/Checkbox";
-import Chip from "@mui/material/Chip";
 import FormControl from "@mui/material/FormControl";
 import Grid from "@mui/material/Grid";
 import IconButton from "@mui/material/IconButton";
@@ -49,6 +48,7 @@ import {
 } from "taipy-gui";
 
 import { disableColor, popoverOrigin, useClassNames } from "./utils";
+import StatusChip, { Status } from "./StatusChip";
 
 interface JobSelectorProps {
     updateVarName?: string;
@@ -93,41 +93,12 @@ enum JobProps {
 }
 const JobLength = Object.keys(JobProps).length / 2;
 
-enum JobStatus {
-    SUBMITTED = 1,
-    BLOCKED = 2,
-    PENDING = 3,
-    RUNNING = 4,
-    CANCELED = 5,
-    FAILED = 6,
-    COMPLETED = 7,
-    SKIPPED = 8,
-    ABANDONED = 9,
-}
-
 const containerSx = { width: "100%", mb: 2 };
 const selectSx = { height: 50 };
 const containerPopupSx = { width: "619px" };
 const tableWidthSx = { minWidth: 750 };
 const toolbarRightSx = { mr: 6 };
 
-const ChipStatus = ({ status }: { status: number }) => {
-    const statusText = JobStatus[status];
-    let colorFill: "warning" | "default" | "success" | "error" = "warning";
-
-    if (status === JobStatus.COMPLETED || status === JobStatus.SKIPPED) {
-        colorFill = "success";
-    } else if (status === JobStatus.FAILED) {
-        colorFill = "error";
-    } else if (status === JobStatus.CANCELED || status === JobStatus.ABANDONED) {
-        colorFill = "default";
-    }
-
-    const variant = status === JobStatus.FAILED || status === JobStatus.RUNNING ? "filled" : "outlined";
-
-    return <Chip label={statusText} variant={variant} color={colorFill} />;
-};
-
 type JobSelectorColumns = {
     id: string;
     primaryLabel: string;
@@ -443,13 +414,13 @@ const JobSelectedTableRow = ({
             ) : null}
             {showDate ? <TableCell>{creationDate ? new Date(creationDate).toLocaleString() : ""}</TableCell> : null}
             <TableCell>
-                <ChipStatus status={status} />
+                <StatusChip status={status} />
             </TableCell>
             {showCancel || showDelete ? (
                 <TableCell>
-                    {status === JobStatus.RUNNING ? null : status === JobStatus.BLOCKED ||
-                      status === JobStatus.PENDING ||
-                      status === JobStatus.SUBMITTED ? (
+                    {status === Status.RUNNING ? null : status === Status.BLOCKED ||
+                      status === Status.PENDING ||
+                      status === Status.SUBMITTED ? (
                         showCancel ? (
                             <Tooltip title="Cancel Job">
                                 <IconButton data-id={id} onClick={handleCancelJobs}>
@@ -648,9 +619,9 @@ const JobSelector = (props: JobSelectorProps) => {
                 .filter((job) => checked.includes(job[JobProps.id]))
                 .every(
                     (job) =>
-                        job[JobProps.status] === JobStatus.SUBMITTED ||
-                        job[JobProps.status] === JobStatus.BLOCKED ||
-                        job[JobProps.status] === JobStatus.PENDING
+                        job[JobProps.status] === Status.SUBMITTED ||
+                        job[JobProps.status] === Status.BLOCKED ||
+                        job[JobProps.status] === Status.PENDING
                 ),
         [jobRows, checked]
     );
@@ -662,11 +633,11 @@ const JobSelector = (props: JobSelectorProps) => {
                 .filter((job) => checked.includes(job[JobProps.id]))
                 .every(
                     (job) =>
-                        job[JobProps.status] === JobStatus.CANCELED ||
-                        job[JobProps.status] === JobStatus.FAILED ||
-                        job[JobProps.status] === JobStatus.COMPLETED ||
-                        job[JobProps.status] === JobStatus.SKIPPED ||
-                        job[JobProps.status] === JobStatus.ABANDONED
+                        job[JobProps.status] === Status.CANCELED ||
+                        job[JobProps.status] === Status.FAILED ||
+                        job[JobProps.status] === Status.COMPLETED ||
+                        job[JobProps.status] === Status.SKIPPED ||
+                        job[JobProps.status] === Status.ABANDONED
                 ),
         [jobRows, checked]
     );
@@ -689,7 +660,7 @@ const JobSelector = (props: JobSelectorProps) => {
                     filteredJobRows = filteredJobRows.filter((job) => {
                         let rowColumnValue = "";
                         if (filter.data === JobProps.status) {
-                            rowColumnValue = JobStatus[job[JobProps.status]].toLowerCase();
+                            rowColumnValue = Status[job[JobProps.status]].toLowerCase();
                         } else if (filter.data === JobProps.id) {
                             rowColumnValue = `${job[JobProps.id].toLowerCase()}${job[JobProps.name].toLowerCase()}`;
                         } else if (filter.data === JobProps.submitted_id) {
diff --git a/frontend/taipy/src/ScenarioViewer.tsx b/frontend/taipy/src/ScenarioViewer.tsx
index 5ddb18b8e2..0715e7164b 100644
--- a/frontend/taipy/src/ScenarioViewer.tsx
+++ b/frontend/taipy/src/ScenarioViewer.tsx
@@ -60,6 +60,7 @@ import {
 } from "./utils";
 import ConfirmDialog from "./utils/ConfirmDialog";
 import PropertiesEditor from "./PropertiesEditor";
+import StatusChip, { Status } from "./StatusChip";
 
 interface ScenarioViewerProps {
     id?: string;
@@ -365,6 +366,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
             }
         }
         setValid(!!sc);
+        setSubmissionStatus(0);
         setScenario((oldSc) => (oldSc === sc ? oldSc : sc ? (deepEqual(oldSc, sc) ? oldSc : sc) : invalidScenario));
     }, [props.scenario, props.defaultScenario]);
 
@@ -450,6 +452,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                         error_id: getUpdateVar(updateScVar, "error_id"),
                     })
                 );
+                setSubmissionStatus(Status.SUBMITTED);
             }
         },
         [valid, props.onSubmit, props.onSubmissionChange, id, scId, dispatch, module, updateScVar]
@@ -575,6 +578,9 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
 
     const addSequenceHandler = useCallback(() => setSequences((seq) => [...seq, ["", [], "", true]]), []);
 
+    // Submission status
+    const [submissionStatus, setSubmissionStatus] = useState(0);
+
     // on scenario change
     useEffect(() => {
         showTags && setTags(scTags);
@@ -589,6 +595,9 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
         const ids = props.coreChanged?.scenario;
         if (typeof ids === "string" ? ids === scId : Array.isArray(ids) ? ids.includes(scId) : ids) {
             props.updateVarName && dispatch(createRequestUpdateAction(id, module, [props.updateVarName], true));
+            if (props.coreChanged?.submission !== undefined) {
+                setSubmissionStatus(props.coreChanged?.submission as number);
+            }
         }
     }, [props.coreChanged, props.updateVarName, id, module, dispatch, scId]);
 
@@ -620,6 +629,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                         sx={ChipSx}
                                     />
                                 ) : null}
+                                {submissionStatus ? <StatusChip status={submissionStatus} sx={ChipSx} /> : null}
                             </Grid>
                             <Grid item>
                                 {showSubmit ? (
diff --git a/frontend/taipy/src/StatusChip.tsx b/frontend/taipy/src/StatusChip.tsx
new file mode 100644
index 0000000000..96810abd9e
--- /dev/null
+++ b/frontend/taipy/src/StatusChip.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { SxProps, Theme } from "@mui/material";
+import Chip from "@mui/material/Chip";
+
+export enum Status {
+    SUBMITTED = 1,
+    BLOCKED = 2,
+    PENDING = 3,
+    RUNNING = 4,
+    CANCELED = 5,
+    FAILED = 6,
+    COMPLETED = 7,
+    SKIPPED = 8,
+    ABANDONED = 9,
+}
+
+const StatusChip = ({ status, sx }: { status: number; sx?: SxProps<Theme> }) => {
+    const statusText = Status[status];
+    let colorFill: "warning" | "default" | "success" | "error" = "warning";
+
+    if (status === Status.COMPLETED || status === Status.SKIPPED) {
+        colorFill = "success";
+    } else if (status === Status.FAILED) {
+        colorFill = "error";
+    } else if (status === Status.CANCELED || status === Status.ABANDONED) {
+        colorFill = "default";
+    }
+
+    const variant = status === Status.FAILED || status === Status.RUNNING ? "filled" : "outlined";
+
+    return statusText ? <Chip label={statusText} variant={variant} color={colorFill} sx={sx} /> : null;
+};
+
+export default StatusChip;
diff --git a/readme_img/taipy-github-optimized.png b/readme_img/taipy-github-optimized.png
new file mode 100644
index 0000000000..2298e0f4cc
Binary files /dev/null and b/readme_img/taipy-github-optimized.png differ
diff --git a/readme_img/taipy_banner.png b/readme_img/taipy_banner.png
new file mode 100644
index 0000000000..a21a0297ff
Binary files /dev/null and b/readme_img/taipy_banner.png differ
diff --git a/readme_img/taipy_github_GUI_video.gif b/readme_img/taipy_github_GUI_video.gif
new file mode 100644
index 0000000000..2d0af8ce17
Binary files /dev/null and b/readme_img/taipy_github_GUI_video.gif differ
diff --git a/readme_img/taipy_github_data_support.png b/readme_img/taipy_github_data_support.png
new file mode 100644
index 0000000000..bcbcef4294
Binary files /dev/null and b/readme_img/taipy_github_data_support.png differ
diff --git a/readme_img/taipy_github_scenario.png b/readme_img/taipy_github_scenario.png
new file mode 100644
index 0000000000..e7e70b2ac9
Binary files /dev/null and b/readme_img/taipy_github_scenario.png differ
diff --git a/readme_img/taipy_github_scenarios_video.gif b/readme_img/taipy_github_scenarios_video.gif
new file mode 100644
index 0000000000..fee7049870
Binary files /dev/null and b/readme_img/taipy_github_scenarios_video.gif differ
diff --git a/taipy/gui/_renderers/__init__.py b/taipy/gui/_renderers/__init__.py
index d0250b2968..b0e5c76d5b 100644
--- a/taipy/gui/_renderers/__init__.py
+++ b/taipy/gui/_renderers/__init__.py
@@ -99,11 +99,8 @@ def __parse_file_content(self, content):
             self._filepath = content
 
     def __sanitize_content(self, content: str) -> str:
-        # replace all CRLF (\r\n) with LF (\n)
-        text = re.sub(r'\r\n', '\n', content)
-        # replace all remaining CR (\r) with LF (\n)
-        text = re.sub(r'\r', '\n', content)
-        return text
+        # Replace all CRLF (\r\n) and CR (\r) by LF (\n)
+        return re.sub(r"\r", "\n", re.sub(r"\r\n", "\n", content))
 
     def set_content(self, content: str) -> None:
         if not _is_in_notebook():
diff --git a/taipy/gui/utils/_adapter.py b/taipy/gui/utils/_adapter.py
index 8e7aafa5f6..eacb2489d3 100644
--- a/taipy/gui/utils/_adapter.py
+++ b/taipy/gui/utils/_adapter.py
@@ -185,9 +185,21 @@ def __get_label(self, value: t.Any, dig=True) -> t.Union[str, t.Dict, None]:
 
     def __get_children(self, value: t.Any) -> t.Optional[t.List[t.Any]]:
         if isinstance(value, (tuple, list)) and len(value) > 2:
-            return value[2] if isinstance(value[2], list) else [value[2]]
+            return value[2] if isinstance(value[2], list) else None if value[2] is None else [value[2]]
         elif hasattr(value, "children"):
-            return value.children if isinstance(value.children, list) else [value.children]
+            return (
+                value.children
+                if isinstance(value.children, list)
+                else None
+                if value.children is None
+                else [value.children]
+            )
         elif hasattr(value, "__getitem__") and "children" in value:
-            return value["children"] if isinstance(value["children"], list) else [value["children"]]
+            return (
+                value["children"]
+                if isinstance(value["children"], list)
+                else None
+                if value["children"] is None
+                else [value["children"]]
+            )
         return None
diff --git a/taipy/gui_core/_context.py b/taipy/gui_core/_context.py
index 6705b65f5d..b4cd662223 100644
--- a/taipy/gui_core/_context.py
+++ b/taipy/gui_core/_context.py
@@ -149,6 +149,8 @@ def scenario_refresh(self, scenario_id: t.Optional[str]):
     def submission_status_callback(self, submission_id: t.Optional[str] = None, event: t.Optional[Event] = None):
         if not submission_id or not is_readable(t.cast(SubmissionId, submission_id)):
             return
+        submission = None
+        new_status = None
         try:
             last_status = self.client_submission.get(submission_id)
             if not last_status:
@@ -158,7 +160,7 @@ def submission_status_callback(self, submission_id: t.Optional[str] = None, even
             if not submission or not submission.entity_id:
                 return
 
-            new_status = submission.submission_status
+            new_status = t.cast(SubmissionStatus, submission.submission_status)
 
             client_id = submission.properties.get("client_id")
             if client_id:
@@ -207,7 +209,14 @@ def submission_status_callback(self, submission_id: t.Optional[str] = None, even
             _warn(f"Submission ({submission_id}) is not available", e)
 
         finally:
-            self.gui._broadcast(_GuiCoreContext._CORE_CHANGED_NAME, {"jobs": True})
+            self.gui._broadcast(
+                _GuiCoreContext._CORE_CHANGED_NAME,
+                {
+                    "jobs": True,
+                    "scenario": (submission.entity_id if submission else None) or False,
+                    "submission": new_status.value if new_status else None,
+                },
+            )
 
     def no_change_adapter(self, entity: t.List):
         return entity
@@ -575,13 +584,12 @@ def submit_entity(self, state: State, id: str, payload: t.Dict[str, str]):
                     client_id=self.gui._get_client_id(),
                     module_context=self.gui._get_locals_context(),
                 )
-                if on_submission:
+                with self.submissions_lock:
+                    self.client_submission[submission_entity.id] = submission_entity.submission_status
+                if Config.core.mode == "development":
                     with self.submissions_lock:
-                        self.client_submission[submission_entity.id] = submission_entity.submission_status
-                    if Config.core.mode == "development":
-                        with self.submissions_lock:
-                            self.client_submission[submission_entity.id] = SubmissionStatus.SUBMITTED
-                        self.submission_status_callback(submission_entity.id)
+                        self.client_submission[submission_entity.id] = SubmissionStatus.SUBMITTED
+                    self.submission_status_callback(submission_entity.id)
                 _GuiCoreContext.__assign_var(state, error_var, "")
         except Exception as e:
             _GuiCoreContext.__assign_var(state, error_var, f"Error submitting entity. {e}")
@@ -685,7 +693,7 @@ def data_node_adapter(
             raise NotImplementedError
         if isinstance(data, list):
             if data[2] and isinstance(data[2][0], (Cycle, Scenario, Sequence, DataNode)):
-                data[2] = self.get_sorted_datanode_list(data[2], sorts, adapt_dn)
+                data[2] = self.get_sorted_datanode_list(data[2], sorts, False)
             return data
         try:
             if hasattr(data, "id") and is_readable(data.id) and core_get(data.id) is not None:
@@ -707,7 +715,7 @@ def data_node_adapter(
                                 self.data_nodes_by_owner.get(data.id, [])
                                 + (self.scenario_by_cycle or {}).get(data, []),
                                 sorts,
-                                adapt_dn,
+                                False,
                             ),
                             _EntityType.CYCLE.value,
                             False,
@@ -719,7 +727,7 @@ def data_node_adapter(
                             self.get_sorted_datanode_list(
                                 self.data_nodes_by_owner.get(data.id, []) + list(data.sequences.values()),
                                 sorts,
-                                adapt_dn,
+                                False,
                             ),
                             _EntityType.SCENARIO.value,
                             data.is_primary,
@@ -729,7 +737,7 @@ def data_node_adapter(
                             return [
                                 data.id,
                                 data.get_simple_label(),
-                                self.get_sorted_datanode_list(datanodes, sorts, adapt_dn),
+                                self.get_sorted_datanode_list(datanodes, sorts, False),
                                 _EntityType.SEQUENCE.value,
                             ]
         except Exception as e:
diff --git a/taipy/templates/scenario-management/{{cookiecutter.__root_folder_name}}/pages/scenario_page/data_node_management.py b/taipy/templates/scenario-management/{{cookiecutter.__root_folder_name}}/pages/scenario_page/data_node_management.py
index de24e51cbf..3c4954e5d4 100644
--- a/taipy/templates/scenario-management/{{cookiecutter.__root_folder_name}}/pages/scenario_page/data_node_management.py
+++ b/taipy/templates/scenario-management/{{cookiecutter.__root_folder_name}}/pages/scenario_page/data_node_management.py
@@ -9,37 +9,40 @@
 # 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.
 
+import taipy.gui.builder as tgb
+
+
 # build partial content for a specific data node
 def build_dn_partial(dn, dn_label):
-    partial_content = "<|part|render={selected_scenario}|\n\n"
-
-    # ##################################################################################################################
-    # PLACEHOLDER: data node specific content before automatic content                                                 #
-    #                                                                                                                  #
-    # Example:                                                                                                         #
-    if dn_label == "replacement_type":
-        partial_content += "All missing values will be replaced by the data node value."
-    # Comment, remove or replace the previous lines with your own use case                                             #
-    # ##################################################################################################################
-
-    # Automatic data node content
-    partial_content += (
-        "<|{selected_scenario.data_nodes['" + dn.config_id + "']}|data_node|scenario={" "selected_scenario}|>\n\n "
-    )
-
-    # ##################################################################################################################
-    # PLACEHOLDER: data node specific content after automatic content                                                  #
-    #                                                                                                                  #
-    # Example:                                                                                                         #
-    if dn_label == "initial_dataset":
-        partial_content += (
-            "Select your CSV file: <|{selected_data_node.path}|file_selector|extensions=.csv|on_action"
-            "={lambda s: s.refresh('selected_scenario')}|>\n\n "
-        )
-    # Comment, remove or replace the previous lines with your own use case                                             #
-    # ##################################################################################################################
-
-    partial_content += "|>\n\n"
+    with tgb.Page() as partial_content:
+        with tgb.part(render="{selected_scenario}"):
+            # ##########################################################################################################
+            # PLACEHOLDER: data node specific content before automatic content                                         #
+            #                                                                                                          #
+            # Example:                                                                                                 #
+            if dn_label == "replacement_type":
+                tgb.text("All missing values will be replaced by the data node value.")
+            # Comment, remove or replace the previous lines with your own use case                                     #
+            # ##########################################################################################################
+
+            # Automatic data node content
+            tgb.data_node("{selected_scenario.data_nodes['" + dn.config_id + "']}", scenario="{selected_scenario}")
+
+            # ##########################################################################################################
+            # PLACEHOLDER: data node specific content after automatic content                                          #
+            #                                                                                                          #
+            # Example:                                                                                                 #
+            if dn_label == "initial_dataset":
+                tgb.text("Select your  CSV file:")
+                tgb.file_selector(
+                    "{selected_data_node.path}",
+                    extensions=".csv",
+                    on_action="{lambda s: s.refresh('selected_scenario')}",
+                )
+
+            # Comment, remove or replace the previous lines with your own use case                                     #
+            # ##########################################################################################################
+
     return partial_content