diff --git a/gauss-turing/game/static/-.png b/gauss-turing/game/static/-.png
index 493483d..1bb101b 100644
Binary files a/gauss-turing/game/static/-.png and b/gauss-turing/game/static/-.png differ
diff --git a/gauss-turing/game/static/P0.png b/gauss-turing/game/static/P0.png
index 62536c9..aa6f6c8 100644
Binary files a/gauss-turing/game/static/P0.png and b/gauss-turing/game/static/P0.png differ
diff --git a/gauss-turing/game/static/forward.png b/gauss-turing/game/static/forward.png
index 101422c..b31fe11 100644
Binary files a/gauss-turing/game/static/forward.png and b/gauss-turing/game/static/forward.png differ
diff --git a/gauss-turing/game/static/left.png b/gauss-turing/game/static/left.png
index 66ef652..934e631 100644
Binary files a/gauss-turing/game/static/left.png and b/gauss-turing/game/static/left.png differ
diff --git a/gauss-turing/game/static/right.png b/gauss-turing/game/static/right.png
index 8ade14b..4c5bbe5 100644
Binary files a/gauss-turing/game/static/right.png and b/gauss-turing/game/static/right.png differ
diff --git a/gauss-turing/game/static/style.css b/gauss-turing/game/static/style.css
index e597446..c3e95a2 100644
--- a/gauss-turing/game/static/style.css
+++ b/gauss-turing/game/static/style.css
@@ -1,6 +1,14 @@
-.main-canvas {
-    outline: 1px solid #dddddd;;
-    width: 500px;
+.cmd-canvas {
+    outline: 3px solid #dddddd;;
+    width: 430px;
+    height: 120px;
+    margin: 50px auto 0;
+    position: relative;
+}
+
+.programmer-canvas {
+    outline: 3px solid #dddddd;;
+    width: 338px;
     height: 220px;
     margin: 50px auto 0;
     position: relative;
@@ -20,86 +28,34 @@
     position: absolute !important;
     top: 100px;
     font-size: 15px;
-    color: #ffffff;
+    color: #000000;
     line-height: 25px;
     text-align: center;
     cursor: move;
 }
 
-.robotOrientation {
-    width: 75px;
-    height: 75px;
-}
-
-.robotOrientation90 {
-    width: 75px;
-    height: 75px;
-        -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-
-.robotOrientation180 {
-    width: 75px;
-    height: 75px;
-    -webkit-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
-.robotOrientation270 {
-    width: 75px;
-    height: 75px;
-        -webkit-transform: rotate(270deg);
-    -moz-transform: rotate(270deg);
-    -o-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    transform: rotate(270deg);
-}
-
-.rotate90 {
-    width: 100px;
-    height: 100px;
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-
-.rotate180 {
-    -webkit-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
-.rotate270 {
-    -webkit-transform: rotate(270deg);
-    -moz-transform: rotate(270deg);
-    -o-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    transform: rotate(270deg);
-}
-
 .top-buffer { margin-top:20px; }
 
+.center {
+  margin: 20px;
+  position: absolute;
+  left: 50%;
+  -ms-transform: translateX(-50%, -50%);
+  transform: translateX(-50%, -50%);
+}
 
-.card0 { left: 0; top: 0;  background-color: #E74C3C;     position: absolute !important;
-}
-.card1 { left: 100px; top: 0; background-color: #8E44AD;     position: absolute !important;
-}
-.card2 { left: 200px; top: 0; background-color: #5DADE2; }
-.card3 { left: 300px; top: 0; background-color: #1ABC9C; }
-.card4 { left: 400px; top: 0; background-color: #F1C40F; }
-.card5 { left: 50px; top: 120px; background-color: #F39C12; }
-.card6 { left: 150px; top: 120px; background-color: #34495E; }
-.card7 { left: 250px; top: 120px; background-color: #FF00FF; }
-.card8 { left: 350px; top: 120px; background-color: #008080; }
+.cmd0 { left: 0; top: 0;  background-color: #E74C3C;     position: absolute !important;}
+.cmd1 { left: 92px; top: 0; background-color: #8E44AD;     position: absolute !important;}
+.cmd2 { left: 184px; top: 0; background-color: #5DADE2; }
+.cmd3 { left: 276px; top: 0; background-color: #1ABC9C; }
+.cmd4 { left: 368px; top: 0; background-color: #F1C40F; }
+
+.programmer_cmd0 { left: 0; top: 0;  background-color: #E74C3C;     position: absolute !important;}
+.programmer_cmd1 { left: 92px; top: 0; background-color: #8E44AD;     position: absolute !important;}
+.programmer_cmd2 { left: 184px; top: 0; background-color: #5DADE2; }
+.programmer_cmd3 { left: 276px; top: 0; background-color: #1ABC9C; }
+.programmer_cmd4 { left: 38px; top: 120px; background-color: #F1C40F; }
+.programmer_cmd5 { left: 138px; top: 120px; background-color: #F39C12; }
+.programmer_cmd6 { right: 38px; top: 120px; background-color: #34495E; }
 
 .card_hidden { background-color: #dddddd; }
\ No newline at end of file
diff --git a/gauss-turing/game/templates/drag_example.html b/gauss-turing/game/templates/drag_example.html
index 0b4d623..fd29d7c 100644
--- a/gauss-turing/game/templates/drag_example.html
+++ b/gauss-turing/game/templates/drag_example.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Drag</title>
+    <title>imaginaerraum.de</title>
 
     <script src="static/jquery-3.5.1.js"></script>
     <script src="static/jquery-ui.min.js"></script>
@@ -20,9 +20,9 @@
     <!-- current program -->
     <div class="row top-buffer">
         Aktuelles Programm:
-        <div class="main-canvas">
+        <div class="cmd-canvas">
             {% for cmd in current_program %}
-                <div class="box card{{ loop.index0 }}"  id="prg_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}" data-color="{{ cmd.color }}" data-img="prg_cmd_img{{ loop.index0 }}"
+                <div class="box cmd{{ loop.index0 }}"  id="prg_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}" data-color="{{ cmd.color }}" data-img="prg_cmd_img{{ loop.index0 }}"
                      style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)">
                     <img id="prg_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png">
                     {{ loop.index0 }}
@@ -34,9 +34,10 @@
     <!-- possible commands -->
     <div class="row top-buffer">
         Mögliche Befehle:
-        <div class="main-canvas">
+        <div class="programmer-canvas">
             {% for cmd in valid_commands %}
-                <div class="box card{{ loop.index0 }}"  id="valid_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}" data-color="{{ cmd.color }}" data-img="valid_cmd_img{{ loop.index0 }}"
+                <div class="box programmer_cmd{{ loop.index0 }}"  id="valid_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}"
+                     data-color="{{ cmd.color }}" data-img="valid_cmd_img{{ loop.index0 }}"
                      style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)">
                     <img id="valid_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png">
                 </div>
@@ -44,75 +45,7 @@
         </div>
     </div>
 
-<!--
-    <div class="row top-buffer">
-    {% if robot_info is none %}
-        <div class="col-sm">
-        <label for="inputRobotX">X Position:</label>
-        <input class="form-control" type="number" id="inputRobotX" name="robot_x" min="1" max="13" value="1">
-        <br>
-        <label for="inputRobotY">Y Position:</label>
-        <input class="form-control" type="number" id="inputRobotY" name="robot_y" min="1" max="7" value="1">
-        </div>
-        <div class="col-sm">
-        <label for="orientation">Blickrichtung:</label><br>
-        <img id="orientation" class="robotOrientation" src="/static/orientation.png" alt="0">
-        <input hidden id="inputRobotOrientation" value=">" readonly>
-        </div>
-        <div class="col-sm">
-        <label for="inputRobotID">Roboter ID:</label>
-        <select name="robotID" class="form-control" id="inputRobotID">
-            <option value="11">11</option>
-            <option value="12">12</option>
-            <option value="13">13</option>
-            <option value="14">14</option>
-        </select>
-        <label for="outputRobotFlags">Flaggen:</label><br>
-        {% for f in ['a', 'b', 'c', 'd'] %}
-            <input type="checkbox" class="form-check-input" id="flag_{{ f }}" onclick="return false;">
-            <label class="form-check-label" for="flag_{{ f }}">{{ f }}</label><br>
-        {% endfor %}
-        </div>
-    {% else %}
-        <div class="col-sm">
-        <label for="outputRobotX">X Position:</label>
-        <input class="form-control" type="number" id="outputRobotX" name="robot_x" min="1" max="12" value="{{ robot_info[0] }}" readonly>
-        <br>
-        <label for="outputRobotY">Y Position:</label>
-        <input class="form-control" type="number" id="outputRobotY" name="robot_y" min="1" max="6" value="{{ robot_info[1] }}" readonly>
-        </div>
-        <div class="col-sm">
-        <label for="outputOrientation">Blickrichtung:</label><br>
-        {% if robot_info[2] == '>' %}
-            <img id="outputOrientation" class="robotOrientation" src="/static/orientation.png" alt="0">
-        {% elif robot_info[2] == 'v' %}
-            <img id="outputOrientation" class="robotOrientation90" src="/static/orientation.png" alt="0">
-        {% elif robot_info[2] == '<' %}
-            <img id="outputOrientation" class="robotOrientation180" src="/static/orientation.png" alt="0">
-        {% elif robot_info[2] == '^' %}
-            <img id="outputOrientation" class="robotOrientation270" src="/static/orientation.png" alt="0">
-        {% endif %}
-        <br>
-        <label for="outputRobotDmg">Schaden:</label><br>
-        <input class="form-control" name="robotDmg" id="outputRobotDmg" value="{{ robot_info[4] }}" readonly>
-        </div>
-        <div class="col-sm">
-        <label for="outputRobotID">Roboter ID:</label>
-        <input class="form-control" name="robotID" id="outputRobotID" value="{{ robot_info[3] }}" readonly>
-        <label for="outputRobotFlags">Flaggen:</label><br>
-        {% for f in ['a', 'b', 'c', 'd'] %}
-            {% if f in robot_info[5] %}
-                <input type="checkbox" class="form-check-input" id="flag_{{ f }}" checked onclick="return false;">
-            {% else %}
-                <input type="checkbox" class="form-check-input" id="flag_{{ f }}" onclick="return false;">
-            {% endif %}
-            <label class="form-check-label" for="flag_{{ f }}">{{ f }}</label><br>
-        {% endfor %}
-        </div>
-    {% endif %}
-        </div>
--->
-    <div class="row top-buffer">
+    <div class="row top-buffer center">
         <div class="col-sm">
             <input class="btn btn-primary" id="btnSubmit" type="submit" value="Befehle abschicken" />
         </div>
@@ -120,10 +53,6 @@
             <div id = "alert_placeholder"></div>
         </div>
     </div>
-
-    <div class="row top-buffer">
-            Viel Spaß beim Spielen!
-    </div>
 </div><!-- container -->
 
 
@@ -133,40 +62,12 @@
         var please_wait = $(".notification").hide();
 
     var box = $(".box");
-    var mainCanvas = $(".main-canvas");
-
-    var orientation_icon = $("#orientation");
-    var orientation_input = $("#inputRobotOrientation");
 
     bootstrap_alert = function() {};
     bootstrap_alert.warning = function(message) {
             $('#alert_placeholder').html('<div class="alert alert-primary"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
         };
 
-    orientation_icon.click(function () {
-        if (this.alt === "0") {
-            this.alt = "90";
-            $("#inputRobotOrientation").val("v");
-            //document.getElementById("inputRobotOrientation").value = "v";
-        }
-        else if (this.alt === "90") {
-            this.alt = "180";
-            $("#inputRobotOrientation").val("<");
-            //document.getElementById("inputRobotOrientation").value = "<";
-        }
-        else if (this.alt === "180") {
-            this.alt = "270";
-            $("#inputRobotOrientation").val("^");
-            //document.getElementById("inputRobotOrientation").value = "^";
-        }
-        else if (this.alt === "270") {
-            this.alt = "0";
-            $("#inputRobotOrientation").val(">");
-            //document.getElementById("inputRobotOrientation").value = ">";
-        }
-       $(this).css({'transform' : 'rotate('+ this.alt +'deg)'});
-    });
-
 
     $("#btnSubmit").click(function () {
            //alert("button");
@@ -198,58 +99,6 @@
 
         });
 
-    /*
-    box.draggable({
-        containment: mainCanvas,
-        helper: "clone",
-
-        start: function () {
-            $(this).css({
-                opacity: 0
-            });
-
-            $(".box").css("z-index", "0");
-        },
-
-        stop: function () {
-            $(this).css({
-                opacity: 1
-            });
-        }
-    });
-
-    box.droppable({
-        accept: box,
-
-        drop: function (event, ui) {
-            var draggable = ui.draggable;
-            var droppable = $(this);
-            var dragPos = draggable.position();
-            var dropPos = droppable.position();
-
-            var cmds = [ui.draggable.attr('name').toString(), $(this).attr('name')]
-
-            //console.log(dragPos);
-            //console.log(dropPos);
-
-            //console.log($(cmds));
-            // notify server that cards have been swapped
-            $.post(url='/', {drag: ui.draggable.attr('name'), drop: $(this).attr('name')});
-
-            draggable.css({
-                left: dropPos.left + "px",
-                top: dropPos.top + "px",
-                "z-index": 20
-            });
-
-            droppable.css("z-index", 10).animate({
-                left: dragPos.left,
-                top: dragPos.top
-            });
-        }
-    });
-    */
-
     var edited_command = null;
 
     box.click(function () {