diff --git a/assets/main.js b/assets/main.js
index fe66e89..2acacdc 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -1,15 +1,25 @@
 class LineRemover extends HTMLButtonElement {
   constructor() {
     super();
-    this.container = this.closest("div.linecontainer").parentElement;
     this.addEventListener("click", (e) => {
-      this.container.remove();
+      this.closest("div.linecontainer").parentElement.remove();
     });
   }
 }
 
 customElements.define("line-remover", LineRemover, { extends: "button" });
 
+class LinePinner extends HTMLButtonElement {
+  constructor() {
+    super();
+    this.addEventListener("click", (e) => {
+      this.closest("div.linecontainer").classList.toggle("unpinned");
+    });
+  }
+}
+
+customElements.define("line-pinner", LinePinner, { extends: "button" });
+
 class LineAdder extends HTMLButtonElement {
   constructor() {
     super();
diff --git a/templates/index.tmpl b/templates/index.tmpl
index 0f5d756..d3abca4 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -12,7 +12,7 @@
     <template id="linetmpl">
       <div class="linecontainer unpinned" hx-trigger="regen from:body" hx-swap="outerHTML" hx-get="/line">
         <span class="linecontrols">
-          <button >pin</button>
+          <button is="line-pinner">pin</button>
           <button >edit</button>
           <button >up</button>
           <button >down</button>