diff --git a/create.php b/create.php
index bfea3c0..5eb2dca 100644
--- a/create.php
+++ b/create.php
@@ -139,6 +139,267 @@
                 <label for="convars">Paste your role specific convars</label>
               </div>
             </div>
+          </form>
+          <button class="btn waves-effect waves-light" type="submit" name="action">Submit <i class="material-icons right">send</i>
+          </button>
+      </div>
+    </div>
+
+    <!-- Cardpreview -->
+    <div class="col s6">
+      <div class="blurry">
+        <div id="rolecard" class="card">
+          <div class="card-content">
+            <span class="card-title" id="cardname"></span>
+            <p id="carddescription"></p>
+          </div>
+          <ul class="collapsible black-text white">
+            <li class="active">
+              <div class="collapsible-header">
+                <i class="material-icons">help_outline</i>How to Play
+              </div>
+              <div class="collapsible-body">
+                <pre id="thowtoplay">Soup</pre>
+              </div>
+            </li>
+            <li>
+              <div class="collapsible-header">
+                <i class="material-icons">check</i>Plays best with
+              </div>
+              <div class="collapsible-body">
+                <span>
+                  <ul id="tplaysbestwith">
+                  </ul>
+                </span>
+              </div>
+            </li>
+            <li>
+              <div class="collapsible-header">
+                <i class="material-icons">code</i>Convars
+              </div>
+              <div class="collapsible-body">
+                <pre >Normal Role Convars (also found in ULX):
+                <code id="cvars"></code>
+
+                Rolespecific Convars:
+                <code id="rcvars"></code></pre>
+              </div>
+            </li>
+            <li>
+              <div class="collapsible-header">
+                <i class="material-icons">whatshot</i>Credits
+              </div>
+              <div class="collapsible-body">
+                <span>Main Creator: <a id="authorurl" href="{AUTHORURL}">{AUTHORNAME}</a>
+                  <br>
+                  <pre id="credits"></pre>
+                </span>
+              </div>
+            </li>
+            <li>
+              <div class="collapsible-header">
+                <i class="material-icons">link</i>Links
+              </div>
+              <div class="center collapsible-body">
+                <span>
+                  <a id="steamurl" href="">Steam Workshop</a>
+                  <br>
+                  <a id="githuburl" href="">Github Source</a>
+              </div>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- Updatescript -->
+    <script>
+    function updateName() {
+      document.getElementById("cardname").innerHTML = $('#name').val();
+    }
+
+    function updateHowToPlay() {
+      document.getElementById("thowtoplay").innerHTML = $('#howtoplay').val();
+    }
+
+    function createMenuItem(name) {
+           let li = document.createElement('li');
+           li.textContent = name;
+           return li;
+       }
+
+       function updateGoodRoles() {
+       goodRoles = $('#goodRoles').val();
+       goodRoles.forEach(element => document.getElementById("tplaysbestwith").appendChild(createMenuItem(element)); )
+     );
+       }
+
+    function updateDescription() {
+      document.getElementById("carddescription").innerHTML = $('#description').val();
+    }
+
+    function updateColor() {
+      document.getElementById("rolecard").className = "card " + $('#rolecolor').val() +" "+ $('#modifier').val() +"-"+ $('#strength').val() + " " + $('#tcolor').val();
+    }
+
+    </script>
+
+
+    <!-- Start Tab init -->
+    <script>
+      $(document).ready(function() {
+        $('select').formSelect();
+        $('.collapsible').collapsible();
+        M.updateTextFields();
+      });
+    </script>
+    <!-- End Tab init -->
+    <!--JavaScript at end of body for optimized loading-->
+    <script type="text/javascript" src="js/materialize.min.js"></script>
+  </body>
+</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>TTT2 Role Adder</title>
+    <meta name="description" content="Add a new TTT2 Role">
+    <meta name="author" content="James">
+    <meta property="og:title" content="TTT2 Role Adder">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://ttt.james-things.com">
+    <meta property="og:description" content="All TTT2 Roles documented halfheartedly">
+    <meta property="og:image" content="https://e7.pngegg.com/pngimages/710/403/png-clipart-the-embodiment-of-scarlet-devil-team-shanghai-alice-video-game-banjo-tooie-mario-luigi-partners-in-time-marisa-logo-computer-wallpaper.png">
+    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+    <!--MATERIALIZE-->
+    <!--Import jQuery-->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <!--Import Google Icon Font-->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!--Import materialize.css-->
+    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
+    <!--My Custom Stylesheet-->
+    <link rel="stylesheet" href="css/styles.css">
+  </head>
+  <body>
+    <div class="row">
+      <div class="col s6">
+        <div class="card-panel white">
+          <form>
+            <div class="row">
+              <div class="input-field col s3">
+                <input id="name" type="text" onchange="updateName()" class="validate">
+                <label for="name">Rolename</label>
+              </div>
+                <div class="input-field col s9">
+                  <input id="description" type="text" onchange="updateDescription()">
+                  <label for="description">Roledescription</label>
+                </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s3">
+                <select id="rolecolor" onchange="updateColor()">
+                  <option value="" disabled selected>Color</option>
+                  <option value="red">Red</option>
+                  <option value="pink">Pink</option>
+                  <option value="purple">Purple</option>
+                  <option value="deep-purple">Deep-purple</option>
+                  <option value="indigo">Indigo</option>
+                  <option value="blue">Blue</option>
+                  <option value="light-blue">Light-blue</option>
+                  <option value="cyan">Cyan</option>
+                  <option value="teal">Teal</option>
+                  <option value="green">Green</option>
+                  <option value="light-green">Light-green</option>
+                  <option value="lime">Lime</option>
+                  <option value="yellow">Yellow</option>
+                  <option value="amber">Amber</option>
+                  <option value="orange">Orange</option>
+                  <option value="deep-orange">Deep-orange</option>
+                  <option value="brown">Brown</option>
+                  <option value="grey">Grey</option>
+                  <option value="blue-grey">Blue-grey</option>
+                  <option value="black">Black</option>
+                  <option value="white">White</option>
+                  <option value="transparent">Transparent</option>
+                </select>
+                <label>Select color</label>
+              </div>
+              <div class="input-field col s3">
+                <select id="modifier" onchange="updateColor()">
+                  <option value="" selected>None</option>
+                  <option value="lighten">lighten</option>
+                  <option value="darken">darken</option>
+                  <option value="accent">accent</option>
+                </select>
+                <label>Select Modifier</label>
+              </div>
+              <div class="input-field col s3">
+                <select id="strength" onchange="updateColor()">
+                  <option value="" disabled selected>Strength</option>
+                  <option value="1">1</option>
+                  <option value="2">2</option>
+                  <option value="3">3</option>
+                  <option value="4">4</option>
+                </select>
+                <label>Select Strength</label>
+              </div>
+              <div class="input-field col s3">
+                <select id="tcolor" onchange="updateColor()">
+                  <option value="" disabled selected>Textcolor</option>
+                  <option value="black-text">Black</option>
+                  <option value="white-text">White</option>
+                </select>
+                <label>Select Textcolor</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <textarea id="howtoplay" onchange="updateHowToPlay()" class="materialize-textarea"></textarea>
+                <label for="howtoplay">Text to describe how to play</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <select id="goodRoles" onchange="updateGoodRoles()" multiple>
+                  <option value="" disabled> Choose your option </option>
+                   <?php
+                   $files = glob("roles/en/*.php");
+                   $count = 1;
+
+                   foreach ($files as $filename) {
+                       include $filename;
+
+                       $shortname = substr($filename,  9);
+                       $shortname = substr($shortname,  0, -4);
+                       echo "<option value=".$count.">".ucfirst($shortname)."</option>";
+                       $count++;
+                   }
+                   ?>
+                </select>
+                <label>Select good Roles that go with this role</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <textarea id="credits" class="materialize-textarea"></textarea>
+                <label for="credits">Drop your credits here!</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s6">
+                <textarea id="gconvars" class="materialize-textarea"></textarea>
+                <label for="convars">Paste your general convars</label>
+              </div>
+              <div class="input-field col s6">
+                <textarea id="cconvars" class="materialize-textarea"></textarea>
+                <label for="convars">Paste your role specific convars</label>
+              </div>
+            </div>
             <div class="row">
               <div class="input-field col s6">
                 <textarea id="csteamurl" class="materialize-textarea"></textarea>