diff --git a/bun.lockb b/bun.lockb
index 64f89a1..bd8f292 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 7ba9fd6..ec10e89 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.50",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "bun run --watch src/index.ts"
+    "dev": "bun run --hot src/index.ts"
   },
   "dependencies": {
     "@elysiajs/html": "^1.0.2",
diff --git a/src/pages/index.html b/src/pages/index.html
index 0f6be82..2c8c9a7 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -1,15 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ConvertX</title>
   <link rel="stylesheet" href="pico.lime.min.css">
   <link rel="stylesheet" href="style.css">
+  <script src="index.js" defer></script>
 </head>
+
 <body>
-  <main class="container">
-    <h1>Hello world!</h1>
+  <header class="container-fluid">
+    <nav>
+      <ul>
+        <li><strong>ConvertX</strong></li>
+      </ul>
+      <ul>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Services</a></li>
+        <li><button class="secondary">Products</button></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main class="container-fluid">
+
+    <!-- File upload -->
+    <form method="post" enctype="multipart/form-data">
+      <div>
+        <article>
+          <table id="file-list">
+            <tr>
+              <td>file.jpg</td>
+              <td>3.2 MB</td>
+              <td><button>x</button></td>
+            </tr>
+          </table>
+          <input type="file" name="file" multiple />
+          
+        </article>
+        <!-- <div class="icon">></div> -->
+        <article>
+          <select name="to" aria-label="Convert to" required>
+            <option selected disabled value="">Convert to</option>
+            <option>JPG</option>
+            <option>PNG</option>
+            <option>SVG</option>
+            <option>PDF</option>
+            <option>DOCX</option>
+          </select>
+        </article>
+      </div>
+      <div class="center">
+        <button type="submit">Convert</button>
+      </div>
+    </form>
   </main>
+  <footer></footer>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/src/public/index.js b/src/public/index.js
new file mode 100644
index 0000000..218563c
--- /dev/null
+++ b/src/public/index.js
@@ -0,0 +1,26 @@
+// Select the file input element
+const fileInput = document.querySelector('input[type="file"]');
+
+// Add a 'change' event listener to the file input element
+fileInput.addEventListener("change", (e) => {
+  console.log(e.target.files);
+	// Get the selected files from the event target
+	const files = e.target.files;
+
+	// Select the file-list table
+	const fileList = document.querySelector("#file-list");
+
+	// Loop through the selected files
+	for (let i = 0; i < files.length; i++) {
+		// Create a new table row for each file
+		const row = document.createElement("tr");
+		row.innerHTML = `
+      <td>${files[i].name}</td>
+      <td>${(files[i].size / 1024 / 1024).toFixed(2)} MB</td>
+      <td><button class="secondary">x</button></td>
+    `;
+
+		// Append the row to the file-list table
+		fileList.appendChild(row);
+	}
+});
diff --git a/src/public/style.css b/src/public/style.css
index e69de29..18212e5 100644
--- a/src/public/style.css
+++ b/src/public/style.css
@@ -0,0 +1,21 @@
+article {
+  /* height: 300px; */
+  /* width: 300px; */
+
+}
+
+div.icon {
+  height: 100px;
+  width: 100px;
+}
+
+button[type="submit"] {
+  width: 50%
+}
+
+div.center {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
\ No newline at end of file
