diff --git a/internal/app/fiber.go b/internal/app/fiber.go
index b13947c..af55561 100644
--- a/internal/app/fiber.go
+++ b/internal/app/fiber.go
@@ -57,7 +57,7 @@ func SetupFiber() error {
 	fiberapp.Post("/admin/login", web.HandleAdminLoginPost)
 
 	fiberapp.Get("/admin/", web.HandleAdminLinkIndexGet)
-	fiberapp.Get("/admin/links/add", web.HandleAdminLinkAddGet)
+	fiberapp.Get("/admin/links/new", web.HandleAdminLinkNewGet)
 
 	fiberapp.Static("/admin/", "./web")
 
diff --git a/internal/web/link.go b/internal/web/link.go
index 6c102ee..2333205 100644
--- a/internal/web/link.go
+++ b/internal/web/link.go
@@ -7,7 +7,7 @@ import (
 	"github.com/gofiber/fiber/v2"
 )
 
-func HandleAdminLinkAddGet(c *fiber.Ctx) error {
+func HandleAdminLinkNewGet(c *fiber.Ctx) error {
 	return c.Render("add_link", nil)
 }
 
diff --git a/views/links.tmpl b/views/links.tmpl
index fbb4d06..d1e4dd4 100644
--- a/views/links.tmpl
+++ b/views/links.tmpl
@@ -12,6 +12,8 @@
 </head>
 <body>
 
+<a href="/admin/links/new"><button type="button" id="add-new-button">Add new Shortlink</button></a>
+
 <table>
   <thead>
   <tr>
@@ -24,8 +26,8 @@
   <tbody>
     {{range .}}
     <tr>
-      <td>{{.ID}}</td>
-      <td>{{.URL}}</td>
+      <td><a href="#" onclick="HandleCopy('{{.ID}}')">{{.ID}}</a></td>
+      <td><a href="{{.URL}}" target="_blank">{{.URL}}</a></td>
       <td style="text-align: right;">
         <button type="button" id="edit-button" onclick="HandleEdit('{{.ID}}')">
           Edit
@@ -43,13 +45,13 @@
 
 
 <footer>
-  <p>go-urlsh - <a href="/">Home</a> -
+  <p>go-urlsh - <a href="/admin/">Home</a> -
     <a href="https://codeberg.org/lauralani/go-urlsh" target="_blank">Source Code</a> -
     <a href="https://codeberg.org/lauralani/go-urlsh/src/branch/main/LICENSE" target="_blank">License</a>
   </p>
 </footer>
 
-<script src="/admin/link_add.js"></script>
+<script src="/admin/links.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/web/link_add.js b/web/link_add.js
new file mode 100644
index 0000000..0d61df0
--- /dev/null
+++ b/web/link_add.js
@@ -0,0 +1,37 @@
+async function HandleSubmit() {
+    document.getElementById("submit").active = false
+    let slug = document.getElementById("linkname").value
+    let url = document.getElementById("link").value
+    let description = document.getElementById("description").value
+    let body = {
+        "id" : slug,
+        "url" : url,
+        "description" : description
+    }
+
+    let response = await fetch("/api/v1/links", {
+        credentials: "include",
+        body: JSON.stringify(body),
+        mode: "same-origin",
+        method: "POST"
+    });
+
+    if (!response.ok) {
+        document.getElementById("dialog-heading").textContent = "Error"
+        document.getElementById("dialog-text").textContent = "The following error occured during the request: " + response.statusText
+        document.getElementById('dialog-info').showModal()
+
+        document.getElementById("submit").active = true
+    }
+    document.location = "/admin/"
+}
+
+async function HandleChange() {
+    console.log("HandleChange")
+    let buttonactive = true
+    if (document.getElementById("link").value === "")
+    {
+        buttonactive = false
+    }
+    document.getElementById("submit").active = buttonactive
+}
\ No newline at end of file
diff --git a/web/links.html b/web/links.html
index 85c279e..86ca76e 100644
--- a/web/links.html
+++ b/web/links.html
@@ -22,8 +22,8 @@
   <tbody>
     {{range .}}
     <tr>
-      <td>{{.ID}}</td>
-      <td>{{.URL}}</td>
+      <td><a onclick="HandleCopy('{{.id}}')">{{.ID}}</a></td>
+      <td><a href="{{.URL}}" target="_blank">{{.URL}}</a></td>
 
       <td>
         <button type="button" id="edit-button" onclick="HandleEdit('{{.ID}}')">
diff --git a/web/links.js b/web/links.js
index e69de29..6273d9b 100644
--- a/web/links.js
+++ b/web/links.js
@@ -0,0 +1,16 @@
+async function HandleDelete(id){
+    let response = await fetch("/api/v1/links/" + id, {
+        credentials: "include",
+        mode: "same-origin",
+        method: "DELETE"
+    });
+    if (!response.ok) {
+        console.log("error deleting " + id + ": " + response.statusText)
+    }
+    document.location = "/admin/"
+}
+
+async function HandleCopy(id) {
+    let host = window.location.protocol + "//" + window.location.host;
+    await navigator.clipboard.writeText(host + "/" + id);
+}

{{.ID}}	{{.URL}}	{{.ID}}	{{.URL}}
{{.ID}}	{{.URL}}	{{.ID}}	{{.URL}}