diff --git a/basic.html b/basic.html
index 75c418a..441d4d7 100644
--- a/basic.html
+++ b/basic.html
@@ -8,10 +8,10 @@
     <title>simple-synth</title>
   </head>
   <body>
-    <form>
-      <input type="radio" id="sinwave" name="wavechoice" value="sine" checked>
+    <form style="padding: 15px">
+      <input type="radio" id="sinwave" name="wavechoice" value="sine">
       <label for="sinwave">Sine</label>
-      <input type="radio" id="squarewave" name="wavechoice" value="square">
+      <input type="radio" id="squarewave" name="wavechoice" value="square" checked>
       <label for="squarewave">Square</label>
       <input type="radio" id="triwave" name="wavechoice" value="triangle">
       <label for="triwave">Triangle</label>
@@ -19,9 +19,11 @@
       <label for="sawtoothwave">Sawtooth</label>
 
     </form>
-    <button id="start">Start</button>
-    <button id="stop">Stop</button>
-    <div style="padding: 10px;">
+    <div style="padding: 15px">
+      <button id="start">Start</button>
+      <button id="stop">Stop</button>
+    </div>
+      <div style="padding: 10px;">
       <label for="freq">Frequency</label>
       <input id="freq" type="range" min="100" max="700" value="440" step="10">
       <span id="freqDisplay">440</span>Hz
diff --git a/basic.js b/basic.js
index a8d3a8b..f5e796d 100644
--- a/basic.js
+++ b/basic.js
@@ -1,11 +1,8 @@
 let osc = null;
 let gain = null;
+let selectedWave;
 
 window.onload = function () {
-  let selectedWave = document.querySelector(
-    "input[name='wavechoice']:checked"
-  ).value;
-
   const audioContext = new AudioContext();
   // this gets the node for the start butten and adds to it an even listener for click, when clicked the synth will play
 
@@ -26,6 +23,24 @@ window.onload = function () {
     gainDisplay.textContent = level;
   });
 
+  function handleSelectionChange() {
+    let selectedRadioButton = document.querySelector(
+      "input[name='wavechoice']:checked"
+    );
+    if (selectedRadioButton) {
+      selectedWave = selectedRadioButton.value;
+      console.log(selectedWave);
+    } else {
+      console.log("No radio button is selected.");
+    }
+  }
+
+  document
+    .querySelectorAll("input[name='wavechoice']")
+    .forEach((radioButton) => {
+      radioButton.addEventListener("change", handleSelectionChange);
+    });
+
   document.getElementById("start").addEventListener("click", () => {
     if (!osc) {
       osc = audioContext.createOscillator();
@@ -35,7 +50,7 @@ window.onload = function () {
       gain = audioContext.createGain();
     }
 
-    osc.type = "" + selectedWave;
+    osc.type = selectedWave;
     osc.frequency.setValueAtTime(
       parseFloat(freq.value),
       audioContext.currentTime
@@ -55,15 +70,4 @@ window.onload = function () {
     osc.stop();
     osc = null;
   });
-
-  function handleSelectionChange() {
-    let selectedValue = document.querySelector(
-      'input[name="choice"]:checked'
-    ).value;
-    console.log(selectedValue);
-  }
-
-  document.querySelectorAll("input[name='wavechoice']").forEach((rb) => {
-    rb.addEventListener("change", handleSelectionChange);
-  });
 };
