diff --git a/implementation.html b/implementation.html
index 351c5f1..9ecc94c 100644
--- a/implementation.html
+++ b/implementation.html
@@ -1,9 +1,15 @@
 <html>
     <head>
+        <style>
+            @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+        </style>
     </head>
     <body>
         <div style="height: 50px; width: 10000px; background-color: blue;"></div>
         <button id="button"></button>
+        <span class="material-symbols-rounded">
+            close
+        </span>
         <p>Nice thanks man awesome</p>
         <p>Nice thanks man awesome</p>
         <p>Nice thanks man awesome</p>
@@ -47,17 +53,14 @@
 
 
         <template id="x-widget-template">
-            <link rel="preconnect" href="https://fonts.googleapis.com">
-            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-            <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,300,0,0" />
-
             <style>
+                @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
                 * {
                     box-sizing: border-box;
                     --icon-default-dim: 60px;
-                    --form-default-width: 350px;
-                    --form-default-height: 500px;
+                    --form-default-width: 450px;
+                    --form-default-height: 600px;
                     --side-margin: 20px;
                     --site-falcon-purple: #AE55E7;
                 }
@@ -68,7 +71,7 @@
                     position: fixed;
                     visibility: visible;
                     opacity: 1;
-                    transition: top 0.3s ease 0s, left 0.3s ease 0s, scale 0.2s ease, transform 0.5s ease, visibility 0s linear 0.5s, opacity 0.5s linear;
+                    transition: top 0.3s ease 0s, left 0.3s ease 0s, scale 0.2s ease, transform 0.5s ease, visibility 0s linear 0.3s, opacity 0.3s linear;
                 }
 
                 #icon.location-top-left {
@@ -107,11 +110,11 @@
                     border: 0px;
                     border-radius: 10px 10px 10px 10px;
                     box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
-                    border-radius: 15px;
+                    border-radius: 12px;
                     position: fixed;
                     visibility: visible;
                     opacity: 1;
-                    transition: transform 0.5s ease, visibility 0s linear 0.5s, opacity 0.5s linear;
+                    transition: transform 0.6s ease, visibility 0s linear 0.3s, opacity 0.3s linear;
                 }
 
                 #form.location-top-left {
@@ -138,20 +141,43 @@
                     top: 0px;
                     width: 100%;
                     height: 60px;
-                    background-color: var(--site-falcon-purple);
-                    border-radius: 15px 15px 0px 0px;
+                    background-image: linear-gradient(#a544e3, var(--site-falcon-purple));
+                    border-radius: 12px 12px 0px 0px;
                     border: 0px;
                     justify-content: center;
                     align-items: center;
                     display: flex;
                 }
 
+                .form-header-buttons {
+                    cursor: pointer;
+                    user-select: none;
+                    color: white;
+                    margin-left: 16px;
+                    font-size: 26px;
+                    transition: scale 0.2s ease;
+                }
+
+                .form-header-buttons:hover {
+                    scale: 1.1;
+                }
+
+                #form-button-help {
+                    margin-left: 16px;
+                }
+
+                #form-button-close {
+                    margin-right: 16px;
+                }
+
                 #form-title {
-                    font-family: Alexandria, sans-serif;
+                    font-family: "Alexandria", sans-serif;
                     font-weight: 400;
                     font-size: 24px;
                     color: white;
                     text-align: center;
+                    user-select: none;
+                    flex-grow: 1;
                 }
 
                 #form-content-container {
@@ -197,8 +223,12 @@
                     margin-top: 15px;
                 }
 
+                #input-name:not(#input-name[value=""]), #input-comment:not(#input-comment[value=""]) {
+                    font-size: 16px;
+                }
+
                 .md-input, .label-md-input > div {
-                    font-family: Alexandria, sans-serif;
+                    font-family: "Alexandria", sans-serif;
                     font-weight: 300;
                     font-size: 16px;
                 }
@@ -249,18 +279,33 @@
                     background-color: #ececec;
                     border: 2px solid #d3d3d3;
                     border-left: 0px;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: center;
+                    align-items: center;
+                    cursor: pointer;
+                    user-select: none;
+                    transition: background-color 0.15s ease;
+                }
+
+                .severity-option .material-symbols-rounded {
+                    color: #5A5A5A;
+                }
+
+                .severity-option .material-symbols-rounded:not(:first-child) {
+                    margin-left: -12px;
+                    color: #5A5A5A;
                 }
 
                 .severity-option:hover:not(.selected) {
                     background-color: #e0e0e0;
-                    cursor: pointer;
                 }
 
                 .severity-option.selected {
                     background-color: #d3d3d3;
                 }
 
-                #select-severity-container :first-child {
+                #select-severity-container > :first-child {
                     border-left: 2px solid #d3d3d3;
                     border-radius: 4px 0px 0px 4px;
                 }
@@ -292,12 +337,12 @@
 
                 #icon.hidden.location-bottom-left, #form.hidden.location-bottom-left,
                 #icon.hidden.location-bottom-right, #form.hidden.location-bottom-right {
-                    transform: translateY(200%);
+                    transform: translateY(100%);
                 }
 
                 #icon.hidden.location-top-left, #form.hidden.location-top-left,
                 #icon.hidden.location-top-right, #form.hidden.location-top-right {
-                    transform: translateY(-200%);
+                    transform: translateY(-100%);
                 }
 
                 #icon.hidden {
@@ -311,9 +356,15 @@
 
             <div id="form">
                 <div id="form-header">
+                    <span id="form-button-help" class="material-symbols-rounded form-header-buttons">
+                        help
+                    </span>
                     <div id="form-title">
                         New Ticket
                     </div>
+                    <span id="form-button-close" class="material-symbols-rounded form-header-buttons">
+                        close
+                    </span>
                 </div>
                 <div id="form-content-container">
                     <div id="input-name-container">
@@ -330,34 +381,34 @@
                         </label>
                     </div>
                     <div id="select-severity-container">
-                        <div class="severity-option" id="option-low-severity">
-                            <!-- <span class="material-symbols-rounded">
-                                priority_high
-                            </span> -->
-                        </div>
-                        <div class="severity-option" id="option-medium-severity">
-                            <!-- <span class="material-symbols-rounded">
-                                priority_high
+                        <div title="Info" class="severity-option selected" id="option-no-severity">
+                            <span class="material-symbols-rounded">
+                                info
                             </span>
+                        </div>
+                        <div title="Low Priority" class="severity-option" id="option-low-severity">
                             <span class="material-symbols-rounded">
                                 priority_high
-                            </span> -->
-                        </div>
-                        <div class="severity-option" id="option-high-severity">
-                            <!-- <span class="material-symbols-rounded">
-                                priority_high
                             </span>
+                        </div>
+                        <div title="Medium Priority" class="severity-option" id="option-medium-severity">
                             <span class="material-symbols-rounded">
                                 priority_high
                             </span>
                             <span class="material-symbols-rounded">
                                 priority_high
-                            </span> -->
+                            </span>
                         </div>
-                        <div class="severity-option selected" id="option-no-severity">
-                            <!-- <span class="material-symbols-rounded">
-                                campaign
-                            </span> -->
+                        <div title="High Priority" class="severity-option" id="option-high-severity">
+                            <span class="material-symbols-rounded">
+                                priority_high
+                            </span>
+                            <span class="material-symbols-rounded">
+                                priority_high
+                            </span>
+                            <span class="material-symbols-rounded">
+                                priority_high
+                            </span>
                         </div>
                     </div>
                     <div id="input-comment-container">
@@ -390,7 +441,6 @@
                     super();
 
                     const shadowRoot = this.attachShadow({mode: 'open'});
-                    let v = document.getElementById("x-widget-template").content.cloneNode(true);
                     shadowRoot.appendChild(document.getElementById("x-widget-template").content.cloneNode(true));
 
                     this.#icon = this.#createIcon();
@@ -403,22 +453,10 @@
                 }
 
                 connectedCallback() {
-                    let test = document.getElementById("button");
-                    test.style.position = "absolute";
-                    test.style.top = "100px";
-                    test.style.left = "100px";
-                    test.textContent = "show icon";
-                    test.onclick = (e) => {
-                        if (!this.#form.classList.contains("hidden")) {
-                            this.#renderIcon({visibility: "visible"});
-                            this.#renderForm({visibility: "hidden"});
-                        }
-                    };
-                    
-                    this.#render();
+                    this.#renderInitial();
                 }
 
-                #render() {
+                #renderInitial() {
                     if (this.isConnected) {
                         this.#renderIcon({visibility: "visible"});
                         this.#renderForm({visibility: "hidden"});
@@ -440,6 +478,12 @@
                 #createForm() {
                     let form = this.shadowRoot.getElementById("form");
 
+                    let buttonHelp = this.shadowRoot.getElementById("form-button-help");
+                    buttonHelp.addEventListener("click", (e) => this.#onFormHelpButtonClicked(e));
+
+                    let buttonClose = this.shadowRoot.getElementById("form-button-close");
+                    buttonClose.addEventListener("click", (e) => this.#onFormCloseButtonClicked(e));
+
                     let inputName = this.shadowRoot.getElementById("input-name");
                     inputName.addEventListener("input", (e) => this.#onNameInput(e));
 
@@ -509,6 +553,17 @@
                     }
                 }
 
+                #onFormHelpButtonClicked(e) {
+                    console.log("help pressed");
+                }
+
+                #onFormCloseButtonClicked(e) {
+                    if (!this.#form.classList.contains("hidden")) {
+                        this.#renderIcon({visibility: "visible"});
+                        this.#renderForm({visibility: "hidden"});
+                    }
+                }
+
                 #onNameInput(e) {
                     let inputName = this.shadowRoot.getElementById("input-name");
 
@@ -605,22 +660,22 @@
                 #snapToCorner(anchorX, anchorY) {
                     let locationChanged = false;
 
-                    if (anchorX < window.innerWidth / 5) {
-                        if (this.#location != "top-left" && anchorY < window.innerHeight / 5) {
+                    if (anchorX < window.innerWidth / 2) {
+                        if (this.#location != "top-left" && anchorY < window.innerHeight / 2) {
                             this.#location = "top-left";
                             locationChanged = true;
                         }
-                        else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                        else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 2) {
                             this.#location = "bottom-left";
                             locationChanged = true;
                         }
                     }
-                    else if (anchorX > window.innerWidth - window.innerWidth / 5) {
-                        if (this.#location != "top-right" &&  anchorY < window.innerHeight / 5) {
+                    else if (anchorX > window.innerWidth - window.innerWidth / 2) {
+                        if (this.#location != "top-right" &&  anchorY < window.innerHeight / 2) {
                             this.#location = "top-right";
                             locationChanged = true;
                         }
-                        else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                        else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 2) {
                             this.#location = "bottom-right";
                             locationChanged = true;
                         }
