diff --git a/static/index.html b/static/index.html
index 54908bd..6741f7b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -10,7 +10,8 @@
     <h1>Zip My Link</h1>
     <p>Type your long URL into the box and get a shorter URL back!</p>
     <input type="text" id="url-input" placeholder="Enter your URL here">
-    <button onclick="submitUrl()">Shorten Url</button>
+    <button onclick="shortenUrl()" id="submit-btn">Shorten Url</button>
     <p id="result"></p>
+    <script src="static/main.js"></script>
   </body>
 </html>
diff --git a/static/main.js b/static/main.js
index e69de29..419f335 100644
--- a/static/main.js
+++ b/static/main.js
@@ -0,0 +1,20 @@
+async function shortenUrl() {
+    const url = document.getElementById("url-input").value;
+    const btn = document.getElementById("submit-btn").value;
+    // btn.enab
+    const response = await fetch("/api/v1/urls", {
+        method: 'PUT',
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url: url, username: "anonymous" })
+    });
+    const data = await response.json();
+    const resultElement = document.getElementById("result");
+
+    if (response.ok) {
+        resultElement.textContent = `Shortened Url: ${data.shortenedUrl}`
+        resultElement.style.color = "black";
+    } else {
+        resultElement.textContent = `Error: ${data.detail}`
+        resultElement.style.color = "red";
+    }
+}