diff --git a/Makefile b/Makefile
index e4b3eb3..f540939 100644
--- a/Makefile
+++ b/Makefile
@@ -11,7 +11,7 @@ dev:
 
 .PHONY: dev_test
 dev_test:
-	git ls-files | entr bash -c "make build/test_card_rendered.html"
+	git ls-files | entr bash -c "make build/test_card.html build/test_card_rendered.html"
 
 .PHONY: clean
 clean:
diff --git a/requirements.txt b/requirements.txt
index f5b26ed..3729bbd 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,3 +2,4 @@ Jinja2
 libsass
 Markdown
 PyYAML
+xmltodict
diff --git a/style.html.j2 b/style.html.j2
index c637131..0563f0f 100644
--- a/style.html.j2
+++ b/style.html.j2
@@ -45,7 +45,7 @@
             {% else %}
                 <img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}">
             {% endif %}
-        {% elif not figure.type %}
+        {% elif figure.type == "url" %}
             {% if figure.color == true %}
                 <img src="{{ figure.name }}" class="colored">
             {% elif figure.color %}
diff --git a/style.js b/style.js
index 7147621..7fed17f 100644
--- a/style.js
+++ b/style.js
@@ -1,9 +1,42 @@
 var md = window.markdownit();
 var context = {
+	'xml' : {},
 	'card' : jsyaml.load(document.getElementById("yaml_data").innerHTML),
 	'alert' : alert,
 };
 
+// read xml data
+var xml_data_items = document.getElementsByClassName("xml_data")
+for (var i=0; i < xml_data_items.length; i++) {
+	var key = xml_data_items[i].id.substr(9);
+	var val = xml_data_items[i].innerHTML;
+	context.xml[key] = val;
+}
+
+function is_set(asd) {
+	return typeof asd === 'undefined' || asd === "XML" || asd.length === 0;
+}
+
+if (!is_set(context.card.title)       && context.xml.name       ) context.card.title       = context.xml.name;
+if (!is_set(context.card.icon)        && context.xml.symbol     ) context.card.icon        = context.xml.symbol;
+if (!is_set(context.card.description) && context.xml.description) context.card.description = context.xml.description;
+if (!is_set(context.card.cp)          && context.xml.cp         ) context.card.cp          = context.xml.cp;
+if (!is_set(context.card.power)       && context.xml.power      ) context.card.power       = context.xml.power;
+if (!is_set(context.card.difficulty)  && context.xml.difficulty ) context.card.difficulty  = context.xml.difficulty;
+if (!is_set(context.card.duration)    && context.xml.duration   ) context.card.duration    = context.xml.duration;
+if (!is_set(context.card.playcost)    && context.xml.playcost   ) context.card.playcost    = context.xml.playcost;
+if (!is_set(context.card.range)       && context.xml.range      ) context.card.range       = context.xml.range;
+if (!is_set(context.card.figures)     && context.xml.image      ) context.card.figures     = [{
+	'name': context.xml.image,
+	'type': "url",
+	'scale': 1.0,
+	'flip_x': false,
+	'flip_y': false,
+	'offset': [0.0, 0.0],
+	'opacity': 1,
+	'rotation': 0,
+}];
+
 var env = new nunjucks.Environment({
 	autoescape: true,
 	trimBlocks: true,
@@ -29,5 +62,5 @@ env.addFilter('all', function(iterable) {
 });
 
 rendered = env.renderString(jinja_template, context);
-console.log(rendered);
+//console.log(rendered);
 document.write(rendered);
diff --git a/style.scss b/style.scss
index 6335e49..4347e12 100644
--- a/style.scss
+++ b/style.scss
@@ -13,7 +13,7 @@
     font-family: sans-serif;
 
     display: grid;
-    grid-template-columns: 5fr 3fr auto;
+    grid-template-columns: 5fr 3fr 2em;
     grid-template-rows: 1.5em var(--figure-size) 2.1em auto;
     grid-template-areas:
         "title title icon"
@@ -26,6 +26,7 @@
         font-size: 1.5em;
         line-height: 1em;
         margin-top: -1mm;
+        margin-right: -1em;
         border-radius: 1mm 1mm 0 0;
         text-align: center;
         background-color: #222;
@@ -34,8 +35,10 @@
     }
     .icon {
         grid-area: icon;
+        text-align: center;
         background-color: #222;
         color: white;
+        white-space: nowrap;
     }
     figure {
         grid-area: figure;
@@ -167,7 +170,7 @@
 .fjomp_card.item {
     --figure-size: 1.35in;
     --figure-size: 1.5in;
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr 2em;
     grid-template-areas:
         "title icon"
         "figure figure"
diff --git a/templates/card.xml.j2 b/templates/card.xml.j2
index aa3dbf9..1047525 100644
--- a/templates/card.xml.j2
+++ b/templates/card.xml.j2
@@ -1,3 +1,19 @@
 <ability_card><yaml_data>
 {{ data.strip() }}
-</yaml_data></ability_card>
+</yaml_data>
+<name>Mega Fireball</name>
+<description>Attack an enemy in range 5.
+
+Roll MAG hit dice. Deal that amount of FIRE damage to the target.</description>
+<image>https://freepngimg.com/download/fireball/27487-2-fireball-clipart.png</image>
+<cp>18</cp>
+<range>4</range>
+<power>MAG + (0 to 2)</power>
+<symbol>🔮🔥⚔️</symbol>
+<difficulty>1</difficulty>
+<duration></duration>
+<playcost>2 ACT,
+Not Silenced,
+3 MP,
+Equipment has Catalyst property</playcost>
+</ability_card>
diff --git a/templates/card_header.html.j2 b/templates/card_header.html.j2
index 82000b9..b48f382 100644
--- a/templates/card_header.html.j2
+++ b/templates/card_header.html.j2
@@ -1,7 +1,8 @@
 {% set async = "media=\"none\" onload=\"if(media!='all')media='all'\"" -%}
 
+
 {% if is_local %}
-<meta http-equiv="refresh" content="0.5">
+<meta http-equiv="refresh" content="1.0">
 {#
 <script type="text/javascript" src="http://livejs.com/live.js"></script>
 #}
diff --git a/templates/style.xsl.j2 b/templates/style.xsl.j2
index ae4c90a..3b2cecc 100644
--- a/templates/style.xsl.j2
+++ b/templates/style.xsl.j2
@@ -34,6 +34,24 @@
 
 {{ newline*2 }}
 
+{# just name all the xml fields of interest here #}
+{% for value in [
+	"name",
+	"description",
+	"image",
+	"cp",
+	"range",
+	"power",
+	"symbol",
+	"difficulty",
+	"duration",
+	"playcost"] %}
+<script type="text/html" class="xml_data" id="xml_data_{{ value }}"><xsl:value-of select="{{ value }}"/></script>
+{{ newline }}
+{% endfor %}
+
+{{ newline*2 }}
+
 <script type="text/javascript">
 var jinja_template =
 {{ jinja_data.strip() | tojson | replace("\\n", "\\n\" +\n\"") }};
@@ -44,8 +62,10 @@ var jinja_template =
 <script type="text/javascript">
 {{ js_data.strip()
 	| replace(">", ">foobarhuehuehue")
+	| replace("&", "&spismegdinnisse")
 	| replace("<", "<xsl:text disable-output-escaping='yes'>&lt;</xsl:text>")
-	| replace(">foobarhuehuehue", "<xsl:text disable-output-escaping='yes'>&gt;</xsl:text>") }}
+	| replace(">foobarhuehuehue", "<xsl:text disable-output-escaping='yes'>&gt;</xsl:text>")
+	| replace("&spismegdinnisse", "<xsl:text disable-output-escaping='yes'>&amp;</xsl:text>") }}
 </script>
 
 {{ newline*2 }}
diff --git a/test_card.yaml b/test_card.yaml
index 37038eb..78bbda9 100644
--- a/test_card.yaml
+++ b/test_card.yaml
@@ -1,4 +1,14 @@
 title: Hit enemy
+icon: defence
+style: white item
+
+cp: XML
+power: XML
+difficulty: XML
+duration: XML
+playcost: XML
+range: XML
+
 tags:
 - combat
 costs: