diff --git a/vizro-core/changelog.d/20240701_084052_huong_li_nguyen_update_docs_kpi.md b/vizro-core/changelog.d/20240701_084052_huong_li_nguyen_update_docs_kpi.md
new file mode 100644
index 000000000..f1f65e73c
--- /dev/null
+++ b/vizro-core/changelog.d/20240701_084052_huong_li_nguyen_update_docs_kpi.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/docs/assets/user_guides/figure/kpi_cards.png b/vizro-core/docs/assets/user_guides/figure/kpi_cards.png
index 6d3f1d8b2..2125be068 100644
Binary files a/vizro-core/docs/assets/user_guides/figure/kpi_cards.png and b/vizro-core/docs/assets/user_guides/figure/kpi_cards.png differ
diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py
index c1b5d746a..05f568183 100644
--- a/vizro-core/examples/_dev/app.py
+++ b/vizro-core/examples/_dev/app.py
@@ -5,9 +5,7 @@
 from vizro import Vizro
 from vizro.figures import kpi_card, kpi_card_reference
 
-df_kpi = pd.DataFrame(
-    {"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Reference Zero": [0, 0, 0], "Category": ["A", "B", "C"]}
-)
+df_kpi = pd.DataFrame({"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Category": ["A", "B", "C"]})
 
 example_cards = [
     kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
@@ -31,28 +29,28 @@
         data_frame=df_kpi,
         value_column="Actual",
         reference_column="Reference",
-        title="Delta Positive",
+        title="KPI reference (pos)",
     ),
     kpi_card_reference(
         data_frame=df_kpi,
         value_column="Actual",
         reference_column="Reference",
         agg_func="median",
-        title="Delta Negative",
+        title="KPI reference (neg)",
     ),
     kpi_card_reference(
         data_frame=df_kpi,
         value_column="Actual",
-        reference_column="Actual",
-        title="Delta Zero",
+        reference_column="Reference",
+        title="KPI reference with formatting",
         value_format="{value:.2f}$",
         reference_format="{delta:.2f}$ vs. last year ({reference:.2f}$)",
     ),
     kpi_card_reference(
         data_frame=df_kpi,
         value_column="Actual",
-        reference_column="Reference Zero",
-        title="Reference Zero",
+        reference_column="Reference",
+        title="KPI reference with icon",
         icon="shopping_cart",
     ),
 ]
diff --git a/vizro-core/src/vizro/figures/kpi_cards.py b/vizro-core/src/vizro/figures/kpi_cards.py
index 8b7d9f472..7243678ec 100644
--- a/vizro-core/src/vizro/figures/kpi_cards.py
+++ b/vizro-core/src/vizro/figures/kpi_cards.py
@@ -104,7 +104,7 @@ def kpi_card_reference(  # noqa: PLR0913
              - "{value:,}": Formats the value with comma as a thousands separator.
 
         reference_format: Format string to be applied to the reference. For more details on possible placeholders, see
-            docstring on `value_format`. Defaults to "{delta_relative:.1%} vs. reference ({reference})".
+            docstring on `value_format`. Defaults to "{delta_relative:+.1%} vs. reference ({reference})".
         agg_func: String function name to be used for aggregating the data. Common options include
             "sum", "mean" or "median". Default is "sum". For more information on possible functions, see
             https://stackoverflow.com/questions/65877567/passing-function-names-as-strings-to-pandas-groupby-aggregrate.