diff --git a/Makefile b/Makefile
index f5fb1ea..5d33e7d 100644
--- a/Makefile
+++ b/Makefile
@@ -19,7 +19,7 @@ style: build/style.xsl
 dev:
 	git ls-files | entr bash -c "make style"
 
-.PHONY: dev_all
+.PHONY: dev_cards
 dev_cards:
 	git ls-files | entr bash -c "make cards"
 
@@ -45,6 +45,8 @@ with open(sys.argv[2], "w") as f:
 	e = Environment(trim_blocks=True, lstrip_blocks=True, loader=FileSystemLoader(''))
 	f.write(e.get_template("templates/card_header.html.j2").render(is_local=True, css_data=css_data))
 	e.filters.update({
+		"is_number":lambda x: str(x).isnumeric(),
+		"is_string":lambda x: isinstance(x, str),
 		"markdown":markdown,
 		"any":any,
 		"all":all,
@@ -52,8 +54,7 @@ with open(sys.argv[2], "w") as f:
 		"startswith":str.startswith,
 		"tail": lambda x: x[1:],
 		"cull_whitespace":(lambda x: " ".join(x.split())) })
-	for filename in ([sys.argv[1]] if sys.argv[1] != "ALL" else sorted(glob.glob("cards/*.yaml") + glob.glob("cards/*.xml"))):
-		if sys.argv[1] == "ALL": f.write(f"\n\n<h1>{filename}</h1>\n")
+	for n, filename in enumerate([sys.argv[1]] if sys.argv[1] != "ALL" else sorted(glob.glob("cards/*.yaml") + glob.glob("cards/*.xml"))):
 		with open(filename) as f2:
 			if filename.endswith("yaml"):
 				yaml_data = yaml.load(f2.read())
@@ -67,7 +68,10 @@ with open(sys.argv[2], "w") as f:
 		except Exception as ex:
 			data = f"<pre style=\"color:red;\">{ex}</pre>"
 			traceback.print_exc()
-		f.write("\n" + data)
+		if sys.argv[1] == "ALL":
+			f.write(f"\n\n<div id='card_container_{n}'>\n<h1>{filename}</h1>\n\n{data}\n</div>")
+		else:
+			f.write(f"\n<div id='card_container_{n}'>\n{data}\n</div>")
 endef
 
 export PYTHON_MAKE_JINJA2_RENDERED_CARD
diff --git a/style.html.j2 b/style.html.j2
index c56f52c..2a4b981 100644
--- a/style.html.j2
+++ b/style.html.j2
@@ -129,34 +129,7 @@
             }) }}
         {% endif %}
     </figure>
-    <div class="playcosts">
-        <ul>
-            {% if xml.playcost %}
-                {% for playcost in xml.playcost.split(",") %}
-                    <li>{{ playcost }}</li>
-                {% endfor %}
-            {% endif %}
-            {% if yaml.playcost %}
-                {% for playcost in yaml.playcost.split(",") %}
-                    <li>{{ playcost }}</li>
-                {% endfor %}
-            {% endif %}
-            {% for playcost in yaml.playcosts %}
-                    <li>{{ playcost }}</li>
-            {% endfor %}
-        </ul>
-    </div>
     <div class="costbar">
-        {% for cost in yaml.costs %}
-            <section>
-                {% if cost.split(" ") | length == 2 and cost.split(" ")[0] | int(-1) != -1 %}
-                    <big>{{ cost.split(" ")[0] }}</big><br>
-                    <small>{{ cost.split(" ")[1] }}</small>
-                {% else %}
-                    {{ cost }}
-                {% endif %}
-            </section>
-        {% endfor %}
         {% for label, data in [
                 ["Difficulty", xml.difficulty or yaml.difficulty],
                 ["Power",      xml.power      or yaml.power],
@@ -171,15 +144,40 @@
                 </section>
             {% endif %}
         {% endfor %}
+        {% for playcosts in [xml.playcost, yaml.playcost] %}
+            {% if playcosts %}
+                {% for playcost in (playcosts.split(",") if playcosts | is_string else playcosts ) %}
+                    {% if playcost | trim | split(" ") | first | is_number %}
+                        <section>
+                            <big>{{ playcost | trim | split(" ") | first }}</big><br>
+                            <small>{{ playcost | trim | split(" ") | tail | join(" ") }}</small>
+                        </section>
+                    {% endif %}
+                {% endfor %}
+            {% endif %}
+        {% endfor %}
     </div>
     <div class="description">
+        <ul>
+        {% for playcosts in [xml.playcost, yaml.playcost] %}
+            {% if playcosts %}
+                {% for playcost in (playcosts.split(",") if playcosts | is_string else playcosts ) %}
+                    {% if not playcost | trim | split(" ") | first | is_number %}
+                        <li>{{ playcost | trim }}</li>
+                    {% endif %}
+                {% endfor %}
+            {% endif %}
+        {% endfor %}
+        </ul>
+
         {% if yaml.flavor %}
             <center><i>"{{ yaml.flavor }}"</i></center>
         {% endif %}
 
         {% if yaml.description %}
             <center>{{ yaml.description | markdown | safe }}</center>
-        {% elif xml.description %}
+        {% endif %}
+        {% if xml.description %}
             <center>{{ xml.description | markdown | safe }}</center>
         {% endif %}
 
diff --git a/style.js b/style.js
index afb36da..c9cd92a 100644
--- a/style.js
+++ b/style.js
@@ -40,7 +40,16 @@ env.addFilter('startswith', function(string, match) {
 	return string.slice(0, match.length) === match;
 });
 env.addFilter('tail', function(sequence) {
-	return sequence.slice(1)
+	return sequence.slice(1);
+});
+env.addFilter('split', function(string, delimiter) {
+	return string.split(delimiter);
+});
+env.addFilter('is_number', function(string) {
+	return !isNaN(string);
+});
+env.addFilter('is_string', function(string) {
+	return String(string) === string;
 });
 
 try {
diff --git a/style.scss b/style.scss
index 6796ed5..cb6d42b 100644
--- a/style.scss
+++ b/style.scss
@@ -1,5 +1,7 @@
 .fjomp_card {
     --figure-size: 0.9in;
+    --figure-size: 1.35in;
+    --figure-size: 1.5in;
     width: 2.5in;
     height: 3.5in;
     box-sizing: border-box;
@@ -14,13 +16,14 @@
     font-family: sans-serif;
 
     display: grid;
-    grid-template-columns: auto 1fr 0.9in;
+    grid-template-columns: auto 1fr;
     grid-template-rows: 1.9em var(--figure-size) 2.1em auto;
     grid-template-areas:
-        "symbol title title"
-        "figure figure playcosts"
-        "costbar costbar costbar"
-        "description description description";
+        "symbol title"
+        "figure figure"
+        "costbar costbar"
+        "description description";
+
     header {
         grid-area: title;
         font-size: 1.8em;
@@ -134,14 +137,6 @@
 
 
 .fjomp_card.item {
-    --figure-size: 1.35in;
-    --figure-size: 1.5in;
-    grid-template-columns: auto 1fr;
-    grid-template-areas:
-        "symbol title"
-        "figure figure"
-        "costbar costbar"
-        "description description";
     .playcosts {
         display: none;
     }
diff --git a/templates/card_header.html.j2 b/templates/card_header.html.j2
index 2f61b80..c24c2e9 100644
--- a/templates/card_header.html.j2
+++ b/templates/card_header.html.j2
@@ -6,6 +6,25 @@
 <meta http-equiv="refresh" content="1.0">
 <script type="text/javascript" src="http://livejs.com/live.js"></script>
 #}
+<script type="text/javascript">
+
+	var selected = 0;
+	document.onkeydown = function(e) {
+	    if (e.which == 39) {
+			if (document.getElementById("card_container_" + (selected+1))) {
+				selected += 1;
+			}
+			document.getElementById("card_container_" + selected).scrollIntoView();
+		}
+	    if (e.which == 37) {
+			if (selected > 0) {
+				selected -= 1;
+			}
+			document.getElementById("card_container_" + selected).scrollIntoView();
+		}
+	};
+
+</script>
 {% endif %}
 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.13.1/js-yaml.min.js"></script>
diff --git a/test_card.yaml b/test_card.yaml
index 952988a..528687c 100644
--- a/test_card.yaml
+++ b/test_card.yaml
@@ -1,12 +1,9 @@
 name: Hit enemy
 symbol: defence
-style: white item
+#style: item
 tags:
 - combat
-costs:
-- 2 ACT
-- 1 COMBO
-playcosts:
+playcost:
 - 'Element: fire'
 - BODY+5 POWER
 flavor: Enemies sure are squishy