diff --git a/index.html b/index.html
index 3bf2c04..7b93b19 100644
--- a/index.html
+++ b/index.html
@@ -3,15 +3,33 @@
     <head>
         <meta charset="UTF-8">
         <title>Doses</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+            html {
+                font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            }
+        </style>
     </head>
     <body>
         <h1>Doses converter</h1>
-        <label for="proof">Proof (%)</label>
-        <input type="number" id="proof" value="40">
-        <label for="volume">Volume (cl)</label>
-        <input type="number" id="volume" value="10">
-        <label for="dose">Dose</label>
-        <input type="number" id="dose" value="3.2">
+
+        <p>
+            <label for="proof">Proof (%)</label>
+            <input type="number" id="proof" value="40">
+        </p>
+
+        <p>
+            <label for="volume">Volume (cl)</label>
+            <input type="number" id="volume" value="10">
+            <button id="compute-volume">Compute</button>
+        </p>
+
+        <p>
+            <label for="dose">Dose</label>
+            <input type="number" id="dose" value="3.2">
+            <button id="compute-dose">Compute</button>
+        </p>
+
         <script src="main.js" defer></script>
     </body>
 </html>
diff --git a/main.js b/main.js
index e69de29..51fe2a2 100644
--- a/main.js
+++ b/main.js
@@ -0,0 +1,38 @@
+const computeVolumeButton = document.getElementById("compute-volume");
+computeVolumeButton.addEventListener("click", () => {
+    const dose = getDoseValue();
+    const proof = getProofValue();
+    const volume = (dose * 100) / 0.8 / proof;
+    setVolumeValue(volume.toFixed(2));
+});
+const computeDoseButton = document.getElementById("compute-dose");
+computeDoseButton.addEventListener("click", () => {
+    const volume = getVolumeValue();
+    const proof = getProofValue();
+    const dose = (volume / 100) * 0.8 * proof;
+    setDoseValue(dose.toFixed(2));
+});
+
+const proofInput = document.getElementById("proof");
+const volumeInput = document.getElementById("volume");
+const doseInput = document.getElementById("dose");
+
+function getProofValue() {
+    return parseFloat(proofInput.value);
+}
+
+function getVolumeValue() {
+    return parseFloat(volumeInput.value);
+}
+
+function setVolumeValue(value) {
+    volumeInput.value = value;
+}
+
+function getDoseValue() {
+    return parseFloat(doseInput.value);
+}
+
+function setDoseValue(value) {
+    doseInput.value = value;
+}
