diff --git a/static/img/crosswalkdiagram.svg b/static/img/crosswalkdiagram.svg
index ea1ceae..b9852d6 100644
--- a/static/img/crosswalkdiagram.svg
+++ b/static/img/crosswalkdiagram.svg
@@ -1,224 +1,68 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="600.26697"
-   height="157.74306"
-   viewBox="0 0 158.82063 41.736184"
-   version="1.1"
-   id="svg1"
-   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
-   sodipodi:docname="crosswalk_diagram.svg"
-   inkscape:export-filename="crosswalk_diagram.png"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="mm"
-     inkscape:zoom="1.1893651"
-     inkscape:cx="319.4982"
-     inkscape:cy="24.382757"
-     inkscape:window-width="1872"
-     inkscape:window-height="1027"
-     inkscape:window-x="58"
-     inkscape:window-y="25"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="layer1"
-     showguides="true" />
-  <defs
-     id="defs1">
-    <marker
-       style="overflow:visible"
-       id="marker19"
-       refX="0"
-       refY="0"
-       orient="auto-start-reverse"
-       inkscape:stockid="Triangle arrow"
-       markerWidth="1"
-       markerHeight="1"
-       viewBox="0 0 1 1"
-       inkscape:isstock="true"
-       inkscape:collect="always"
-       preserveAspectRatio="xMidYMid">
-      <path
-         transform="scale(0.5)"
-         style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
-         d="M 5.77,0 -2.88,5 V -5 Z"
-         id="path19" />
-    </marker>
-    <marker
-       style="overflow:visible"
-       id="Triangle"
-       refX="0"
-       refY="0"
-       orient="auto-start-reverse"
-       inkscape:stockid="Triangle arrow"
-       markerWidth="1"
-       markerHeight="1"
-       viewBox="0 0 1 1"
-       inkscape:isstock="true"
-       inkscape:collect="always"
-       preserveAspectRatio="xMidYMid">
-      <path
-         transform="scale(0.5)"
-         style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
-         d="M 5.77,0 -2.88,5 V -5 Z"
-         id="path135" />
-    </marker>
-  </defs>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-5.0079721,-116.69188)">
-    <rect
-       style="fill:#b3b3b3;stroke:#666666;stroke-width:1.16346;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;stroke-dasharray:none;paint-order:stroke markers fill"
-       id="rect19"
-       width="157.65718"
-       height="40.572723"
-       x="5.5897021"
-       y="117.27361"
-       inkscape:export-filename="codemeta-diagram.png"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <text
-       xml:space="preserve"
-       style="font-weight:900;font-size:4.69698px;line-height:1;font-family:Roboto;-inkscape-font-specification:'Roboto Heavy';letter-spacing:0px;word-spacing:0px;fill:#000000;stroke-width:0.266286;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;paint-order:stroke markers fill"
-       x="15.267297"
-       y="124.45426"
-       id="text2"><tspan
-         sodipodi:role="line"
-         id="tspan2"
-         style="stroke-width:0.266286"
-         x="15.267297"
-         y="124.45426">Metadata_A</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-weight:900;font-size:4.69698px;line-height:1;font-family:Roboto;-inkscape-font-specification:'Roboto Heavy';letter-spacing:0px;word-spacing:0px;fill:#000000;stroke-width:0.266286;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;paint-order:stroke markers fill"
-       x="73.535889"
-       y="124.45426"
-       id="text3"><tspan
-         sodipodi:role="line"
-         id="tspan3"
-         style="stroke-width:0.266286"
-         x="73.535889"
-         y="124.45426">CodeMeta</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-weight:900;font-size:4.69698px;line-height:1;font-family:Roboto;-inkscape-font-specification:'Roboto Heavy';letter-spacing:0px;word-spacing:0px;fill:#000000;stroke-width:0.266286;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;paint-order:stroke markers fill"
-       x="128.18082"
-       y="124.45426"
-       id="text4"><tspan
-         sodipodi:role="line"
-         id="tspan4"
-         style="stroke-width:0.266286"
-         x="128.18082"
-         y="124.45426">Metadata_B</tspan></text>
-    <rect
-       style="fill:#5a2ca0;stroke-width:0.207081;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;paint-order:stroke markers fill"
-       id="rect4"
-       width="37.615723"
-       height="4.4428024"
-       x="9.2465506"
-       y="128.48489" />
-    <rect
-       style="fill:#aa8800;stroke-width:0.20958;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;stroke-dasharray:none;paint-order:stroke markers fill"
-       id="rect6"
-       width="37.615723"
-       height="4.4428024"
-       x="65.610435"
-       y="149.56676" />
-    <rect
-       style="fill:#5a2ca0;stroke-width:0.20958;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;stroke-dasharray:none;paint-order:stroke markers fill"
-       id="rect8"
-       width="37.615723"
-       height="4.4428024"
-       x="65.610435"
-       y="128.48489" />
-    <rect
-       style="fill:#800000;stroke-width:0.20958;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;stroke-dasharray:none;paint-order:stroke markers fill"
-       id="rect9"
-       width="37.615723"
-       height="4.4428024"
-       x="65.610435"
-       y="142.53947" />
-    <rect
-       style="fill:#2c89a0;stroke-width:0.20958;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;stroke-dasharray:none;paint-order:stroke markers fill"
-       id="rect10"
-       width="37.615723"
-       height="4.4428024"
-       x="65.610435"
-       y="135.51218" />
-    <rect
-       style="fill:#5a2ca0;stroke-width:0.207081;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;paint-order:stroke markers fill"
-       id="rect12"
-       width="37.615723"
-       height="4.4428024"
-       x="121.9743"
-       y="128.48489" />
-    <path
-       style="fill:#800080;stroke:#7137c8;stroke-width:0.391441;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;stroke-dasharray:none;marker-start:url(#Triangle);marker-end:url(#marker19);paint-order:stroke markers fill"
-       d="m 104.53802,130.81459 16.12636,-0.0523"
-       id="path15"
-       sodipodi:nodetypes="cc" />
-    <path
-       style="fill:#800080;stroke:#7137c8;stroke-width:0.39088;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;stroke-dasharray:none;marker-start:url(#Triangle);marker-end:url(#marker19);paint-order:stroke markers fill"
-       d="m 48.192552,130.8867 16.131666,0.0113"
-       id="path18"
-       sodipodi:nodetypes="cc" />
-    <rect
-       style="fill:#2c89a0;stroke-width:0.207081;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;paint-order:stroke markers fill"
-       id="rect20"
-       width="37.615723"
-       height="4.4428024"
-       x="121.9743"
-       y="-146.85233"
-       transform="scale(1,-1)" />
-    <rect
-       style="fill:#800000;stroke-width:0.207081;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;paint-order:stroke markers fill"
-       id="rect21"
-       width="37.615723"
-       height="4.4428024"
-       x="9.2465496"
-       y="135.53038" />
-    <path
-       style="fill:#00ff00;stroke:#800000;stroke-width:0.391441;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;stroke-dasharray:none;marker-start:url(#Triangle);marker-end:url(#marker19);paint-order:stroke markers fill"
-       d="m 48.096738,138.24711 16.297801,5.98759"
-       id="path21"
-       sodipodi:nodetypes="cc" />
-    <path
-       style="fill:#2c89a0;stroke:#2c89a0;stroke-width:0.391441;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#Triangle);marker-end:url(#marker19);paint-order:stroke markers fill"
-       d="m 104.48553,137.83425 16.27214,6.24801"
-       id="path22"
-       sodipodi:nodetypes="cc"
-       inkscape:export-filename="crosswalk_diagram.svg"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96" />
-    <rect
-       style="fill:#c87137;stroke-width:0.207081;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;paint-order:stroke markers fill"
-       id="rect1"
-       width="37.615723"
-       height="4.4428024"
-       x="9.2465496"
-       y="142.40953" />
-    <rect
-       style="fill:#7c916f;stroke-width:0.207081;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:19.3;paint-order:stroke markers fill"
-       id="rect2"
-       width="37.615723"
-       height="4.4428024"
-       x="121.9743"
-       y="-139.97318"
-       transform="scale(1,-1)" />
-  </g>
-</svg>
+<svg width="1200" height="550" viewBox="0 0 1200 550" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .bg { fill: #e6e6e6; }
+    .panel { fill: none; stroke: #777; stroke-width: 2; rx: 12; }
+    .title { font: bold 24px sans-serif; fill: #000; }
+    .box { rx: 8; }
+    .text { font: 14px sans-serif; fill: #fff; dominant-baseline: middle; text-anchor: middle; }
+  </style>
+
+  <!-- Full Background -->
+  <rect x="0" y="0" width="1200" height="550" class="bg"/>
+
+  <!-- Left Panel -->
+  <rect x="40" y="40" width="320" height="460" class="panel"/>
+  <text x="200" y="80" class="title" text-anchor="middle">DataCite Terms →</text>
+
+  <rect x="70" y="110" width="260" height="50" fill="#8c3b00" class="box"/>
+  <text x="200" y="135" class="text">creators (exact_match)</text>
+
+  <rect x="70" y="180" width="260" height="50" fill="#5f5f5f" class="box"/>
+  <text x="200" y="205" class="text">Rights (close_match)</text>
+
+  <rect x="70" y="250" width="260" height="50" fill="#f08c28" class="box"/>
+  <text x="200" y="275" class="text">version (exact_match)</text>
+
+
+  <!-- Center Panel -->
+  <rect x="440" y="40" width="320" height="460" class="panel"/>
+  <text x="600" y="80" class="title" text-anchor="middle">CodeMeta Terms</text>
+
+  <rect x="470" y="110" width="260" height="50" fill="#8c3b00" class="box"/>
+  <text x="600" y="135" class="text">author</text>
+
+  <rect x="470" y="170" width="260" height="50" fill="#cc4c02" class="box"/>
+  <text x="600" y="195" class="text">author/name</text>
+
+  <rect x="470" y="230" width="260" height="50" fill="#cc4c02" class="box"/>
+  <text x="600" y="255" class="text">author/identifier</text>
+
+  <rect x="470" y="290" width="260" height="50" fill="#cc4c02" class="box"/>
+  <text x="600" y="315" class="text">author/affiliation/name</text>
+
+  <rect x="470" y="350" width="260" height="50" fill="#5f5f5f" class="box"/>
+  <text x="600" y="375" class="text">licence</text>
+
+  <rect x="470" y="410" width="260" height="50" fill="#f08c28" class="box"/>
+  <text x="600" y="435" class="text">softwareVersion</text>
+
+
+  <!-- Right Panel -->
+  <rect x="840" y="40" width="320" height="460" class="panel"/>
+  <text x="1000" y="80" class="title" text-anchor="middle">← Zenodo Terms</text>
+
+  <rect x="870" y="110" width="260" height="50" fill="#cc4c02" class="box"/>
+  <text x="1000" y="135" class="text">metadata/creators/name (exact_match)</text>
+
+  <rect x="870" y="180" width="260" height="50" fill="#cc4c02" class="box"/>
+  <text x="1000" y="205" class="text">metadata/.../orcid (more_specific_than)</text>
+
+  <rect x="870" y="250" width="260" height="50" fill="#cc4c02" class="box"/>
+  <text x="1000" y="275" class="text">metadata/.../affiliation (exact_match)</text>
+
+  <rect x="870" y="320" width="260" height="50" fill="#5f5f5f" class="box"/>
+  <text x="1000" y="345" class="text">metadata/license/id (exact_match)</text>
+
+  <rect x="870" y="390" width="260" height="50" fill="#f08c28" class="box"/>
+  <text x="1000" y="415" class="text">metadata/version (exact_match)</text>
+</svg>
\ No newline at end of file