diff --git a/card.py b/card.py
index 32a1df0..3bd1a1d 100644
--- a/card.py
+++ b/card.py
@@ -5,24 +5,49 @@ from common import Model
 import config
 
 class Card(Model):
-    filename = "[[filename_without_file_extention]]"
-    title = "[[title]]"
-    figure = "code"#https://material.io/icons/
-    description = "[[description]]"
+    filename = ""#filename without extentions
+    title = "title"
+    figure = "code"
+    figure_source = "material-icons"
+        #material-icons = https://material.io/icons/
+        #mdi            = https://materialdesignicons.com/
+        #fa             = http://fontawesome.io/icons/
+        #svg            = the svgs/ folder
+    description = ""
     steps = []
     effects = []
     cost = "free action"
     power = None
     cp = None
+    gp = None#gold
     flags = []
+    notes = ""#not shown, but used to keep track of things
+    copies_owned = 1
 
-    def has_flag(self, flag): return flag in self.flags
+    def has_flag(self, flag):
+        return flag.lower() in map(lambda x: x.lower(), self.flags)
+
+#todo: make the relevant ones into coroutines:
 
 def from_file(filename, in_carddir=True):#yaml syntax
+    if filename[-5:] != ".yaml":
+        filename += ".yaml"
     name = ".".join(os.path.basename(filename).split(".")[:-1])
     with open(os.path.join(config.carddir, filename) if in_carddir else filename, "r") as f:
         return from_yaml(f.read(), name)
 
+def to_file(card, in_carddir=True):
+    assert card.filename, "no filename set"
+    filename = card.filename+".yaml"
+    
+    with open(os.path.join(config.carddir, filename) if in_carddir else filename, "w") as f:
+        f.write(to_yaml(card))
+
+def del_file(card, in_carddir=True):
+    assert card.filename, "no filename set"
+    filename = card.filename+".yaml"
+    os.remove(os.path.join(config.carddir, filename) if in_carddir else filename)
+
 def from_yaml(data, filename="from_yaml"):
     card = Card()
     card.filename = filename
@@ -30,5 +55,44 @@ def from_yaml(data, filename="from_yaml"):
         setattr(card, key, val)
     return card
 
+def to_yaml(card):
+    out = {}
+    for key in dir(card):
+        if "_" not in key[0] and key not in ("filename","has_flag"):
+            val = getattr(card, key)
+            if (val or val==0) and val != getattr(Card, key):
+                out[key] = val
+    return dump(out, default_flow_style=False)
+
 def from_dir(path):
     return [from_file(i, in_carddir=False) for i in glob.glob(os.path.join(path, "*.yaml"))]
+
+def from_form(form):
+    card = Card()
+    for key, val in form.items():
+        if not val[0]: continue
+        if key in ("save", "delete"): continue
+        if type(getattr(Card, key)) in (tuple, list):
+            if len(val) == 1 and "\n" in val[0]:
+                val = val[0].strip().replace("\r\n", "\n").split("\n")
+                #val = [i for i in val if i]
+            setattr(card, key, val)
+        else:
+            setattr(card, key, val[0].strip().replace("\r\n", "\n"))
+    return card
+
+def is_filename_vacant(filename, in_carddir=True):
+    if in_carddir:
+        filename = os.path.join(config.carddir, filename)
+    if filename[-5:] != ".yaml":
+        filename += ".yaml"
+    return not os.path.exists(filename)
+
+class open_file:#contextmanager
+    def __init__(self, filename):
+        self.filename = filename
+    def __enter__(self):
+        self.card = from_file(self.filename)
+        return self.card
+    def __exit__(self, *args):
+        to_file(self.card)
diff --git a/resources/cards/card.css b/resources/cards/card.css
index e6a156b..91116df 100644
--- a/resources/cards/card.css
+++ b/resources/cards/card.css
@@ -22,11 +22,11 @@ article {
     margin: 3mm 5mm;
     display: block;
     float: left;
-    width: 5.5cm;
+    width: 5.6cm;
     height: 8.9cm;
 
     display: grid;
-    grid-template-columns: 2fr 1fr;
+    grid-template-columns: 5fr 2fr;
     grid-template-rows: 2em 18mm 1.3em auto 1.5em;
     grid-template-areas:
         "header header"
@@ -36,11 +36,12 @@ article {
         "power cp";
 
     border-radius: 2mm;
-    grid-gap: 2mm 2mm;
+    grid-gap: 1.5mm 1.5mm;
     border-style: solid;
     border-width: 2mm;
     border-color: #333;
     background-color: #333;
+    cursor: pointer;
 }
 article.effects {
     grid-template-columns: 4fr 3fr;
@@ -57,28 +58,40 @@ article >* {
     text-align: center;
     line-height: 1.4em;
     padding: 0 1mm;
+    border-radius: 1mm;
 }
 
 article h1 {
     grid-area: header;
-    font-size: 1em;
     padding: 1mm 0;
-    font-size: 1.1em;
+    font-size: 1.2em;
+    line-height: 1.1em;
     font-weight: 600;
 }
 
 article figure {
     grid-area: figure;
-    background: #333;
+    background: none;
+    overflow: hidden;
 }
 
-article figure img{
-    height: 100%;
-    width: auto;
+article figure * {
+    color: #999;
 }
+article figure img{
+    display: block;
+    height: 97%;
+    margin: auto auto;
+}
+article figure img.svg{
+    filter: invert(1) opacity(0.6);
+}
+article figure .mdi,
+article figure .fa,
 article figure .material-icons.figure {
     font-size: 1.7cm;
-    color: #999;
+    line-height: 1.7cm;
+    
 }
 
 article ul {
@@ -88,14 +101,14 @@ article ul {
 }
 
 article main {
-    padding: 2mm 0;
+    padding: 2mm 1mm;
     grid-area: info;
     position: relative;
 }
 article main ol {
     margin-top: 1mm;
     text-align: left;
-    padding-left: 6mm;
+    padding-left: 5mm;
 }
 article main ol li + li{
     margin-top: 0.5mm;
@@ -107,6 +120,7 @@ article main .bottom {
     width: 100%;
     position: absolute;
     bottom: 2mm;
+    left: 0;
 }
 
 article .power {
@@ -120,7 +134,8 @@ article .power:before{
 article .cost {
     grid-area: cost;
 }
-article .cp {
+article .cp,
+article .gp {
     grid-area: cp;
     text-align: right;
 }
@@ -128,3 +143,7 @@ article .cp:after{
     content: " CP";
     font-size: 0.7em;
 }
+article .gp:after{
+    content: " Gold";
+    font-size: 0.6em;
+}
diff --git a/resources/cards/card.vm b/resources/cards/card.vm
index 5455cd4..7fa31f7 100644
--- a/resources/cards/card.vm
+++ b/resources/cards/card.vm
@@ -1,55 +1,87 @@
 <!DOCTYPE html>
 <link rel="stylesheet" href="card.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
 #foreach($card in $cards)
-    <article #if($card.effects) class="effects"#end>
-        <h1>
-            $escape_html($card.title)
-        </h1>
-        <figure>
+<article #if($card.effects) class="effects"#end onclick="location.href='creator?filename=$escape_html($card.filename)'">
+    <h1>
+        $escape_html($card.title)
+    </h1>
+    <figure>
+        #if($card.figure_source == "material-icons")
             <!--https://material.io/icons/-->
             <i class="material-icons figure">$escape_html($card.figure)</i>
-        </figure>
-        #if($card.effects)
-            <ul>
-                #foreach($item in $card.effects)
+        #elseif($card.figure_source == "mdi")
+            <!--https://materialdesignicons.com/-->
+            <i class="mdi mdi-$escape_html($card.figure)"></i>
+        #elseif($card.figure_source == "fa")
+            <!--http://fontawesome.io/icons/-->
+            <i class="fa fa-$escape_html($card.figure)"></i>
+        #elseif($card.figure_source == "svg")
+            <!--/cards/svg-->
+            <img class="svg" src="/svg/${escape_html($card.figure)}.svg">
+        #end
+    </figure>
+    #if($card.effects)
+        <ul>
+            #foreach($item in $card.effects)
+                #if($item)
                     <li>$escape_html($item)</li>
                 #end
-            </ul>
-        #end
-        <main>
-            $escape_html($card.description)
-            #if($card.steps)
-                <ol>
-                    #foreach($item in $card.steps)
+            #end
+        </ul>
+    #end
+    <main>
+        $escape_html($card.description)
+        #if($card.steps)
+            <ol>
+                #foreach($item in $card.steps)
+                    #if($item)
                         <li>$escape_html($item)</li>
                     #end
-                </ol>
-            #end
-            #if($card.flags)
-                <div class="bottom">
-                    <small>-
-                        #foreach($flag in $card.flags)
-                            $escape_html($flag.capitalize()) -
+                #end
+            </ol>
+        #end
+        #if($card.flags)
+            <div class="bottom">
+                <small>
+                    -
+                    #foreach($flag in $card.flags)
+                        #if(!$flag && $foreach.hasNext)
+                            - <br> -
+                        #else
+                            $escape_html($flag.capitalize())#if($foreach.hasNext), #end
                         #end
-                    </small>
-                    <br>
-                    #if($card.has_flag("mastery"))
-                        <big>
-                            &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
-                            &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
-                        </big>
                     #end
-                </div>
-            #end
-        </main>
-        <div class="cost">$escape_html($card.cost)</div>
-        #if($card.power)
-            <div class="power">$escape_html($card.power)</div>
+                    -
+                </small>
+                <br>
+                #if($card.has_flag("mastery"))
+                    <big>
+                        &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
+                        &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
+                    </big>
+                #end
+            </div>
         #end
-        #if($card.power)
-            <div class="cp">$escape_html($card.cp)</div>
-        #end
-    </article>
+    </main>
+    <div class="cost">$escape_html($card.cost)</div>
+    #if($card.power)
+        <div class="power">$escape_html($card.power)</div>
+    #end
+    #if($card.cp)
+        <div class="cp">$escape_html($card.cp)</div>
+    #elseif($card.gp)
+        <div class="gp">$escape_html($card.gp)</div>
+    #end
+</article>
+#end
+
+#if($was_saved)
+<center style="position: absolute; bottom:0; width: 100%;">The card has been saved</center>
+#end
+#if($was_deleted)
+<center style="position: absolute; bottom:0; width: 100%;">The card has been removed from storage</center>
 #end