diff --git a/.gitignore b/.gitignore
index 4521b94..c63272a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+/_scripts
 node_modules
 package-lock.json
 pnpm-lock.yaml
diff --git a/index.html b/index.html
index b034e28..9581bec 100644
--- a/index.html
+++ b/index.html
@@ -4,159 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Koodiklinikka nimilappu generaattori</title>
-    <style>
-      @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
-
-      * {
-        box-sizing: border-box;
-        padding: 0;
-        margin: 0;
-      }
-
-      body {
-        margin: 10mm;
-        font-family:
-          Inter,
-          system-ui,
-          -apple-system,
-          BlinkMacSystemFont,
-          "Segoe UI",
-          Roboto,
-          Oxygen,
-          Ubuntu,
-          Cantarell,
-          "Open Sans",
-          "Helvetica Neue",
-          sans-serif;
-      }
-
-      .laput {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 5mm;
-      }
-
-      .lisalappu {
-        width: 85mm;
-        height: 54mm;
-        color: #aaa;
-        background: transparent;
-        border: 1px dashed #aaa;
-        font-size: 3em;
-        cursor: pointer;
-      }
-
-      .lisalappu:hover {
-        background: #f0f0f0;
-      }
-
-      @media print {
-        .lisalappu {
-          display: none;
-        }
-
-        body {
-          margin: unset;
-        }
-
-        input {
-          display: none;
-        }
-      }
-
-      .lappu {
-        width: 85mm;
-        height: 54mm;
-        border: 1px solid black;
-        padding: 10mm;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .lappu figure {
-        position: relative;
-        user-select: none;
-        width: 30%;
-        aspect-ratio: 1/1;
-        margin: 0 auto;
-        border-radius: 100%;
-        overflow: hidden;
-      }
-
-      .lappu figure input {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        cursor: pointer;
-      }
-
-      .lappu .username {
-        font-size: 16px;
-        font-weight: 400;
-        opacity: 0.8;
-        margin-top: 0.5rem;
-      }
-
-      .lappu .nimi {
-        font-size: 21px;
-        margin-top: 1rem;
-      }
-    </style>
-    <script>
-      function handleImage(file, element) {
-        if (file && file.type.startsWith("image/")) {
-          const reader = new FileReader();
-          reader.onload = (event) => {
-            if (event.target) {
-              element.src = event.target.result;
-            }
-          };
-          reader.readAsDataURL(file);
-        } else {
-          alert("Please drop an image file.");
-        }
-      }
-
-      function handleUpload(event) {
-        event.preventDefault();
-        const element = event.target.parentElement.querySelector("img");
-        handleImage(event.target.files[0], element);
-      }
-
-      const handleDrop = (e) => {
-        e.preventDefault();
-        const element = e.currentTarget;
-        const file = e.dataTransfer.files[0];
-        handleImage(file, element);
-      };
-
-      const handleDragOver = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-      };
-
-      const handleAdd = () => {
-        const laput = document.querySelector(".laput");
-        const template = document.querySelector("#lappu-template");
-        const lisalappuButton = document.querySelector(".lisalappu");
-        const clone = template.content.cloneNode(true);
-        laput.insertBefore(clone, lisalappuButton);
-      };
-
-      const handleYeet = (event) => {
-        const lappu = event.target;
-        if (lappu.classList.contains("lappu")) {
-          lappu.parentNode.removeChild(lappu);
-          event.preventDefault();
-        }
-      };
-
-      const handleBoot = () => {
-        handleAdd();
-      };
-    </script>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
   </head>
   <body onload="handleBoot()">
     <div class="laput">
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..293fb0b
--- /dev/null
+++ b/script.js
@@ -0,0 +1,51 @@
+function handleImage(file, element) {
+  if (file && file.type.startsWith("image/")) {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      if (event.target) {
+        element.src = event.target.result;
+      }
+    };
+    reader.readAsDataURL(file);
+  } else {
+    alert("Please drop an image file.");
+  }
+}
+
+function handleUpload(event) {
+  event.preventDefault();
+  const element = event.target.parentElement.querySelector("img");
+  handleImage(event.target.files[0], element);
+}
+
+const handleDrop = (e) => {
+  e.preventDefault();
+  const element = e.currentTarget;
+  const file = e.dataTransfer.files[0];
+  handleImage(file, element);
+};
+
+const handleDragOver = (e) => {
+  e.stopPropagation();
+  e.preventDefault();
+};
+
+const handleAdd = () => {
+  const laput = document.querySelector(".laput");
+  const template = document.querySelector("#lappu-template");
+  const lisalappuButton = document.querySelector(".lisalappu");
+  const clone = template.content.cloneNode(true);
+  laput.insertBefore(clone, lisalappuButton);
+};
+
+const handleYeet = (event) => {
+  const lappu = event.target;
+  if (lappu.classList.contains("lappu")) {
+    lappu.parentNode.removeChild(lappu);
+    event.preventDefault();
+  }
+};
+
+const handleBoot = () => {
+  handleAdd();
+};
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..73463ac
--- /dev/null
+++ b/style.css
@@ -0,0 +1,97 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    margin: 10mm;
+    font-family: Inter,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
+}
+
+.laput {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5mm;
+}
+
+.lisalappu {
+    width: 85mm;
+    height: 54mm;
+    color: #aaa;
+    background: transparent;
+    border: 1px dashed #aaa;
+    font-size: 3em;
+    cursor: pointer;
+}
+
+.lisalappu:hover {
+    background: #f0f0f0;
+}
+
+@media print {
+    .lisalappu {
+        display: none;
+    }
+
+    body {
+        margin: unset;
+    }
+
+    input {
+        display: none;
+    }
+}
+
+.lappu {
+    width: 85mm;
+    height: 54mm;
+    border: 1px solid black;
+    padding: 10mm;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.lappu figure {
+    position: relative;
+    user-select: none;
+    width: 30%;
+    aspect-ratio: 1/1;
+    margin: 0 auto;
+    border-radius: 100%;
+    overflow: hidden;
+}
+
+.lappu figure input {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.lappu .username {
+    font-size: 16px;
+    font-weight: 400;
+    opacity: 0.8;
+    margin-top: 0.5rem;
+}
+
+.lappu .nimi {
+    font-size: 21px;
+    margin-top: 1rem;
+}