diff --git a/Jars/Jars.json b/Jars/Jars.json
index 7d426ff08cd9bd61814349a1f834bf9924243c41..dbc87eaca0c99ba65b0584fbdb487e97235f7ba3 100644
--- a/Jars/Jars.json
+++ b/Jars/Jars.json
@@ -2,16 +2,66 @@
   "svg":"Jars.svg",
   "items": [
   {
-  	"id": "rect_3",
+  	"id": "jar_3_full",
   	"attr": "height",
 
   	"value": "level(j3) * 20"
   },
   {
-  	"id": "rect_5",
+	"id": "jar_3_svg",
+	"attr": "height",
+	"value": "maxf(j3) * 20"
+  },
+  {
+	"id": "jar_3_svg",
+	"attr": "y",
+	"value": "0 -(max({maxf(j3), maxf(j5)}) * 20 - 100)"
+  },
+  {
+	"id": "jar_3_empty",
+	"attr": "height",
+	"value": "maxf(j3) * 20"
+  },
+  {
+	"id": "left_3",
+	"attr": "y2",
+	"value": "maxf(j3) * 20"
+  },
+  {
+	"id": "right_3",
+	"attr": "y2",
+	"value": "maxf(j3) * 20"
+  },
+  {
+  	"id": "jar_5_full",
   	"attr": "height",
 
   	"value": "level(j5) * 20"
+  },
+  {
+	"id": "jar_5_svg",
+	"attr": "height",
+	"value": "maxf(j5) * 20"
+  },
+  {
+	"id": "jar_5_svg",
+	"attr": "y",
+	"value": "0 -(max({maxf(j3), maxf(j5)}) * 20 - 100)"
+  },
+  {
+	"id": "jar_5_empty",
+	"attr": "height",
+	"value": "maxf(j5) * 20"
+  },
+  {
+	"id": "left_5",
+	"attr": "y2",
+	"value": "maxf(j5) * 20"
+  },
+  {
+	"id": "right_5",
+	"attr": "y2",
+	"value": "maxf(j5) * 20"
   }
 ],
   "events": [
diff --git a/Jars/Jars.mch b/Jars/Jars.mch
index e1bca3dc2cb372702811d0e827934a3101321634..c6bb870f748abf1c8eed26ec5d94db35e25c21d0 100644
--- a/Jars/Jars.mch
+++ b/Jars/Jars.mch
@@ -44,5 +44,4 @@ OPERATIONS
                                amount = min({level(j1), maxf(j2)-level(j2)}) THEN
       level := level <+ { j1|-> level(j1)-amount, j2 |-> level(j2)+amount }
    END
-END
-
+END
\ No newline at end of file
diff --git a/Jars/Jars.svg b/Jars/Jars.svg
index 5a6cc18970ca21d8c6713ee0822437137144b071..8062269061579d240d6c68e34888e2e0c2d4f46a 100644
--- a/Jars/Jars.svg
+++ b/Jars/Jars.svg
@@ -1,28 +1,37 @@
 <svg width="360" height="360"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  
 <g id="jar_3" transform="rotate(180 25 100)">
-	<svg width="50" height="60" X="0" y="100"> 
+	<svg id ="jar_3_svg" width="50" height="60" X="0" y="00"> 
 	<g id="leer_3" opacity="1">
-	<rect x="0" y="0" width="50" height="60" style="fill:#DDEEFF"/>
-	<rect id="rect_3" x="0" y="0" width="50" height="60" style="fill:#0000FF"/>
+	<rect id="jar_3_empty" x="0" y="0" width="50" height="60" style="fill:#DDEEFF"/>
+	<rect id="jar_3_full" x="0" y="0" width="50" height="60" style="fill:#267CEB"/>
+	<line id="left_3" x1="50" y1="0" x2="50" y2="60" style="stroke:#000000;stroke-width:4"/>
+	<line id="right_3" x1="0" y1="0" x2="0" y2="60" style="stroke:#000000;stroke-width:4"/>
+	<line x1="50" y1="0" x2="0" y2="0" style="stroke:#000000;stroke-width:4"/>
 	</svg>
 </g>
+
 <g id="jar_5" transform="rotate(180 130 100)">
-	<svg width="50" height="100" X="105" y="100">
-	<g id="leer_5" opacity="1">
-	<rect x="0" y="0" width="50" height="100" style="fill:#DDEEFF"/>
-	<rect id ="rect_5" x="0" y="0" width="50" height="100" style="fill:#0000FF"/>
+	<svg id="jar_5_svg" width="50" height="100" x="105" y="0">
+	<g id="leer_5" opacity="1" >
+	<rect id="jar_5_empty"x="0" y="0" width="50" height="100" style="fill:#DDEEFF"/>
+	<rect id ="jar_5_full" x="0" y="0" width="50" height="100" style="fill:#267CEB"/>
+	<line id="left_5" x1="50" y1="0" x2="50" y2="100" style="stroke:#000000;stroke-width:4"/>
+	<line id="right_5" x1="0" y1="0" x2="0" y2="100" style="stroke:#000000;stroke-width:4"/>
+	<line x1="50" y1="0" x2="0" y2="0" style="stroke:#000000;stroke-width:4"/>
 	</svg>
 </g>
-<circle id="fill_3" cx="25" cy="125" r="15" fill="#7799FF"/>
-<rect id="fill_3_sym" x="20" y="120" width="10" height="12" style="fill:#0000FF"/>
-<circle id="fill_5" cx="130" cy="125" r="15" fill="#7799FF"/>
-<rect id="fill_5_sym"x="125" y="120" width="10" height="12" style="fill:#0000FF"/>
-<circle id="empty_3" cx="25" cy="165" r="15" fill="#7799FF"/>
-<rect id="empty_3_sym" x="20" y="160" width="10" height="12" style="fill:#DDDDFF"/>
-<circle id="empty_5" cx="130" cy="165" r="15" fill="#7799FF"/>
-<rect id="empty_5_sym" x="125" y="160" width="10" height="12" style="fill:#DDDDFF"/>
-<circle id="transfer" cx="77.5" cy="145" r="15" fill="#7799FF"/>
-<polyline id="transfer_sym1" points="70,145 76,141 76,149" fill="#00000"/>  
-<polyline id="transfer_sym2" points="85,145 79,141 79,149" fill="#00000"/>
-<rect id="transfer_sym3" x="76" y="143.5" height="3" width="3"/>
+
+<circle id="fill_3" cx="25" cy="25" r="15" fill="#BBBBBB"/>
+<rect id="fill_3_sym" x="20" y="20" width="10" height="12" style="fill:#267CEB"/>
+<circle id="fill_5" cx="130" cy="25" r="15" fill="#BBBBBB"/>
+<rect id="fill_5_sym"x="125" y="20" width="10" height="12" style="fill:#267CEB"/>
+<circle id="empty_3" cx="25" cy="65" r="15" fill="#BBBBBB"/>
+<rect id="empty_3_sym" x="20" y="60" width="10" height="12" style="fill:#DDEEFF"/>
+<circle id="empty_5" cx="130" cy="65" r="15" fill="#BBBBBB"/>
+<rect id="empty_5_sym" x="125" y="60" width="10" height="12" style="fill:#DDEEFF"/>
+<circle id="transfer" cx="77.5" cy="45" r="15" fill="#BBBBBB"/>
+<polyline id="transfer_sym1" points="70,45 76,41 76,49" fill="#00000"/>  
+<polyline id="transfer_sym2" points="85,45 79,41 79,49" fill="#00000"/>
+<rect id="transfer_sym3" x="76" y="43.5" height="3" width="3"/>