diff --git a/assets/cesium_bw2.svg b/assets/cesium_bw2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b7ef7a295978b3842b0726d0bf8b2fef88a03701
--- /dev/null
+++ b/assets/cesium_bw2.svg
@@ -0,0 +1,430 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:bx="https://boxy-svg.com"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="logo-cesium-niveaux-de-gris-1.svg"
+   id="svg57"
+   version="1.1"
+   viewBox="0 0 500 500"
+   height="512px"
+   width="512px"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata63">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs61">
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter2515">
+      <feColorMatrix
+         values="-0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 0 0 0 1 0 "
+         id="feColorMatrix2513"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix2529" />
+      <feColorMatrix
+         id="feColorMatrix2531"
+         values="-0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 0 0 0 1 0 "
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter2519">
+      <feColorMatrix
+         values="-0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 0 0 0 1 0 "
+         id="feColorMatrix2517"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix2533" />
+      <feColorMatrix
+         id="feColorMatrix2535"
+         values="-0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 0 0 0 1 0 "
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter2523">
+      <feColorMatrix
+         values="-0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 0 0 0 1 0 "
+         id="feColorMatrix2521"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix2537" />
+      <feColorMatrix
+         id="feColorMatrix2539"
+         values="-0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 0 0 0 1 0 "
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter2527">
+      <feColorMatrix
+         values="-0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 0 0 0 1 0 "
+         id="feColorMatrix2525"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix2541" />
+      <feColorMatrix
+         id="feColorMatrix2543"
+         values="-0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 -0.32 1.41 0.04 -0.11 0 0 0 0 1 0 "
+         in="fbSourceGraphic" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1360"
+     inkscape:window-height="743"
+     id="namedview59"
+     showgrid="false"
+     inkscape:zoom="0.4609375"
+     inkscape:cx="12.644173"
+     inkscape:cy="265.13276"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg57" />
+  <path
+     d="M 390.992 122.276 C 418.209 157.183 434.924 200.278 441.202 248.24 C 441.187 276.711 435.71 305.292 425.308 333.282 C 371.101 416.727 274.951 449.213 167.669 434.279 C 136.406 416.036 109.009 390.076 86.272 358.016 C 67.778 323.794 57.942 284.4 56.489 242.062 C 62.206 199.766 79.617 161.912 106.301 129.617 C 162.524 85.439 239.03 70.181 321.968 82.52 C 345.508 92.535 368.657 105.883 390.992 122.276 Z"
+     style="fill:rgb(255, 255, 255);filter:url(#filter2515)"
+     bx:origin="0 0"
+     id="path2" />
+  <g
+     transform="matrix(0.517848,0,0,0.517848,-53.306625,-599.93121)"
+     style="opacity:1;filter:url(#filter2519)"
+     id="g26">
+    <g
+       id="g-14"
+       style="display:inline;opacity:0.5"
+       transform="translate(144.57072,1007.0994)">
+      <path
+         style="display:inline;fill:#ffd086;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="M 585.16992,524.91211 C 447.41745,738.84015 285.93093,797.68142 93.347656,801.03711 158.66452,921.84083 287.20038,1003.1698 434.03906,1001.2559 607.56851,998.99446 752.51317,881.18488 796.65234,721.9668 c -2.6864,-6.57764 -6.20106,-13.62037 -10.8164,-21.13477 C 768.68987,677.03878 709.10478,568.47721 585.16992,524.91211 Z"
+         id="path-102"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;fill:#270b0b;fill-opacity:0.99393939;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 586.254,524.115 c -21.572,126.338 -108.28,230.357 -87.67,311.487 26.064,102.597 -79.126,125.913 -164.611,153.74 31.95,8.203 65.502,12.364 100.066,11.914 200.013,-2.607 362.054,-158.72 375.522,-354.817 -16.364,-4.662 -32.136,-11.75 -42.838,-23.693 -32.688,-36.474 -116.606,-76.182 -180.469,-98.631 z"
+         id="path-103"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;fill:#cb8903;fill-opacity:0.99393897;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 586.254,524.115 c -21.572,126.338 -108.28,230.357 -87.67,311.487 26.064,102.597 -79.126,125.913 -164.611,153.74 31.95,8.203 65.502,12.364 100.066,11.914 200.013,-2.607 362.054,-158.72 375.522,-354.817 -16.364,-4.662 -32.136,-11.75 -42.838,-23.693 -32.688,-36.474 -116.606,-76.182 -180.469,-98.631 z"
+         id="path-104"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g-15"
+       style="display:inline;opacity:0.5"
+       transform="translate(144.57072,1007.0994)">
+      <rect
+         x="504.26501"
+         y="500.28699"
+         width="23.492001"
+         height="25.527"
+         style="display:inline;opacity:1;fill:#fabb37;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-105" />
+      <rect
+         x="369.17401"
+         y="415.42899"
+         width="22.384001"
+         height="24.419001"
+         style="display:inline;opacity:1;fill:#ffd086;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-106" />
+      <rect
+         x="418.995"
+         y="433.01901"
+         width="30.524"
+         height="30.524"
+         style="display:inline;opacity:1;fill:#fabb37;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-107" />
+      <rect
+         x="417.34"
+         y="652.55603"
+         width="46.803001"
+         height="46.803001"
+         style="display:inline;opacity:1;fill:#fbc14c;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-108" />
+      <rect
+         x="422.586"
+         y="475.89099"
+         width="30.524"
+         height="30.524"
+         style="display:inline;opacity:1;fill:#fabb37;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-109" />
+      <rect
+         x="472.61801"
+         y="605.45697"
+         width="24.419001"
+         height="26.454"
+         style="display:inline;opacity:1;fill:#cc8902;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-110" />
+      <rect
+         x="520.77197"
+         y="557.90198"
+         width="18.313999"
+         height="18.313999"
+         style="display:inline;opacity:1;fill:#fabb37;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-111" />
+      <rect
+         x="454.784"
+         y="563.02802"
+         width="30.524"
+         height="30.524"
+         style="display:inline;opacity:1;fill:#fabb37;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-112" />
+      <rect
+         x="335.34201"
+         y="720.987"
+         width="38.662998"
+         height="40.698002"
+         style="display:inline;opacity:1;fill:#fbc14c;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-113" />
+      <rect
+         x="371.97"
+         y="661.97498"
+         width="26.454"
+         height="30.524"
+         style="display:inline;opacity:1;fill:#fbc14c;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-114" />
+      <rect
+         x="-427.92999"
+         y="610.08502"
+         width="24.507"
+         height="24.419001"
+         style="display:inline;opacity:1;fill:#cc8902;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-115"
+         transform="scale(-1,1)" />
+      <rect
+         x="480.41101"
+         y="523.46899"
+         width="20.349001"
+         height="22.384001"
+         style="display:inline;opacity:1;fill:#ffd086;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-116" />
+      <rect
+         x="-499.5"
+         y="466.314"
+         width="24.507"
+         height="24.419001"
+         style="display:inline;opacity:1;fill:#cc8902;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
+         id="path-117"
+         transform="scale(-1,1)" />
+    </g>
+    <g
+       id="g-16"
+       style="display:inline;opacity:1"
+       transform="translate(144.57072,1007.0994)">
+      <path
+         style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff7a00;stroke-width:2.34888005;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="M 585.16992,524.91211 C 447.41745,738.84015 285.93093,797.68142 93.347656,801.03711 158.66452,921.84083 287.20038,1003.1698 434.03906,1001.2559 607.56851,998.99446 752.51317,881.18488 796.65234,721.9668 c -2.6864,-6.57764 -6.20106,-13.62037 -10.8164,-21.13477 C 768.68987,677.03878 709.10478,568.47721 585.16992,524.91211 Z"
+         id="path-118"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;fill:none;fill-opacity:0.99393897;fill-rule:evenodd;stroke:#ff7a00;stroke-width:2.34888005;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 586.254,524.115 c -21.572,126.338 -108.28,230.357 -87.67,311.487 26.064,102.597 -79.126,125.913 -164.611,153.74 31.95,8.203 65.502,12.364 100.066,11.914 200.013,-2.607 362.054,-158.72 375.522,-354.817 -16.364,-4.662 -32.136,-11.75 -42.838,-23.693 -32.688,-36.474 -116.606,-76.182 -180.469,-98.631 z"
+         id="path-119"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;fill:none;fill-opacity:0.99393897;fill-rule:evenodd;stroke:#ff7a00;stroke-width:2.34888005;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 586.254,524.115 c -21.572,126.338 -108.28,230.357 -87.67,311.487 26.064,102.597 -79.126,125.913 -164.611,153.74 31.95,8.203 65.502,12.364 100.066,11.914 200.013,-2.607 362.054,-158.72 375.522,-354.817 -16.364,-4.662 -32.136,-11.75 -42.838,-23.693 -32.688,-36.474 -116.606,-76.182 -180.469,-98.631 z"
+         id="path-120"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     transform="matrix(0.608261,0,0,0.608261,-20.084976,3.255736)"
+     id="g53"
+     style="filter:url(#filter2523)">
+    <g
+       id="g43">
+      <path
+         style="display:inline;opacity:0.77999998;fill:#40b2ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="path-10"
+         d="m 419.133,85.738 c -1.838,0.001 -3.678,0.016 -5.522,0.04 C 354.852,86.561 299.023,99.174 248.358,121.32 584.121,13.206 796.175,211.26 831.7,508.773 l 14.683,-1.649 C 815.586,235.801 652.477,85.588 419.133,85.738 Z"
+         transform="rotate(15.478579,547.3704,260.98857)"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;opacity:1;fill:#40b2ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="path-3"
+         d="m 146.037,194.065 c -1.836,0.001 -3.676,0.016 -5.52,0.039 -58.757,0.784 -114.586,13.399 -165.253,35.544 335.765,-108.117 547.819,89.935 583.34,387.445 l 14.68,-1.65 C 542.49,344.122 379.385,193.913 146.037,194.065 Z"
+         transform="rotate(-100.42732,274.27402,369.3121)"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;opacity:0.4;fill:#40b2ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="path-11"
+         d="m 487.744,193.084 c -1.838,0.001 -3.677,0.016 -5.521,0.039 -58.759,0.784 -114.588,13.397 -165.248,35.545 335.751,-108.116 547.8,89.937 583.324,387.441 l 14.68,-1.649 C 884.184,343.144 721.081,192.935 487.744,193.084 Z"
+         transform="matrix(0.619997,0.784605,-0.784605,0.619997,523.06723,-343.33154)"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;opacity:0.83999999;fill:#40b2ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="path-12"
+         d="m 295.969,432.757 c -1.838,10e-4 -3.676,0.016 -5.52,0.04 -58.761,0.783 -114.589,13.397 -165.251,35.544 335.759,-108.115 547.807,89.939 583.328,387.445 l 14.681,-1.647 C 692.412,582.819 529.31,432.609 295.969,432.757 Z"
+         transform="rotate(168.19485,424.20239,608.00613)"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;opacity:0.4;fill:#40b2ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="path-13"
+         d="m 158.036,148.83 c -1.836,0.003 -3.676,0.016 -5.52,0.042 -58.757,0.781 -114.586,13.395 -165.25,35.539 335.756,-108.11 547.81,89.941 583.338,387.446 l 14.682,-1.649 C 554.483,298.891 391.38,148.683 158.036,148.83 Z"
+         transform="matrix(0.338614,-0.940926,0.940926,0.338614,-115.59516,483.70598)"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;opacity:1;fill:#40b2ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="path-14"
+         d="m 501.019,288.292 c -1.838,0.001 -3.679,0.016 -5.523,0.039 -58.76,0.784 -114.588,13.395 -165.253,35.543 335.761,-108.117 547.819,89.938 583.343,387.448 l 14.682,-1.649 C 897.468,438.352 734.361,288.141 501.019,288.292 Z"
+         transform="rotate(80.522748,629.25553,463.53928)"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;opacity:0.4;fill:#40b2ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="path-15"
+         d="m 192.954,376.521 c -1.839,10e-4 -3.677,0.016 -5.521,0.04 -58.759,0.783 -114.588,13.397 -165.252,35.542 335.759,-108.114 547.806,89.942 583.324,387.45 l 14.683,-1.648 C 589.392,526.584 426.295,376.369 192.954,376.521 Z"
+         transform="rotate(-158.65469,321.18448,551.77089)"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;opacity:1;fill:#40b2ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="path-16"
+         d="m 221.614,63.973 c -1.837,0.003 -3.676,0.017 -5.52,0.042 -58.76,0.78 -114.588,13.394 -165.253,35.539 335.757,-108.113 547.81,89.943 583.332,387.447 l 14.681,-1.647 C 618.058,214.037 454.954,63.824 221.614,63.973 Z"
+         transform="rotate(-41.370455,349.84779,239.221)"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <path
+         style="display:inline;opacity:0.4;fill:#40b2ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         id="path-17"
+         d="m 441.888,342.098 c -1.841,0 -3.681,0.016 -5.526,0.04 -58.761,0.784 -114.597,13.397 -165.259,35.543 335.783,-108.114 547.841,89.934 583.359,387.452 l 14.68,-1.65 C 838.354,492.154 675.242,341.948 441.888,342.098 Z"
+         transform="rotate(110.89043,570.12262,517.34992)"
+         bx:origin="0.5 0.5"
+         inkscape:connector-curvature="0" />
+      <g
+         transform="matrix(0.762493,0,0,0.762493,19.294647,-716.32281)"
+         id="g41">
+        <path
+           d="m 566.466,1089.137 v 59.085 c -0.599,0 -1.199,0 -1.799,0 -3.186,0 -6.357,0.042 -9.513,0.124 v -59.204 z m 341.824,388.009 h 48.697 v 11.312 h -48.418 c -0.03,-3.765 -0.122,-7.536 -0.279,-11.312 z m -341.824,357.867 v 41.454 h -11.312 v -41.581 c 3.164,0.087 6.336,0.131 9.513,0.131 0.6,0 1.2,-10e-4 1.799,0 z M 220.775,1488.458 h -51.118 v -11.312 h 51.432 c -0.168,3.763 -0.273,7.534 -0.314,11.312 z"
+           style="fill:#402800;stroke:none"
+           bx:origin="0 0"
+           id="path37"
+           inkscape:connector-curvature="0" />
+        <path
+           d="m 760.121,1143.311 -42.785,74.106 c -1.616,-0.899 -3.24,-1.785 -4.871,-2.656 l 42.853,-74.224 z m 70.001,180.892 70.302,-40.589 2.774,4.803 -70.158,40.506 c -0.96,-1.584 -1.933,-3.157 -2.918,-4.72 z m 10.477,316.934 62.598,36.141 -2.773,4.804 -62.513,-36.092 c 0.91,-1.61 1.806,-3.228 2.688,-4.853 z m -115.431,120.706 34.954,60.542 -4.804,2.773 -34.939,-60.517 c 1.606,-0.919 3.203,-1.852 4.789,-2.798 z m -321.63,-0.911 -37.082,64.227 -4.803,-2.773 37.149,-64.344 c 1.57,0.977 3.149,1.94 4.736,2.89 z m -113.958,-118.243 -68.23,39.393 -2.773,-4.803 68.367,-39.472 c 0.863,1.63 1.741,3.258 2.636,4.882 z m 4.774,-310.521 -75.778,-43.751 2.774,-4.803 75.863,43.8 c -0.967,1.576 -1.92,3.161 -2.859,4.754 z m 111.725,-111.909 -44.426,-76.948 4.804,-2.774 44.432,76.958 c -1.613,0.908 -3.216,1.829 -4.81,2.764 z"
+           style="fill:#402800;stroke:none"
+           bx:origin="0 0"
+           id="path39"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+    <rect
+       x="429.367"
+       y="425.979"
+       width="20.003"
+       height="21.735001"
+       style="display:inline;opacity:1;fill:#5096c8;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607801"
+       id="path-91"
+       transform="matrix(1,0,0,0.999999,-301.37707,-219.49843)" />
+    <rect
+       x="446.853"
+       y="25.462"
+       width="25.99"
+       height="25.99"
+       style="display:inline;opacity:1;fill:#5096c8;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607801"
+       id="path-93" />
+    <rect
+       x="-135.95599"
+       y="605.14099"
+       width="39.851002"
+       height="39.851002"
+       style="display:inline;opacity:1;fill:#5096c8;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607801"
+       id="path-94"
+       transform="matrix(0.999999,0,0,1,846.17676,-394.95602)" />
+    <rect
+       x="225.77901"
+       y="689.836"
+       width="25.99"
+       height="25.99"
+       style="display:inline;opacity:1;fill:#5096c8;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607801"
+       id="path-95" />
+    <rect
+       x="594.013"
+       y="737.14203"
+       width="20.792"
+       height="22.525"
+       style="display:inline;opacity:1;fill:#5096c8;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607801"
+       id="path-96" />
+    <rect
+       x="387.23499"
+       y="479.397"
+       width="25.99"
+       height="25.99"
+       style="display:inline;opacity:1;fill:#5096c8;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607801"
+       id="path-98"
+       transform="matrix(1.000001,0,0,0.999999,365.27497,79.295241)" />
+    <rect
+       x="421.96201"
+       y="775.93701"
+       width="32.919998"
+       height="34.653"
+       style="display:inline;opacity:1;fill:#5096c8;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607801"
+       id="path-99" />
+    <rect
+       x="-66.939003"
+       y="-568.97803"
+       width="20.867001"
+       height="20.792"
+       style="display:inline;opacity:1;fill:#5096c8;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607801"
+       id="path-101"
+       transform="matrix(-1,0,0,0.999997,31.356928,984.73631)" />
+  </g>
+  <path
+     d="m 154.526,230.66 c -5.725,0 -10.247,1.908 -13.564,5.723 -3.314,3.812 -4.97,9.034 -4.97,15.663 0,6.817 1.599,12.084 4.793,15.803 3.196,3.718 7.751,5.577 13.668,5.577 3.633,0 7.779,-0.653 12.439,-1.958 v 5.31 c -3.613,1.355 -8.067,2.03 -13.364,2.03 -7.675,0 -13.599,-2.326 -17.767,-6.981 -4.171,-4.66 -6.259,-11.277 -6.259,-19.855 0,-5.368 1.005,-10.073 3.017,-14.11 2.007,-4.039 4.905,-7.152 8.691,-9.338 3.792,-2.185 8.253,-3.277 13.383,-3.277 5.467,0 10.242,0.996 14.331,2.991 l -2.568,5.201 c -3.945,-1.853 -7.887,-2.779 -11.83,-2.779 z m 38.942,48.148 c -5.776,0 -10.332,-1.757 -13.669,-5.273 -3.337,-3.514 -5.005,-8.398 -5.005,-14.646 0,-6.297 1.548,-11.301 4.646,-15.006 3.102,-3.707 7.267,-5.56 12.493,-5.56 4.896,0 8.768,1.611 11.619,4.831 2.851,3.22 4.276,7.467 4.276,12.741 v 3.741 h -26.903 c 0.118,4.588 1.275,8.068 3.473,10.445 2.198,2.377 5.292,3.565 9.281,3.565 4.206,0 8.365,-0.883 12.476,-2.64 v 5.273 c -2.092,0.904 -4.071,1.553 -5.936,1.946 -1.862,0.39 -4.111,0.583 -6.751,0.583 m -1.607,-35.533 c -3.135,0 -5.634,1.021 -7.499,3.066 -1.865,2.042 -2.965,4.871 -3.297,8.485 h 20.424 c 0,-3.73 -0.832,-6.588 -2.498,-8.57 -1.664,-1.988 -4.039,-2.981 -7.13,-2.981 z m 50.897,24.165 c 0,3.638 -1.356,6.442 -4.063,8.412 -2.709,1.972 -6.511,2.956 -11.406,2.956 -5.179,0 -9.217,-0.818 -12.116,-2.456 v -5.486 c 1.877,0.949 3.89,1.697 6.04,2.244 2.149,0.543 4.221,0.814 6.217,0.814 3.089,0 5.465,-0.493 7.128,-1.477 1.663,-0.985 2.494,-2.488 2.494,-4.508 0,-1.52 -0.66,-2.821 -1.976,-3.904 -1.319,-1.079 -3.891,-2.355 -7.714,-3.826 -3.637,-1.356 -6.221,-2.536 -7.755,-3.547 -1.533,-1.01 -2.672,-2.156 -3.418,-3.443 -0.752,-1.281 -1.125,-2.812 -1.125,-4.598 0,-3.184 1.296,-5.694 3.887,-7.536 2.586,-1.84 6.138,-2.762 10.656,-2.762 4.205,0 8.316,0.856 12.33,2.569 l -2.105,4.809 c -3.917,-1.617 -7.47,-2.426 -10.657,-2.426 -2.802,0 -4.917,0.44 -6.344,1.319 -1.424,0.881 -2.134,2.094 -2.134,3.638 0,1.045 0.266,1.936 0.802,2.67 0.536,0.737 1.396,1.44 2.586,2.104 1.182,0.666 3.463,1.63 6.841,2.889 4.632,1.688 7.759,3.383 9.387,5.091 1.629,1.713 2.445,3.863 2.445,6.454 z m 15.233,10.657 h -5.917 v -39.061 h 5.917 v 39.061 m -6.417,-49.646 c 0,-1.354 0.333,-2.345 0.998,-2.974 0.665,-0.633 1.495,-0.949 2.493,-0.949 0.954,0 1.776,0.323 2.464,0.967 0.689,0.64 1.034,1.626 1.034,2.956 0,1.33 -0.345,2.322 -1.034,2.975 -0.688,0.653 -1.51,0.979 -2.464,0.979 -0.998,0 -1.828,-0.326 -2.493,-0.979 -0.665,-0.653 -0.998,-1.645 -0.998,-2.975 z m 24.359,10.585 v 25.339 c 0,3.183 0.725,5.56 2.176,7.129 1.449,1.569 3.719,2.354 6.809,2.354 4.086,0 7.073,-1.117 8.963,-3.351 1.888,-2.234 2.831,-5.882 2.831,-10.943 v -20.528 h 5.918 v 39.061 h -4.885 l -0.852,-5.236 h -0.323 c -1.211,1.921 -2.891,3.393 -5.041,4.416 -2.149,1.021 -4.603,1.531 -7.36,1.531 -4.752,0 -8.311,-1.126 -10.676,-3.38 -2.363,-2.259 -3.546,-5.872 -3.546,-10.84 v -25.552 z m 88.64,39.061 v -25.412 c 0,-3.112 -0.664,-5.444 -1.995,-7.003 -1.33,-1.556 -3.398,-2.335 -6.204,-2.335 -3.682,0 -6.403,1.059 -8.163,3.175 -1.756,2.114 -2.634,5.369 -2.634,9.764 v 21.811 h -5.917 v -25.412 c 0,-3.112 -0.667,-5.444 -1.996,-7.003 -1.329,-1.556 -3.409,-2.335 -6.235,-2.335 -3.707,0 -6.421,1.111 -8.145,3.334 -1.724,2.222 -2.584,5.865 -2.584,10.925 v 20.491 h -5.919 v -39.061 h 4.812 l 0.961,5.346 h 0.286 c 1.118,-1.903 2.695,-3.385 4.726,-4.452 2.032,-1.07 4.306,-1.607 6.825,-1.607 6.106,0 10.099,2.21 11.976,6.631 h 0.28 c 1.168,-2.045 2.854,-3.66 5.06,-4.848 2.211,-1.188 4.731,-1.783 7.562,-1.783 4.415,0 7.722,1.137 9.92,3.408 2.198,2.266 3.296,5.894 3.296,10.887 v 25.479 z"
+     style="text-transform:none;display:none;opacity:1;isolation:auto;fill:#402800;filter:url(#filter2527)"
+     bx:origin="0.5 0.5"
+     id="path55"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/assets/cesium_small.svg b/assets/cesium_small.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0e6100791928de65413f23fd25557fe9f19c945c
--- /dev/null
+++ b/assets/cesium_small.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" width="30px" height="30px" viewBox="0 0 500 500">
+  <path d="M 390.992 122.276 C 418.209 157.183 434.924 200.278 441.202 248.24 C 441.187 276.711 435.71 305.292 425.308 333.282 C 371.101 416.727 274.951 449.213 167.669 434.279 C 136.406 416.036 109.009 390.076 86.272 358.016 C 67.778 323.794 57.942 284.4 56.489 242.062 C 62.206 199.766 79.617 161.912 106.301 129.617 C 162.524 85.439 239.03 70.181 321.968 82.52 C 345.508 92.535 368.657 105.883 390.992 122.276 Z" style="fill: rgb(255, 255, 255);"/>
+  <g transform="matrix(0.517848, 0, 0, 0.517848, -53.306625, -599.931213)" style="opacity: 1;">
+    <g id="g-14" style="display: inline; opacity: 0.5;" transform="matrix(1, 0, 0, 1, 144.570724, 1007.099426)">
+      <path style="display:inline;fill:#ffd086;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 585.16992,524.91211 C 447.41745,738.84015 285.93093,797.68142 93.347656,801.03711 158.66452,921.84083 287.20038,1003.1698 434.03906,1001.2559 607.56851,998.99446 752.51317,881.18488 796.65234,721.9668 c -2.6864,-6.57764 -6.20106,-13.62037 -10.8164,-21.13477 C 768.68987,677.03878 709.10478,568.47721 585.16992,524.91211 Z" id="path-102"/>
+      <path style="display:inline;fill:#270b0b;fill-opacity:0.99393939;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 586.254 524.115 C 564.682 650.453 477.974 754.472 498.584 835.602 C 524.648 938.199 419.458 961.515 333.973 989.342 C 365.923 997.545 399.475 1001.706 434.039 1001.256 C 634.052 998.649 796.093 842.536 809.561 646.439 C 793.197 641.777 777.425 634.689 766.723 622.746 C 734.035 586.272 650.117 546.564 586.254 524.115 Z" id="path-103"/>
+      <path style="display: inline; fill: rgb(203, 137, 3); fill-opacity: 0.993939; fill-rule: evenodd; stroke: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1;" d="M 586.254 524.115 C 564.682 650.453 477.974 754.472 498.584 835.602 C 524.648 938.199 419.458 961.515 333.973 989.342 C 365.923 997.545 399.475 1001.706 434.039 1001.256 C 634.052 998.649 796.093 842.536 809.561 646.439 C 793.197 641.777 777.425 634.689 766.723 622.746 C 734.035 586.272 650.117 546.564 586.254 524.115 Z" id="path-104"/>
+    </g>
+    <g id="g-15" style="display: inline; opacity: 0.5;" transform="matrix(1, 0, 0, 1, 144.570724, 1007.099426)">
+      <rect x="504.265" y="500.287" width="23.492" height="25.527" style="display:inline;opacity:1;fill:#fabb37;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-105"/>
+      <rect x="369.174" y="415.429" width="22.384" height="24.419" style="display:inline;opacity:1;fill:#ffd086;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-106"/>
+      <rect x="418.995" y="433.019" width="30.524" height="30.524" style="display:inline;opacity:1;fill:#fabb37;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-107"/>
+      <rect x="417.34" y="652.556" width="46.803" height="46.803" style="display:inline;opacity:1;fill:#fbc14c;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-108"/>
+      <rect x="422.586" y="475.891" width="30.524" height="30.524" style="display:inline;opacity:1;fill:#fabb37;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-109"/>
+      <rect x="472.618" y="605.457" width="24.419" height="26.454" style="display:inline;opacity:1;fill:#cc8902;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-110"/>
+      <rect x="520.772" y="557.902" width="18.314" height="18.314" style="display:inline;opacity:1;fill:#fabb37;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-111"/>
+      <rect x="454.784" y="563.028" width="30.524" height="30.524" style="display:inline;opacity:1;fill:#fabb37;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-112"/>
+      <rect x="335.342" y="720.987" width="38.663" height="40.698" style="display:inline;opacity:1;fill:#fbc14c;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-113"/>
+      <rect x="371.97" y="661.975" width="26.454" height="30.524" style="display:inline;opacity:1;fill:#fbc14c;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-114"/>
+      <rect x="-427.93" y="610.085" width="24.507" height="24.419" style="display:inline;opacity:1;fill:#cc8902;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-115" transform="scale(-1,1)"/>
+      <rect x="480.411" y="523.469" width="20.349" height="22.384" style="display:inline;opacity:1;fill:#ffd086;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-116"/>
+      <rect x="-499.5" y="466.314" width="24.507" height="24.419" style="display:inline;opacity:1;fill:#cc8902;fill-opacity:1;stroke:none;stroke-width:34.90000153;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" id="path-117" transform="scale(-1,1)"/>
+    </g>
+    <g id="g-16" style="display: inline; opacity: 1;" transform="matrix(1.0000000700020495, 0, 0, 1.0000000700020495, 144.57072391079612, 1007.0994398715994)">
+      <path style="display: inline; fill: none; fill-opacity: 1; fill-rule: evenodd; stroke: rgb(255, 122, 0); stroke-width: 2.34888; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1;" d="M 585.16992,524.91211 C 447.41745,738.84015 285.93093,797.68142 93.347656,801.03711 158.66452,921.84083 287.20038,1003.1698 434.03906,1001.2559 607.56851,998.99446 752.51317,881.18488 796.65234,721.9668 c -2.6864,-6.57764 -6.20106,-13.62037 -10.8164,-21.13477 C 768.68987,677.03878 709.10478,568.47721 585.16992,524.91211 Z" id="path-118"/>
+      <path style="display: inline; fill: none; fill-opacity: 0.993939; fill-rule: evenodd; stroke: rgb(255, 122, 0); stroke-width: 2.34888; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1;" d="M 586.254 524.115 C 564.682 650.453 477.974 754.472 498.584 835.602 C 524.648 938.199 419.458 961.515 333.973 989.342 C 365.923 997.545 399.475 1001.706 434.039 1001.256 C 634.052 998.649 796.093 842.536 809.561 646.439 C 793.197 641.777 777.425 634.689 766.723 622.746 C 734.035 586.272 650.117 546.564 586.254 524.115 Z" id="path-119"/>
+      <path style="display: inline; fill: none; fill-opacity: 0.993939; fill-rule: evenodd; stroke: rgb(255, 122, 0); stroke-width: 2.34888; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1;" d="M 586.254 524.115 C 564.682 650.453 477.974 754.472 498.584 835.602 C 524.648 938.199 419.458 961.515 333.973 989.342 C 365.923 997.545 399.475 1001.706 434.039 1001.256 C 634.052 998.649 796.093 842.536 809.561 646.439 C 793.197 641.777 777.425 634.689 766.723 622.746 C 734.035 586.272 650.117 546.564 586.254 524.115 Z" id="path-120"/>
+    </g>
+  </g>
+  <g transform="matrix(0.608261, 0, 0, 0.608261, -20.084976, 3.255736)">
+    <g>
+      <path style="display: inline; fill: rgb(64, 178, 255); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; opacity: 0.78;" id="path-10" d="M 419.133 85.738 C 417.295 85.739 415.455 85.754 413.611 85.778 C 354.852 86.561 299.023 99.174 248.358 121.32 C 584.121 13.206 796.175 211.26 831.7 508.773 L 846.383 507.124 C 815.586 235.801 652.477 85.588 419.133 85.738 Z" transform="matrix(0.96373, 0.266878, -0.266878, 0.96373, 89.505231, -136.615061)"/>
+      <path style="display: inline; fill: rgb(64, 178, 255); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; opacity: 1;" id="path-3" d="M 146.037 194.065 C 144.201 194.066 142.361 194.081 140.517 194.104 C 81.76 194.888 25.931 207.503 -24.736 229.648 C 311.029 121.531 523.083 319.583 558.604 617.093 L 573.284 615.443 C 542.49 344.122 379.385 193.913 146.037 194.065 Z" transform="matrix(-0.180988, -0.983485, 0.983485, -0.180988, -39.298581, 705.897544)"/>
+      <path style="display: inline; fill: rgb(64, 178, 255); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; opacity: 0.4;" id="path-11" d="M 487.744 193.084 C 485.906 193.085 484.067 193.1 482.223 193.123 C 423.464 193.907 367.635 206.52 316.975 228.668 C 652.726 120.552 864.775 318.605 900.299 616.109 L 914.979 614.46 C 884.184 343.144 721.081 192.935 487.744 193.084 Z" transform="matrix(0.619997, 0.784605, -0.784605, 0.619997, 523.067231, -343.331539)"/>
+      <path style="display: inline; fill: rgb(64, 178, 255); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; opacity: 0.84;" id="path-12" d="M 295.969 432.757 C 294.131 432.758 292.293 432.773 290.449 432.797 C 231.688 433.58 175.86 446.194 125.198 468.341 C 460.957 360.226 673.005 558.28 708.526 855.786 L 723.207 854.139 C 692.412 582.819 529.31 432.609 295.969 432.757 Z" transform="matrix(-0.978849, 0.204584, -0.204584, -0.978849, 963.820796, 1116.367293)"/>
+      <path style="display: inline; fill: rgb(64, 178, 255); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; opacity: 0.4;" id="path-13" d="M 158.036 148.83 C 156.2 148.833 154.36 148.846 152.516 148.872 C 93.759 149.653 37.93 162.267 -12.734 184.411 C 323.022 76.301 535.076 274.352 570.604 571.857 L 585.286 570.208 C 554.483 298.891 391.38 148.683 158.036 148.83 Z" transform="matrix(0.338614, -0.940926, 0.940926, 0.338614, -115.595158, 483.705984)"/>
+      <path style="display: inline; fill: rgb(64, 178, 255); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; opacity: 1;" id="path-14" d="M 501.019 288.292 C 499.181 288.293 497.34 288.308 495.496 288.331 C 436.736 289.115 380.908 301.726 330.243 323.874 C 666.004 215.757 878.062 413.812 913.586 711.322 L 928.268 709.673 C 897.468 438.352 734.361 288.141 501.019 288.292 Z" transform="matrix(0.164656, 0.986351, -0.986351, 0.164656, 982.857266, -233.452063)"/>
+      <path style="display: inline; fill: rgb(64, 178, 255); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; opacity: 0.4;" id="path-15" d="M 192.954 376.521 C 191.115 376.522 189.277 376.537 187.433 376.561 C 128.674 377.344 72.845 389.958 22.181 412.103 C 357.94 303.989 569.987 502.045 605.505 799.553 L 620.188 797.905 C 589.392 526.584 426.295 376.369 192.954 376.521 Z" transform="matrix(-0.931404, -0.363988, 0.363988, -0.931404, 419.499006, 1182.599809)"/>
+      <path style="display: inline; fill: rgb(64, 178, 255); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; opacity: 1;" id="path-16" d="M 221.614 63.973 C 219.777 63.976 217.938 63.99 216.094 64.015 C 157.334 64.795 101.506 77.409 50.841 99.554 C 386.598 -8.559 598.651 189.497 634.173 487.001 L 648.854 485.354 C 618.058 214.037 454.954 63.824 221.614 63.973 Z" transform="matrix(0.750452, -0.660925, 0.660925, 0.750452, -70.803322, 290.920273)"/>
+      <path style="display: inline; fill: rgb(64, 178, 255); fill-opacity: 1; fill-rule: evenodd; stroke: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; opacity: 0.4;" id="path-17" d="M 441.888 342.098 C 440.047 342.098 438.207 342.114 436.362 342.138 C 377.601 342.922 321.765 355.535 271.103 377.681 C 606.886 269.567 818.944 467.615 854.462 765.133 L 869.142 763.483 C 838.354 492.154 675.242 341.948 441.888 342.098 Z" transform="matrix(-0.356582, 0.934264, -0.934264, -0.356582, 1256.759493, 169.182552)"/>
+      <g transform="matrix(0.762493, 0, 0, 0.762493, 19.294647, -716.322815)">
+        <path d="M 566.466 1089.137 L 566.466 1148.222 C 565.867 1148.219 565.267 1148.217 564.667 1148.217 C 561.481 1148.217 558.31 1148.259 555.154 1148.341 L 555.154 1089.137 Z M 908.29 1477.146 L 956.987 1477.146 L 956.987 1488.458 L 908.569 1488.458 C 908.539 1484.693 908.447 1480.922 908.29 1477.146 Z M 566.466 1835.013 L 566.466 1876.467 L 555.154 1876.467 L 555.154 1834.886 C 558.318 1834.973 561.49 1835.017 564.667 1835.017 C 565.267 1835.017 565.867 1835.016 566.466 1835.013 Z M 220.775 1488.458 L 169.657 1488.458 L 169.657 1477.146 L 221.089 1477.146 C 220.921 1480.909 220.816 1484.68 220.775 1488.458 Z" style="fill: rgb(64, 40, 0); stroke: rgb(64, 40, 0); stroke-width: 10.7806;"/>
+        <path d="M 760.121 1143.311 L 717.336 1217.417 C 715.72 1216.518 714.096 1215.632 712.465 1214.761 L 755.318 1140.537 Z M 830.122 1324.203 L 900.424 1283.614 L 903.198 1288.417 L 833.04 1328.923 C 832.08 1327.339 831.107 1325.766 830.122 1324.203 Z M 840.599 1641.137 L 903.197 1677.278 L 900.424 1682.082 L 837.911 1645.99 C 838.821 1644.38 839.717 1642.762 840.599 1641.137 Z M 725.168 1761.843 L 760.122 1822.385 L 755.318 1825.158 L 720.379 1764.641 C 721.985 1763.722 723.582 1762.789 725.168 1761.843 Z M 403.538 1760.932 L 366.456 1825.159 L 361.653 1822.386 L 398.802 1758.042 C 400.372 1759.019 401.951 1759.982 403.538 1760.932 Z M 289.58 1642.689 L 221.35 1682.082 L 218.577 1677.279 L 286.944 1637.807 C 287.807 1639.437 288.685 1641.065 289.58 1642.689 Z M 294.354 1332.168 L 218.576 1288.417 L 221.35 1283.614 L 297.213 1327.414 C 296.246 1328.99 295.293 1330.575 294.354 1332.168 Z M 406.079 1220.259 L 361.653 1143.311 L 366.457 1140.537 L 410.889 1217.495 C 409.276 1218.403 407.673 1219.324 406.079 1220.259 Z" style="fill: rgb(64, 40, 0); stroke: rgb(64, 40, 0); stroke-width: 10.7806;"/>
+      </g>
+    </g>
+    <rect x="429.367" y="425.979" width="20.003" height="21.735" style="display: inline; opacity: 1; fill: rgb(80, 150, 200); fill-opacity: 1; stroke: none; stroke-width: 34.9; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0.996078;" id="path-91" transform="matrix(1, 0, 0, 0.999999, -301.377075, -219.498434)"/>
+    <rect x="446.853" y="25.462" width="25.99" height="25.99" style="display: inline; opacity: 1; fill: rgb(80, 150, 200); fill-opacity: 1; stroke: none; stroke-width: 34.9; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0.996078;" id="path-93"/>
+    <rect x="-135.956" y="605.141" width="39.851" height="39.851" style="display: inline; opacity: 1; fill: rgb(80, 150, 200); fill-opacity: 1; stroke: none; stroke-width: 34.9; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0.996078;" id="path-94" transform="matrix(0.999999, 0, 0, 1, 846.176756, -394.956024)"/>
+    <rect x="225.779" y="689.836" width="25.99" height="25.99" style="display: inline; opacity: 1; fill: rgb(80, 150, 200); fill-opacity: 1; stroke: none; stroke-width: 34.9; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0.996078;" id="path-95"/>
+    <rect x="594.013" y="737.142" width="20.792" height="22.525" style="display: inline; opacity: 1; fill: rgb(80, 150, 200); fill-opacity: 1; stroke: none; stroke-width: 34.9; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0.996078;" id="path-96"/>
+    <rect x="387.235" y="479.397" width="25.99" height="25.99" style="display: inline; opacity: 1; fill: rgb(80, 150, 200); fill-opacity: 1; stroke: none; stroke-width: 34.9; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0.996078;" id="path-98" transform="matrix(1.000001, 0, 0, 0.999999, 365.274966, 79.295241)"/>
+    <rect x="421.962" y="775.937" width="32.92" height="34.653" style="display: inline; opacity: 1; fill: rgb(80, 150, 200); fill-opacity: 1; stroke: none; stroke-width: 34.9; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0.996078;" id="path-99"/>
+    <rect x="-66.939" y="-568.978" width="20.867" height="20.792" style="display: inline; opacity: 1; fill: rgb(80, 150, 200); fill-opacity: 1; stroke: none; stroke-width: 34.9; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0.996078;" id="path-101" transform="matrix(-1, 0, 0, 0.999997, 31.356928, 984.736306)"/>
+  </g>
+  <path d="M 213.903 186.772 C 195.856 186.772 181.61 192.782 171.163 204.802 C 160.723 216.815 155.503 233.269 155.503 254.162 C 155.503 275.649 160.536 292.249 170.603 303.962 C 180.676 315.682 195.033 321.542 213.673 321.542 C 225.126 321.542 238.193 319.482 252.873 315.362 L 252.873 332.092 C 241.493 336.365 227.453 338.502 210.753 338.502 C 186.573 338.502 167.913 331.162 154.773 316.482 C 141.633 301.809 135.063 280.959 135.063 253.932 C 135.063 237.012 138.226 222.189 144.553 209.462 C 150.88 196.735 160.013 186.925 171.953 180.032 C 183.893 173.145 197.95 169.702 214.123 169.702 C 231.343 169.702 246.393 172.849 259.273 179.142 L 251.183 195.532 C 238.756 189.692 226.33 186.772 213.903 186.772 Z M 365.156 302.672 C 365.156 314.125 360.886 322.959 352.346 329.172 C 343.812 335.392 331.832 338.502 316.406 338.502 C 300.086 338.502 287.359 335.919 278.226 330.752 L 278.226 313.452 C 284.139 316.445 290.486 318.805 297.266 320.532 C 304.039 322.252 310.569 323.112 316.856 323.112 C 326.589 323.112 334.076 321.559 339.316 318.452 C 344.562 315.345 347.186 310.609 347.186 304.242 C 347.186 299.455 345.106 295.359 340.946 291.952 C 336.792 288.545 328.689 284.519 316.636 279.872 C 305.182 275.605 297.039 271.882 292.206 268.702 C 287.379 265.522 283.786 261.909 281.426 257.862 C 279.066 253.822 277.886 248.992 277.886 243.372 C 277.886 233.345 281.969 225.429 290.136 219.622 C 298.296 213.822 309.486 210.922 323.706 210.922 C 336.959 210.922 349.912 213.615 362.566 219.002 L 355.946 234.172 C 343.592 229.079 332.399 226.532 322.366 226.532 C 313.532 226.532 306.869 227.915 302.376 230.682 C 297.882 233.455 295.636 237.275 295.636 242.142 C 295.636 245.435 296.479 248.242 298.166 250.562 C 299.846 252.882 302.559 255.092 306.306 257.192 C 310.046 259.285 317.232 262.315 327.866 266.282 C 342.466 271.602 352.329 276.955 357.456 282.342 C 362.589 287.735 365.156 294.512 365.156 302.672 Z" style="fill: rgb(64, 40, 0);"/>
+</svg>
diff --git a/assets/onBoarding/cesium.png b/assets/onBoarding/cesium.png
new file mode 100755
index 0000000000000000000000000000000000000000..56a8b897e4ed210725e11735fcd6fdb8c7b9d331
Binary files /dev/null and b/assets/onBoarding/cesium.png differ
diff --git a/assets/onBoarding/chopp-gecko.png b/assets/onBoarding/chopp-gecko.png
new file mode 100755
index 0000000000000000000000000000000000000000..5023a03c3805b13d56f7e8c9df09be65323668c8
Binary files /dev/null and b/assets/onBoarding/chopp-gecko.png differ
diff --git a/assets/onBoarding/gecko-clin.gif b/assets/onBoarding/gecko-clin.gif
new file mode 100644
index 0000000000000000000000000000000000000000..43939dcd108221bf67e2c996b2f6b8640ec7d534
Binary files /dev/null and b/assets/onBoarding/gecko-clin.gif differ
diff --git a/assets/onBoarding/gecko_bar.png b/assets/onBoarding/gecko_bar.png
new file mode 100755
index 0000000000000000000000000000000000000000..3133f9f64a7af96e0a8561debf9d6e454173ce0b
Binary files /dev/null and b/assets/onBoarding/gecko_bar.png differ
diff --git a/assets/onBoarding/good-bad-passphrase.png b/assets/onBoarding/good-bad-passphrase.png
new file mode 100755
index 0000000000000000000000000000000000000000..edbda62ec80d1b6360b4f101d47a708114cb1271
Binary files /dev/null and b/assets/onBoarding/good-bad-passphrase.png differ
diff --git a/assets/onBoarding/keys-and-wallets-horizontal-plus-phrase.png b/assets/onBoarding/keys-and-wallets-horizontal-plus-phrase.png
new file mode 100755
index 0000000000000000000000000000000000000000..eea3e82ef4ba3916da61c01a411a56361a2fdd0f
Binary files /dev/null and b/assets/onBoarding/keys-and-wallets-horizontal-plus-phrase.png differ
diff --git a/assets/onBoarding/keys-and-wallets-horizontal.png b/assets/onBoarding/keys-and-wallets-horizontal.png
new file mode 100755
index 0000000000000000000000000000000000000000..e94e57dbabb8883d7c9b7ee0c49c49274ea91f14
Binary files /dev/null and b/assets/onBoarding/keys-and-wallets-horizontal.png differ
diff --git a/assets/onBoarding/keys.png b/assets/onBoarding/keys.png
new file mode 100755
index 0000000000000000000000000000000000000000..36362a0ae608929fcd21072b8430deb31c5f3471
Binary files /dev/null and b/assets/onBoarding/keys.png differ
diff --git a/assets/onBoarding/maison-qui-brule.png b/assets/onBoarding/maison-qui-brule.png
new file mode 100755
index 0000000000000000000000000000000000000000..4e6b9ed7ca54444c2fbdcb2be87053a73c279728
Binary files /dev/null and b/assets/onBoarding/maison-qui-brule.png differ
diff --git a/assets/onBoarding/phrase_de_restauration_flou.png b/assets/onBoarding/phrase_de_restauration_flou.png
new file mode 100755
index 0000000000000000000000000000000000000000..bc69307785bc586a842af1aa2e357dbffabf9035
Binary files /dev/null and b/assets/onBoarding/phrase_de_restauration_flou.png differ
diff --git a/assets/onBoarding/phrase_flou.png b/assets/onBoarding/phrase_flou.png
new file mode 100755
index 0000000000000000000000000000000000000000..ebf7b899f969f28d7a0ef1af89eacc50a3423d2a
Binary files /dev/null and b/assets/onBoarding/phrase_flou.png differ
diff --git a/assets/onBoarding/plusieurs-appareils-un-trousseau.png b/assets/onBoarding/plusieurs-appareils-un-trousseau.png
new file mode 100755
index 0000000000000000000000000000000000000000..be1de87e36115bed493b5dbaf77d8e1717da1c0b
Binary files /dev/null and b/assets/onBoarding/plusieurs-appareils-un-trousseau.png differ
diff --git a/assets/onBoarding/plusieurs-codes-secrets-un-trousseau.png b/assets/onBoarding/plusieurs-codes-secrets-un-trousseau.png
new file mode 100755
index 0000000000000000000000000000000000000000..363595d939b96d94953a82c34dc0cf04861b1efd
Binary files /dev/null and b/assets/onBoarding/plusieurs-codes-secrets-un-trousseau.png differ
diff --git a/assets/onBoarding/progress_bar/1.png b/assets/onBoarding/progress_bar/1.png
new file mode 100755
index 0000000000000000000000000000000000000000..9b9d514adaeacec0463d2359a34e0ad8b453ec36
Binary files /dev/null and b/assets/onBoarding/progress_bar/1.png differ
diff --git a/assets/onBoarding/progress_bar/10.png b/assets/onBoarding/progress_bar/10.png
new file mode 100755
index 0000000000000000000000000000000000000000..3ff7080e2e8e1206cad001896199f1de064f38f4
Binary files /dev/null and b/assets/onBoarding/progress_bar/10.png differ
diff --git a/assets/onBoarding/progress_bar/11.png b/assets/onBoarding/progress_bar/11.png
new file mode 100755
index 0000000000000000000000000000000000000000..961f4c33e49cdc60947443509b45279bf8f1a064
Binary files /dev/null and b/assets/onBoarding/progress_bar/11.png differ
diff --git a/assets/onBoarding/progress_bar/12.png b/assets/onBoarding/progress_bar/12.png
new file mode 100755
index 0000000000000000000000000000000000000000..bd4e93b04e19cadc244f41a8a643198cdde97ddc
Binary files /dev/null and b/assets/onBoarding/progress_bar/12.png differ
diff --git a/assets/onBoarding/progress_bar/2.png b/assets/onBoarding/progress_bar/2.png
new file mode 100755
index 0000000000000000000000000000000000000000..3407586058c3c64c48b56fdc0dc8f60f674f5123
Binary files /dev/null and b/assets/onBoarding/progress_bar/2.png differ
diff --git a/assets/onBoarding/progress_bar/3.png b/assets/onBoarding/progress_bar/3.png
new file mode 100755
index 0000000000000000000000000000000000000000..3c9ec151bce75e744795c01c26b0eca192b96bd7
Binary files /dev/null and b/assets/onBoarding/progress_bar/3.png differ
diff --git a/assets/onBoarding/progress_bar/4.png b/assets/onBoarding/progress_bar/4.png
new file mode 100755
index 0000000000000000000000000000000000000000..d61c44247dfafae4833d0f1d621c2c398cce31aa
Binary files /dev/null and b/assets/onBoarding/progress_bar/4.png differ
diff --git a/assets/onBoarding/progress_bar/5.png b/assets/onBoarding/progress_bar/5.png
new file mode 100755
index 0000000000000000000000000000000000000000..420e5461d1da6a143518455f2d4762244fe0d4b0
Binary files /dev/null and b/assets/onBoarding/progress_bar/5.png differ
diff --git a/assets/onBoarding/progress_bar/6.png b/assets/onBoarding/progress_bar/6.png
new file mode 100755
index 0000000000000000000000000000000000000000..b1bf527179c07568ba8cc92f509f27f9146e6e51
Binary files /dev/null and b/assets/onBoarding/progress_bar/6.png differ
diff --git a/assets/onBoarding/progress_bar/7.png b/assets/onBoarding/progress_bar/7.png
new file mode 100755
index 0000000000000000000000000000000000000000..72dc7b12928fac49f29a4534ad6d80f2b913df92
Binary files /dev/null and b/assets/onBoarding/progress_bar/7.png differ
diff --git a/assets/onBoarding/progress_bar/8.png b/assets/onBoarding/progress_bar/8.png
new file mode 100755
index 0000000000000000000000000000000000000000..fb40c23c9943edc61e5de8e313b5b12c826e2735
Binary files /dev/null and b/assets/onBoarding/progress_bar/8.png differ
diff --git a/assets/onBoarding/progress_bar/9.png b/assets/onBoarding/progress_bar/9.png
new file mode 100755
index 0000000000000000000000000000000000000000..adfdbdba74e3360666eb5f7efb6be5e966d8f762
Binary files /dev/null and b/assets/onBoarding/progress_bar/9.png differ
diff --git a/assets/onBoarding/progress_bar/total.png b/assets/onBoarding/progress_bar/total.png
new file mode 100755
index 0000000000000000000000000000000000000000..3fb1b08771b48229ddf87c5b82bc8494988758da
Binary files /dev/null and b/assets/onBoarding/progress_bar/total.png differ
diff --git a/assets/onBoarding/treasure-chest-gecko-souligne.png b/assets/onBoarding/treasure-chest-gecko-souligne.png
new file mode 100755
index 0000000000000000000000000000000000000000..50ac1fb947a5bef244647dc7ebec5898260e9bcb
Binary files /dev/null and b/assets/onBoarding/treasure-chest-gecko-souligne.png differ
diff --git a/assets/onBoarding/wallet.png b/assets/onBoarding/wallet.png
new file mode 100755
index 0000000000000000000000000000000000000000..eb054f2b1ed14fd57a5cf6a08e05948d71091c5c
Binary files /dev/null and b/assets/onBoarding/wallet.png differ
diff --git a/assets/printer.png b/assets/printer.png
new file mode 100755
index 0000000000000000000000000000000000000000..ced5f5d0576f3f152f291dd4fb721220161033c0
Binary files /dev/null and b/assets/printer.png differ
diff --git a/lib/globals.dart b/lib/globals.dart
index a248f6cccf23343e58619e83f6c0b188a615b928..78a6a021757004bf4aa3614a920164c89772fb97 100644
--- a/lib/globals.dart
+++ b/lib/globals.dart
@@ -7,3 +7,7 @@ String appVersion;
 SharedPreferences prefs;
 String endPointGVA;
 int ramSys;
+
+// Responsive ratios
+bool isTall;
+double ratio;
diff --git a/lib/main.dart b/lib/main.dart
index 0b3fdc6c70299a4ed93120e6c5a1d82520d36ab1..0bc8c087e4c336a303265ea62b9448889f65ca17 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'package:flutter/services.dart';
 import 'package:gecko/globals.dart';
 import 'package:gecko/models/cesiumPlus.dart';
 import 'package:gecko/models/changePin.dart';
@@ -10,9 +11,11 @@ import 'package:gecko/models/walletOptions.dart';
 import 'package:gecko/screens/home.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:gecko/screens/myWallets/walletsHome.dart';
 import 'package:graphql_flutter/graphql_flutter.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter/foundation.dart';
+import 'package:responsive_framework/responsive_framework.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:sentry_flutter/sentry_flutter.dart';
 import 'package:catcher/catcher.dart';
@@ -75,6 +78,7 @@ class Gecko extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     final _httpLink = HttpLink(
       randomEndpoint,
     );
@@ -100,21 +104,37 @@ class Gecko extends StatelessWidget {
           ChangeNotifierProvider(create: (_) => CesiumPlusProvider())
         ],
         child: GraphQLProvider(
-            client: _client,
-            child: MaterialApp(
-              navigatorKey: Catcher.navigatorKey,
-              title: 'Äžecko',
-              theme: ThemeData(
-                primaryColor: Color(0xffFFD58D),
-                accentColor: Colors.grey[850],
-                textTheme: TextTheme(
-                  bodyText1: TextStyle(),
-                  bodyText2: TextStyle(),
-                ).apply(
-                  bodyColor: Color(0xff855F2D),
-                ),
+          client: _client,
+          child: MaterialApp(
+            builder: (context, widget) => ResponsiveWrapper.builder(
+                BouncingScrollWrapper.builder(context, widget),
+                maxWidth: 1200,
+                minWidth: 480,
+                defaultScale: true,
+                breakpoints: [
+                  ResponsiveBreakpoint.resize(480, name: MOBILE),
+                  ResponsiveBreakpoint.autoScale(800, name: TABLET),
+                  ResponsiveBreakpoint.resize(1000, name: DESKTOP),
+                ],
+                background: Container(color: Color(0xFFF5F5F5))),
+            navigatorKey: Catcher.navigatorKey,
+            title: 'Äžecko',
+            theme: ThemeData(
+              primaryColor: Color(0xffFFD58D),
+              accentColor: Colors.grey[850],
+              textTheme: TextTheme(
+                bodyText1: TextStyle(),
+                bodyText2: TextStyle(),
+              ).apply(
+                bodyColor: Color(0xff855F2D),
               ),
-              home: HomeScreen(),
-            )));
+            ),
+            home: HomeScreen(),
+            initialRoute: "/",
+            routes: {
+              '/mywallets': (context) => WalletsHome(),
+            },
+          ),
+        ));
   }
 }
diff --git a/lib/models/generateWallets.dart b/lib/models/generateWallets.dart
index c7b7281d909a799356155d8e012948864e843fe5..6629b21e59f34d106ed49b3615b2a8682ac99eda 100644
--- a/lib/models/generateWallets.dart
+++ b/lib/models/generateWallets.dart
@@ -22,6 +22,7 @@ class GenerateWalletsProvider with ChangeNotifier {
   bool isAskedWordValid = false;
 
   int nbrWord;
+  String nbrWordAlpha;
 
   String generatedMnemonic;
   bool walletIsGenerated = true;
@@ -46,6 +47,7 @@ class GenerateWalletsProvider with ChangeNotifier {
     } else {
       nbrWallet = 1;
     }
+
     Directory walletNbrDirectory;
     do {
       nbrWallet++;
@@ -69,7 +71,9 @@ class GenerateWalletsProvider with ChangeNotifier {
 
       await configFile
           .writeAsString('$nbrWallet:$_name:$_derivationNbr:$_pubkey');
-      Navigator.pop(context, true);
+      print('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
+      print('${wallet.pin} : $_name : $isHD');
+      // Navigator.pop(context, true);
     } else {
       final int _derivationNbr = -1;
       String _pubkey = await DubpRust.getDewifPublicKey(
@@ -80,10 +84,7 @@ class GenerateWalletsProvider with ChangeNotifier {
           .writeAsString('$nbrWallet:$_name:$_derivationNbr:$_pubkey');
     }
 
-    print('CODE PIN :::');
-    print(wallet.pin);
-
-    Navigator.pop(context, true);
+    // Navigator.pop(context, true);
 
     return _name;
   }
@@ -113,7 +114,7 @@ class GenerateWalletsProvider with ChangeNotifier {
       print('Word is OK');
       isAskedWordValid = true;
       askedWordColor = Colors.green[600];
-      walletNameFocus.nextFocus();
+      // walletNameFocus.nextFocus();
       notifyListeners();
     } else {
       isAskedWordValid = false;
@@ -139,6 +140,26 @@ class GenerateWalletsProvider with ChangeNotifier {
     return rng.nextInt(12);
   }
 
+  String intToString(int _nbr) {
+    Map nbrToString = {};
+    nbrToString[1] = 'Premier';
+    nbrToString[2] = 'Deuxième';
+    nbrToString[3] = 'Troisième';
+    nbrToString[4] = 'Quatrième';
+    nbrToString[5] = 'Cinquième';
+    nbrToString[6] = 'Sixième';
+    nbrToString[7] = 'Septième';
+    nbrToString[8] = 'Huitième';
+    nbrToString[9] = 'Neuvième';
+    nbrToString[10] = 'Dixième';
+    nbrToString[11] = 'Onzième';
+    nbrToString[12] = 'Douzième';
+
+    nbrWordAlpha = nbrToString[_nbr];
+
+    return nbrWordAlpha;
+  }
+
   void nameChanged() {
     notifyListeners();
   }
@@ -174,7 +195,7 @@ class GenerateWalletsProvider with ChangeNotifier {
     return this.actualWallet;
   }
 
-  Future<void> changePinCode({bool reload}) async {
+  Future<NewWallet> changePinCode({bool reload}) async {
     actualWallet = await DubpRust.changeDewifPin(
       dewif: actualWallet.dewif,
       oldPin: actualWallet.pin,
@@ -185,6 +206,7 @@ class GenerateWalletsProvider with ChangeNotifier {
     if (reload) {
       notifyListeners();
     }
+    return actualWallet;
   }
 
   Future<Uint8List> printWallet(String _title) async {
@@ -279,6 +301,22 @@ class GenerateWalletsProvider with ChangeNotifier {
     notifyListeners();
   }
 
+  Future<List<String>> generateWordList() async {
+    final String _sentance = await generateMnemonic();
+    List<String> _wordsList = [];
+    String word;
+    int _nbr = 1;
+
+    for (word in _sentance.split(' ')) {
+      // print(word);
+      _wordsList.add("$_nbr:$word");
+      _nbr++;
+    }
+    // notifyListeners();
+
+    return _wordsList;
+  }
+
   // void makeError() {
   //   var tata = File(appPath.path + '/ddfhjftjfg');
   //   tata.readAsLinesSync();
diff --git a/lib/models/walletOptions.dart b/lib/models/walletOptions.dart
index 0b708c0e732747c955d1f6d7e53f93d49dddebf0..5b0ac9df78ff0a78c3aba06c6ac4fec411c4992b 100644
--- a/lib/models/walletOptions.dart
+++ b/lib/models/walletOptions.dart
@@ -6,8 +6,8 @@ import 'dart:async';
 import 'package:gecko/globals.dart';
 
 class WalletOptionsProvider with ChangeNotifier {
-  TextEditingController pubkey = new TextEditingController();
-  TextEditingController _newWalletName = new TextEditingController();
+  TextEditingController pubkey = TextEditingController();
+  TextEditingController _newWalletName = TextEditingController();
   bool isWalletUnlock = false;
   bool ischangedPin = false;
   TextEditingController newPin = new TextEditingController();
@@ -61,8 +61,8 @@ class WalletOptionsProvider with ChangeNotifier {
     }
   }
 
-  Future readLocalWallet(int _walletNbr, String _name, String _pin,
-      int _pinLenght, int derivation) async {
+  Future readLocalWallet(
+      int _walletNbr, String _pin, int _pinLenght, int derivation) async {
     isWalletUnlock = false;
     try {
       File _walletFile =
@@ -75,7 +75,7 @@ class WalletOptionsProvider with ChangeNotifier {
           'false') {
         this.pubkey.text = _localPubkey;
         isWalletUnlock = true;
-        notifyListeners();
+        // notifyListeners();
 
         return _localDewif;
       } else {
@@ -84,14 +84,35 @@ class WalletOptionsProvider with ChangeNotifier {
     } catch (e) {
       print('ERROR READING FILE: $e');
       this.pubkey.clear();
+      // notifyListeners();
       return 'bad';
     }
   }
 
+  Future checkPinOK(String _createdDewif, String _pin, int _pinLenght) async {
+    isWalletUnlock = false;
+    try {
+      if (await _getPubkeyFromDewif(_createdDewif, _pin, _pinLenght, 3) !=
+          'false') {
+        return true;
+      } else {
+        throw false;
+      }
+    } catch (e) {
+      print('ERROR READING FILE: $e');
+      return false;
+    }
+  }
+
   int getPinLenght(_walletNbr) {
-    File _walletFile =
-        File('${walletsDirectory.path}/$_walletNbr/wallet.dewif');
-    String _localDewif = _walletFile.readAsStringSync();
+    String _localDewif;
+    if (_walletNbr is int) {
+      File _walletFile =
+          File('${walletsDirectory.path}/$_walletNbr/wallet.dewif');
+      _localDewif = _walletFile.readAsStringSync();
+    } else {
+      _localDewif = _walletNbr;
+    }
 
     final int _pinLenght = DubpRust.getDewifSecretCodeLen(
         dewif: _localDewif, secretCodeType: SecretCodeType.letters);
@@ -186,7 +207,10 @@ class WalletOptionsProvider with ChangeNotifier {
         final _walletFile = Directory('${walletsDirectory.path}/$_walletNbr');
         await _walletFile.delete(recursive: true);
       }
-      Navigator.pop(context);
+      Navigator.popUntil(
+        context,
+        ModalRoute.withName('/mywallets'),
+      );
     }
     return 0;
   }
@@ -264,4 +288,8 @@ class WalletOptionsProvider with ChangeNotifier {
         duration: Duration(seconds: 2));
     Scaffold.of(context).showSnackBar(snackBar);
   }
+
+  void reloadBuild() {
+    notifyListeners();
+  }
 }
diff --git a/lib/screens/commonElements.dart b/lib/screens/commonElements.dart
new file mode 100644
index 0000000000000000000000000000000000000000..59bc2b6f3b5291fc660183f4f001f2d8258fa4c3
--- /dev/null
+++ b/lib/screens/commonElements.dart
@@ -0,0 +1,227 @@
+import 'package:flutter/material.dart';
+import 'package:bubble/bubble.dart';
+
+class CommonElements {
+  // Exemple de Widget
+  Widget exemple(String data) {
+    return Text('Coucou');
+  }
+
+  Widget bubbleSpeak(String text, {double long}) {
+    return Bubble(
+      padding: long == null
+          ? BubbleEdges.all(18)
+          : BubbleEdges.symmetric(horizontal: long, vertical: 30),
+      elevation: 5,
+      color: Colors.white,
+      margin: BubbleEdges.fromLTRB(10, 0, 20, 10),
+      // nip: BubbleNip.leftTop,
+      child: Text(
+        text,
+        style: TextStyle(
+            color: Colors.black, fontSize: 18, fontWeight: FontWeight.w400),
+      ),
+    );
+  }
+
+  Widget bubbleSpeakRich(List<TextSpan> text) {
+    return Bubble(
+      padding: BubbleEdges.all(18),
+      elevation: 5,
+      color: Colors.white,
+      margin: BubbleEdges.fromLTRB(10, 0, 20, 10),
+      // nip: BubbleNip.leftTop,
+      child: RichText(
+          text: TextSpan(
+        style: TextStyle(
+          fontSize: 18.0,
+          color: Colors.black,
+        ),
+        children: text,
+      )),
+    );
+  }
+
+  Widget onboardingProgressBar(
+      BuildContext context, String screenTitle, int progress) {
+    return Stack(children: [
+      Container(height: 100),
+      Positioned(
+          top: 0, left: 0, right: 0, child: GeckoSpeechAppBar(screenTitle)),
+      Positioned(
+        top: 0,
+        left: 0,
+        child: GestureDetector(
+          onTap: () {
+            Navigator.popUntil(
+              context,
+              ModalRoute.withName('/'),
+            );
+          },
+          child: Image.asset(
+            'assets/onBoarding/gecko_bar.png',
+          ),
+        ),
+      ),
+      if (progress != 0)
+        Positioned(
+          top: 75,
+          left: 90,
+          child: Image.asset(
+            'assets/onBoarding/progress_bar/total.png',
+          ),
+        ),
+      if (progress != 0)
+        Positioned(
+          top: 75,
+          left: 90,
+          child: Image.asset(
+            'assets/onBoarding/progress_bar/$progress.png',
+          ),
+        ),
+      if (progress != 0)
+        Positioned(
+          top: 70,
+          right: 90,
+          child: Text(progress == 12 ? '11/11' : '$progress/11',
+              style: TextStyle(fontSize: 12, color: Colors.black)),
+        ),
+    ]);
+  }
+
+  Widget roundButton(
+    AssetImage image,
+    ontap,
+    isAsync,
+    double imgHight,
+    EdgeInsets padding,
+  ) {
+    return Container(
+      child: ClipOval(
+        child: Material(
+          color: Color(0xffFFD58D), // button color
+          child: InkWell(
+              splashColor: Color(0xffD28928), // inkwell color
+              child: Padding(
+                  padding: padding,
+                  child: Image(image: image, height: imgHight)),
+              onTap: () async {
+                await ontap;
+              }),
+        ),
+      ),
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: Colors.white,
+        boxShadow: [
+          BoxShadow(
+              color: Colors.grey,
+              blurRadius: 4.0,
+              offset: Offset(2.0, 2.5),
+              spreadRadius: 0.5)
+        ],
+      ),
+    );
+  }
+}
+
+class SmoothTransition extends PageRouteBuilder {
+  final Widget page;
+  SmoothTransition({this.page})
+      : super(
+          pageBuilder: (
+            BuildContext context,
+            Animation<double> animation,
+            Animation<double> secondaryAnimation,
+          ) =>
+              TweenAnimationBuilder(
+            duration: const Duration(seconds: 5),
+            tween: Tween(begin: 200, end: 200),
+            builder: (BuildContext context, dynamic value, Widget child) {
+              return page;
+            },
+          ),
+        );
+}
+
+class FaderTransition extends PageRouteBuilder {
+  final Widget page;
+  final bool isFast;
+
+  FaderTransition({@required this.page, @required this.isFast})
+      : super(
+          pageBuilder: (
+            BuildContext context,
+            Animation<double> animation,
+            Animation<double> secondaryAnimation,
+          ) =>
+              page,
+          transitionsBuilder: (
+            BuildContext context,
+            Animation<double> animation,
+            Animation<double> secondaryAnimation,
+            Widget child,
+          ) =>
+              FadeTransition(
+            opacity:
+                Tween(begin: 0.0, end: isFast ? 3.0 : 1.0).animate(animation),
+            child: child,
+          ),
+        );
+}
+
+class SlideLeftRoute extends PageRouteBuilder {
+  final Widget page;
+  SlideLeftRoute({this.page})
+      : super(
+          pageBuilder: (
+            BuildContext context,
+            Animation<double> animation,
+            Animation<double> secondaryAnimation,
+          ) =>
+              page,
+          transitionsBuilder: (
+            BuildContext context,
+            Animation<double> animation,
+            Animation<double> secondaryAnimation,
+            Widget child,
+          ) =>
+              SlideTransition(
+            position: Tween<Offset>(
+              begin: const Offset(1, 0),
+              end: Offset.zero,
+            ).animate(animation),
+            child: child,
+          ),
+        );
+}
+
+class GeckoSpeechAppBar extends StatelessWidget with PreferredSizeWidget {
+  @override
+  final Size preferredSize;
+  final String title;
+
+  GeckoSpeechAppBar(
+    this.title, {
+    Key key,
+  })  : preferredSize = Size.fromHeight(105.4),
+        super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+        leading: IconButton(
+          icon: Container(
+              height: 30,
+              child: Image.asset('assets/onBoarding/gecko_bar.png')),
+          onPressed: () => Navigator.popUntil(
+            context,
+            ModalRoute.withName('/'),
+          ),
+        ),
+        title: SizedBox(
+          height: 25,
+          child: Text(title),
+        ));
+  }
+}
diff --git a/lib/screens/history.dart b/lib/screens/history.dart
index e9ec8cb9c8f6d94269938198bbe843190cd0516a..5e8636ab86aff4157e6d9e87f38a2acac3552634 100644
--- a/lib/screens/history.dart
+++ b/lib/screens/history.dart
@@ -28,6 +28,7 @@ class HistoryScreen extends StatelessWidget with ChangeNotifier {
 
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     HistoryProvider _historyProvider = Provider.of<HistoryProvider>(context);
     HomeProvider _homeProvider = Provider.of<HomeProvider>(context);
     this._outputPubkey.text = _historyProvider.pubkey;
diff --git a/lib/screens/home.dart b/lib/screens/home.dart
index 54afc88675f0876fa2d8ecc54094fba1cf12d05f..b16b8ac29e30a9eeb7599dcc588824d416511d76 100644
--- a/lib/screens/home.dart
+++ b/lib/screens/home.dart
@@ -3,17 +3,31 @@ import 'package:gecko/globals.dart';
 import 'package:gecko/models/history.dart';
 import 'package:gecko/models/home.dart';
 import 'package:flutter/material.dart';
-import 'package:gecko/screens/myWallets/walletsHome.dart';
+import 'package:gecko/models/myWallets.dart';
+import 'package:gecko/screens/onBoarding/0_noKeychainFound.dart';
 import 'dart:ui';
 import 'package:gecko/screens/settings.dart';
+import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 
 class HomeScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     HomeProvider _homeProvider = Provider.of<HomeProvider>(context);
     HistoryProvider _historyProvider = Provider.of<HistoryProvider>(context);
     HistoryProvider _historyStatic = HistoryProvider('');
+    MyWalletsProvider _myWalletProvider =
+        Provider.of<MyWalletsProvider>(context);
+    final bool isWalletsExists = _myWalletProvider.checkIfWalletExist();
+
+    isTall = false;
+    ratio = 1;
+    if (MediaQuery.of(context).size.height >= 930) {
+      isTall = true;
+      ratio = 1.125;
+    }
+    // CommonElements commonElements = CommonElements();
     return Scaffold(
         resizeToAvoidBottomInset: false,
         drawer: Drawer(
@@ -118,7 +132,7 @@ class HomeScreen extends StatelessWidget {
                   },
                   child: Column(children: <Widget>[
                     Padding(
-                        padding: EdgeInsets.only(top: 22),
+                        padding: EdgeInsets.only(top: 20),
                         child: Row(
                             mainAxisAlignment: MainAxisAlignment.center,
                             children: <Widget>[
@@ -126,22 +140,24 @@ class HomeScreen extends StatelessWidget {
                               Image(
                                   image:
                                       AssetImage('assets/icon/gecko_final.png'),
-                                  height: 160),
+                                  height: 180),
                             ])),
                     Padding(
-                        padding: EdgeInsets.only(top: 12),
+                        padding: EdgeInsets.only(top: 15),
                         child: Row(
                             mainAxisAlignment: MainAxisAlignment.center,
                             children: <Widget>[
                               Text(
-                                "L’application de paiement Ğ1\nplus mobile qu’un lésard du Vietnam",
+                                "y'a pas de lézard !",
                                 textAlign: TextAlign.center,
                                 style: TextStyle(
-                                    color: Colors.black, fontSize: 15),
+                                    color: Colors.black,
+                                    fontSize: 17,
+                                    fontStyle: FontStyle.italic),
                               )
                             ])),
                     Padding(
-                        padding: EdgeInsets.only(top: 40),
+                        padding: EdgeInsets.only(top: 60),
                         child: Row(
                             mainAxisAlignment: MainAxisAlignment.center,
                             children: <Widget>[
@@ -154,11 +170,11 @@ class HomeScreen extends StatelessWidget {
                                           splashColor: Color(
                                               0xffD28928), // inkwell color
                                           child: Padding(
-                                              padding: EdgeInsets.all(17),
+                                              padding: EdgeInsets.all(22),
                                               child: Image(
                                                   image: AssetImage(
                                                       'assets/qrcode-scan.png'),
-                                                  height: 50)),
+                                                  height: 60)),
                                           onTap: () async {
                                             await _historyProvider
                                                 .scan(context);
@@ -177,17 +193,17 @@ class HomeScreen extends StatelessWidget {
                                     ],
                                   ),
                                 ),
-                                SizedBox(height: 10),
+                                SizedBox(height: 12),
                                 Text(
                                   "Payer par QR-Code",
                                   textAlign: TextAlign.center,
                                   style: TextStyle(
-                                      color: Colors.black, fontSize: 13),
+                                      color: Colors.black, fontSize: 16),
                                 )
                               ])
                             ])),
                     Padding(
-                        padding: EdgeInsets.only(top: 40),
+                        padding: EdgeInsets.only(top: 50),
                         child: Row(
                             mainAxisAlignment: MainAxisAlignment.center,
                             children: <Widget>[
@@ -201,12 +217,20 @@ class HomeScreen extends StatelessWidget {
                                               0xffD28928), // inkwell color
                                           child: Padding(
                                               padding: EdgeInsets.symmetric(
-                                                  horizontal: 18, vertical: 14),
+                                                  horizontal: 20, vertical: 16),
                                               child: Image(
                                                   image: AssetImage(
                                                       'assets/blockchain.png'),
-                                                  height: 55)),
-                                          onTap: () {}),
+                                                  height: 70)),
+                                          onTap: () {
+                                            // Navigator.push(
+                                            //   context,
+                                            //   MaterialPageRoute(
+                                            //       builder: (context) {
+                                            //     return TemplateScreen();
+                                            //   }),
+                                            // );
+                                          }),
                                     ),
                                   ),
                                   decoration: BoxDecoration(
@@ -221,15 +245,15 @@ class HomeScreen extends StatelessWidget {
                                     ],
                                   ),
                                 ),
-                                SizedBox(height: 10),
+                                SizedBox(height: 12),
                                 Text(
                                   "Explorer\n",
                                   textAlign: TextAlign.center,
                                   style: TextStyle(
-                                      color: Colors.black, fontSize: 13),
+                                      color: Colors.black, fontSize: 16),
                                 )
                               ]),
-                              SizedBox(width: 100),
+                              SizedBox(width: 140),
                               Column(children: <Widget>[
                                 Container(
                                   child: ClipOval(
@@ -239,19 +263,20 @@ class HomeScreen extends StatelessWidget {
                                           splashColor: Color(
                                               0xffD28928), // inkwell color
                                           child: Padding(
-                                              padding: EdgeInsets.all(20),
+                                              padding: EdgeInsets.all(23),
                                               child: Image(
                                                   image: AssetImage(
                                                       'assets/lock.png'),
-                                                  height: 45)),
+                                                  height: 57)),
                                           onTap: () {
-                                            Navigator.push(
-                                              context,
-                                              MaterialPageRoute(
-                                                  builder: (context) {
-                                                return WalletsHome();
-                                              }),
-                                            );
+                                            isWalletsExists
+                                                ? Navigator.pushNamed(
+                                                    context, '/mywallets')
+                                                : Navigator.push(context,
+                                                    MaterialPageRoute(
+                                                        builder: (context) {
+                                                    return NoKeyChainScreen();
+                                                  }));
                                           }),
                                     ),
                                   ),
@@ -267,12 +292,12 @@ class HomeScreen extends StatelessWidget {
                                     ],
                                   ),
                                 ),
-                                SizedBox(height: 10),
+                                SizedBox(height: 12),
                                 Text(
                                   "Gérer mes\nportefeuilles",
                                   textAlign: TextAlign.center,
                                   style: TextStyle(
-                                      color: Colors.black, fontSize: 13),
+                                      color: Colors.black, fontSize: 16),
                                 )
                               ])
                             ]))
diff --git a/lib/screens/myWallets/changePin.dart b/lib/screens/myWallets/changePin.dart
index 8141211a9028160dd841bc74a7beaed142595feb..2242fe5f451e45e3aa98bd327aa930687e589d58 100644
--- a/lib/screens/myWallets/changePin.dart
+++ b/lib/screens/myWallets/changePin.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:dubp/dubp.dart';
+import 'package:flutter/services.dart';
 import 'package:gecko/models/changePin.dart';
 import 'dart:io';
 import 'package:provider/provider.dart';
@@ -17,6 +18,7 @@ class ChangePinScreen extends StatelessWidget with ChangeNotifier {
 
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     ChangePinProvider _changePin = Provider.of<ChangePinProvider>(context);
     // _walletOptions.changePin(walletName, oldPin);
     // _walletOptions.newPin.text = _tmpPin;
diff --git a/lib/screens/myWallets/confirmWalletStorage.dart b/lib/screens/myWallets/confirmWalletStorage.dart
index 7bcc09583480124a468949184c71b167285363d5..3b6385f73a35b1228ecc75bf480d77009712349b 100644
--- a/lib/screens/myWallets/confirmWalletStorage.dart
+++ b/lib/screens/myWallets/confirmWalletStorage.dart
@@ -23,6 +23,7 @@ class ConfirmStoreWallet extends StatelessWidget with ChangeNotifier {
 
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     GenerateWalletsProvider _generateWalletProvider =
         Provider.of<GenerateWalletsProvider>(context);
     MyWalletsProvider _myWalletProvider =
diff --git a/lib/screens/myWallets/generateWallets.dart b/lib/screens/myWallets/generateWallets.dart
index 9b2f9fbb4748de71f1c457ac22c71ca85bc6e080..8165ccff22c2151985c67e11ab23e514ab1981ba 100644
--- a/lib/screens/myWallets/generateWallets.dart
+++ b/lib/screens/myWallets/generateWallets.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/services.dart';
 import 'package:gecko/models/generateWallets.dart';
 import 'package:gecko/screens/myWallets/confirmWalletStorage.dart';
 import 'package:flutter/material.dart';
@@ -18,6 +19,7 @@ class GenerateWalletsScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     GenerateWalletsProvider _generateWalletProvider =
         Provider.of<GenerateWalletsProvider>(context);
     _generateWalletProvider.generateMnemonic();
diff --git a/lib/screens/myWallets/importWallet.dart b/lib/screens/myWallets/importWallet.dart
index 5955469c33d92eb2146c5f2a0cf119034ed04003..ece2e5abd04cf70bee1db5c7e1f034553ebc3d6d 100644
--- a/lib/screens/myWallets/importWallet.dart
+++ b/lib/screens/myWallets/importWallet.dart
@@ -9,6 +9,7 @@ import 'package:provider/provider.dart';
 class ImportWalletScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     GlobalKey _toolTipSecret = GlobalKey();
     Timer _debounce;
     GenerateWalletsProvider _generateWalletProvider =
diff --git a/lib/screens/myWallets/unlockingWallet.dart b/lib/screens/myWallets/unlockingWallet.dart
new file mode 100644
index 0000000000000000000000000000000000000000..eb70588eb679f96fa072f6cba7b0221c81bc360d
--- /dev/null
+++ b/lib/screens/myWallets/unlockingWallet.dart
@@ -0,0 +1,164 @@
+import 'dart:async';
+
+import 'package:dubp/dubp.dart';
+import 'package:flutter/services.dart';
+import 'package:gecko/models/walletOptions.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/screens/myWallets/walletOptions.dart';
+import 'package:pin_code_fields/pin_code_fields.dart';
+import 'package:provider/provider.dart';
+// import 'package:gecko/models/home.dart';
+// import 'package:provider/provider.dart';
+
+// ignore: must_be_immutable
+class UnlockingWallet extends StatelessWidget {
+  UnlockingWallet(
+      {Key keyUnlockWallet,
+      @required this.walletNbr,
+      @required this.walletName,
+      @required this.derivation})
+      : super(key: keyUnlockWallet);
+  int walletNbr;
+  String walletName;
+  int derivation;
+
+  // ignore: close_sinks
+  StreamController<ErrorAnimationType> errorController;
+  final formKey = GlobalKey<FormState>();
+  bool hasError = false;
+  var pinColor = Color(0xffF9F9F1);
+  var walletPin = '';
+
+  Future<NewWallet> get badWallet => null;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    WalletOptionsProvider _walletOptions =
+        Provider.of<WalletOptionsProvider>(context);
+    final int _pinLenght = _walletOptions.getPinLenght(this.walletNbr);
+    errorController = StreamController<ErrorAnimationType>();
+
+    return Scaffold(
+        // backgroundColor: Colors.brown[600],
+        body: SafeArea(
+      child: Column(children: <Widget>[
+        SizedBox(height: 20),
+        Expanded(
+          child: Column(children: <Widget>[
+            SizedBox(height: 150),
+            Text(
+              'Veuillez tapper votre code secret pour dévérouiller votre portefeuille.',
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                  fontSize: 15.0,
+                  color: Colors.black,
+                  fontWeight: FontWeight.w400),
+            ),
+            SizedBox(height: 50),
+            pinForm(context, _pinLenght, walletNbr, derivation),
+          ]),
+        ),
+        GestureDetector(
+            onTap: () {
+              Navigator.popUntil(
+                context,
+                ModalRoute.withName('/'),
+              );
+            },
+            child: Icon(Icons.home))
+      ]),
+    ));
+  }
+
+  Widget pinForm(context, _pinLenght, int _walletNbr, int _derivation) {
+    // var _walletPin = '';
+// ignore: close_sinks
+    StreamController<ErrorAnimationType> errorController =
+        StreamController<ErrorAnimationType>();
+    TextEditingController _enterPin = TextEditingController();
+    WalletOptionsProvider _walletOptions =
+        Provider.of<WalletOptionsProvider>(context);
+
+    return Form(
+      key: formKey,
+      child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 30),
+          child: PinCodeTextField(
+            autoFocus: true,
+            appContext: context,
+            pastedTextStyle: TextStyle(
+              color: Colors.green.shade600,
+              fontWeight: FontWeight.bold,
+            ),
+            length: _pinLenght,
+            obscureText: false,
+            obscuringCharacter: '*',
+            animationType: AnimationType.fade,
+            validator: (v) {
+              if (v.length < _pinLenght) {
+                return "Votre code PIN fait $_pinLenght caractères";
+              } else {
+                return null;
+              }
+            },
+            pinTheme: PinTheme(
+              activeColor: pinColor,
+              borderWidth: 4,
+              shape: PinCodeFieldShape.box,
+              borderRadius: BorderRadius.circular(5),
+              fieldHeight: 60,
+              fieldWidth: 50,
+              activeFillColor: hasError ? Colors.blueAccent : Colors.black,
+            ),
+            cursorColor: Colors.black,
+            animationDuration: Duration(milliseconds: 300),
+            textStyle: TextStyle(fontSize: 20, height: 1.6),
+            backgroundColor: Color(0xffF9F9F1),
+            enableActiveFill: false,
+            errorAnimationController: errorController,
+            controller: _enterPin,
+            keyboardType: TextInputType.text,
+            boxShadows: [
+              BoxShadow(
+                offset: Offset(0, 1),
+                color: Colors.black12,
+                blurRadius: 10,
+              )
+            ],
+            onCompleted: (_pin) async {
+              print("Completed");
+              final resultWallet = await _walletOptions.readLocalWallet(
+                  this.walletNbr,
+                  _pin.toUpperCase(),
+                  _pinLenght,
+                  this.derivation);
+              if (resultWallet == 'bad') {
+                errorController.add(ErrorAnimationType
+                    .shake); // Triggering error shake animation
+                hasError = true;
+                pinColor = Colors.red[600];
+                _walletOptions.reloadBuild();
+              } else {
+                pinColor = Colors.green[400];
+                // await Future.delayed(Duration(milliseconds: 50));
+                Navigator.push(
+                    context,
+                    SmoothTransition(
+                        page: WalletOptions(
+                            walletNbr: walletNbr,
+                            walletName: walletName,
+                            derivation: derivation)));
+              }
+            },
+            onChanged: (value) {
+              if (pinColor != Color(0xFFA4B600)) {
+                pinColor = Color(0xFFA4B600);
+              }
+              print(value);
+            },
+          )),
+    );
+  }
+}
diff --git a/lib/screens/myWallets/walletOptions.dart b/lib/screens/myWallets/walletOptions.dart
index 0f21b6f0db00f245725a9951e26aa0e3a24b38e2..221e9e10070b4b7bf9e9834f9ff61c120401fb49 100644
--- a/lib/screens/myWallets/walletOptions.dart
+++ b/lib/screens/myWallets/walletOptions.dart
@@ -1,10 +1,8 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:dubp/dubp.dart';
 import 'package:gecko/models/myWallets.dart';
 import 'package:gecko/models/walletOptions.dart';
 import 'dart:async';
-import 'package:pin_code_fields/pin_code_fields.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter/services.dart';
 
@@ -20,245 +18,145 @@ class WalletOptions extends StatelessWidget with ChangeNotifier {
   String walletName;
   int derivation;
 
-  StreamController<ErrorAnimationType> errorController;
-  TextEditingController _enterPin = TextEditingController();
-  final formKey = GlobalKey<FormState>();
-  bool hasError = false;
-  var pinColor = Color(0xffF9F9F1);
-  var walletPin = '';
-
-  Future<NewWallet> get badWallet => null;
-
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     print("Build walletOptions");
     WalletOptionsProvider _walletOptions =
         Provider.of<WalletOptionsProvider>(context);
     MyWalletsProvider _myWalletProvider =
         Provider.of<MyWalletsProvider>(context);
-    errorController = StreamController<ErrorAnimationType>();
-    // _walletOptions.isWalletUnlock = false;
 
-    final int _pinLenght = _walletOptions.getPinLenght(this.walletNbr);
+    // _walletOptions.isWalletUnlock = false;
+    print("Is unlock ? ${_walletOptions.isWalletUnlock}");
 
     return WillPopScope(
         onWillPop: () {
           _walletOptions.isWalletUnlock = false;
+          Navigator.popUntil(
+            context,
+            ModalRoute.withName('/mywallets'),
+          );
           return Future<bool>.value(true);
         },
         child: Scaffold(
-            resizeToAvoidBottomInset: false,
-            appBar: AppBar(
-                leading: IconButton(
-                    icon: Icon(Icons.arrow_back, color: Colors.black),
-                    onPressed: () {
-                      _walletOptions.isWalletUnlock = false;
-                      Navigator.of(context).pop();
-                    }),
-                title: SizedBox(
-                  height: 22,
-                  child: Text(walletName),
-                )),
-            body: Builder(
-                builder: (ctx) => SafeArea(
-                        child: Column(children: <Widget>[
-                      Visibility(
-                          visible: _walletOptions.isWalletUnlock,
-                          child: Expanded(
-                              child: Column(children: <Widget>[
-                            SizedBox(height: 15),
-                            Text(
-                              'Clé publique:',
+          resizeToAvoidBottomInset: false,
+          appBar: AppBar(
+              leading: IconButton(
+                  icon: Icon(Icons.arrow_back, color: Colors.black),
+                  onPressed: () {
+                    _walletOptions.isWalletUnlock = false;
+                    Navigator.popUntil(
+                      context,
+                      ModalRoute.withName('/mywallets'),
+                    );
+                  }),
+              title: SizedBox(
+                height: 22,
+                child: Text(walletName),
+              )),
+          body: Builder(
+              builder: (ctx) => SafeArea(
+                    child: Column(children: <Widget>[
+                      Expanded(
+                          child: Column(children: <Widget>[
+                        SizedBox(height: 15),
+                        Text(
+                          'Clé publique:',
+                          style: TextStyle(
+                              fontSize: 15.0,
+                              color: Colors.grey[600],
+                              fontWeight: FontWeight.w400),
+                        ),
+                        SizedBox(height: 15),
+                        GestureDetector(
+                            onTap: () {
+                              Clipboard.setData(ClipboardData(
+                                  text: _walletOptions.pubkey.text));
+                              _walletOptions.snackCopyKey(ctx);
+                            },
+                            child: Text(
+                              _walletOptions.pubkey.text,
                               style: TextStyle(
-                                  fontSize: 15.0,
-                                  color: Colors.grey[600],
-                                  fontWeight: FontWeight.w400),
-                            ),
-                            SizedBox(height: 15),
-                            GestureDetector(
-                                onTap: () {
-                                  Clipboard.setData(ClipboardData(
-                                      text: _walletOptions.pubkey.text));
-                                  _walletOptions.snackCopyKey(ctx);
-                                },
-                                child: Text(
-                                  _walletOptions.pubkey.text,
-                                  style: TextStyle(
-                                      fontSize: 14.0,
-                                      color: Colors.black,
-                                      fontWeight: FontWeight.bold,
-                                      fontFamily: 'Monospace'),
-                                )),
-                            Expanded(
-                                child: Align(
-                                    alignment: Alignment.bottomCenter,
-                                    child: SizedBox(
-                                        height: 50,
-                                        width: 300,
-                                        child: ElevatedButton(
-                                            style: ElevatedButton.styleFrom(
-                                              elevation: 5,
-                                              primary: Color(
-                                                  0xffFFD68E), //Color(0xffFFD68E), // background
-                                              onPrimary:
-                                                  Colors.black, // foreground
-                                            ),
-                                            onPressed: () => _walletOptions
-                                                    .renameWalletAlerte(
-                                                        context,
-                                                        walletName,
-                                                        walletNbr,
-                                                        derivation)
-                                                    .then((_result) {
-                                                  if (_result == true) {
-                                                    WidgetsBinding.instance
-                                                        .addPostFrameCallback(
-                                                            (_) {
-                                                      _myWalletProvider
-                                                              .listWallets =
-                                                          _myWalletProvider
-                                                              .getAllWalletsNames();
-                                                      _myWalletProvider
-                                                          .rebuildWidget();
-                                                    });
-                                                    Navigator.pop(
-                                                        context, true);
-                                                  }
-                                                }),
-                                            child: Text(
-                                                'Renommer ce portefeuille',
-                                                style: TextStyle(
-                                                    fontSize: 20)))))),
-                            SizedBox(height: 30),
-                            SizedBox(
-                                height: 50,
-                                width: 300,
-                                child: ElevatedButton(
-                                    style: ElevatedButton.styleFrom(
-                                      elevation: 6,
-                                      primary: Colors
-                                          .redAccent, //Color(0xffFFD68E), // background
-                                      onPrimary: Colors.black, // foreground
-                                    ),
-                                    onPressed: () async {
-                                      await _walletOptions.deleteWallet(context,
-                                          walletNbr, walletName, derivation);
-                                      WidgetsBinding.instance
-                                          .addPostFrameCallback((_) {
-                                        _myWalletProvider.listWallets =
-                                            _myWalletProvider
-                                                .getAllWalletsNames();
-                                        _myWalletProvider.rebuildWidget();
-                                      });
-                                    },
-                                    child: Text('Supprimer ce portefeuille',
-                                        style: TextStyle(fontSize: 20)))),
-                            SizedBox(height: 50),
-                            Text(
-                              'Portefeuille déverrouillé',
-                              style: TextStyle(
-                                  color: Colors.green,
-                                  fontWeight: FontWeight.w700,
-                                  fontSize: 15),
-                            ),
-                            SizedBox(height: 10)
-                          ]))),
-                      Visibility(
-                          visible: !_walletOptions.isWalletUnlock,
-                          child: Expanded(
-                              child: Column(children: <Widget>[
-                            SizedBox(height: 80),
-                            Text(
-                              'Veuillez tapper votre code secret pour dévérouiller votre portefeuille.',
-                              textAlign: TextAlign.center,
-                              style: TextStyle(
-                                  fontSize: 15.0,
+                                  fontSize: 14.0,
                                   color: Colors.black,
-                                  fontWeight: FontWeight.w400),
-                            ),
-                            SizedBox(height: 50),
-                            Form(
-                              key: formKey,
-                              child: Padding(
-                                  padding: const EdgeInsets.symmetric(
-                                      vertical: 8.0, horizontal: 30),
-                                  child: PinCodeTextField(
-                                    autoFocus: true,
-                                    appContext: context,
-                                    pastedTextStyle: TextStyle(
-                                      color: Colors.green.shade600,
-                                      fontWeight: FontWeight.bold,
-                                    ),
-                                    length: _pinLenght,
-                                    obscureText: false,
-                                    obscuringCharacter: '*',
-                                    animationType: AnimationType.fade,
-                                    validator: (v) {
-                                      if (v.length < _pinLenght) {
-                                        return "Votre code PIN fait $_pinLenght caractères";
-                                      } else {
-                                        return null;
-                                      }
-                                    },
-                                    pinTheme: PinTheme(
-                                      shape: PinCodeFieldShape.box,
-                                      borderRadius: BorderRadius.circular(5),
-                                      fieldHeight: 60,
-                                      fieldWidth: 50,
-                                      activeFillColor: hasError
-                                          ? Colors.orange
-                                          : Colors.white,
-                                    ),
-                                    cursorColor: Colors.black,
-                                    animationDuration:
-                                        Duration(milliseconds: 300),
-                                    textStyle:
-                                        TextStyle(fontSize: 20, height: 1.6),
-                                    backgroundColor: pinColor,
-                                    enableActiveFill: false,
-                                    errorAnimationController: errorController,
-                                    controller: _enterPin,
-                                    keyboardType: TextInputType.text,
-                                    boxShadows: [
-                                      BoxShadow(
-                                        offset: Offset(0, 1),
-                                        color: Colors.black12,
-                                        blurRadius: 10,
-                                      )
-                                    ],
-                                    onCompleted: (_pin) async {
-                                      print("Completed");
-                                      final resultWallet =
-                                          await _walletOptions.readLocalWallet(
-                                              this.walletNbr,
-                                              this.walletName,
-                                              _pin.toUpperCase(),
-                                              _pinLenght,
-                                              this.derivation);
-                                      if (resultWallet == 'bad') {
-                                        errorController.add(ErrorAnimationType
-                                            .shake); // Triggering error shake animation
-                                        hasError = true;
-                                        pinColor = Colors.red[200];
-                                        notifyListeners();
-                                      } else {
-                                        pinColor = Colors.green[200];
-                                        // setState(() {});
-                                        // await Future.delayed(Duration(milliseconds: 50));
-                                        this.walletPin = _pin.toUpperCase();
-                                        // isWalletUnlock = true;
-                                        notifyListeners();
-                                      }
-                                    },
-                                    onChanged: (value) {
-                                      if (pinColor != Color(0xffF9F9F1)) {
-                                        pinColor = Color(0xffF9F9F1);
-                                      }
-                                      print(value);
-                                    },
-                                  )),
-                            )
-                          ]))),
-                    ])))));
+                                  fontWeight: FontWeight.bold,
+                                  fontFamily: 'Monospace'),
+                            )),
+                        Expanded(
+                            child: Align(
+                                alignment: Alignment.bottomCenter,
+                                child: SizedBox(
+                                    height: 50,
+                                    width: 300,
+                                    child: ElevatedButton(
+                                        style: ElevatedButton.styleFrom(
+                                          elevation: 5,
+                                          primary: Color(
+                                              0xffFFD68E), //Color(0xffFFD68E), // background
+                                          onPrimary: Colors.black, // foreground
+                                        ),
+                                        onPressed: () => _walletOptions
+                                                .renameWalletAlerte(
+                                                    context,
+                                                    walletName,
+                                                    walletNbr,
+                                                    derivation)
+                                                .then((_result) {
+                                              if (_result == true) {
+                                                WidgetsBinding.instance
+                                                    .addPostFrameCallback((_) {
+                                                  _myWalletProvider
+                                                          .listWallets =
+                                                      _myWalletProvider
+                                                          .getAllWalletsNames();
+                                                  _myWalletProvider
+                                                      .rebuildWidget();
+                                                });
+                                                Navigator.popUntil(
+                                                  context,
+                                                  ModalRoute.withName(
+                                                      '/mywallets'),
+                                                );
+                                              }
+                                            }),
+                                        child: Text('Renommer ce portefeuille',
+                                            style: TextStyle(fontSize: 20)))))),
+                        SizedBox(height: 30),
+                        SizedBox(
+                            height: 50,
+                            width: 300,
+                            child: ElevatedButton(
+                                style: ElevatedButton.styleFrom(
+                                  elevation: 6,
+                                  primary: Colors
+                                      .redAccent, //Color(0xffFFD68E), // background
+                                  onPrimary: Colors.black, // foreground
+                                ),
+                                onPressed: () async {
+                                  await _walletOptions.deleteWallet(context,
+                                      walletNbr, walletName, derivation);
+                                  WidgetsBinding.instance
+                                      .addPostFrameCallback((_) {
+                                    _myWalletProvider.listWallets =
+                                        _myWalletProvider.getAllWalletsNames();
+                                    _myWalletProvider.rebuildWidget();
+                                  });
+                                },
+                                child: Text('Supprimer ce portefeuille',
+                                    style: TextStyle(fontSize: 20)))),
+                        SizedBox(height: 50),
+                        Text(
+                          'Portefeuille déverrouillé',
+                          style: TextStyle(
+                              color: Colors.green,
+                              fontWeight: FontWeight.w700,
+                              fontSize: 15),
+                        ),
+                        SizedBox(height: 10)
+                      ])),
+                    ]),
+                  )),
+        ));
   }
 }
diff --git a/lib/screens/myWallets/walletsHome.dart b/lib/screens/myWallets/walletsHome.dart
index a9611a1d94817268a751630247fb8abb2b06260c..d7ddd8482b8b7a7f494f1ad1dcdbc08fdd748e87 100644
--- a/lib/screens/myWallets/walletsHome.dart
+++ b/lib/screens/myWallets/walletsHome.dart
@@ -1,9 +1,9 @@
+import 'package:flutter/services.dart';
 import 'package:gecko/models/myWallets.dart';
 import 'package:gecko/models/walletOptions.dart';
-import 'package:gecko/screens/myWallets/generateWallets.dart';
 import 'package:flutter/material.dart';
-import 'package:gecko/screens/myWallets/importWallet.dart';
-import 'package:gecko/screens/myWallets/walletOptions.dart';
+import 'package:gecko/screens/myWallets/unlockingWallet.dart';
+import 'package:gecko/screens/onBoarding/0_noKeychainFound.dart';
 import 'package:provider/provider.dart';
 
 // ignore: must_be_immutable
@@ -13,6 +13,7 @@ class WalletsHome extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     MyWalletsProvider myWalletProvider =
         Provider.of<MyWalletsProvider>(context);
     WalletOptionsProvider _walletOptions =
@@ -48,59 +49,15 @@ class WalletsHome extends StatelessWidget {
                               });
                         },
                         child: Container(
-                            height: 40.0,
-                            width: 40.0,
+                            height: 40,
+                            width: 40,
                             child: Icon(Icons.person_add_alt_1_rounded,
                                 color: Colors.grey[850])),
                         backgroundColor: Color(0xffEFEFBF))))),
         body: SafeArea(
-            child: Column(children: <Widget>[
-          Visibility(
-              visible: (!isWalletsExists),
-              child: Column(children: <Widget>[
-                SizedBox(height: 120),
-                Center(
-                    child: Text("Vous n'avez encore généré aucun portefeuille.",
-                        style: TextStyle(
-                            fontSize: 20, fontWeight: FontWeight.w500),
-                        textAlign: TextAlign.center)),
-                SizedBox(height: 80),
-                ElevatedButton(
-                    style: ElevatedButton.styleFrom(
-                      primary: Color(0xffFFD68E), // background
-                      onPrimary: Colors.black, // foreground
-                    ),
-                    onPressed: () => Navigator.push(
-                          context,
-                          MaterialPageRoute(builder: (context) {
-                            return GenerateWalletsScreen();
-                          }),
-                        ),
-                    child: Text('Générer un trousseau',
-                        style: TextStyle(fontSize: 20))),
-                SizedBox(height: 15),
-                Center(
-                    child: Text("ou",
-                        style: TextStyle(
-                            fontSize: 20, fontWeight: FontWeight.w500),
-                        textAlign: TextAlign.center)),
-                SizedBox(height: 15),
-                ElevatedButton(
-                    style: ElevatedButton.styleFrom(
-                      primary: Color(0xffFFD68E), // background
-                      onPrimary: Colors.black, // foreground
-                    ),
-                    onPressed: () => Navigator.push(
-                          context,
-                          MaterialPageRoute(builder: (context) {
-                            return ImportWalletScreen();
-                          }),
-                        ),
-                    child: Text('Importer un portefeuille existant',
-                        style: TextStyle(fontSize: 20))),
-              ])),
-          Visibility(visible: isWalletsExists, child: myWalletsList(context))
-        ])));
+            child: !isWalletsExists
+                ? NoKeyChainScreen()
+                : myWalletsList(context)));
   }
 
   Widget myWalletsList(BuildContext context) {
@@ -140,7 +97,7 @@ class WalletsHome extends StatelessWidget {
           dense: true,
           onTap: () {
             Navigator.push(context, MaterialPageRoute(builder: (context) {
-              return WalletOptions(
+              return UnlockingWallet(
                   walletNbr: int.parse(_repository.split(':')[0]),
                   walletName: _repository.split(':')[1],
                   derivation: int.parse(_repository.split(':')[2]));
diff --git a/lib/screens/onBoarding/0_noKeychainFound.dart b/lib/screens/onBoarding/0_noKeychainFound.dart
new file mode 100644
index 0000000000000000000000000000000000000000..d5c9acbca0daee69f3b351737769c8a374090af1
--- /dev/null
+++ b/lib/screens/onBoarding/0_noKeychainFound.dart
@@ -0,0 +1,112 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/myWallets/importWallet.dart';
+import 'package:gecko/screens/onBoarding/1.dart';
+// import 'package:gecko/models/home.dart';
+// import 'package:provider/provider.dart';
+
+// ignore: must_be_immutable
+class NoKeyChainScreen extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    CommonElements common = CommonElements();
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        // backgroundColor: Colors.white,
+        // appBar: GeckoSpeechAppBar('Mes portefeuilles'),
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(context, 'Mes portefeuilles', 0),
+            common.bubbleSpeak(
+              "Je ne connais pour l’instant aucun de vos portefeuilles.\n\nVous pouvez en créer un nouveau, ou bien importer un portefeuille Cesium existant.",
+            ),
+            SizedBox(height: 90),
+            Container(
+              child: ClipOval(
+                child: Material(
+                  color: Color(0xffFFD58D), // button color
+                  child: InkWell(
+                      splashColor: Color(0xffD28928), // inkwell color
+                      child: Padding(
+                          padding: EdgeInsets.all(8),
+                          child: Image(
+                              image: AssetImage('assets/onBoarding/wallet.png'),
+                              height: 90)),
+                      onTap: () {
+                        Navigator.push(
+                            context,
+                            FaderTransition(
+                                page: OnboardingStepOne(), isFast: true));
+                      }),
+                ),
+              ),
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: Colors.white,
+                boxShadow: [
+                  BoxShadow(
+                      color: Colors.grey,
+                      blurRadius: 4.0,
+                      offset: Offset(2.0, 2.5),
+                      spreadRadius: 0.5)
+                ],
+              ),
+            ),
+            SizedBox(height: 15),
+            Text(
+              "Créer un nouveau\nportefeuille",
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                  color: Colors.black,
+                  fontSize: 16,
+                  fontWeight: FontWeight.w500),
+            ),
+            SizedBox(height: 70),
+            Container(
+              child: ClipOval(
+                child: Material(
+                  color: Color(0xffFFD58D), // button color
+                  child: InkWell(
+                      splashColor: Color(0xffD28928), // inkwell color
+                      child: Padding(
+                        padding: EdgeInsets.all(12),
+                        child:
+                            // Image(
+                            // image: AssetImage('assets/cesium_bw3.png'),
+                            // height: 60),
+                            SvgPicture.asset('assets/cesium_small.svg',
+                                semanticsLabel: 'Cesium Logo', height: 48),
+                      ),
+                      onTap: () {
+                        Navigator.push(context,
+                            SlideLeftRoute(page: ImportWalletScreen()));
+                      }),
+                ),
+              ),
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: Colors.white,
+                boxShadow: [
+                  BoxShadow(
+                      color: Colors.grey,
+                      blurRadius: 4.0,
+                      offset: Offset(2.0, 2.5),
+                      spreadRadius: 0.5)
+                ],
+              ),
+            ),
+            SizedBox(height: 10),
+            Text(
+              "Importer un\nportefeuille Cesium",
+              textAlign: TextAlign.center,
+              style: TextStyle(color: Colors.black, fontSize: 13),
+            )
+          ]),
+        ));
+  }
+}
diff --git a/lib/screens/onBoarding/1.dart b/lib/screens/onBoarding/1.dart
new file mode 100644
index 0000000000000000000000000000000000000000..8be676401da5d8c6d8846ded3571efc098d8ce7d
--- /dev/null
+++ b/lib/screens/onBoarding/1.dart
@@ -0,0 +1,57 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/2.dart';
+// import 'package:gecko/models/home.dart';
+// import 'package:provider/provider.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepOne extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+  final int progress = 1;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    CommonElements common = CommonElements();
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Nouveau portefeuilles', progress),
+            common.bubbleSpeak(
+              "Il semblerait que vous n’ayez pas encore de trousseau.\n\nUn trousseau vous permet de gérer un ou plusieurs portefeuilles.",
+            ),
+            SizedBox(height: 90),
+            Image.asset(
+              'assets/onBoarding/keys-and-wallets-horizontal.png',
+              height: 200,
+            ),
+            Expanded(
+                child: Align(
+                    alignment: Alignment.bottomCenter,
+                    child: SizedBox(
+                      width: 400,
+                      height: 62,
+                      child: ElevatedButton(
+                          style: ElevatedButton.styleFrom(
+                            elevation: 5,
+                            primary: Color(0xffD28928),
+                            onPrimary: Colors.white, // foreground
+                          ),
+                          onPressed: () {
+                            Navigator.push(
+                                context,
+                                FaderTransition(
+                                    page: OnboardingStepTwo(), isFast: true));
+                          },
+                          child: Text('Créer mon trousseau',
+                              style: TextStyle(fontSize: 20))),
+                    ))),
+            SizedBox(height: 80),
+          ]),
+        ));
+  }
+}
diff --git a/lib/screens/onBoarding/10.dart b/lib/screens/onBoarding/10.dart
new file mode 100644
index 0000000000000000000000000000000000000000..a70f5e87cace9d59595715cc4d5680836c915e04
--- /dev/null
+++ b/lib/screens/onBoarding/10.dart
@@ -0,0 +1,56 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/11.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepTwelve extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+  final int progress = 9;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    CommonElements common = CommonElements();
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Ma phrase de restauration', progress),
+            common.bubbleSpeak(
+                "Si un jour vous changez de téléphone, votre code secret sera différent, mais il vous suffira de me redonner votre phrase de restauration pour recréer votre trousseau."),
+            SizedBox(height: 10),
+            Image.asset(
+              'assets/onBoarding/plusieurs-codes-secrets-un-trousseau.png',
+              height: 410 * ratio,
+            ),
+            Expanded(
+                child: Align(
+                    alignment: Alignment.bottomCenter,
+                    child: SizedBox(
+                      width: 400,
+                      height: 62,
+                      child: ElevatedButton(
+                          style: ElevatedButton.styleFrom(
+                            elevation: 5,
+                            primary: Color(0xffD28928),
+                            onPrimary: Colors.white, // foreground
+                          ),
+                          onPressed: () {
+                            Navigator.push(
+                              context,
+                              FaderTransition(
+                                  page: OnboardingStepThirteen(), isFast: true),
+                            );
+                          },
+                          child: Text("Générer le code secret",
+                              style: TextStyle(fontSize: 20))),
+                    ))),
+            SizedBox(height: isTall ? 80 : 40),
+          ]),
+        ));
+  }
+}
diff --git a/lib/screens/onBoarding/11.dart b/lib/screens/onBoarding/11.dart
new file mode 100644
index 0000000000000000000000000000000000000000..b10fd026af517d26ad4a5c7443e5dd49e920d58b
--- /dev/null
+++ b/lib/screens/onBoarding/11.dart
@@ -0,0 +1,123 @@
+import 'dart:ui';
+import 'package:dubp/dubp.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/models/generateWallets.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/12.dart';
+import 'package:provider/provider.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepThirteen extends StatelessWidget {
+  NewWallet generatedWallet;
+  final int progress = 10;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    GenerateWalletsProvider _generateWalletProvider =
+        Provider.of<GenerateWalletsProvider>(context);
+    // MyWalletsProvider myWalletProvider =
+    //     Provider.of<MyWalletsProvider>(context);
+    CommonElements common = CommonElements();
+    _generateWalletProvider.pin.text = '';
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            FutureBuilder(
+                future: _generateWalletProvider.changePinCode(reload: false),
+                // initialData: '...',
+                builder: (context, snapshot) {
+                  generatedWallet = snapshot.data;
+                  return Visibility(visible: false, child: Text(''));
+                }),
+            common.onboardingProgressBar(
+                context, 'Ma phrase de restauration', progress),
+            common.bubbleSpeakRich(<TextSpan>[
+              TextSpan(
+                  text:
+                      "Et voilà votre code secret !\n\nMémorisez-le ou notez-le, car il vous sera demandé "),
+              TextSpan(
+                  text: 'à chaque fois',
+                  style: TextStyle(fontWeight: FontWeight.bold)),
+              TextSpan(
+                  text:
+                      " que vous voudrez effectuer un paiement sur cet appareil."),
+            ]),
+            SizedBox(height: 100),
+            Container(
+              child: Stack(
+                alignment: Alignment.centerRight,
+                children: <Widget>[
+                  TextField(
+                      enabled: false,
+                      controller: _generateWalletProvider.pin,
+                      maxLines: 1,
+                      textAlign: TextAlign.center,
+                      decoration: InputDecoration(),
+                      style: TextStyle(
+                          letterSpacing: 5,
+                          fontSize: 35.0,
+                          color: Colors.black,
+                          fontWeight: FontWeight.bold)),
+                  IconButton(
+                    icon: Icon(Icons.replay),
+                    color: Color(0xffD28928),
+                    onPressed: () async {
+                      generatedWallet = await _generateWalletProvider
+                          .changePinCode(reload: false);
+                    },
+                  ),
+                ],
+              ),
+            ),
+            Expanded(
+                child: Align(
+                    alignment: Alignment.bottomCenter,
+                    child: SizedBox(
+                      width: 400,
+                      height: 62,
+                      child: ElevatedButton(
+                          style: ElevatedButton.styleFrom(
+                            elevation: 5,
+                            primary: Color(0xffFFD58D),
+                            onPrimary: Colors.black, // foreground
+                          ),
+                          onPressed: () async {
+                            generatedWallet = await _generateWalletProvider
+                                .changePinCode(reload: false);
+                          },
+                          child: Text("Choisir un autre code secret",
+                              style: TextStyle(fontSize: 20))),
+                    ))),
+            SizedBox(height: 25),
+            SizedBox(
+              width: 400,
+              height: 62,
+              child: ElevatedButton(
+                  style: ElevatedButton.styleFrom(
+                    elevation: 5,
+                    primary: Color(0xffD28928),
+                    onPrimary: Colors.white, // foreground
+                  ),
+                  onPressed: () async {
+                    _generateWalletProvider.isAskedWordValid = false;
+                    _generateWalletProvider.askedWordColor = Colors.black;
+                    Navigator.push(
+                      context,
+                      FaderTransition(
+                          page: OnboardingStepFourteen(
+                              generatedWallet: generatedWallet),
+                          isFast: true),
+                    );
+                  },
+                  child: Text("J'ai noté mon code secret",
+                      style: TextStyle(fontSize: 20))),
+            ),
+            SizedBox(height: 80),
+          ]),
+        ));
+  }
+}
diff --git a/lib/screens/onBoarding/12.dart b/lib/screens/onBoarding/12.dart
new file mode 100644
index 0000000000000000000000000000000000000000..73f44ee356f3ad4c082f4d03bf259661bf7b5895
--- /dev/null
+++ b/lib/screens/onBoarding/12.dart
@@ -0,0 +1,147 @@
+import 'dart:async';
+import 'dart:ui';
+import 'package:dubp/dubp.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/models/generateWallets.dart';
+import 'package:gecko/models/myWallets.dart';
+import 'package:gecko/models/walletOptions.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/13_congratulations.dart';
+import 'package:pin_code_fields/pin_code_fields.dart';
+import 'package:provider/provider.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepFourteen extends StatelessWidget {
+  OnboardingStepFourteen({
+    Key validationKey,
+    @required this.generatedWallet,
+  }) : super(key: validationKey);
+
+  NewWallet generatedWallet;
+  final int progress = 11;
+  final formKey = GlobalKey<FormState>();
+  var pinColor = Color(0xFFA4B600);
+  bool hasError = false;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    // GenerateWalletsProvider _generateWalletProvider =
+    //     Provider.of<GenerateWalletsProvider>(context);
+    WalletOptionsProvider _walletOptions =
+        Provider.of<WalletOptionsProvider>(context);
+    CommonElements common = CommonElements();
+    final int _pinLenght = _walletOptions.getPinLenght(generatedWallet.dewif);
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Ma phrase de restauration', progress),
+            common.bubbleSpeak(
+                "Avez-vous bien mémorisé votre code secret ?\n\nVérifions ça ensemble !\n\nTapez votre code secret dans le champ ci-dessous (après c’est fini, promis-juré-gecko)."),
+            SizedBox(height: isTall ? 80 : 10),
+            pinForm(context, _walletOptions, _pinLenght, 1, 3)
+          ]),
+        ));
+  }
+
+  Widget pinForm(context, WalletOptionsProvider _walletOptions, _pinLenght,
+      int _walletNbr, int _derivation) {
+    // var _walletPin = '';
+// ignore: close_sinks
+    StreamController<ErrorAnimationType> errorController =
+        StreamController<ErrorAnimationType>();
+    TextEditingController _enterPin = TextEditingController();
+    MyWalletsProvider _myWalletProvider =
+        Provider.of<MyWalletsProvider>(context);
+    GenerateWalletsProvider _generateWalletProvider =
+        Provider.of<GenerateWalletsProvider>(context);
+
+    return Form(
+      key: formKey,
+      child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 30),
+          child: PinCodeTextField(
+            autoFocus: true,
+            appContext: context,
+            pastedTextStyle: TextStyle(
+              color: Colors.green.shade600,
+              fontWeight: FontWeight.bold,
+            ),
+            length: _pinLenght,
+            obscureText: false,
+            obscuringCharacter: '*',
+            animationType: AnimationType.fade,
+            validator: (v) {
+              if (v.length < _pinLenght) {
+                return "Votre code PIN fait $_pinLenght caractères";
+              } else {
+                return null;
+              }
+            },
+            pinTheme: PinTheme(
+              activeColor: pinColor,
+              borderWidth: 4,
+              shape: PinCodeFieldShape.box,
+              borderRadius: BorderRadius.circular(5),
+              fieldHeight: 60,
+              fieldWidth: 50,
+              activeFillColor: hasError ? Colors.blueAccent : Colors.black,
+            ),
+            cursorColor: Colors.black,
+            animationDuration: Duration(milliseconds: 300),
+            textStyle: TextStyle(fontSize: 20, height: 1.6),
+            backgroundColor: Color(0xffF9F9F1),
+            enableActiveFill: false,
+            errorAnimationController: errorController,
+            controller: _enterPin,
+            keyboardType: TextInputType.text,
+            boxShadows: [
+              BoxShadow(
+                offset: Offset(0, 1),
+                color: Colors.black12,
+                blurRadius: 10,
+              )
+            ],
+            onCompleted: (_pin) async {
+              print("Completed");
+              // final resultWallet = await _walletOptions.readLocalWallet(
+              //     _walletNbr, _pin.toUpperCase(), _pinLenght, _derivation);
+              final bool resultWallet = await _walletOptions.checkPinOK(
+                  generatedWallet.dewif, _pin.toUpperCase(), _pinLenght);
+              if (resultWallet) {
+                pinColor = Colors.green[500];
+                print(generatedWallet.pin);
+                await _generateWalletProvider.storeWallet(
+                    generatedWallet, 'Mon portefeuille courant', context,
+                    isHD: true);
+                _myWalletProvider.getAllWalletsNames();
+                _walletOptions.reloadBuild();
+                _myWalletProvider.rebuildWidget();
+                Navigator.push(
+                  context,
+                  FaderTransition(
+                      page: OnboardingStepFiveteen(), isFast: false),
+                );
+              } else {
+                errorController.add(ErrorAnimationType
+                    .shake); // Triggering error shake animation
+                hasError = true;
+                pinColor = Colors.red[600];
+                _walletOptions.reloadBuild();
+              }
+            },
+            onChanged: (value) {
+              if (pinColor != Color(0xFFA4B600)) {
+                pinColor = Color(0xFFA4B600);
+              }
+              print(value);
+            },
+          )),
+    );
+  }
+}
diff --git a/lib/screens/onBoarding/13_congratulations.dart b/lib/screens/onBoarding/13_congratulations.dart
new file mode 100644
index 0000000000000000000000000000000000000000..d55b6f444dcff77202f8f300df314b71cc9375c5
--- /dev/null
+++ b/lib/screens/onBoarding/13_congratulations.dart
@@ -0,0 +1,60 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/myWallets/walletsHome.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepFiveteen extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+  final int progress = 12;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    CommonElements common = CommonElements();
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Ma phrase de restauration', progress),
+            common.bubbleSpeak(
+              "Top !\n\nVotre trousseau de clef et votre portefeuille ont été créés avec un immense succès.\n\nFélicitations !",
+            ),
+            SizedBox(height: isTall ? 20 : 10),
+            Image.asset(
+              'assets/onBoarding/gecko-clin.gif',
+              height: isTall ? 400 : 300,
+            ),
+            Expanded(
+                child: Align(
+                    alignment: Alignment.bottomCenter,
+                    child: SizedBox(
+                      width: 400,
+                      height: 62,
+                      child: ElevatedButton(
+                          style: ElevatedButton.styleFrom(
+                            elevation: 5,
+                            primary: Color(0xffD28928),
+                            onPrimary: Colors.white, // foreground
+                          ),
+                          onPressed: () {
+                            Navigator.popUntil(
+                              context,
+                              ModalRoute.withName('/'),
+                            );
+                            Navigator.push(
+                              context,
+                              SmoothTransition(page: WalletsHome()),
+                            );
+                          },
+                          child: Text("Accéder à mes portefeuilles",
+                              style: TextStyle(fontSize: 20))),
+                    ))),
+            SizedBox(height: 80),
+          ]),
+        ));
+  }
+}
diff --git a/lib/screens/onBoarding/2.dart b/lib/screens/onBoarding/2.dart
new file mode 100644
index 0000000000000000000000000000000000000000..6cdfaf897177d3205be8a9778eed07639dc680bd
--- /dev/null
+++ b/lib/screens/onBoarding/2.dart
@@ -0,0 +1,57 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/3.dart';
+// import 'package:gecko/screens/commonElements.dart';
+// import 'package:gecko/models/home.dart';
+// import 'package:provider/provider.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepTwo extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+  final int progress = 2;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    CommonElements common = CommonElements();
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Nouveau portefeuilles', progress),
+            common.bubbleSpeak(
+              "Un trousseau est créé à partir d’une phrase de restauration.",
+            ),
+            SizedBox(height: 70),
+            Image.asset(
+                'assets/onBoarding/keys-and-wallets-horizontal-plus-phrase.png'),
+            Expanded(
+                child: Align(
+                    alignment: Alignment.bottomCenter,
+                    child: SizedBox(
+                      width: 400,
+                      height: 62,
+                      child: ElevatedButton(
+                        style: ElevatedButton.styleFrom(
+                          elevation: 5,
+                          primary: Color(0xffD28928),
+                          onPrimary: Colors.white, // foreground
+                        ),
+                        onPressed: () {
+                          Navigator.push(
+                            context,
+                            FaderTransition(
+                                page: OnboardingStepFor(), isFast: true),
+                          );
+                        },
+                        child: Text("D'accord", style: TextStyle(fontSize: 20)),
+                      ),
+                    ))),
+            SizedBox(height: 80),
+          ]),
+        ));
+  }
+}
diff --git a/lib/screens/onBoarding/3.dart b/lib/screens/onBoarding/3.dart
new file mode 100644
index 0000000000000000000000000000000000000000..279568ff033a3d710eae7d02b82eb76a86702fcf
--- /dev/null
+++ b/lib/screens/onBoarding/3.dart
@@ -0,0 +1,62 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/4.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepFor extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+  final int progress = 3;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    CommonElements common = CommonElements();
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Ma phrase de restauration', progress),
+            common.bubbleSpeak(
+              "Si un jour vous changez de téléphone, il vous suffira de me redonner votre phrase de restauration pour recréer votre trousseau.",
+            ),
+            SizedBox(height: isTall ? 15 : 0),
+            // Row(children: <Widget>[
+            // Align(
+            //     alignment: Alignment.centerRight,
+            //     child:
+            Image.asset(
+              'assets/onBoarding/plusieurs-appareils-un-trousseau.png',
+              height: 400 * ratio,
+            ),
+            // ]),
+            Expanded(
+                child: Align(
+                    alignment: Alignment.bottomCenter,
+                    child: SizedBox(
+                      width: 400,
+                      height: 62,
+                      child: ElevatedButton(
+                          style: ElevatedButton.styleFrom(
+                            elevation: 5,
+                            primary: Color(0xffD28928),
+                            onPrimary: Colors.white, // foreground
+                          ),
+                          onPressed: () {
+                            Navigator.push(
+                              context,
+                              FaderTransition(
+                                  page: OnboardingStepFive(), isFast: true),
+                            );
+                          },
+                          child: Text("J'ai compris",
+                              style: TextStyle(fontSize: 20))),
+                    ))),
+            SizedBox(height: 80),
+          ]),
+        ));
+  }
+}
diff --git a/lib/screens/onBoarding/4.dart b/lib/screens/onBoarding/4.dart
new file mode 100644
index 0000000000000000000000000000000000000000..4f239df95aa2c86e36ed2123755e3a6b16713cb5
--- /dev/null
+++ b/lib/screens/onBoarding/4.dart
@@ -0,0 +1,57 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/5.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepFive extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+  final int progress = 4;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    CommonElements common = CommonElements();
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Ma phrase de restauration', progress),
+            common.bubbleSpeak(
+              "Par contre, attention :\n\nDans une blockchain, il n’y a pas de procédure de récupération de trousseau.\n\nSi vous perdez votre phrase de restauration, je ne pourrai pas vous la communiquer, et vous ne pourrez donc plus jamais accéder à votre compte.",
+            ),
+            SizedBox(height: isTall ? 30 : 10),
+            Image.asset(
+              'assets/onBoarding/maison-qui-brule.png',
+              width: 320 * ratio,
+            ),
+            Expanded(
+                child: Align(
+                    alignment: Alignment.bottomCenter,
+                    child: SizedBox(
+                      width: 400,
+                      height: 62,
+                      child: ElevatedButton(
+                          style: ElevatedButton.styleFrom(
+                            elevation: 5,
+                            primary: Color(0xffD28928),
+                            onPrimary: Colors.white, // foreground
+                          ),
+                          onPressed: () {
+                            Navigator.push(
+                              context,
+                              FaderTransition(
+                                  page: OnboardingStepSeven(), isFast: true),
+                            );
+                          },
+                          child: Text("J'ai compris",
+                              style: TextStyle(fontSize: 20))),
+                    ))),
+            SizedBox(height: 80),
+          ]),
+        ));
+  }
+}
diff --git a/lib/screens/onBoarding/5.dart b/lib/screens/onBoarding/5.dart
new file mode 100644
index 0000000000000000000000000000000000000000..38eeece633738a28d4a3c9f62d22bf8375c7cb40
--- /dev/null
+++ b/lib/screens/onBoarding/5.dart
@@ -0,0 +1,74 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/6.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepSeven extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+  final int progress = 5;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    CommonElements common = CommonElements();
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Ma phrase de restauration', progress),
+            common.bubbleSpeakRich(
+              <TextSpan>[
+                TextSpan(text: "Munissez-vous d'"),
+                TextSpan(
+                    text: 'un papier et d’un crayon\n',
+                    style: TextStyle(fontWeight: FontWeight.bold)),
+                TextSpan(
+                    text:
+                        "afin de pouvoir noter votre phrase de restauration."),
+              ],
+            ),
+            Expanded(
+                child: Align(
+              alignment: Alignment.bottomCenter,
+              child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
+                Container(
+                  padding: const EdgeInsets.only(bottom: 90),
+                  child: common.bubbleSpeak(
+                    "Moi, j’ai déjà essayé de\nmémoriser une phrase de\nrestauration, mais je n’ai\npas une mémoire\nd’éléphant.",
+                  ),
+                ),
+                Image.asset(
+                  'assets/onBoarding/chopp-gecko.png',
+                  height: 200,
+                ),
+              ]),
+            )),
+            SizedBox(height: isTall ? 120 : 50),
+            SizedBox(
+              width: 400,
+              height: 62,
+              child: ElevatedButton(
+                  style: ElevatedButton.styleFrom(
+                    elevation: 5,
+                    primary: Color(0xffD28928),
+                    onPrimary: Colors.white, // foreground
+                  ),
+                  onPressed: () {
+                    Navigator.push(
+                      context,
+                      FaderTransition(
+                          page: OnboardingStepEight(), isFast: true),
+                    );
+                  },
+                  child: Text("J'ai de quoi noter",
+                      style: TextStyle(fontSize: 20))),
+            ),
+            SizedBox(height: 80),
+          ]),
+        ));
+  }
+}
diff --git a/lib/screens/onBoarding/6.dart b/lib/screens/onBoarding/6.dart
new file mode 100644
index 0000000000000000000000000000000000000000..2988d1adbfe2f3ceb8e2d0582725755bbed245aa
--- /dev/null
+++ b/lib/screens/onBoarding/6.dart
@@ -0,0 +1,117 @@
+import 'dart:ui';
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/7.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepEight extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+  final int progress = 6;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    CommonElements common = CommonElements();
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Ma phrase de restauration', progress),
+            common.bubbleSpeak(
+              "J’ai généré votre phrase de restauration !\nTâchez de la garder bien secrète, car elle permet à quiconque la connaît d’accéder à tous vos portefeuilles.",
+            ),
+            SizedBox(height: isTall ? 61 : 31),
+            // SizedBox(height: 30),
+            sentanceArray(context),
+            // ),
+            Expanded(
+                child: Align(
+                    alignment: Alignment.bottomCenter,
+                    child: SizedBox(
+                      width: 400,
+                      height: 62,
+                      child: ElevatedButton(
+                          style: ElevatedButton.styleFrom(
+                            elevation: 5,
+                            primary: Color(0xffD28928),
+                            onPrimary: Colors.white, // foreground
+                          ),
+                          onPressed: () {
+                            Navigator.push(
+                              context,
+                              FaderTransition(
+                                  page: OnboardingStepNine(), isFast: false),
+                            );
+                          },
+                          child: Text("Afficher ma phrase",
+                              style: TextStyle(fontSize: 20))),
+                    ))),
+            SizedBox(height: 80),
+          ]),
+        ));
+  }
+}
+
+Widget sentanceArray(BuildContext context) {
+  return Container(
+      padding: EdgeInsets.symmetric(horizontal: 12),
+      child: Container(
+          decoration: BoxDecoration(
+              border: Border.all(color: Colors.black),
+              color: Colors.grey[300],
+              borderRadius: BorderRadius.all(
+                const Radius.circular(10),
+              )),
+          // color: Colors.grey[300],
+          padding: EdgeInsets.all(20),
+          child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              mainAxisSize: MainAxisSize.max,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: <Widget>[
+                Row(children: <Widget>[
+                  arrayCell("1:exquis"),
+                  arrayCell("2:favori"),
+                  arrayCell("3:curseur"),
+                  arrayCell("4:relatif"),
+                ]),
+                SizedBox(height: 15),
+                Row(children: <Widget>[
+                  arrayCell("5:embellir"),
+                  arrayCell("6:cultiver"),
+                  arrayCell("7:bureau"),
+                  arrayCell("8:ossature"),
+                ]),
+                SizedBox(height: 15),
+                Row(children: <Widget>[
+                  arrayCell("9:labial"),
+                  arrayCell("10:science"),
+                  arrayCell("11:théorie"),
+                  arrayCell("12:Monnaie"),
+                ]),
+              ])));
+}
+
+Widget arrayCell(dataWord) {
+  return Container(
+      width: 102,
+      child: Column(
+        children: <Widget>[
+          ImageFiltered(
+            imageFilter: ImageFilter.blur(sigmaX: 1, sigmaY: 1),
+            child: Text(dataWord.split(':')[0],
+                style: TextStyle(fontSize: 14, color: Colors.black)),
+          ),
+          SizedBox(height: 2),
+          ImageFiltered(
+            imageFilter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
+            child: Text(dataWord.split(':')[1],
+                style: TextStyle(fontSize: 20, color: Colors.black)),
+          )
+        ],
+      ));
+}
diff --git a/lib/screens/onBoarding/7.dart b/lib/screens/onBoarding/7.dart
new file mode 100644
index 0000000000000000000000000000000000000000..be08955f26ff21e22e5b46d6f6184925f5f78607
--- /dev/null
+++ b/lib/screens/onBoarding/7.dart
@@ -0,0 +1,197 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/models/generateWallets.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/8.dart';
+import 'package:printing/printing.dart';
+import 'package:provider/provider.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepNine extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+  final int progress = 6;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    GenerateWalletsProvider _generateWalletProvider =
+        Provider.of<GenerateWalletsProvider>(context);
+    CommonElements common = CommonElements();
+
+    // _generateWalletProvider.generateMnemonic();
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Ma phrase de restauration', progress),
+            common.bubbleSpeak(
+              "C’est le moment de noter votre phrase !",
+              long: 60,
+            ),
+            SizedBox(height: isTall ? 100 : 70),
+            sentanceArray(context),
+            SizedBox(height: isTall ? 20 : 15),
+            GestureDetector(
+              onTap: () {
+                Navigator.push(
+                  context,
+                  MaterialPageRoute(builder: (context) {
+                    return PrintWallet(
+                        _generateWalletProvider.generatedMnemonic);
+                  }),
+                );
+              },
+              child: Image.asset(
+                'assets/printer.png',
+              ),
+            ),
+            Expanded(
+                child: Align(
+                    alignment: Alignment.bottomCenter,
+                    child: SizedBox(
+                      width: 400,
+                      height: 62,
+                      child: ElevatedButton(
+                          style: ElevatedButton.styleFrom(
+                            elevation: 5,
+                            primary: Color(0xffFFD58D),
+                            onPrimary: Colors.black, // foreground
+                          ),
+                          onPressed: () {
+                            _generateWalletProvider.reloadBuild();
+                          },
+                          child: Text("Choisir une autre phrase",
+                              style: TextStyle(fontSize: 20))),
+                    ))),
+            SizedBox(height: 25),
+            SizedBox(
+              width: 400,
+              height: 62,
+              child: ElevatedButton(
+                  style: ElevatedButton.styleFrom(
+                    elevation: 5,
+                    primary: Color(0xffD28928),
+                    onPrimary: Colors.white, // foreground
+                  ),
+                  onPressed: () {
+                    _generateWalletProvider.nbrWord =
+                        _generateWalletProvider.getRandomInt();
+                    _generateWalletProvider.nbrWordAlpha =
+                        _generateWalletProvider
+                            .intToString(_generateWalletProvider.nbrWord + 1);
+
+                    Navigator.push(
+                      context,
+                      FaderTransition(
+                          page: OnboardingStepTen(
+                              generatedMnemonic:
+                                  _generateWalletProvider.generatedMnemonic,
+                              generatedWallet:
+                                  _generateWalletProvider.actualWallet),
+                          isFast: true),
+                    );
+                  },
+                  child: Text("J'ai noté ma phrase",
+                      style: TextStyle(fontSize: 20))),
+            ),
+            SizedBox(height: 80),
+          ]),
+        ));
+  }
+}
+
+Widget sentanceArray(BuildContext context) {
+  GenerateWalletsProvider _generateWalletProvider =
+      Provider.of<GenerateWalletsProvider>(context);
+
+  return FutureBuilder(
+      future: _generateWalletProvider.generateWordList(),
+      initialData: [
+        '1:...',
+        '2:...',
+        '3:...',
+        '4:...',
+        '5:...',
+        '6:...',
+        '7:...',
+        '8:...',
+        '9:...',
+        '10:...',
+        '11:...',
+        '12:...',
+      ],
+      builder: (context, formatedArray) {
+        return Container(
+            padding: EdgeInsets.symmetric(horizontal: 12),
+            child: Container(
+                decoration: BoxDecoration(
+                    border: Border.all(color: Colors.black),
+                    color: Colors.grey[300],
+                    borderRadius: BorderRadius.all(
+                      const Radius.circular(10),
+                    )),
+                // color: Colors.grey[300],
+                padding: EdgeInsets.all(20),
+                child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    mainAxisSize: MainAxisSize.max,
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: <Widget>[
+                      Row(children: <Widget>[
+                        arrayCell(formatedArray.data[0]),
+                        arrayCell(formatedArray.data[1]),
+                        arrayCell(formatedArray.data[2]),
+                        arrayCell(formatedArray.data[3]),
+                      ]),
+                      SizedBox(height: 15),
+                      Row(children: <Widget>[
+                        arrayCell(formatedArray.data[4]),
+                        arrayCell(formatedArray.data[5]),
+                        arrayCell(formatedArray.data[6]),
+                        arrayCell(formatedArray.data[7]),
+                      ]),
+                      SizedBox(height: 15),
+                      Row(children: <Widget>[
+                        arrayCell(formatedArray.data[8]),
+                        arrayCell(formatedArray.data[9]),
+                        arrayCell(formatedArray.data[10]),
+                        arrayCell(formatedArray.data[11]),
+                      ]),
+                    ])));
+      });
+}
+
+Widget arrayCell(dataWord) {
+  return Container(
+      width: 102,
+      child: Column(children: <Widget>[
+        Text(dataWord.split(':')[0], style: TextStyle(fontSize: 14)),
+        SizedBox(height: 2),
+        Text(dataWord.split(':')[1],
+            style: TextStyle(fontSize: 19, color: Colors.black)),
+      ]));
+}
+
+// ignore: must_be_immutable
+class PrintWallet extends StatelessWidget {
+  PrintWallet(this.sentence);
+
+  final String sentence;
+
+  @override
+  Widget build(BuildContext context) {
+    GenerateWalletsProvider _generateWalletProvider =
+        Provider.of<GenerateWalletsProvider>(context);
+    return MaterialApp(
+      home: Scaffold(
+        appBar: AppBar(title: Text('Imprimer ce trousseau')),
+        body: PdfPreview(
+          build: (format) => _generateWalletProvider.printWallet(sentence),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/screens/onBoarding/8.dart b/lib/screens/onBoarding/8.dart
new file mode 100644
index 0000000000000000000000000000000000000000..020e8c3a9d55dc4fd7fc40573be2f847636cfe56
--- /dev/null
+++ b/lib/screens/onBoarding/8.dart
@@ -0,0 +1,177 @@
+import 'dart:ui';
+import 'package:dubp/dubp.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/models/generateWallets.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/9.dart';
+import 'package:provider/provider.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepTen extends StatelessWidget {
+  OnboardingStepTen({
+    Key validationKey,
+    @required this.generatedMnemonic,
+    @required this.generatedWallet,
+  }) : super(key: validationKey);
+
+  String generatedMnemonic;
+  NewWallet generatedWallet;
+
+  TextEditingController tplController = TextEditingController();
+  TextEditingController wordController = TextEditingController();
+  TextEditingController _mnemonicController = TextEditingController();
+
+  final int progress = 7;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    GenerateWalletsProvider _generateWalletProvider =
+        Provider.of<GenerateWalletsProvider>(context);
+    CommonElements common = CommonElements();
+    this._mnemonicController.text = generatedMnemonic;
+
+    return WillPopScope(
+        onWillPop: () {
+          _generateWalletProvider.isAskedWordValid = false;
+          _generateWalletProvider.askedWordColor = Colors.black;
+          return Future<bool>.value(true);
+        },
+        child: Scaffold(
+            resizeToAvoidBottomInset: false,
+            extendBodyBehindAppBar: true,
+            body: SafeArea(
+              child: Column(children: <Widget>[
+                common.onboardingProgressBar(
+                    context, 'Valider ma phrase de restauration', progress),
+                common.bubbleSpeakRich(<TextSpan>[
+                  TextSpan(
+                      text:
+                          "Avez-vous bien noté votre phrase de restauration ?\n\nPour en être sûr, veuillez taper dans le champ ci-dessous le ",
+                      style: TextStyle(fontSize: 16 * ratio)),
+                  TextSpan(
+                      text: '${_generateWalletProvider.nbrWord + 1}ème mot',
+                      style: TextStyle(
+                          fontWeight: FontWeight.bold, fontSize: 16 * ratio)),
+                  TextSpan(
+                      text: " de votre phrase de restauration :",
+                      style: TextStyle(fontSize: 16 * ratio)),
+                ]),
+
+                // LayoutBuilder(builder: (builder, constraints) {
+                //   // 2
+                //   var hasDetailPage = constraints.maxWidth > 480;
+
+                //   if (hasDetailPage) {
+                //     // 3
+                //     return Row(
+                //       children: [
+                //         // 4
+                //         SizedBox(
+                //           width: 250,
+                //           height: 500,
+                //           child: Text('GRAND'),
+                //         ),
+                //         // 5
+                //         Expanded(
+                //           child: Text('GRAND 2'),
+                //         ),
+                //       ],
+                //     );
+                //   } else {
+                //     // 6
+                //     return Text('PETIT');
+                //   }
+                // }),
+
+                // Expanded(
+                //   child:
+                //       //ScreenTypeLayout with custom breakpoints supplied
+                //       ScreenTypeLayout(
+                //     breakpoints: ScreenBreakpoints(
+                //       tablet: 600,
+                //       desktop: 950,
+                //       watch: 480,
+                //     ),
+                //     mobile: Container(color: Colors.blue),
+                //     tablet: Container(color: Colors.yellow),
+                //     desktop: Container(color: Colors.red),
+                //     watch: Container(color: Colors.purple),
+                //   ),
+                // ),
+
+                SizedBox(height: isTall ? 70 : 10),
+                if (isTall)
+                  Text('${_generateWalletProvider.nbrWord + 1}',
+                      style: TextStyle(
+                          fontSize: 17,
+                          color: Color(0xffD28928),
+                          fontWeight: FontWeight.w400)),
+                SizedBox(height: isTall ? 10 : 0),
+                Container(
+                    decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(7),
+                        border: Border.all(
+                          color: Colors.grey[600],
+                          width: 3,
+                        )),
+                    width: 430,
+                    child: TextFormField(
+                        autofocus: true,
+                        enabled: !_generateWalletProvider.isAskedWordValid,
+                        controller: this.wordController,
+                        textInputAction: TextInputAction.next,
+                        onChanged: (value) {
+                          _generateWalletProvider.checkAskedWord(
+                              value, _mnemonicController.text);
+                        },
+                        maxLines: 1,
+                        textAlign: TextAlign.center,
+                        decoration: InputDecoration(
+                          labelStyle: TextStyle(
+                              fontSize: 22.0,
+                              color: Colors.grey[500],
+                              fontWeight: FontWeight.w500),
+                          labelText: _generateWalletProvider.isAskedWordValid
+                              ? "C'est le bon mot !"
+                              : "${_generateWalletProvider.nbrWordAlpha} mot de votre phrase de restauration",
+                          fillColor: Colors.grey[300],
+                          filled: true,
+                          contentPadding: EdgeInsets.all(12),
+                        ),
+                        style: TextStyle(
+                            fontSize: 40.0,
+                            color: _generateWalletProvider.askedWordColor,
+                            fontWeight: FontWeight.w500))),
+                Visibility(
+                    visible: _generateWalletProvider.isAskedWordValid,
+                    child: Expanded(
+                        child: Align(
+                            alignment: Alignment.bottomCenter,
+                            child: SizedBox(
+                              width: 400,
+                              height: 62,
+                              child: ElevatedButton(
+                                  style: ElevatedButton.styleFrom(
+                                    elevation: 5,
+                                    primary: Color(0xffD28928),
+                                    onPrimary: Colors.white, // foreground
+                                  ),
+                                  onPressed: () {
+                                    Navigator.push(
+                                      context,
+                                      FaderTransition(
+                                          page: OnboardingStepEleven(),
+                                          isFast: true),
+                                    );
+                                  },
+                                  child: Text("Continuer",
+                                      style: TextStyle(fontSize: 20))),
+                            )))),
+                SizedBox(height: 80),
+              ]),
+            )));
+  }
+}
diff --git a/lib/screens/onBoarding/9.dart b/lib/screens/onBoarding/9.dart
new file mode 100644
index 0000000000000000000000000000000000000000..d34f1380884fdf524720e5dfd5957f271955037f
--- /dev/null
+++ b/lib/screens/onBoarding/9.dart
@@ -0,0 +1,63 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:gecko/screens/onBoarding/10.dart';
+
+// ignore: must_be_immutable
+class OnboardingStepEleven extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+  final int progress = 8;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    CommonElements common = CommonElements();
+
+    return Scaffold(
+        extendBodyBehindAppBar: true,
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            common.onboardingProgressBar(
+                context, 'Ma phrase de restauration', progress),
+            common.bubbleSpeakRich(<TextSpan>[
+              TextSpan(text: "Super !\n\nJe vais maintenant créer votre "),
+              TextSpan(
+                  text: 'code secret.',
+                  style: TextStyle(fontWeight: FontWeight.bold)),
+              TextSpan(
+                  text:
+                      " \n\nVotre code secret chiffre votre trousseau de clefs, ce qui le rend inutilisable par d’autres, par exemple si vous perdez votre téléphone ou si on vous le vole."),
+            ]),
+            SizedBox(height: isTall ? 50 : 10),
+            Image.asset(
+              'assets/onBoarding/treasure-chest-gecko-souligne.png',
+              height: 280 * ratio, //5": 400
+            ),
+            Expanded(
+                child: Align(
+                    alignment: Alignment.bottomCenter,
+                    child: SizedBox(
+                      width: 400,
+                      height: 62,
+                      child: ElevatedButton(
+                          style: ElevatedButton.styleFrom(
+                            elevation: 5,
+                            primary: Color(0xffD28928),
+                            onPrimary: Colors.white, // foreground
+                          ),
+                          onPressed: () {
+                            Navigator.push(
+                              context,
+                              FaderTransition(
+                                  page: OnboardingStepTwelve(), isFast: true),
+                            );
+                          },
+                          child: Text("J'ai compris",
+                              style: TextStyle(fontSize: 20))),
+                    ))),
+            SizedBox(height: 80),
+          ]),
+        ));
+  }
+}
diff --git a/lib/screens/settings.dart b/lib/screens/settings.dart
index ce0091b9b06b9ac6dc3ac4b91b316ac1c2c3b26d..672cd3fe3bc4179125f3f1cfe1fd19f123e51813 100644
--- a/lib/screens/settings.dart
+++ b/lib/screens/settings.dart
@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:dubp/dubp.dart';
+import 'package:flutter/services.dart';
 import 'package:gecko/models/myWallets.dart';
 import 'package:gecko/screens/myWallets/generateWallets.dart';
 import 'dart:io';
-
 import 'package:gecko/screens/myWallets/importWallet.dart';
 
 // ignore: must_be_immutable
@@ -23,6 +23,7 @@ class SettingsScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     // getAppDirectory();
     return Scaffold(
         appBar: AppBar(
diff --git a/lib/screens/templateScreen.dart b/lib/screens/templateScreen.dart
new file mode 100644
index 0000000000000000000000000000000000000000..6b34beab74134d89a9ae62f018c1b2d771149318
--- /dev/null
+++ b/lib/screens/templateScreen.dart
@@ -0,0 +1,83 @@
+import 'package:flutter/services.dart';
+import 'package:gecko/screens/home.dart';
+import 'package:flutter/material.dart';
+// import 'package:gecko/models/home.dart';
+// import 'package:provider/provider.dart';
+
+// ignore: must_be_immutable
+class TemplateScreen extends StatelessWidget {
+  TextEditingController tplController = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    // HomeProvider _homeProvider = Provider.of<HomeProvider>(context);
+    return Scaffold(
+        appBar: AppBar(
+            title: SizedBox(
+          height: 22,
+          child: Text('Template screen'),
+        )),
+        floatingActionButton: Container(
+            height: 80.0,
+            width: 80.0,
+            child: FittedBox(
+                child: FloatingActionButton(
+              heroTag: "tplButton",
+              onPressed: () => Navigator.push(
+                context,
+                MaterialPageRoute(builder: (context) {
+                  return HomeScreen();
+                }),
+              ),
+              child: Container(
+                height: 40.0,
+                width: 40.0,
+                child: Icon(Icons.home, color: Colors.grey[850]),
+              ),
+              backgroundColor: Color(
+                  0xffEFEFBF), //Color(0xffFFD68E), //Color.fromARGB(500, 204, 255, 255),
+            ))),
+        body: SafeArea(
+          child: Column(children: <Widget>[
+            SizedBox(height: 20),
+            TextField(
+                enabled: true,
+                controller: tplController,
+                maxLines: 1,
+                textAlign: TextAlign.center,
+                decoration: InputDecoration(
+                  contentPadding: EdgeInsets.all(15.0),
+                ),
+                style: TextStyle(
+                    fontSize: 22.0,
+                    color: Colors.black,
+                    fontWeight: FontWeight.w400)),
+            SizedBox(height: 20),
+            ElevatedButton(
+                style: ElevatedButton.styleFrom(
+                  primary: Color(0xffFFD68E), // background
+                  onPrimary: Colors.black, // foreground
+                ),
+                onPressed: () {
+                  Navigator.push(
+                    context,
+                    MaterialPageRoute(builder: (context) {
+                      return HomeScreen();
+                    }),
+                  );
+                },
+                child: Text('Retour Accueil', style: TextStyle(fontSize: 20))),
+            SizedBox(height: 20),
+            GestureDetector(
+                onTap: () {
+                  Navigator.popUntil(
+                    context,
+                    ModalRoute.withName('/'),
+                  );
+                },
+                child: Icon(Icons.home))
+          ]),
+        ));
+  }
+}
diff --git a/pubspec.lock b/pubspec.lock
index 9a59dae69cf2b50afb2b611c62d2812aea41893f..fdb9a2ff82ce79cdc19abcd3f01f4c316a3dda31 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -36,6 +36,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0-nullsafety.1"
+  bubble:
+    dependency: "direct main"
+    description:
+      name: bubble
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.9+1"
   catcher:
     dependency: "direct main"
     description:
@@ -209,6 +216,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.11"
+  flutter_svg:
+    dependency: "direct main"
+    description:
+      name: flutter_svg
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.19.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -436,6 +450,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0-nullsafety.1"
+  path_drawing:
+    dependency: transitive
+    description:
+      name: path_drawing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.1+1"
   path_parsing:
     dependency: transitive
     description:
@@ -569,6 +590,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.2.21"
+  responsive_builder:
+    dependency: "direct main"
+    description:
+      name: responsive_builder
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.3.0"
+  responsive_framework:
+    dependency: "direct main"
+    description:
+      name: responsive_framework
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.14"
   rxdart:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index 21961d80a762235ba12a1443a59b9eb48f5e1c2d..bd656633a2e9cbb15134ba25bbdea645ab00b350 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,11 +1,11 @@
 name: gecko
-description: A new Flutter project.
+description: Pay with G1.
 
 # The following line prevents the package from being accidentally published to
 # pub.dev using `pub publish`. This is preferred for private packages.
 publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 
-version: 0.0.1+17
+version: 0.0.1+20
 
 environment:
   sdk: ">=2.7.0 <3.0.0"
@@ -38,6 +38,10 @@ dependencies:
   sentry: ^4.0.4
   sentry_flutter: ^4.0.4
   catcher: ^0.4.1
+  bubble: ^1.1.9+1
+  flutter_svg: ^0.19.1
+  responsive_framework: ^0.0.14
+  responsive_builder: ^0.3.0
 
 flutter_icons:
   android: "ic_launcher"
@@ -56,13 +60,7 @@ flutter:
   assets:
     - images/
     - config/gva_endpoints.json
-    - assets/icon/gecko_final.png
     - assets/
-    - assets/OpenSans-Regular.ttf
-    - assets/icon_user.png
-    - assets/qrcode-scan.png
-    - assets/blockchain.png
-    - assets/block-space.png
-    - assets/block-space-disabled.png
-    - assets/lock.png
-
+    - assets/icon/
+    - assets/onBoarding/
+    - assets/onBoarding/progress_bar/
diff --git a/scripts/multiRun.sh b/scripts/multiRun.sh
new file mode 100755
index 0000000000000000000000000000000000000000..ec7c2e3fdd212ddfab4d442b6c8f6f5f62b701e4
--- /dev/null
+++ b/scripts/multiRun.sh
@@ -0,0 +1,5 @@
+#!/bin/bash
+
+flutter run -d all
+
+