diff --git a/server.py b/server.py
index 238a494..0b9d75e 100755
--- a/server.py
+++ b/server.py
@@ -131,7 +131,7 @@ class Server(http.server.BaseHTTPRequestHandler):
             self.send_response(200)
             self.send_header("Content-type", "text/html")
             self.end_headers()
-            tplPlayerpage = template.TplLoader.load("tpl/playerpage.tpl")
+            #tplPlayerpage = template.TplLoader.load("tpl/playerpage.tpl")
             tplPlayerpage.write(self, player.status());
 
 
diff --git a/tpl/css.tpl b/tpl/css.tpl
index 6a1aa9c..23790af 100644
--- a/tpl/css.tpl
+++ b/tpl/css.tpl
@@ -35,31 +35,57 @@ body { font-size: 12px; text-align: center; }
 
 .card {
     display: inline-block;
-    border: 1px solid #aaaaaa;
-    border-radius: 16px;
-    margin: 8px;
-    padding: 8px;
-    width: 376px;
+    border-radius: 17px;
+    margin: 9px;
+    padding: 1px;
+    width: 340px;
+    background: #aaaaaa;
 }
 
 .myCard {
+    border-radius: 24px;
+    margin: 2px;
+    padding: 8px;
     background: #aaaaff;
 }
 
 .friendsCard {
+    border-radius: 24px;
+    margin: 2px;
+    padding: 8px;
     background: #ffaaaa;
 }
 
 .myCard.friendsCard {
+    border-radius: 24px;
+    margin: 2px;
+    padding: 8px;
     background: #aaffaa;
 }
 
-
 .card img {
-    width: 360px;
+    display: block;
+    width: 340px;
     height: auto;
+    border: 0;
+    border-radius: 16px;
 }
 
+.card input {
+    display: block;
+    cursor: pointer;
+    font-size: 16px;
+    width: 340px;
+    height: 32px;
+    border: 0;
+    border-radius: 0 0 16px 16px;
+}
+
+img.top {
+    border-radius: 16px 16px 0 0;
+}
+
+
 #debug { display: none; }
 #ready { }
 #friendurl { }
diff --git a/tpl/playerpage.tpl b/tpl/playerpage.tpl
index e32f0fc..0661c6b 100644
--- a/tpl/playerpage.tpl
+++ b/tpl/playerpage.tpl
@@ -25,13 +25,22 @@
 <div id="debug">my selection: {:me.selection}, friend's selection: {:friend.selection}</div>
 
 <div id="cards">{loop:cards::card}
-<form class="card{if:card.my} myCard{endif}{if:card.friends} friendsCard{endif}" method="POST" action="{:prefix}/{:me.id}/select/{:card.index}">
-<img src="{:cardsPrefix}/{:card.name}" />
-{if:me.selected}{else}<br /><input type="submit" value="select" />{endif}
+<form class="card{if:card.my} myCard{endif}{if:card.friends} friendsCard{endif}" method="POST" action="{:prefix}/{:me.id}/select/{:card.index}" id="fi{:card.index}" >
+{if:me.selected}<img src="{:cardsPrefix}/{:card.name}" />{else}<img class="top" src="{:cardsPrefix}/{:card.name}" id="i{:card.index}" /><input class="bottom" type="submit" value="select" />{endif}
 </form>
 {endloop}</div>
 
 <hr />
 <div id="logo"><a href="{:prefix}">back to start page</a></div>
 
+<script>
+    function processCard(e) {
+        e.style.cursor = "pointer";
+        e.onclick = function() { document.getElementById("f" + e.id).submit(); }
+    }
+    var l = document.getElementsByClassName("top");
+    for(var i = 0; i < l.length; i++)
+        if (l[i].tagName == "IMG") processCard(l[i]);
+</script>
+
 {include:footer.tpl}