diff --git a/app.qmd b/app.qmd
index aeb64d8..9204099 100644
--- a/app.qmd
+++ b/app.qmd
@@ -35,9 +35,11 @@ chart = {
   let selectedMu = 0.5;
   const filteredData = () => bsplineData.filter(d => selectedKnots == d.knots && Math.abs(selectedMu - d.mu) < 0.001);
   const container = d3.create("div").style("margin-bottom", "20px");
+  const controlsContainer = container.append("div")
+    .style("display", "flex")
+    .style("gap", "20px");
   // Knots slider control
-  const knotsControl = container
-      .append("div")
+  const knotsControl = controlsContainer.append("div")
       .style("display","flex")
       .style("align-items","center")
       .style("gap","10px");
@@ -52,12 +54,10 @@ chart = {
     .attr("max",maxKnots)
     .attr("step",1)
     .property("value",selectedKnots)
-    .style("width","100px")             // narrower slider
-    .style("height","10px")              // thinner track
     .on("input", function() { selectedKnots = +this.value; knotsControl.select("span").text(selectedKnots); updateChart(filteredData()); });
   knotsControl.append("span").text(selectedKnots).style("font-size","16px");;
   // μ slider control
-  const muControl = container.append("div").style("display","flex").style("align-items","center").style("gap","10px");
+  const muControl = controlsContainer.append("div").style("display","flex").style("align-items","center").style("gap","10px");
   muControl.append("label").text("μ:").style("font-size","16px");
   muControl.append("input")
     .attr("type","range").attr("min",minMu).attr("max",maxMu).attr("step",0.1)