diff --git a/backend/templates/state_partial.html.tera b/backend/templates/state_partial.html.tera
index b6acafe..02c62f5 100644
--- a/backend/templates/state_partial.html.tera
+++ b/backend/templates/state_partial.html.tera
@@ -4,7 +4,7 @@
     <h2 class="handle">
         <label for="handle_{{loop.index}}">
             <span>{{state.name}} ({% if state.state %}{{state.state.map}}{% else %}{{state.map}}{% endif %})</span>
-            <span style="float: right">{% if state.type == "Playing" %}{{ state.connected }}/{{state.total}}{% else %}<a class="link" href='/visualizer?name={{state.name}}&game={{state.file}}'></a>{% endif %}</span>
+            <span style="float: right">{% if state.type == "Playing" %}{{ state.connected }}/{{state.total}}{% else %}<a class="link" href='/visualizer?name={{state.name | safe }}&game=/games/{{state.file | safe}}'></a>{% endif %}</span>
         </label>
     </h2>
     <div class="content">
diff --git a/frontend/www/games.ts b/frontend/www/games.ts
index 014724a..ad5ae9b 100644
--- a/frontend/www/games.ts
+++ b/frontend/www/games.ts
@@ -6,7 +6,20 @@ const OPTIONS = document.getElementById("options");
 
 const game_location = LOCATION + "static/games/mod.ini";
 
+var game_name, game_file;
+
+document.getElementById("addbutton").onclick = function() {
+    const loc = window.location;
+    const query = `?game=${game_file}&name=${game_name}`;
+    navigator.clipboard.writeText(loc.origin+loc.pathname+encodeURI(query)).then(() => {
+        console.log("Success");
+    }, () => {
+        console.log("Failed");
+    });
+}
+
 async function on_load() {
+    console.log("ON LOAD");
     if (OPTIONS) {
         const r = await fetch(game_location);
         const response = await r.text();
@@ -16,7 +29,8 @@ async function on_load() {
         const urlVars = new URLSearchParams(window.location.search);
 
         if (urlVars.get("game") && urlVars.get("name")) {
-            handle("/games/"+urlVars.get("game"),urlVars.get("name"))
+            console.log(urlVars.get("game")+' '+urlVars.get("name"))
+            handle(urlVars.get("game"),urlVars.get("name"))
         } else if (options[0]) {
             const options_div = <HTMLDivElement> options[0];
             if (options_div.children[0]) {
@@ -25,10 +39,12 @@ async function on_load() {
         }
     }
 }
-
-window.addEventListener("load", on_load);
+window.addEventListener("load", on_load, false);
 
 export function handle(location, name: string) {
+    game_file = location;
+    game_name = name;
+
     set_loading(true);
 
     fetch(location)
diff --git a/frontend/www/index.ts b/frontend/www/index.ts
index af6578b..6d71601 100644
--- a/frontend/www/index.ts
+++ b/frontend/www/index.ts
@@ -30,10 +30,6 @@ const SLIDER = <HTMLInputElement>document.getElementById("turnSlider");
 const FILESELECTOR = <HTMLInputElement> document.getElementById("fileselect");
 const SPEED = <HTMLInputElement> document.getElementById("speed");
 
-document.getElementById("addbutton").onclick = function() {
-    FILESELECTOR.click();
-}
-
 export function set_loading(loading: boolean) {
     if (loading) {
         if (!LOADER.classList.contains("loading")) {
diff --git a/frontend/www/static/res/style.css b/frontend/www/static/res/style.css
index 42a6574..6ca71a0 100644
--- a/frontend/www/static/res/style.css
+++ b/frontend/www/static/res/style.css
@@ -1,327 +1,309 @@
-* {
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    background-color: #333;
-}
-
-p {
-    padding: 3px 0;
-}
-
-#wrapper {
-    max-height: 100%;
-    min-height: 100%;
-    width: 100%;
-    height: 100%;
-    display: flex;
-}
-
-#main {
-    height: 100%;
-    flex-grow: 1;
-    position: relative;
-}
-
-#name {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    color: white;
-}
-
-#meta {
-    padding: 10px 2%;
-    color: white;
-    position: absolute;
-    bottom: 0;
-    width: 96%;
-}
-
-.options {
-    background-color: black;
-    max-width: 300px;
-    width: 20%;
-    min-width: 150px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-}
-
-.option {
-    color: white;
-    margin: 0 0 20px 0;
-    padding: 10px;
-    background-color: #333;
-}
-
-.option:last-child {
-    margin: 0;
-}
-
-.option:hover {
-    background-color: #777;
-}
-
-.lds-roller {
-    display: none;
-}
-
-.loading>.lds-roller {
-    display: inline-block;
-}
-
-.lds-roller {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 80px;
-    height: 80px;
-}
-
-.lds-roller div {
-    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    transform-origin: 40px 40px;
-}
-
-.lds-roller div:after {
-    content: " ";
-    display: block;
-    position: absolute;
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    background: #fff;
-    margin: -4px 0 0 -4px;
-}
-
-.lds-roller div:nth-child(1) {
-    animation-delay: -0.036s;
-}
-
-.lds-roller div:nth-child(1):after {
-    top: 63px;
-    left: 63px;
-}
-
-.lds-roller div:nth-child(2) {
-    animation-delay: -0.072s;
-}
-
-.lds-roller div:nth-child(2):after {
-    top: 68px;
-    left: 56px;
-}
-
-.lds-roller div:nth-child(3) {
-    animation-delay: -0.108s;
-}
-
-.lds-roller div:nth-child(3):after {
-    top: 71px;
-    left: 48px;
-}
-
-.lds-roller div:nth-child(4) {
-    animation-delay: -0.144s;
-}
-
-.lds-roller div:nth-child(4):after {
-    top: 72px;
-    left: 40px;
-}
-
-.lds-roller div:nth-child(5) {
-    animation-delay: -0.18s;
-}
-
-.lds-roller div:nth-child(5):after {
-    top: 71px;
-    left: 32px;
-}
-
-.lds-roller div:nth-child(6) {
-    animation-delay: -0.216s;
-}
-
-.lds-roller div:nth-child(6):after {
-    top: 68px;
-    left: 24px;
-}
-
-.lds-roller div:nth-child(7) {
-    animation-delay: -0.252s;
-}
-
-.lds-roller div:nth-child(7):after {
-    top: 63px;
-    left: 17px;
-}
-
-.lds-roller div:nth-child(8) {
-    animation-delay: -0.288s;
-}
-
-.lds-roller div:nth-child(8):after {
-    top: 56px;
-    left: 12px;
-}
-
-@keyframes lds-roller {
-    0% {
-        transform: rotate(0deg);
+    * {
+        margin: 0;
+        padding: 0;
     }
-    100% {
-        transform: rotate(360deg);
+    
+    body {
+        background-color: #333;
     }
-}
-
-#speed {
-    width: 100px;
-}
-
-#c {
-    position: relative;
-    background-color: black;
-    width: 100%;
-    height: 100%;
-}
-
-.button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    width: 40px;
-    height: 40px;
-}
-
-.button:before,
-.button:after {
-    content: "";
-    position: absolute;
-    background-color: grey;
-}
-
-.button:hover:before,
-.button:hover:after {
-    background-color: white;
-}
-
-.button:before {
-    top: 0;
-    left: 50%;
-    width: 6px;
-    height: 100%;
-    margin-left: -3px;
-}
-
-.button:after {
-    top: 50%;
-    left: 0;
-    width: 100%;
-    height: 6px;
-    margin-top: -3px;
-}
-
-
-/* ----------------------------------------------
+    
+    p {
+        padding: 3px 0;
+    }
+    
+    #wrapper {
+        max-height: 100%;
+        min-height: 100%;
+        width: 100%;
+        height: 100%;
+        display: flex;
+    }
+    
+    #main {
+        height: 100%;
+        flex-grow: 1;
+        position: relative;
+    }
+    
+    #name {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        color: white;
+    }
+    
+    #meta {
+        padding: 10px 2%;
+        color: white;
+        position: absolute;
+        bottom: 0;
+        width: 96%;
+    }
+    
+    .options {
+        background-color: black;
+        max-width: 300px;
+        width: 20%;
+        min-width: 150px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+    }
+    
+    .option {
+        color: white;
+        margin: 0 0 20px 0;
+        padding: 10px;
+        background-color: #333;
+    }
+    
+    .option:last-child {
+        margin: 0;
+    }
+    
+    .option:hover {
+        background-color: #777;
+    }
+    
+    .lds-roller {
+        display: none;
+    }
+    
+    .loading>.lds-roller {
+        display: inline-block;
+    }
+    
+    .lds-roller {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 80px;
+        height: 80px;
+    }
+    
+    .lds-roller div {
+        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        transform-origin: 40px 40px;
+    }
+    
+    .lds-roller div:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        background: #fff;
+        margin: -4px 0 0 -4px;
+    }
+    
+    .lds-roller div:nth-child(1) {
+        animation-delay: -0.036s;
+    }
+    
+    .lds-roller div:nth-child(1):after {
+        top: 63px;
+        left: 63px;
+    }
+    
+    .lds-roller div:nth-child(2) {
+        animation-delay: -0.072s;
+    }
+    
+    .lds-roller div:nth-child(2):after {
+        top: 68px;
+        left: 56px;
+    }
+    
+    .lds-roller div:nth-child(3) {
+        animation-delay: -0.108s;
+    }
+    
+    .lds-roller div:nth-child(3):after {
+        top: 71px;
+        left: 48px;
+    }
+    
+    .lds-roller div:nth-child(4) {
+        animation-delay: -0.144s;
+    }
+    
+    .lds-roller div:nth-child(4):after {
+        top: 72px;
+        left: 40px;
+    }
+    
+    .lds-roller div:nth-child(5) {
+        animation-delay: -0.18s;
+    }
+    
+    .lds-roller div:nth-child(5):after {
+        top: 71px;
+        left: 32px;
+    }
+    
+    .lds-roller div:nth-child(6) {
+        animation-delay: -0.216s;
+    }
+    
+    .lds-roller div:nth-child(6):after {
+        top: 68px;
+        left: 24px;
+    }
+    
+    .lds-roller div:nth-child(7) {
+        animation-delay: -0.252s;
+    }
+    
+    .lds-roller div:nth-child(7):after {
+        top: 63px;
+        left: 17px;
+    }
+    
+    .lds-roller div:nth-child(8) {
+        animation-delay: -0.288s;
+    }
+    
+    .lds-roller div:nth-child(8):after {
+        top: 56px;
+        left: 12px;
+    }
+    
+    @keyframes lds-roller {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+    
+    #speed {
+        width: 100px;
+    }
+    
+    #c {
+        position: relative;
+        background-color: black;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 0;
+        height: 0;
+    }
+    
+    .button::before {
+        content: "";
+        display: block;
+        float: left;
+        margin: 0 -20px 0 0;
+        font-family: 'fontawesome';
+        content: "\f1e1";
+        transform: translate(-1em, 0px);
+        color: antiquewhite;
+        font-size: 1.5em;
+    }
+    
+    .button:hover::before {
+        color: #ff7f00;
+    }
+    /* ----------------------------------------------
  * Generated by Animista on 2019-9-17 14:35:13
  * Licensed under FreeBSD License.
  * See http://animista.net/license for more info.
  * w: http://animista.net, t: @cssanimista
  * ---------------------------------------------- */
-
-
-/**
+    /**
  * ----------------------------------------
  * animation slide-top
  * ----------------------------------------
  */
-
-@-webkit-keyframes slide-top {
-    0% {
-        -webkit-transform: translate(-50%, 50%);
-        transform: translate(-50%, 50%);
+    
+    @-webkit-keyframes slide-top {
+        0% {
+            -webkit-transform: translate(-50%, 50%);
+            transform: translate(-50%, 50%);
+        }
+        100% {
+            -webkit-transform: translate(-50%, -150%);
+            transform: translate(-50%, -150%);
+        }
     }
-    100% {
-        -webkit-transform: translate(-50%, -150%);
-        transform: translate(-50%, -150%);
+    
+    @keyframes slide-top {
+        0% {
+            -webkit-transform: translate(-50%, 50%);
+            transform: translate(-50%, 50%);
+        }
+        100% {
+            -webkit-transform: translate(-50%, -150%);
+            transform: translate(-50%, -150%);
+        }
     }
-}
-
-@keyframes slide-top {
-    0% {
-        -webkit-transform: translate(-50%, 50%);
-        transform: translate(-50%, 50%);
-    }
-    100% {
-        -webkit-transform: translate(-50%, -150%);
-        transform: translate(-50%, -150%);
-    }
-}
-
-
-/**
+    /**
  * ----------------------------------------
  * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
  * ----------------------------------------
  */
-
-.slidecontainer {
-    margin-top: 10px;
-    width: 100%;
-    /* Width of the outside container */
-}
-
-.slider {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 15px;
-    border-radius: 5px;
-    background: #d3d3d3;
-    outline: none;
-    opacity: 0.7;
-    -webkit-transition: .2s;
-    transition: opacity .2s;
-}
-
-.slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    background: #ff7000;
-    cursor: pointer;
-}
-
-.slider::-moz-range-thumb {
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    background: #ff7000;
-    cursor: pointer;
-}
-
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    border-radius: 10px;
-    background-color: #444;
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar {
-    width: 10px;
-    background-color: #444;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background-color: #F90;
-    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
-}
\ No newline at end of file
+    
+    .slidecontainer {
+        margin-top: 10px;
+        width: 100%;
+        /* Width of the outside container */
+    }
+    
+    .slider {
+        -webkit-appearance: none;
+        width: 100%;
+        height: 15px;
+        border-radius: 5px;
+        background: #d3d3d3;
+        outline: none;
+        opacity: 0.7;
+        -webkit-transition: .2s;
+        transition: opacity .2s;
+    }
+    
+    .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: #ff7000;
+        cursor: pointer;
+    }
+    
+    .slider::-moz-range-thumb {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: #ff7000;
+        cursor: pointer;
+    }
+    
+     ::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        border-radius: 10px;
+        background-color: #444;
+        border-radius: 10px;
+    }
+    
+     ::-webkit-scrollbar {
+        width: 10px;
+        background-color: #444;
+    }
+    
+     ::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background-color: #F90;
+        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
+    }
\ No newline at end of file