diff --git a/website/src/components/PitchSlider.jsx b/website/src/components/PitchSlider.jsx
index 4ab961d4..e823c090 100644
--- a/website/src/components/PitchSlider.jsx
+++ b/website/src/components/PitchSlider.jsx
@@ -48,10 +48,11 @@ export function PitchSlider({
   pitchStep = '0.001',
   min = 55,
   max = 7040,
+  initial = 220,
 }) {
   const oscRef = useRef();
   const activeRef = useRef();
-  const freqRef = useRef(220);
+  const freqRef = useRef(initial);
   const historyRef = useRef([freqRef.current]);
   const frameRef = useRef();
   const canvasRef = useRef();
@@ -139,6 +140,15 @@ export function PitchSlider({
     startOsc(hz);
   };
 
+  let exponent = freq2pitchSlider(hz) * Math.log2(max / min);
+  const semitones = parseFloat((exponent * 12).toFixed(2));
+  if (semitones % 12 === 0) {
+    exponent = semitones / 12;
+  } else if (semitones % 1 === 0) {
+    exponent = `${semitones}/12`;
+  } else {
+    exponent = exponent.toFixed(2);
+  }
   return (
     <>
       <span className="font-mono">
@@ -148,7 +158,7 @@ export function PitchSlider({
           <>
             {min}Hz * 2
             <sup>
-              <span className="text-yellow-500">{(freq2pitchSlider(hz) * Math.log2(max / min)).toFixed(2)}</span>
+              <span className="text-yellow-500">{exponent}</span>
             </sup>
           </>
         )}
diff --git a/website/src/pages/understand/pitch.mdx b/website/src/pages/understand/pitch.mdx
index 7f49a2ab..041f45e5 100644
--- a/website/src/pages/understand/pitch.mdx
+++ b/website/src/pages/understand/pitch.mdx
@@ -64,7 +64,7 @@ In musical terms, a pitch with double the frequency of another is an `octave` hi
 
 Because octaves are pretty far apart, octaves are typically divided into 12 equal parts:
 
-<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 12} min={440} max={880} />
+<PitchSlider client:load showPitchSlider showFrequencySlider pitchStep={1 / 12} min={440} max={880} initial={440} />
 
 ## Definition