diff --git a/content/resources/rs-calculator.md b/content/resources/rs-calculator.md
index fed8552..6d0131a 100644
--- a/content/resources/rs-calculator.md
+++ b/content/resources/rs-calculator.md
@@ -4,7 +4,6 @@ summary = 'Know where to place sand, and also to know when to load the sand'
 tags = ["practice", "service"]
 +++
 
-<script defer src="../../rs-calc.js"></script>
 <noscript>
  For the calculator to work it is necessary to enable JavaScript.
  Here are the <a href="https://www.enable-javascript.com/">
@@ -30,27 +29,5 @@ or further to unload the falling block when u die)
     <button type="submit">
         Calculate
     </button>
-
-<details>
-    <summary>Results</summary>
-    From X: <span class="spawnX"></span>
-    From Z: <span class="spawnZ"></span>
-    To X: <span class="spawnToX"></span>
-    To Z: <span class="spawnToZ"></span>
-    <br />
-    <br />
-    ⬅️ : <span class="positiveX"></span>
-    ⬆️ : <span class="positiveZ"></span>
-    <br />
-    ➡️ : <span class="negativeX"></span>
-    ⬇️ : <span class="negativeZ"></span>
-    <br />
-    ↖️ : X: <span class="midPositiveX"></span> Z: <span class="midPositiveZ"></span>
-    <br />
-    ↙️ : X: <span class="midPositiveX"></span> Z: <span class="midNegativeZ"></span>
-    <br />
-    ↘️ : X: <span class="midNegativeX"></span> Z: <span class="midNegativeZ"></span>
-    <br />
-    ↗️ : X: <span class="midNegativeX"></span> Z: <span class="midPositiveZ"></span>
-</details>
 </form>
+<script defer src="../../rs-calc.js"></script>
diff --git a/static/rs-calc.js b/static/rs-calc.js
index e56da62..d9545e5 100644
--- a/static/rs-calc.js
+++ b/static/rs-calc.js
@@ -61,12 +61,98 @@ function calculateCoordinates(spawnX, spawnZ) {
   };
 }
 
+class McbeCalculatorRsElement extends HTMLElement {
+  static tagName = /** @type {const} */ ("mcbe-calculator-rs");
+  static spawnNumberXName = /** @type {const} */ ("spawn-x-number");
+  static spawnNumberZName = /** @type {const} */ ("spawn-z-number");
+  static observedAttributes = /** @type {const} */ ([
+    McbeCalculatorRsElement.spawnNumberXName,
+    McbeCalculatorRsElement.spawnNumberZName,
+  ]);
+  /** @type ShadowRoot */
+  #shadow;
+  /** @type HTMLDetailsElement */
+  #details;
+  /** @type HTMLStyleElement */
+  #styles;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.#shadow = this.attachShadow({ mode: "open" });
+    this.#styles = document.createElement("style");
+    this.#details = document.createElement("details");
+    this.#shadow.appendChild(this.#styles);
+    this.#shadow.appendChild(this.#details);
+    this.#details.open = true;
+    this.#styles.innerHTML = `p {
+  margin-top: 0;
+  margin-bottom: 0;
+}`;
+    this.#render();
+  }
+
+  attributeChangedCallback() {
+    this.#render();
+  }
+
+  #render() {
+    const spawnNumberX = parseFloat(
+      this.getAttribute(McbeCalculatorRsElement.spawnNumberXName),
+    );
+    const spawnNumberZ = parseFloat(
+      this.getAttribute(McbeCalculatorRsElement.spawnNumberZName),
+    );
+
+    if (Number.isNaN(spawnNumberX) || Number.isNaN(spawnNumberZ)) {
+      this.#details.style.display = "none";
+      return;
+    }
+
+    const result = calculateCoordinates(spawnNumberX, spawnNumberZ);
+    this.#details.style.display = "block";
+    this.#details.innerHTML = `
+    <summary>Results</summary>
+    <p>
+    From X: ${result.spawnX}
+    From Z: ${result.spawnZ}
+    To X: ${result.spawnToX}
+    To Z: ${result.spawnToZ}
+    </p>
+    <p>
+    ⬅️ : ${result.positiveX}
+    ⬆️ : ${result.positiveZ}
+    </p>
+    <p>
+    ➡️ : ${result.negativeX}
+    ⬇️ : ${result.negativeZ}
+    </p>
+    <p>
+    ↖️ : X: ${result.midPositiveX} Z: ${result.midPositiveZ}
+    </p>
+    <p>
+    ↙️ : X: ${result.midPositiveX} Z: ${result.midNegativeZ}
+    </p>
+    <p>
+    ↘️ : X: ${result.midNegativeX} Z: ${result.midNegativeZ}
+    </p>
+    <p>
+    ↗️ : X: ${result.midNegativeX} Z: ${result.midPositiveZ}
+    </p>`;
+  }
+}
+
+customElements.define(McbeCalculatorRsElement.tagName, McbeCalculatorRsElement);
+
 /** @type {NodeListOf<HTMLFormElement>} */
 const forms = document.querySelectorAll("form.rs-calc");
 
 if (!forms.length) throw new Error("Form not found");
-
-forms.forEach((e) =>
+forms.forEach((e) => {
+  const calc = document.createElement(McbeCalculatorRsElement.tagName);
+  e.appendChild(calc);
   e.addEventListener("submit", (e) => {
     e.preventDefault();
     /** @type {HTMLFormElement} */
@@ -77,55 +163,9 @@ forms.forEach((e) =>
     const spawnX = data.get("spawn-x");
     const spawnZ = data.get("spawn-z");
 
-    const spawnXNumber = Number(spawnX);
-    const spawnZNumber = Number(spawnZ);
-
-    const result = calculateCoordinates(spawnXNumber, spawnZNumber);
-
-    form
-      .querySelectorAll(".spawnX")
-      .forEach((e) => (e.innerText = result.spawnX));
-    form
-      .querySelectorAll(".spawnZ")
-      .forEach((e) => (e.innerText = result.spawnZ));
-
-    form
-      .querySelectorAll(".positiveX")
-      .forEach((e) => (e.innerText = result.positiveX));
-    form
-      .querySelectorAll(".positiveZ")
-      .forEach((e) => (e.innerText = result.positiveZ));
-
-    form
-      .querySelectorAll(".negativeX")
-      .forEach((e) => (e.innerText = result.negativeX));
-    form
-      .querySelectorAll(".negativeZ")
-      .forEach((e) => (e.innerText = result.negativeZ));
-
-    form
-      .querySelectorAll(".midPositiveX")
-      .forEach((e) => (e.innerText = result.midPositiveX));
-    form
-      .querySelectorAll(".midPositiveZ")
-      .forEach((e) => (e.innerText = result.midPositiveZ));
-
-    form
-      .querySelectorAll(".midNegativeX")
-      .forEach((e) => (e.innerText = result.midNegativeX));
-    form
-      .querySelectorAll(".midNegativeZ")
-      .forEach((e) => (e.innerText = result.midNegativeZ));
-
-    form
-      .querySelectorAll(".spawnToX")
-      .forEach((e) => (e.innerText = result.spawnToX));
-    form
-      .querySelectorAll(".spawnToZ")
-      .forEach((e) => (e.innerText = result.spawnToZ));
-
-    form
-      .querySelectorAll("details")
-      .forEach((e) => (e.open = true));
-  }),
-);
+    const calc = form.querySelector(McbeCalculatorRsElement.tagName);
+
+    calc.setAttribute(McbeCalculatorRsElement.spawnNumberXName, spawnX);
+    calc.setAttribute(McbeCalculatorRsElement.spawnNumberZName, spawnZ);
+  });
+});