diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c21dce0f..7c92ef67 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import Editor from '@monaco-editor/react';
+import { useState, useEffect } from "react";
+import Editor from "@monaco-editor/react";
 
 function debounce(fn, delay) {
   let t;
@@ -10,11 +10,15 @@ function debounce(fn, delay) {
 }
 
 export default function App() {
-  const [params, setParams] = useState([{ name: 'input1', value: '<root/>', open: true }]);
-  const [xslt, setXslt] = useState('<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">\n<xsl:template match="/">\n<root/>\n</xsl:template>\n</xsl:stylesheet>');
-  const [result, setResult] = useState('');
-  const [version, setVersion] = useState('1.0');
-  const [error, setError] = useState('');
+  const [params, setParams] = useState([
+    { name: "input1", value: "<root/>", open: true },
+  ]);
+  const [xslt, setXslt] = useState(
+    `<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">\n<xsl:template match="/">\n<root/>\n</xsl:template>\n</xsl:stylesheet>`,
+  );
+  const [result, setResult] = useState("");
+  const [version, setVersion] = useState("1.0");
+  const [error, setError] = useState("");
 
   const runTransform = debounce(async (xsltText, ver, p) => {
     const paramObj = {};
@@ -22,23 +26,27 @@ export default function App() {
       if (pr.name) paramObj[pr.name] = pr.value;
     });
     try {
-      const res = await fetch('/transform', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ xslt: xsltText, version: ver, parameters: paramObj }),
+      const res = await fetch("/transform", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          xslt: xsltText,
+          version: ver,
+          parameters: paramObj,
+        }),
       });
       if (!res.ok) {
         const txt = await res.text();
         setError(txt || res.statusText);
-        setResult('');
+        setResult("");
         return;
       }
       const data = await res.json();
       setResult(data.result);
-      setError('');
+      setError("");
     } catch (e) {
       setError(String(e));
-      setResult('');
+      setResult("");
     }
   }, 500);
 
@@ -55,7 +63,7 @@ export default function App() {
   };
 
   const addParam = () => {
-    setParams((p) => [...p, { name: '', value: '', open: false }]);
+    setParams((p) => [...p, { name: "", value: "", open: false }]);
   };
 
   const removeParam = (index) => {
@@ -71,9 +79,9 @@ export default function App() {
   };
 
   const download = (data, filename) => {
-    const blob = new Blob([data], { type: 'text/xml' });
+    const blob = new Blob([data], { type: "text/xml" });
     const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
+    const a = document.createElement("a");
     a.href = url;
     a.download = filename;
     a.click();
@@ -84,65 +92,99 @@ export default function App() {
     <div className="app-container">
       <div className="main">
         <div className="params">
-          <div style={{ marginBottom: '0.5rem' }}>
+          <div style={{ marginBottom: "0.5rem" }}>
             <button onClick={addParam}>Add Parameter</button>
           </div>
           {params.map((p, i) => (
-            <div key={i} style={{ border: '1px solid #ccc', marginBottom: '0.5rem' }}>
-              <div style={{ display: 'flex', alignItems: 'center', padding: '0.25rem' }}>
+            <div
+              key={i}
+              style={{ border: "1px solid #ccc", marginBottom: "0.5rem" }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  padding: "0.25rem",
+                }}
+              >
                 <input
                   style={{ flex: 1 }}
                   placeholder="name"
                   value={p.name}
-                  onChange={(e) => updateParam(i, 'name', e.target.value)}
+                  onChange={(e) => updateParam(i, "name", e.target.value)}
                 />
-                <button onClick={() => updateParam(i, 'open', !p.open)}>{p.open ? '-' : '+'}</button>
+                <button onClick={() => updateParam(i, "open", !p.open)}>
+                  {p.open ? "-" : "+"}
+                </button>
                 <button onClick={() => removeParam(i)}>x</button>
               </div>
               {p.open && (
-                <div style={{ height: '150px' }}>
+                <div style={{ height: "150px" }}>
                   <Editor
                     height="150px"
                     language="xml"
                     value={p.value}
-                    onChange={(v) => updateParam(i, 'value', v || '')}
+                    onChange={(v) => updateParam(i, "value", v || "")}
                     options={{ minimap: { enabled: false } }}
                   />
-                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div
+                    style={{ display: "flex", justifyContent: "space-between" }}
+                  >
                     <input
                       type="file"
                       accept=".xml"
-                      onChange={(e) => loadFile(e, (text) => updateParam(i, 'value', text))}
+                      onChange={(e) =>
+                        loadFile(e, (t) => updateParam(i, "value", t))
+                      }
                     />
-                    <button onClick={() => download(p.value, `${p.name || 'param'}.xml`)}>
+                    <button
+                      onClick={() =>
+                        download(p.value, `${p.name || "param"}.xml`)
+                      }
+                    >
                       Download
                     </button>
                   </div>
                 </div>
-              )
+              )}
             </div>
           ))}
         </div>
         <div className="editor">
-          <div style={{ marginBottom: '0.5rem' }}>
-            <select value={version} onChange={(e) => setVersion(e.target.value)}>
+          <div style={{ marginBottom: "0.5rem" }}>
+            <select
+              value={version}
+              onChange={(e) => setVersion(e.target.value)}
+            >
               <option value="1.0">XSLT 1.0</option>
               <option value="2.0">XSLT 2.0</option>
             </select>
-            <input type="file" accept=".xsl,.xslt" onChange={(e) => loadFile(e, setXslt)} style={{ marginLeft: '0.5rem' }} />
-            <button onClick={() => download(xslt, 'transform.xsl')} style={{ marginLeft: '0.5rem' }}>Download</button>
+            <input
+              type="file"
+              accept=".xsl,.xslt"
+              onChange={(e) => loadFile(e, setXslt)}
+              style={{ marginLeft: "0.5rem" }}
+            />
+            <button
+              onClick={() => download(xslt, "transform.xsl")}
+              style={{ marginLeft: "0.5rem" }}
+            >
+              Download
+            </button>
           </div>
           <Editor
             height="calc(100% - 40px)"
             language="xml"
             value={xslt}
-            onChange={(v) => setXslt(v || '')}
+            onChange={(v) => setXslt(v || "")}
             options={{ minimap: { enabled: false } }}
           />
         </div>
       </div>
-      <div className="result" style={{ position: 'relative' }}>
-        {error && <div style={{ color: 'red', padding: '0.5rem' }}>{error}</div>}
+      <div className="result" style={{ position: "relative" }}>
+        {error && (
+          <div style={{ color: "red", padding: "0.5rem" }}>{error}</div>
+        )}
         <Editor
           height="100%"
           language="xml"
@@ -155,11 +197,10 @@ export default function App() {
   );
 }
 
-// Firebase Auth (optional)
-/*
-// import { initializeApp } from "firebase/app";
-// import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
-// const firebaseConfig = { /* your config */ };
+/* Optional Firebase Auth example
+import { initializeApp } from 'firebase/app';
+import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+// const firebaseConfig = { ... };
 // const app = initializeApp(firebaseConfig);
 // const auth = getAuth(app);
 // const provider = new GoogleAuthProvider();