diff --git a/create.php b/create.php
index bfea3c0..5a58b67 100644
--- a/create.php
+++ b/create.php
@@ -23,6 +23,39 @@
     <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
     <!--My Custom Stylesheet-->
     <link rel="stylesheet" href="css/styles.css">
+
+
+    <!-- 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>
   </head>
   <body>
     <div class="row">
@@ -223,37 +256,6 @@
       </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 -->
