diff --git a/public/scripts/models-of-production.js b/public/scripts/models-of-production.js
index 86be618..2e927ee 100644
--- a/public/scripts/models-of-production.js
+++ b/public/scripts/models-of-production.js
@@ -28,7 +28,7 @@ function setUpParameters(render, parameters, modelPrefix) {
 function drawSolowGraph() {
   const L = 150,
     K_MAX = 500,
-    margin = { top: 20, right: 30, bottom: 20, left: 50 };
+    margin = { top: 80, right: 80, bottom: 60, left: 100 };
 
   const [A, d, s, alpha] = setUpParameters(
     drawSolowGraph,
@@ -55,27 +55,29 @@ function drawSolowGraph() {
     .attr("transform", `translate(${margin.left}, ${margin.top})`);
 
   const x = d3.scaleLinear().domain([0, K_MAX]).range([0, width]);
-  svg
+  const xAxis = svg
     .append("g")
     .attr("transform", `translate(0, ${height})`)
-    .call(d3.axisBottom(x))
+    .call(d3.axisBottom(x));
+  xAxis.selectAll("text").style("font-size", "1.5em");
+  xAxis
     .append("text")
     .attr("x", width + 10)
     .attr("y", -10)
     .style("text-anchor", "end")
-    .style("font-size", "1.5em")
+    .style("font-size", "2em")
     .text("K");
 
   const Y_MAX = solowOutput(K_MAX) + K_MAX / 10;
   const y = d3.scaleLinear().domain([0, Y_MAX]).range([height, 0]);
-  svg
-    .append("g")
-    .call(d3.axisLeft(y))
+  const yAxis = svg.append("g").call(d3.axisLeft(y));
+  yAxis.selectAll("text").style("font-size", "1.5em");
+  yAxis
     .append("text")
     .attr("x", 0)
     .attr("y", -10)
     .style("text-anchor", "start")
-    .style("font-size", "1.5em")
+    .style("font-size", "2em")
     .text("Y");
 
   const outputData = Array.from({ length: K_MAX }, (_, k) => ({
@@ -204,7 +206,7 @@ const updateRomerTable = (romerData) => {
 
 function drawRomerGraph() {
   const T_MAX = 100,
-    margin = { top: 20, right: 100, bottom: 20, left: 50 };
+    margin = { top: 80, right: 120, bottom: 60, left: 100 };
 
   const [z, L, l, A0] = setUpParameters(
     drawRomerGraph,
@@ -237,29 +239,33 @@ function drawRomerGraph() {
   }
 
   const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]);
-  svg
+  const xAxis = svg
     .append("g")
     .attr("transform", `translate(0, ${height})`)
-    .call(d3.axisBottom(x))
+    .call(d3.axisBottom(x));
+  xAxis.selectAll("text").style("font-size", "1.5em");
+  xAxis
     .append("text")
     .attr("x", width + 10)
     .attr("y", -10)
     .style("text-anchor", "end")
-    .style("font-size", "1.5em")
+    .style("font-size", "2em")
     .text("t");
 
   const y = d3
     .scaleLinear()
     .domain([0, romerData[romerData.length - 1].Y])
     .range([height, 0]);
-  svg
+  const yAxis = svg
     .append("g")
-    .call(d3.axisLeft(y).ticks(10, d3.format(".1s")))
+    .call(d3.axisLeft(y).ticks(10, d3.format(".1s")));
+  yAxis.selectAll("text").style("font-size", "1.5em");
+  yAxis
     .append("text")
     .attr("x", 0)
     .attr("y", -10)
     .style("text-anchor", "start")
-    .style("font-size", "1.5em")
+    .style("font-size", "2em")
     .text("log(Y)");
 
   svg
@@ -291,7 +297,7 @@ function drawRomerlGraph() {
     z = 0.01,
     L = 50,
     A0 = 50,
-    margin = { top: 20, right: 100, bottom: 20, left: 50 };
+    margin = { top: 80, right: 120, bottom: 60, left: 100 };
 
   const [l, t0] = setUpParameters(drawRomerlGraph, ["lChange", "t0"], "");
 
@@ -328,29 +334,33 @@ function drawRomerlGraph() {
   }
 
   const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]);
-  svg
+  const xAxis = svg
     .append("g")
     .attr("transform", `translate(0, ${height})`)
-    .call(d3.axisBottom(x))
+    .call(d3.axisBottom(x));
+  xAxis.selectAll("text").style("font-size", "1.5em");
+  xAxis
     .append("text")
     .attr("x", width + 10)
     .attr("y", -10)
     .style("text-anchor", "end")
-    .style("font-size", "1.5em")
+    .style("font-size", "2em")
     .text("t");
 
   const y = d3
     .scaleLinear()
     .domain([0, romerData[romerData.length - 1].Y])
     .range([height, 0]);
-  svg
+  const yAxis = svg
     .append("g")
-    .call(d3.axisLeft(y).ticks(10, d3.format(".1s")))
+    .call(d3.axisLeft(y).ticks(10, d3.format(".1s")));
+  yAxis.selectAll("text").style("font-size", "1.5em");
+  yAxis
     .append("text")
     .attr("x", 0)
     .attr("y", -10)
     .style("text-anchor", "start")
-    .style("font-size", "1.5em")
+    .style("font-size", "2em")
     .text("log(Y)");
 
   svg
@@ -437,7 +447,7 @@ function calculateRomerSolowData(
 
 function drawRomerSolowGraph() {
   const T_MAX = 100,
-    margin = { top: 20, right: 100, bottom: 20, left: 50 };
+    margin = { top: 80, right: 120, bottom: 60, left: 100 };
 
   const [z, l, L, A0, s, d, alpha] = setUpParameters(
     drawRomerSolowGraph,
@@ -471,29 +481,33 @@ function drawRomerSolowGraph() {
   );
 
   const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]);
-  svg
+  const xAxis = svg
     .append("g")
     .attr("transform", `translate(0, ${height})`)
-    .call(d3.axisBottom(x))
+    .call(d3.axisBottom(x));
+  xAxis.selectAll("text").style("font-size", "1.5em");
+  xAxis
     .append("text")
     .attr("x", width + 10)
     .attr("y", -10)
     .style("text-anchor", "end")
-    .style("font-size", "1.5em")
+    .style("font-size", "2em")
     .text("t");
 
   const y = d3
     .scaleLinear()
     .domain([0, romerSolowData[romerSolowData.length - 1].Y])
     .range([height, 0]);
-  svg
+  const yAxis = svg
     .append("g")
-    .call(d3.axisLeft(y).ticks(10, d3.format(".1s")))
+    .call(d3.axisLeft(y).ticks(10, d3.format(".1s")));
+  yAxis.selectAll("text").style("font-size", "1.5em");
+  yAxis
     .append("text")
     .attr("x", 0)
     .attr("y", -10)
     .style("text-anchor", "start")
-    .style("font-size", "1.5em")
+    .style("font-size", "2em")
     .text("log(Y)");
 
   svg
@@ -566,29 +580,33 @@ function drawRomerSolowChangeGraph() {
   );
 
   const x = d3.scaleLinear().domain([1, T_MAX]).range([0, width]);
-  svg
+  const xAxis = svg
     .append("g")
     .attr("transform", `translate(0, ${height})`)
-    .call(d3.axisBottom(x))
+    .call(d3.axisBottom(x));
+  xAxis.selectAll("text").style("font-size", "1.5em");
+  xAxis
     .append("text")
     .attr("x", width + 10)
     .attr("y", -10)
     .style("text-anchor", "end")
-    .style("font-size", "1.5em")
+    .style("font-size", "2em")
     .text("t");
 
   const y = d3
     .scaleLinear()
     .domain([0, romerSolowData[romerSolowData.length - 1].Y])
     .range([height, 0]);
-  svg
+  const yAxis = svg
     .append("g")
-    .call(d3.axisLeft(y).ticks(10, d3.format(".1s")))
+    .call(d3.axisLeft(y).ticks(10, d3.format(".1s")));
+  yAxis.selectAll("text").style("font-size", "1.5em");
+  yAxis
     .append("text")
     .attr("x", 0)
     .attr("y", -10)
     .style("text-anchor", "start")
-    .style("font-size", "1.5em")
+    .style("font-size", "2em")
     .text("log(Y)");
 
   svg
@@ -635,3 +653,14 @@ window.onresize = () => {
   drawRomerSolowGraph();
   drawRomerSolowChangeGraph();
 };
+
+new MutationObserver(() => {
+  drawSolowGraph();
+  drawRomerGraph();
+  drawRomerlGraph();
+  drawRomerSolowGraph();
+  drawRomerSolowChangeGraph();
+}).observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ["data-theme"],
+});