diff --git a/CODEOWNERS b/CODEOWNERS
index 9a7842259..ac270f64c 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -1,2 +1,3 @@
 * @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL @lingyielia
 docs/ @stichbury @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL
+*.css @huong-li-nguyen @nadijagraca
diff --git a/vizro-core/changelog.d/20241212_144128_huong_li_nguyen_update_css_codeowner.md b/vizro-core/changelog.d/20241212_144128_huong_li_nguyen_update_css_codeowner.md
new file mode 100644
index 000000000..351e606b1
--- /dev/null
+++ b/vizro-core/changelog.d/20241212_144128_huong_li_nguyen_update_css_codeowner.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
+
+- Remove static CSS that prevented header text from wrapping in `AgGrid`. ([#928](https://github.com/mckinsey/vizro/pull/928))
+
+
+<!--
+### 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/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 56413e831..8866948f9 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -1,89 +1,32 @@
 """Dev app to try things out."""
 
 from vizro import Vizro
-import vizro.models as vm
 import vizro.plotly.express as px
+import vizro.models as vm
+from vizro.tables import dash_ag_grid
+import pandas as pd
 
-df = px.data.gapminder()
-gapminder_data = (
-    df.groupby(by=["continent", "year"]).agg({"lifeExp": "mean", "pop": "sum", "gdpPercap": "mean"}).reset_index()
-)
-first_page = vm.Page(
-    title="First Page",
-    layout=vm.Layout(grid=[[0, 0], [1, 2], [1, 2], [1, 2]]),
-    components=[
-        vm.Card(
-            text="""
-                # First dashboard page
-                This pages shows the inclusion of markdown text in a page and how components
-                can be structured using Layout.
-            """,
-        ),
-        vm.Graph(
-            id="box_cont",
-            figure=px.box(
-                gapminder_data,
-                x="continent",
-                y="lifeExp",
-                color="continent",
-                labels={"lifeExp": "Life Expectancy", "continent": "Continent"},
-            ),
-        ),
-        vm.Graph(
-            id="line_gdp",
-            figure=px.line(
-                gapminder_data,
-                x="year",
-                y="gdpPercap",
-                color="continent",
-                labels={"year": "Year", "continent": "Continent", "gdpPercap": "GDP Per Cap"},
-            ),
-        ),
-    ],
-    controls=[
-        vm.Filter(column="continent", targets=["box_cont", "line_gdp"]),
-    ],
-)
+df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv")
+columnDefs = [
+    {"field": "athlete", "headerName": "The full Name of the athlete"},
+    {"field": "age", "headerName": "The number of Years since the athlete was born"},
+    {"field": "country", "headerName": "The Country the athlete was born in"},
+    {"field": "sport", "headerName": "The Sport the athlete participated in"},
+    {"field": "total", "headerName": "The Total number of medals won by the athlete"},
+]
+
+defaultColDef = {
+    "wrapHeaderText": True,
+    "autoHeaderHeight": True,
+}
 
-iris_data = px.data.iris()
-second_page = vm.Page(
-    title="Second Page",
-    components=[
-        vm.Graph(
-            id="scatter_iris",
-            figure=px.scatter(
-                iris_data,
-                x="sepal_width",
-                y="sepal_length",
-                color="species",
-                color_discrete_map={"setosa": "#00b4ff", "versicolor": "#ff9222"},
-                labels={"sepal_width": "Sepal Width", "sepal_length": "Sepal Length", "species": "Species"},
-            ),
-        ),
-        vm.Graph(
-            id="hist_iris",
-            figure=px.histogram(
-                iris_data,
-                x="sepal_width",
-                color="species",
-                color_discrete_map={"setosa": "#00b4ff", "versicolor": "#ff9222"},
-                labels={"sepal_width": "Sepal Width", "count": "Count", "species": "Species"},
-            ),
-        ),
-    ],
-    controls=[
-        vm.Parameter(
-            targets=["scatter_iris.color_discrete_map.virginica", "hist_iris.color_discrete_map.virginica"],
-            selector=vm.Dropdown(options=["#ff5267", "#3949ab"], multi=False, value="#3949ab", title="Color Virginica"),
-        ),
-        vm.Parameter(
-            targets=["scatter_iris.opacity"],
-            selector=vm.Slider(min=0, max=1, value=0.8, title="Opacity"),
-        ),
-    ],
-)
 
-dashboard = vm.Dashboard(pages=[first_page, second_page])
+# Test app -----------------
+page = vm.Page(
+    title="Page Title",
+    components=[vm.AgGrid(figure=dash_ag_grid(df, columnDefs=columnDefs, defaultColDef=defaultColDef))],
+)
+dashboard = vm.Dashboard(pages=[page])
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()
diff --git a/vizro-core/src/vizro/static/css/aggrid.css b/vizro-core/src/vizro/static/css/aggrid.css
index 286e28d0b..730a77db9 100644
--- a/vizro-core/src/vizro/static/css/aggrid.css
+++ b/vizro-core/src/vizro/static/css/aggrid.css
@@ -36,7 +36,6 @@
 #dashboard-container .ag-header-cell {
   align-items: center;
   display: flex;
-  height: 40px;
   padding: 0 0.75rem;
 }
 
@@ -45,7 +44,6 @@
   line-height: 1rem;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 #dashboard-container .ag-header-cell:hover {
diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css
index a7c66f864..8654ccdb0 100644
--- a/vizro-core/src/vizro/static/css/layout.css
+++ b/vizro-core/src/vizro/static/css/layout.css
@@ -5,6 +5,12 @@
   width: 100vw;
 }
 
+#settings {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+
 #left-main {
   align-items: flex-start;
   display: flex;