diff --git a/fiat-html/fiat-crypto.html b/fiat-html/fiat-crypto.html
index 0204464b68..2474c82dcf 100644
--- a/fiat-html/fiat-crypto.html
+++ b/fiat-html/fiat-crypto.html
@@ -10,7 +10,6 @@
             white-space: pre-wrap;
         }
 
-        /*code { display: block; white-space: pre-wrap; border: 1px solid #ddd; padding: 10px; position: relative; }*/
         .code-container {
             position: relative;
         }
@@ -21,8 +20,6 @@
             border: 1px solid #ddd;
             padding: 10px;
             position: relative;
-            /*margin-bottom: 20px;*/
-            /* Space for the button, adjust as needed */
         }
 
         .copy-button {
@@ -49,6 +46,7 @@
             display: flex;
             flex-wrap: wrap;
             align-items: center;
+            /* margin-bottom: 10px; */
         }
 
         .form-row label,
@@ -67,12 +65,122 @@
         .version {
             color: #333;
         }
+
+        /*#io-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 10px;
+        }
+
+        #io-container>div {
+            flex: 1 1 50%;
+            min-width: 300px;
+            border: 1px solid #ddd;
+            padding: 10px;
+            box-sizing: border-box;
+        }
+
+        #io-container h3 {
+            margin-top: 0;
+        }
+
+        .stdin-line,
+        .file-entry {
+            display: flex;
+            align-items: center;
+            margin-bottom: 5px;
+        }
+
+        .stdin-line textarea,
+        .file-entry textarea {
+            flex: 1;
+            margin-left: 5px;
+        }
+
+        .file-entry input {
+            margin-right: 5px;
+        }*/
+        .input-columns {
+            display: flex;
+            flex-direction: row;
+            gap: 20px;
+            width: 100%;
+        }
+
+        .stdin-column,
+        .files-column {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .stdin-entry,
+        .file-entry {
+            display: flex;
+            margin-bottom: 10px;
+            position: relative;
+        }
+
+        .stdin-textarea,
+        .file-content {
+            flex-grow: 1;
+            min-height: 60px;
+            resize: vertical;
+            padding: 8px;
+            margin-right: 5px;
+        }
+
+        .file-name {
+            margin-bottom: 5px;
+            width: 100%;
+            padding: 5px;
+        }
+
+        .file-entry {
+            flex-direction: column;
+        }
+
+        .file-entry .remove-btn {
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+
+        .remove-btn,
+        .add-btn {
+            background: #f0f0f0;
+            border: 1px solid #ccc;
+            border-radius: 3px;
+            cursor: pointer;
+            padding: 2px 8px;
+            font-weight: bold;
+        }
+
+        .add-btn {
+            margin-top: 5px;
+        }
+
+        @media (max-width: 768px) {
+            .input-columns {
+                flex-direction: column;
+            }
+
+            .stdin-column,
+            .files-column {
+                width: 100%;
+                margin-bottom: 20px;
+            }
+        }
     </style>
 </head>
 
 <body>
-    <div id="versionContainer"><span class="version">Fiat Cryptography <span id="version"></span> (<a
-                href="https://github.com/mit-plv/fiat-crypto">GitHub Source</a>)</span></div>
+    <div id="versionContainer">
+        <span class="version">
+            Fiat Cryptography <span id="version"></span> (<a href="https://github.com/mit-plv/fiat-crypto">GitHub
+                Source</a>)
+        </span>
+    </div>
     <form id="inputForm" class="hidden">
         <div class="form-row">
             <input type="text" id="inputArgs" placeholder="Enter arguments">
@@ -89,16 +197,27 @@
                     id="extraWasmLabel"></span>
             </label>
         </div>
-        <div class="form-row" class="hidden">
-            <label class="hidden">Stdin
-                <textarea id="stdin" class="hidden" placeholder="Enter stdin"></textarea>
-            </label>
-            <label class="hidden">Files
-                <textarea id="files" class="hidden" placeholder="Enter files"></textarea>
-            </label>
-            <label class="hidden">Output Files
-                <textarea id="outputFiles" class="hidden" placeholder="Output files"></textarea>
-            </label>
+        <div class="form-row">
+            <div class="input-columns">
+                <div class="stdin-column hidden">
+                    <h3>Standard Input</h3>
+                    <div class="stdin-entries" id="stdinEntries"></div>
+                    <button type="button" id="addStdinButton" class="add-btn">+</button>
+                    <textarea id="stdin" class="hidden" placeholder="Enter stdin" readonly></textarea>
+                </div>
+                <div class="files-column">
+                    <h3>Input Files</h3>
+                    <div class="file-entries" id="fileEntries">
+                        <div class="file-entry">
+                            <input type="text" class="file-name" placeholder="Filename">
+                            <textarea class="file-content" placeholder="File content"></textarea>
+                            <button type="button" class="remove-btn">-</button>
+                        </div>
+                    </div>
+                    <button type="button" id="addFileButton" class="add-btn">+</button>
+                    <textarea id="files" class="hidden" placeholder="Enter files" readonly></textarea>
+                </div>
+            </div>
         </div>
         <div class="form-row">
             <button type="button" id="synthesizeButton">Synthesize</button>
@@ -118,13 +237,45 @@
             <code id="stderr" class="code"></code>
             <button class="copy-button" data-target="stderr">Copy</button>
         </div>
+        <div id="outputFilesContainer" class="code-container-container hidden"></div>
     </div>
     <script src="version.js"></script>
     <script src="https://unpkg.com/wasm-feature-detect/dist/umd/index.js"></script>
+    <script src="file-input.js"></script>
     <script src="main.js"></script>
     <!-- N.B. disable-wasm-option.js must come after main.js so that the wasm box is unchecked correctly after parsing argv -->
     <script src="disable-wasm-option.js"></script>
     <script src="copy-button.js"></script>
+    <!-- Optional: Add script to handle dynamic addition/removal of stdin and file entries -->
+    <!-- <script>
+        // Example dynamic behavior for stdin entries
+        const stdinLines = document.getElementById('stdin-lines');
+        document.getElementById('add-stdin-line').addEventListener('click', () => {
+            const div = document.createElement('div');
+            div.className = 'stdin-line';
+            div.innerHTML = '<button type="button" class="remove-stdin-line">-</button><textarea placeholder="Enter a stdin line"></textarea>';
+            stdinLines.appendChild(div);
+        });
+        stdinLines.addEventListener('click', (e) => {
+            if (e.target.classList.contains('remove-stdin-line')) {
+                e.target.parentElement.remove();
+            }
+        });
+
+        // Example dynamic behavior for file entries
+        const filesEntries = document.getElementById('files-entries');
+        document.getElementById('add-file-entry').addEventListener('click', () => {
+            const div = document.createElement('div');
+            div.className = 'file-entry';
+            div.innerHTML = '<button type="button" class="remove-file-entry">-</button><input type="text" placeholder="File Name"><textarea placeholder="File Contents"></textarea>';
+            filesEntries.appendChild(div);
+        });
+        filesEntries.addEventListener('click', (e) => {
+            if (e.target.classList.contains('remove-file-entry')) {
+                e.target.parentElement.remove();
+            }
+        });
+    </script> -->
 </body>
 
 </html>
\ No newline at end of file
diff --git a/fiat-html/file-input.js b/fiat-html/file-input.js
new file mode 100644
index 0000000000..09f4d2abb4
--- /dev/null
+++ b/fiat-html/file-input.js
@@ -0,0 +1,156 @@
+function getStdinFromFormBoxRaw() {
+    const stdinBox = document.getElementById('stdin');
+    return stdinBox.value;
+}
+
+function getFilesFromFormBoxRaw() {
+    const filesBox = document.getElementById('files');
+    return filesBox.value;
+}
+
+
+function getStdinFromFormBox() {
+    return JSON.parse(getStdinFromFormBoxRaw() || '[]');
+}
+
+function getFilesFromFormBox() {
+    return JSON.parse(getFilesFromFormBoxRaw() || '{}');
+}
+
+function populateStdinEntries(stdin) {
+    const stdinEntries = document.getElementById('stdinEntries');
+
+    if (stdin === undefined) {
+        stdin = getStdinFromFormBox();
+    }
+    const entries = stdinEntries.querySelectorAll('.stdin-entry');
+    entries.forEach(entry => {
+        entry.remove();
+    });
+    stdin.forEach(line => {
+        const entry = createStdinEntry(line);
+        stdinEntries.appendChild(entry);
+    });
+}
+
+function populateFileEntries(files) {
+    const fileEntries = document.getElementById('fileEntries');
+
+    if (files === undefined) {
+        files = getFilesFromFormBox();
+    }
+    const entries = fileEntries.querySelectorAll('.file-entry');
+    entries.forEach(entry => {
+        entry.remove();
+    });
+    Object.entries(files).forEach(([filename, content]) => {
+        const entry = createFileEntry(filename, content);
+        fileEntries.appendChild(entry);
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    const stdinEntries = document.getElementById('stdinEntries');
+    const fileEntries = document.getElementById('fileEntries');
+    const addStdinButton = document.getElementById('addStdinButton');
+    const addFileButton = document.getElementById('addFileButton');
+    const stdinBox = document.getElementById('stdin');
+    const filesBox = document.getElementById('files');
+
+    // Function to create a new file entry
+    function createFileEntry(filename, content) {
+        filename = filename || '';
+        content = content || '';
+        const fileEntryHTML = `
+            <div class="file-entry">
+                <input type="text" class="file-name" placeholder="Filename">
+                <textarea class="file-content" placeholder="File content"></textarea>
+                <button type="button" class="remove-btn">-</button>
+            </div>
+        `;
+
+        const template = document.createElement('template');
+        template.innerHTML = fileEntryHTML.trim();
+        const entry = template.content.firstElementChild.cloneNode(true);
+
+        entry.querySelector('.file-name').value = filename;
+        entry.querySelector('.file-content').value = content;
+
+        const removeButton = entry.querySelector('.remove-btn');
+        removeButton.addEventListener('click', function () {
+            entry.remove();
+            updateFilesValue();
+        });
+
+        const nameInput = entry.querySelector('.file-name');
+        const contentTextarea = entry.querySelector('.file-content');
+
+        nameInput.addEventListener('input', updateFilesValue);
+        contentTextarea.addEventListener('input', updateFilesValue);
+
+        return entry;
+    }
+
+    function createStdinEntry(line) {
+        line = line || '';
+        const stdinEntryHTML = `
+            <div class="stdin-entry">
+                <textarea class="stdin-textarea" placeholder="Enter stdin"></textarea>
+                <button type="button" class="remove-btn">-</button>
+            </div>
+        `;
+
+        const template = document.createElement('template');
+        template.innerHTML = stdinEntryHTML.trim();
+        const entry = template.content.firstElementChild.cloneNode(true);
+
+        entry.querySelector('.stdin-textarea').value = line;
+
+        const removeButton = entry.querySelector('.remove-btn');
+        removeButton.addEventListener('click', function () {
+            entry.remove();
+            updateStdinValue();
+        });
+
+        return entry;
+    }
+
+    // Function to update the hidden stdin input value
+    function updateStdinValue() {
+        const entries = stdinEntries.querySelectorAll('.stdin-entry');
+        const stdinArray = Array.from(entries).map(entry => {
+            const textarea = entry.querySelector('.stdin-textarea');
+            return textarea.value.split('\n').map(line => line + '\n');
+        });
+        stdinBox.value = JSON.stringify(stdinArray);
+    }
+
+    // Function to update the hidden files input value
+    function updateFilesValue() {
+        const entries = fileEntries.querySelectorAll('.file-entry');
+        const filesObj = {};
+
+        Array.from(entries).forEach(entry => {
+            const nameInput = entry.querySelector('.file-name');
+            const contentTextarea = entry.querySelector('.file-content');
+
+            if (nameInput.value.trim()) {
+                filesObj[nameInput.value] = contentTextarea.value.split('\n').map(line => line + '\n');
+            }
+        });
+
+        filesBox.value = JSON.stringify(filesObj);
+    }
+
+    // Add event listeners for adding new entries
+    addStdinButton.addEventListener('click', function () {
+        stdinEntries.appendChild(createStdinEntry());
+    });
+
+    addFileButton.addEventListener('click', function () {
+        fileEntries.appendChild(createFileEntry());
+    });
+
+    populateStdinEntries();
+    populateFileEntries();
+});
\ No newline at end of file
diff --git a/fiat-html/main.js b/fiat-html/main.js
index de6828c45d..5c9497d8a3 100644
--- a/fiat-html/main.js
+++ b/fiat-html/main.js
@@ -7,9 +7,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const stderrDiv = document.getElementById('stderrContainer');
     const stdoutBox = document.getElementById('stdout');
     const stderrBox = document.getElementById('stderr');
-    const stdinBox = document.getElementById('stdin');
-    const filesBox = document.getElementById('files');
-    const outputFilesBox = document.getElementById('outputFiles');
+    const outputFilesContainer = document.getElementById('outputFilesContainer');
     const versionBox = document.getElementById('version');
     const wasmCheckbox = document.getElementById('wasm');
     const inputForm = document.getElementById('inputForm');
@@ -103,11 +101,44 @@ document.addEventListener('DOMContentLoaded', function () {
         cancelButton.disabled = true;
     }
 
+    function setOutputFiles(files) {
+        // Clear the output files container
+        outputFilesContainer.innerHTML = '';
+
+        // Create a container for each output file
+        const fileEntries = Object.entries(files);
+
+        // Add or remove 'hidden' class based on whether there are files
+        if (fileEntries.length > 0) {
+            // Create HTML for each file
+            fileEntries.forEach(([filename, contents]) => {
+                // Create file container with HTML template literal
+                const fileHtml = `
+                    <div class="code-container">
+                        <code id="output-file-${escapeHtml(filename)}" class="code"></code>
+                        <button class="copy-button" data-target="output-file-${escapeHtml(filename)}">Copy</button>
+                        <span class="output-filename">${escapeHtml(filename)}</span>
+                    </div>
+                `;
+
+                // Parse the HTML and add to container
+                const template = document.createElement('template');
+                template.innerHTML = fileHtml.trim();
+                const entry = template.content.firstElementChild.cloneNode(true);
+                entry.querySelector('.code').textContent = contents;
+                outputFilesContainer.appendChild(entry);
+            });
+            outputFilesContainer.classList.remove('hidden');
+        } else {
+            outputFilesContainer.classList.add('hidden');
+        }
+    }
+
     function clearOutput() {
         errorDiv.textContent = '';
         stdoutBox.textContent = '';
         stderrBox.textContent = '';
-        outputFilesBox.textContent = '';
+        setOutputFiles({});
         errorDiv.classList.add('hidden');
         outputDiv.classList.add('hidden');
         stderrDiv.classList.add('hidden');
@@ -141,7 +172,7 @@ document.addEventListener('DOMContentLoaded', function () {
     function displayOutput(stdout, stderr, outputFiles) {
         stdoutBox.textContent = stdout;
         stderrBox.textContent = stderr;
-        outputFilesBox.textContent = outputFiles;
+        setOutputFiles(outputFiles);
         outputDiv.classList.remove('hidden');
         if (stdout) {
             stdoutDiv.classList.remove('hidden');
@@ -159,8 +190,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
     function updatePermalink(args) {
         const wasmString = wasmCheckbox.checked ? '&wasm' : '';
-        const stdinString = stdinBox.value ? `&stdin=${encodeURIComponent(stdinBox.value)}` : '';
-        const filesString = filesBox.value ? `&files=${encodeURIComponent(filesBox.value)}` : '';
+        const stdin = getStdinFromFormBoxRaw();
+        const files = getFilesFromFormBoxRaw();
+        const stdinString = stdin ? `&stdin=${encodeURIComponent(stdin)}` : '';
+        const filesString = files ? `&files=${encodeURIComponent(files)}` : '';
         const inputType = document.querySelector('input[name="inputType"]:checked').value === 'json' ? `&inputType=json` : '';
         const inputTypeString = inputType !== 'string' ? `&inputType=${inputType}` : '';
         const queryString = `?argv=${encodeURIComponent(JSON.stringify(args.slice(1)))}${stdinString}${filesString}${inputTypeString}&interactive${wasmString}`;
@@ -189,7 +222,7 @@ document.addEventListener('DOMContentLoaded', function () {
         if (!success) {
             displayError(exceptionText.join('\n'));
         }
-        displayOutput(stdout.join(''), stderr.join(''), JSON.stringify(files));
+        displayOutput(stdout.join(''), stderr.join(''), files);
     }
 
     function handleException(err) {
@@ -365,8 +398,8 @@ document.addEventListener('DOMContentLoaded', function () {
         if (argv) {
             if (nonFalseQueryParam(interactive)) {
                 inputArgs.value = decodeURIComponent(argv);
-                stdinBox.value = decodeURIComponent(stdin);
-                filesBox.value = decodeURIComponent(files);
+                populateStdinEntries(decodeURIComponent(stdin));
+                populateFileEntries(decodeURIComponent(files));
                 document.querySelector(`input[value="${inputType}"]`).checked = true;
                 updateInputType(inputType);
                 inputForm.classList.remove('hidden');
@@ -396,8 +429,8 @@ document.addEventListener('DOMContentLoaded', function () {
         const argsType = document.querySelector('input[name="inputType"]:checked').value;
         const args = argsType === 'json' ? JSON.parse(inputArgs.value) : splitUnescapedSpaces(inputArgs.value);
         args.unshift('fiat_crypto.js');
-        const stdin = JSON.parse(stdinBox.value) || [];
-        const files = JSON.parse(filesBox.value) || {};
+        const stdin = getStdinFromFormBox();
+        const files = getFilesFromFormBox();
         handleSynthesis(args, stdin, files);
     });
 
