diff --git a/frontend/app.js b/frontend/app.js
index c98b905..2f78f69 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -56,12 +56,12 @@ shareLink.onclick = (e) => {
   if (navigator.clipboard) {
     let text = location.href;
     navigator.clipboard.writeText(text).then(function() {
-      document.querySelector("codapi-status").innerText = "Link copied!"
+      document.querySelector("codapi-status").innerText = "✓ Link copied!"
     }, function(err) {
-      document.querySelector("codapi-status").innerText = "Link changed. Copy the URL now."
+      document.querySelector("codapi-status").innerText = "✓ Link changed. Copy the URL now."
     });
   } else {
-    document.querySelector("codapi-status").innerText = "Link changed. Copy the URL now."
+    document.querySelector("codapi-status").innerText = "✓ Link changed. Copy the URL now."
   }
 };
 
diff --git a/frontend/index.html b/frontend/index.html
index da58e2d..e18094b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,81 +2,36 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>code</title>
-    <link rel="stylesheet" href="" />
+    <title>Hare Playground</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="codapi.js"></script>
     <script src="codapi-settings.js"></script>
     <script src="highlight.min.js"></script>
     <link rel="stylesheet" href="codapi.css" />
     <link rel="stylesheet" href="github.min.css" />
-    <style>
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-      }
-      codapi-snippet {
-        display: block;
-        margin: 10px 0;
-      }
-      codapi-snippet button {
-        padding: 0;
-        border: none;
-        background: none;
-        line-height: 1.35;
-        color: #008bf5;
-        font-size: 16px;
-        cursor: pointer;
-      }
-      codapi-toolbar button::after {
-        content: " ▶";
-      }
-      codapi-toolbar a {
-        color: #008bf5;
-        border-bottom: 1px solid rgba(0, 139, 245, 0.2);
-        text-decoration: none;
-        font-size: 16px;
-      }
-
-      .editor {
-        border-radius: 6px;
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-        font-family: 'Source Code Pro', monospace;
-        font-size: 14px;
-        font-weight: 400;
-        min-height: 340px;
-        max-height: 500px;
-        letter-spacing: normal;
-        line-height: 20px;
-        padding: 10px;
-        resize: none !important;
-        tab-size: 4;
-      }
-
-      codapi-output {
-        border-radius: 6px;
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-        font-family: 'Source Code Pro', monospace;
-        font-size: 14px;
-        font-weight: 400;
-        letter-spacing: normal;
-        line-height: 20px;
-        padding: 10px;
-        resize: none !important;
-        tab-size: 4;
-        background-color: #f8f8f8;
-      }
-
-      codapi-output pre {
-        margin: 0;
-      }
-    </style>
+    <link rel="stylesheet" href="writ.min.css" />
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <h1>Hare Playground</h1>
+
+    <span>
+      <a href="https://harelang.org/">Hare Lang</a>
+      |
+      <a href="https://docs.harelang.org/">Standard Library Reference</a>
+    </span>
+
     <div class="editor language-c"></div>
 
     <codapi-settings url="https://hare-exec.fly.dev/v1"></codapi-settings>
     <codapi-snippet sandbox="hare" editor="external" selector=".editor"></codapi-snippet>
 
+    <footer>
+      <p>
+      built by <a href="https://fnordig.de">jan-erik</a>
+      </p>
+    </footer>
+
     <script type="module" src="app.js"></script>
   </body>
 </html>
