diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 386ccc6a3..6a9adf721 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -81,6 +81,7 @@ repos:
           - stylelint@16.2.1
           - stylelint-config-standard@36.0.0
           - stylelint-order@4.1.0
+          - stylelint-csstree-validator@3.0.0
         args: ["--fix"]
 
   - repo: https://github.com/errata-ai/vale
diff --git a/.stylelintrc b/.stylelintrc
index 7075ac01f..bd07d51c1 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,8 +1,9 @@
 {
   "extends": "stylelint-config-standard",
-  "plugins": ["stylelint-order"],
+  "plugins": ["stylelint-order", "stylelint-csstree-validator"],
   "rules": {
     "order/properties-alphabetical-order": true,
+    "csstree/validator": true,
     "selector-class-pattern": null,
     "custom-property-pattern": null,
     "color-function-notation": "legacy",
diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom.css
similarity index 87%
rename from vizro-ai/examples/dashboard_ui/assets/custom_css.css
rename to vizro-ai/examples/dashboard_ui/assets/custom.css
index 0eb9a42a0..538cb44f9 100644
--- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css
+++ b/vizro-ai/examples/dashboard_ui/assets/custom.css
@@ -3,12 +3,12 @@
 }
 
 .card-body {
-  color: var(--text-light-mode-secondary);
+  color: var(--text-secondary-inverted);
 }
 
 .textbox {
   border-radius: 24px;
-  font-size: var(--text-size-02);
+  font-size: 0.875rem;
   margin-bottom: 20px;
   max-width: 60%;
   padding: 4px 12px;
@@ -17,14 +17,14 @@
 
 .user_input:focus {
   background: var(--field-enabled);
-  box-shadow: 0 0 0 2px var(--focus-focus) inset;
+  box-shadow: 0 0 0 2px var(--focus) inset;
   color: var(--text-primary);
   outline-width: 0;
 }
 
 #text-area {
   background-color: inherit;
-  border: 1px solid var(--border-subtle-alpha-01);
+  border: 1px solid var(--border-subtleAlpha01);
   color: var(--text-primary);
   min-height: 14vh;
   padding: 8px;
@@ -68,10 +68,6 @@
 
 #model-dropdown .Select-menu-outer {
   font-size: 12px;
-
-  /* top: 0; */
-
-  /* transform: translateY(3px) translateY(-100%); */
 }
 
 #model-dropdow .dash-dropdown {
@@ -122,22 +118,13 @@
 }
 
 #data-upload-component {
-  border: 1px dashed var(--border-subtle-alpha-01);
+  border: 1px dashed var(--border-subtleAlpha01);
   color: var(--text-primary);
   height: 5vh;
   line-height: 5vh;
   text-align: center;
 }
 
-/*
-#settings-api-key-toggle .form-check-input {
-  border-radius: 8px;
-}
-
-#settings-api-base-toggle .form-check-input {
-  border-radius: 8px;
-}
-*/
 #toggle-div-api-base,
 #toggle-div-api-key {
   align-items: center;
@@ -177,19 +164,19 @@
 
 .btn-primary:enabled:has(#dropdown-menu-icon) {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
   font-size: 1.5rem;
 }
 
 .btn-primary:disabled:has(#dropdown-menu-icon) {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
   font-size: 1.5rem;
 }
 
 .download-button {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
   width: 100%;
 }
 
@@ -199,14 +186,14 @@
 
 .dropdown-menu-toggle-class {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
   height: 2rem;
   scale: 90%;
 }
 
 .dropdown-menu-toggle-class:hover {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
   cursor: pointer;
   height: 2rem;
   scale: 90%;
@@ -218,7 +205,7 @@
     .disabled
   ) {
   background-color: inherit;
-  color: var(--text-active);
+  color: var(--text-primary);
 }
 
 .modal-class {
@@ -234,7 +221,7 @@
 
 .custom_header {
   align-items: center;
-  border-bottom: 1px solid var(--border-subtle-alpha-01);
+  border-bottom: 1px solid var(--border-subtleAlpha01);
   display: flex;
   flex-direction: row;
   height: 60px;
@@ -314,7 +301,7 @@
   background: var(--text-primary);
   border-top-left-radius: 8px;
   bottom: 0;
-  color: var(--text-contrast-primary);
+  color: var(--text-primary-inverted);
   display: flex;
   font-size: 0.8rem;
   font-weight: 500;
@@ -327,7 +314,7 @@
 .anchor-container:focus,
 .anchor-container:hover {
   background: var(--text-secondary);
-  color: var(--text-contrast-primary);
+  color: var(--text-primary-inverted);
 }
 
 img#banner {
@@ -346,7 +333,9 @@ img#banner {
   flex-flow: column wrap;
   gap: 12px;
   justify-content: flex-start;
-  overflow: none;
+
+  /* Nadija, can you check what overflow behaviour you guys wanted here? none doesn't exist as a property */
+  overflow: hidden;
 }
 
 .flex-container h4 {
diff --git a/vizro-ai/examples/dashboard_ui/requirements.in b/vizro-ai/examples/dashboard_ui/requirements.in
index 2e9c8c58a..e4c705ba5 100644
--- a/vizro-ai/examples/dashboard_ui/requirements.in
+++ b/vizro-ai/examples/dashboard_ui/requirements.in
@@ -1,5 +1,6 @@
 gunicorn
 vizro-ai>=0.3.2
+vizro==0.1.27
 black
 openpyxl
 langchain_anthropic
diff --git a/vizro-ai/examples/dashboard_ui/requirements.txt b/vizro-ai/examples/dashboard_ui/requirements.txt
index 47db784ee..0cde69ddd 100644
--- a/vizro-ai/examples/dashboard_ui/requirements.txt
+++ b/vizro-ai/examples/dashboard_ui/requirements.txt
@@ -15,13 +15,20 @@ anyio==4.4.0
     #   anthropic
     #   httpx
     #   openai
+async-timeout==4.0.3
+    # via
+    #   aiohttp
+    #   langchain
 attrs==24.2.0
     # via aiohttp
 autoflake==2.3.1
-    # via vizro-ai
+    # via
+    #   vizro
+    #   vizro-ai
 black==24.8.0
     # via
     #   -r requirements.in
+    #   vizro
     #   vizro-ai
 blinker==1.8.2
     # via flask
@@ -63,6 +70,8 @@ distro==1.9.0
     #   openai
 et-xmlfile==1.1.0
     # via openpyxl
+exceptiongroup==1.2.2
+    # via anyio
 filelock==3.16.1
     # via huggingface-hub
 flask==3.0.3
@@ -77,6 +86,8 @@ frozenlist==1.4.1
     #   aiosignal
 fsspec==2024.10.0
     # via huggingface-hub
+greenlet==3.1.1
+    # via sqlalchemy
 gunicorn==23.0.0
     # via -r requirements.in
 h11==0.14.0
@@ -100,7 +111,9 @@ idna==3.8
     #   requests
     #   yarl
 importlib-metadata==8.5.0
-    # via dash
+    # via
+    #   dash
+    #   flask
 itsdangerous==2.2.0
     # via flask
 jinja2==3.1.4
@@ -182,7 +195,9 @@ pathspec==0.12.1
 platformdirs==4.3.2
     # via black
 plotly==5.24.1
-    # via dash
+    # via
+    #   dash
+    #   vizro
 pydantic==2.9.1
     # via
     #   anthropic
@@ -217,8 +232,6 @@ requests==2.32.3
     #   tiktoken
 retrying==1.3.4
     # via dash
-ruff==0.6.4
-    # via vizro
 setuptools==74.1.2
     # via dash
 six==1.16.0
@@ -246,6 +259,10 @@ tokenizers==0.20.1
     # via
     #   anthropic
     #   langchain-mistralai
+tomli==2.1.0
+    # via
+    #   autoflake
+    #   black
 tqdm==4.66.5
     # via
     #   huggingface-hub
@@ -253,9 +270,12 @@ tqdm==4.66.5
 typing-extensions==4.12.2
     # via
     #   anthropic
+    #   anyio
+    #   black
     #   dash
     #   huggingface-hub
     #   langchain-core
+    #   multidict
     #   openai
     #   pydantic
     #   pydantic-core
@@ -264,8 +284,10 @@ tzdata==2024.1
     # via pandas
 urllib3==2.2.3
     # via requests
-vizro==0.1.23
-    # via vizro-ai
+vizro==0.1.27
+    # via
+    #   -r requirements.in
+    #   vizro-ai
 vizro-ai==0.3.2
     # via -r requirements.in
 werkzeug==3.0.4
diff --git a/vizro-core/docs/pages/user-guides/custom-css.md b/vizro-core/docs/pages/user-guides/custom-css.md
index 8dd7da3c7..dd2d22275 100755
--- a/vizro-core/docs/pages/user-guides/custom-css.md
+++ b/vizro-core/docs/pages/user-guides/custom-css.md
@@ -316,11 +316,10 @@ It's essential to understand the relationship between the targeted CSS class or
 
 ### Make your CSS responsive to theme switches with variables
 To ensure your CSS adapts to theme changes, we recommend using CSS variables (`var`) whenever possible. For a
-comprehensive list of available CSS variable names, refer to the
-[Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/css-variables/). Note that our Vizro Bootstrap
-stylesheet is still under development. While all Bootstrap variables have values assigned, some of these values may
-come from the default Bootstrap theme, which can result in styling that looks different from the intended Vizro design.
-You can also define your own CSS variables, as demonstrated in the example on
+comprehensive list of available variable names, refer to the
+[Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/css-variables/). Note that our
+Bootstrap stylesheet is still under development, so not all Bootstrap variables are currently available.
+Additionally, you can define your own CSS variables, as demonstrated in the example on
 [changing the container background color](#change-the-styling-of-a-container).
 
 ### Turn off page title
diff --git a/vizro-core/examples/dev/app.py b/vizro-core/examples/dev/app.py
index aa56f9ff1..1265ab20c 100644
--- a/vizro-core/examples/dev/app.py
+++ b/vizro-core/examples/dev/app.py
@@ -8,7 +8,7 @@
 import plotly.graph_objects as go
 import vizro.models as vm
 import vizro.plotly.express as px
-from dash import dash_table, dcc, html
+from dash import dash_table, dcc, get_asset_url, html
 from vizro import Vizro
 from vizro.actions import export_data, filter_interaction
 from vizro.figures import kpi_card, kpi_card_reference
@@ -606,10 +606,10 @@ def my_custom_table(data_frame=None, chosen_columns: Optional[list[str]] = None)
     columns = [{"name": i, "id": i} for i in chosen_columns]
     defaults = {
         "style_as_list_view": True,
-        "style_data": {"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
+        "style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
         "style_header": {
-            "border_bottom": "1px solid var(--state-overlays-selected-hover)",
-            "border_top": "1px solid var(--main-container-bg-color)",
+            "border_bottom": "1px solid var(--stateOverlays-selectedHover)",
+            "border_top": "1px solid var(--right-side-bg)",
             "height": "32px",
         },
     }
@@ -817,5 +817,16 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.
     ),
 )
 
+
 if __name__ == "__main__":
-    Vizro().build(dashboard).run()
+    app = Vizro().build(dashboard)
+    app.dash.layout.children.append(
+        dbc.NavLink(
+            ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
+            href="https://github.com/mckinsey/vizro",
+            target="_blank",
+            className="anchor-container",
+        )
+    )
+    server = app.dash.server
+    app.run()
diff --git a/vizro-core/examples/dev/assets/images/app.svg b/vizro-core/examples/dev/assets/app.svg
similarity index 100%
rename from vizro-core/examples/dev/assets/images/app.svg
rename to vizro-core/examples/dev/assets/app.svg
diff --git a/vizro-core/examples/dev/assets/css/custom.css b/vizro-core/examples/dev/assets/css/custom.css
index f6c0002d2..57c91b902 100644
--- a/vizro-core/examples/dev/assets/css/custom.css
+++ b/vizro-core/examples/dev/assets/css/custom.css
@@ -17,3 +17,28 @@
   height: 210px;
   width: 240px;
 }
+
+.anchor-container {
+  align-items: center;
+  background: var(--text-primary);
+  border-top-left-radius: 8px;
+  bottom: 0;
+  color: var(--text-primary-inverted);
+  display: flex;
+  font-size: 0.8rem;
+  font-weight: 500;
+  height: 24px;
+  padding: 0 12px;
+  position: fixed;
+  right: 0;
+}
+
+.anchor-container:focus,
+.anchor-container:hover {
+  background: var(--text-secondary);
+  color: var(--text-primary-inverted);
+}
+
+img#banner {
+  height: 16px;
+}
diff --git a/vizro-core/examples/dev/assets/images/logo.svg b/vizro-core/examples/dev/assets/logo.svg
similarity index 100%
rename from vizro-core/examples/dev/assets/images/logo.svg
rename to vizro-core/examples/dev/assets/logo.svg
diff --git a/vizro-core/examples/dev/requirements.in b/vizro-core/examples/dev/requirements.in
new file mode 100644
index 000000000..49e7b9ea2
--- /dev/null
+++ b/vizro-core/examples/dev/requirements.in
@@ -0,0 +1,4 @@
+# This file is only used if you don't have hatch installed.
+gunicorn
+openpyxl
+vizro==0.1.27
diff --git a/vizro-core/examples/dev/requirements.txt b/vizro-core/examples/dev/requirements.txt
new file mode 100644
index 000000000..dee664249
--- /dev/null
+++ b/vizro-core/examples/dev/requirements.txt
@@ -0,0 +1,130 @@
+# This file was autogenerated by uv via the following command:
+#    uv pip compile requirements.in -o requirements.txt
+annotated-types==0.7.0
+    # via pydantic
+autoflake==2.3.1
+    # via vizro
+black==24.4.2
+    # via vizro
+blinker==1.8.2
+    # via flask
+cachelib==0.9.0
+    # via flask-caching
+certifi==2024.8.30
+    # via requests
+charset-normalizer==3.4.0
+    # via requests
+click==8.1.7
+    # via
+    #   black
+    #   flask
+dash==2.18.1
+    # via
+    #   dash-ag-grid
+    #   dash-bootstrap-components
+    #   vizro
+dash-ag-grid==31.2.0
+    # via vizro
+dash-bootstrap-components==1.6.0
+    # via vizro
+dash-core-components==2.0.0
+    # via dash
+dash-html-components==2.0.0
+    # via dash
+dash-mantine-components==0.12.1
+    # via vizro
+dash-table==5.0.0
+    # via dash
+et-xmlfile==2.0.0
+    # via openpyxl
+flask==3.0.3
+    # via
+    #   dash
+    #   flask-caching
+flask-caching==2.3.0
+    # via vizro
+gunicorn==23.0.0
+    # via -r requirements.in
+idna==3.10
+    # via requests
+importlib-metadata==8.5.0
+    # via
+    #   dash
+    #   flask
+itsdangerous==2.2.0
+    # via flask
+jinja2==3.1.4
+    # via flask
+markupsafe==3.0.2
+    # via
+    #   jinja2
+    #   werkzeug
+mypy-extensions==1.0.0
+    # via black
+nest-asyncio==1.6.0
+    # via dash
+numpy==2.0.2
+    # via pandas
+openpyxl==3.1.5
+    # via -r requirements.in
+packaging==24.1
+    # via
+    #   black
+    #   gunicorn
+    #   plotly
+pandas==2.2.3
+    # via vizro
+pathspec==0.12.1
+    # via black
+platformdirs==4.2.2
+    # via black
+plotly==5.24.1
+    # via
+    #   dash
+    #   vizro
+pydantic==2.9.2
+    # via vizro
+pydantic-core==2.23.4
+    # via pydantic
+pyflakes==3.2.0
+    # via autoflake
+python-dateutil==2.9.0.post0
+    # via pandas
+pytz==2024.2
+    # via pandas
+requests==2.32.3
+    # via dash
+retrying==1.3.4
+    # via dash
+setuptools==75.3.0
+    # via dash
+six==1.16.0
+    # via
+    #   python-dateutil
+    #   retrying
+tenacity==9.0.0
+    # via plotly
+tomli==2.1.0
+    # via
+    #   autoflake
+    #   black
+typing-extensions==4.12.2
+    # via
+    #   black
+    #   dash
+    #   pydantic
+    #   pydantic-core
+tzdata==2024.2
+    # via pandas
+urllib3==2.2.3
+    # via requests
+vizro==0.1.27
+    # via -r requirements.in
+werkzeug==3.0.6
+    # via
+    #   dash
+    #   flask
+wrapt==1.16.0
+    # via vizro
+zipp==3.20.2
+    # via importlib-metadata
diff --git a/vizro-core/examples/scratch_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css
index f8c8df785..81a196575 100644
--- a/vizro-core/examples/scratch_dev/assets/css/custom.css
+++ b/vizro-core/examples/scratch_dev/assets/css/custom.css
@@ -1,3 +1,4 @@
 #page-header {
+  padding: auto;
   padding-left: 8px;
 }
diff --git a/vizro-core/examples/visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
index db65291cd..c69bbe58c 100644
--- a/vizro-core/examples/visual-vocabulary/assets/css/custom.css
+++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
@@ -94,7 +94,7 @@ img[src*="#chart-icon"] {
   background: var(--text-primary);
   border-top-left-radius: 8px;
   bottom: 0;
-  color: var(--text-contrast-primary);
+  color: var(--text-primary-inverted);
   display: flex;
   font-size: 0.8rem;
   font-weight: 500;
@@ -107,7 +107,7 @@ img[src*="#chart-icon"] {
 .anchor-container:focus,
 .anchor-container:hover {
   background: var(--text-secondary);
-  color: var(--text-contrast-primary);
+  color: var(--text-primary-inverted);
 }
 
 img#banner {
diff --git a/vizro-core/examples/visual-vocabulary/requirements.in b/vizro-core/examples/visual-vocabulary/requirements.in
index 701ad04d6..619153ed9 100644
--- a/vizro-core/examples/visual-vocabulary/requirements.in
+++ b/vizro-core/examples/visual-vocabulary/requirements.in
@@ -3,5 +3,5 @@ autoflake==2.3.1
 black==24.4.2
 isort==5.13.2
 plotly==5.24.1
-vizro==0.1.25
+vizro==0.1.27
 gunicorn
diff --git a/vizro-core/examples/visual-vocabulary/requirements.txt b/vizro-core/examples/visual-vocabulary/requirements.txt
index 693b90a19..7d4745d05 100644
--- a/vizro-core/examples/visual-vocabulary/requirements.txt
+++ b/vizro-core/examples/visual-vocabulary/requirements.txt
@@ -50,7 +50,9 @@ gunicorn==23.0.0
 idna==3.10
     # via requests
 importlib-metadata==8.5.0
-    # via dash
+    # via
+    #   dash
+    #   flask
 isort==5.13.2
     # via -r requirements.in
 itsdangerous==2.2.0
@@ -65,7 +67,7 @@ mypy-extensions==1.0.0
     # via black
 nest-asyncio==1.6.0
     # via dash
-numpy==2.1.2
+numpy==2.0.2
     # via pandas
 packaging==24.1
     # via
@@ -105,8 +107,13 @@ six==1.16.0
     #   retrying
 tenacity==9.0.0
     # via plotly
+tomli==2.1.0
+    # via
+    #   autoflake
+    #   black
 typing-extensions==4.12.2
     # via
+    #   black
     #   dash
     #   pydantic
     #   pydantic-core
@@ -114,7 +121,7 @@ tzdata==2024.2
     # via pandas
 urllib3==2.2.3
     # via requests
-vizro==0.1.25
+vizro==0.1.27
     # via -r requirements.in
 werkzeug==3.0.6
     # via