Merge pull request #1032 from pixelated/forgot-password-page

UI improvements for account recovery flow

18 files changed, 349 insertions, 59 deletions

diff --git a/web-ui/app/images/account-recovery/admins_contact.svg b/web-ui/app/images/account-recovery/admins_contact.svg
new file mode 100644
index 00000000..ae94f307
--- /dev/null
+++ b/web-ui/app/images/account-recovery/admins_contact.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="191px" height="42px" viewBox="0 0 191 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 2 Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Account-Recovery-MVP" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="01-m_Forgot_Password" transform="translate(-92.000000, -261.000000)">
+            <g id="Group-2-Copy" transform="translate(92.000000, 261.000000)">
+                <g id="Group-3-Copy" transform="translate(80.000000, 9.000000)">
+                    <g id="Group-24" transform="translate(0.000000, 0.344444)">
+                        <g id="phone">
+                            <path d="M16.8073019,0 C17.6632335,0 18.4024362,0.302394979 19.024932,0.90719401 C19.6474277,1.51199304 19.958671,2.2435938 19.958671,3.10201823 L19.958671,26.8646484 C19.958671,27.7230729 19.6474277,28.4546736 19.024932,29.0594727 C18.4024362,29.6642717 17.6632335,29.9666667 16.8073019,29.9666667 L3.1513691,29.9666667 C2.29543741,29.9666667 1.55623477,29.6642717 0.933738992,29.0594727 C0.311243218,28.4546736 0,27.7230729 0,26.8646484 L0,3.10201823 C0,2.2435938 0.311243218,1.51199304 0.933738992,0.90719401 C1.55623477,0.302394979 2.29543741,0 3.1513691,0 L16.8073019,0 Z" id="Path" fill="#DDD9ED"></path>
+                            <rect id="Rectangle-4" fill="#FFFFFF" x="1.34642857" y="6.26169154" width="17.5035714" height="17.4432836"></rect>
+                            <path d="M16.8073019,0 C17.6632335,0 18.4024362,0.302394979 19.024932,0.90719401 C19.6474277,1.51199304 19.958671,2.2435938 19.958671,3.10201823 L19.958671,26.8646484 C19.958671,27.7230729 19.6474277,28.4546736 19.024932,29.0594727 C18.4024362,29.6642717 17.6632335,29.9666667 16.8073019,29.9666667 L3.1513691,29.9666667 C2.29543741,29.9666667 1.55623477,29.6642717 0.933738992,29.0594727 C0.311243218,28.4546736 0,27.7230729 0,26.8646484 L0,3.10201823 C0,2.2435938 0.311243218,1.51199304 0.933738992,0.90719401 C1.55623477,0.302394979 2.29543741,0 3.1513691,0 L16.8073019,0 Z M1.28389111,6.2625651 L1.28389111,23.7041016 L18.6747798,23.7041016 L18.6747798,6.2625651 L1.28389111,6.2625651 Z M3.1513691,1.22910156 C2.64559128,1.22910156 2.20790551,1.41444042 1.83829864,1.7851237 C1.46869178,2.15580697 1.28389111,2.59476743 1.28389111,3.10201823 L1.28389111,4.9749349 L18.6747798,4.9749349 L18.6747798,3.10201823 C18.6747798,2.59476743 18.4899792,2.15580697 18.1203723,1.7851237 C17.7507655,1.41444042 17.3130797,1.22910156 16.8073019,1.22910156 L3.1513691,1.22910156 Z M16.8073019,28.7375651 C17.3130797,28.7375651 17.7507655,28.5522262 18.1203723,28.181543 C18.4899792,27.8108597 18.6747798,27.3718992 18.6747798,26.8646484 L18.6747798,24.9917318 L1.28389111,24.9917318 L1.28389111,26.8646484 C1.28389111,27.3718992 1.46869178,27.8108597 1.83829864,28.181543 C2.20790551,28.5522262 2.64559128,28.7375651 3.1513691,28.7375651 L16.8073019,28.7375651 Z M11.2048679,26.8646484 C11.2048679,27.1768028 11.0881517,27.4596884 10.8547158,27.7133138 C10.6212799,27.9669392 10.3294894,28.09375 9.97933548,28.09375 C9.62918161,28.09375 9.33739109,27.9669392 9.10395517,27.7133138 C8.87051926,27.4596884 8.75380305,27.1768028 8.75380305,26.8646484 C8.75380305,26.5134748 8.87051926,26.2110798 9.10395517,25.9574544 C9.33739109,25.703829 9.62918161,25.5770182 9.97933548,25.5770182 C10.3294894,25.5770182 10.6212799,25.703829 10.8547158,25.9574544 C11.0881517,26.2110798 11.2048679,26.5134748 11.2048679,26.8646484 Z M6.88632507,3.74583333 C6.45835922,3.74583333 6.24437951,3.53123044 6.24437951,3.10201823 C6.24437951,2.71182531 6.45835922,2.51673177 6.88632507,2.51673177 L13.0723459,2.51673177 C13.5003117,2.51673177 13.7142914,2.71182531 13.7142914,3.10201823 C13.7142914,3.53123044 13.5003117,3.74583333 13.0723459,3.74583333 L6.88632507,3.74583333 Z" id="e" fill="#4A4745"></path>
+                        </g>
+                    </g>
+                    <path d="M38.5929963,20.6990762 C38.5929963,20.9403506 38.5073834,21.1454307 38.3361551,21.3143227 L30.4474604,29.0953812 C30.276232,29.2642732 30.068315,29.3487179 29.8237031,29.3487179 C29.5790912,29.3487179 29.3711742,29.2642732 29.1999458,29.0953812 L24.6318412,24.5896055 C24.4606129,24.4207134 24.375,24.2156333 24.375,23.974359 C24.375,23.7330846 24.4606129,23.5280045 24.6318412,23.3591125 L25.8793557,22.1286195 C26.0505841,21.9597275 26.2585011,21.8752827 26.503113,21.8752827 C26.7477249,21.8752827 26.9556419,21.9597275 27.1268702,22.1286195 L29.8237031,24.7977035 L35.841126,18.8533368 C36.0123544,18.6844448 36.2202714,18.6 36.4648833,18.6 C36.7094952,18.6 36.9174122,18.6844448 37.0886406,18.8533368 L38.3361551,20.0838298 C38.5073834,20.2527218 38.5929963,20.4578019 38.5929963,20.6990762 Z" id="-copy-5" stroke="#4A4A4A" stroke-width="1.4" fill="#B8E986"></path>
+                </g>
+                <g id="Group-2-Copy-2" transform="translate(139.000000, 14.000000)">
+                    <g id="Group-17-Copy-3">
+                        <path d="M33.6594772,3.45745435 C33.6594772,3.03338815 33.5120634,2.68160596 33.214896,2.39969831 C32.9153887,2.11779067 32.5620636,1.97563211 32.150241,1.97563211 L2.94827538,1.97563211 C2.53645278,1.97563211 2.18312772,2.11779067 1.88596028,2.39969831 C1.58645294,2.68160596 1.43903917,3.03338815 1.43903917,3.45745435 L1.43903917,21.5284572 C1.43903917,21.9525234 1.58645294,22.3043056 1.88596028,22.5886227 C2.18312772,22.8705304 2.53645278,23.0102795 2.94827538,23.0102795 L32.150241,23.0102795 C32.5620636,23.0102795 32.9153887,22.8705304 33.214896,22.5886227 C33.5120634,22.3043056 33.6594772,21.9525234 33.6594772,21.5284572 L33.6594772,3.45745435 Z" id="Path" fill="#E9E7F3"></path>
+                        <path d="M33.6594772,3.45745435 C33.6594772,3.03338815 33.6416783,2.68160596 33.6057981,2.39969831 C33.5696353,2.11779067 33.5269745,1.97563211 33.4772506,1.97563211 L29.951378,1.97563211 C29.9016541,1.97563211 29.8589933,2.11779067 29.8231131,2.39969831 C29.7869503,2.68160596 29.7691514,3.03338815 29.7691514,3.45745435 L29.7691514,21.5284572 C29.7691514,21.9525234 29.7869503,22.3043056 29.8231131,22.5886227 C29.8589933,22.8705304 29.9016541,23.0102795 29.951378,23.0102795 L33.4772506,23.0102795 C33.5269745,23.0102795 33.5696353,22.8705304 33.6057981,22.5886227 C33.6416783,22.3043056 33.6594772,21.9525234 33.6594772,21.5284572 L33.6594772,3.45745435 Z" id="Path" fill="#DDD9ED"></path>
+                        <path d="M31.1230244,18.6346873 C31.534847,18.8708151 31.6027041,19.2225973 31.3289357,19.6924433 C31.1908816,19.9285711 30.9849703,20.046635 30.7112018,20.046635 C30.6199457,20.046635 30.4818915,19.9984457 30.2993792,19.9044764 L23.7195774,15.3867257 C23.3077548,15.1530074 23.2398976,14.7988158 23.5136661,14.3289697 C23.7429764,13.9049035 24.0846019,13.8350289 24.5408827,14.1169366 L31.1230244,18.6346873 Z M17.5492582,16.3770167 L4.73128001,7.83545598 C4.31945742,7.55113887 4.25160028,7.22345135 4.52536871,6.84516502 C4.79913714,6.37531895 5.11736369,6.28134973 5.48472816,6.56325738 L17.5492582,14.6108773 L29.6137882,6.56325738 C29.9811527,6.28134973 30.2993792,6.37531895 30.5754876,6.84516502 C30.849256,7.22345135 30.7813989,7.55113887 30.3695763,7.83545598 L17.5492582,16.3770167 Z M11.5848503,14.3289697 C11.8609586,14.7988158 11.7907616,15.1530074 11.378939,15.3867257 L4.79913714,19.9044764 C4.61662485,19.9984457 4.47857069,20.046635 4.38731455,20.046635 C4.11354612,20.046635 3.90763482,19.9285711 3.77192056,19.6924433 C3.49581223,19.2225973 3.56600926,18.8708151 3.97549196,18.6346873 L10.5576337,14.1169366 C11.0139144,13.8350289 11.35554,13.9049035 11.5848503,14.3289697 L11.5848503,14.3289697 Z M33.6594772,3.45745435 C33.6594772,3.03338815 33.5120634,2.68160596 33.214896,2.39969831 C32.9153887,2.11779067 32.5620636,1.97563211 32.150241,1.97563211 L2.94827538,1.97563211 C2.53645278,1.97563211 2.18312772,2.11779067 1.88596028,2.39969831 C1.58645294,2.68160596 1.43903917,3.03338815 1.43903917,3.45745435 L1.43903917,21.5284572 C1.43903917,21.9525234 1.58645294,22.3043056 1.88596028,22.5886227 C2.18312772,22.8705304 2.53645278,23.0102795 2.94827538,23.0102795 L32.150241,23.0102795 C32.5620636,23.0102795 32.9153887,22.8705304 33.214896,22.5886227 C33.5120634,22.3043056 33.6594772,21.9525234 33.6594772,21.5284572 L33.6594772,3.45745435 Z M34.2421126,1.30580027 C34.8130484,1.89371023 35.0985164,2.61173141 35.0985164,3.45745435 L35.0985164,21.5284572 C35.0985164,22.3765896 34.8130484,23.0946108 34.2421126,23.6825208 C33.6688368,24.2704307 32.9738862,24.5643857 32.150241,24.5643857 L2.94827538,24.5643857 C2.12463019,24.5643857 1.42967957,24.2704307 0.8564038,23.6825208 C0.285467933,23.0946108 0,22.3765896 0,21.5284572 L0,3.45745435 C0,2.61173141 0.285467933,1.89371023 0.8564038,1.30580027 C1.42967957,0.715480845 2.12463019,0.421525865 2.94827538,0.421525865 L32.150241,0.421525865 C32.9738862,0.421525865 33.6688368,0.715480845 34.2421126,1.30580027 L34.2421126,1.30580027 Z" id="Fill-1" fill="#4A4A4A"></path>
+                        <path d="M17.5492582,16.3770167 L4.73128001,7.83545598 C4.31945742,7.55113887 4.25160028,7.22345135 4.52536871,6.84516502 C4.79913714,6.37531895 5.11736369,6.28134973 5.48472816,6.56325738 L17.5492582,14.6108773 L17.5492582,16.3770167 Z" id="Path" fill="#4A4A4A"></path>
+                    </g>
+                    <path d="M51.0829388,21.9627185 L49.8523364,23.2093771 C49.6834293,23.380488 49.4783309,23.4660422 49.2370351,23.4660422 C48.9957393,23.4660422 48.790641,23.380488 48.6217339,23.2093771 L45.9614609,20.5143945 L43.3011879,23.2093771 C43.1322808,23.380488 42.9271825,23.4660422 42.6858867,23.4660422 C42.4445909,23.4660422 42.2394925,23.380488 42.0705854,23.2093771 L40.839983,21.9627185 C40.6710759,21.7916077 40.5866236,21.5838333 40.5866236,21.3393892 C40.5866236,21.0949451 40.6710759,20.8871708 40.839983,20.7160599 L43.500256,18.0210773 L40.839983,15.3260947 C40.6710759,15.1549838 40.5866236,14.9472094 40.5866236,14.7027654 C40.5866236,14.4583213 40.6710759,14.2505469 40.839983,14.079436 L42.0705854,12.8327774 C42.2394925,12.6616666 42.4445909,12.5761124 42.6858867,12.5761124 C42.9271825,12.5761124 43.1322808,12.6616666 43.3011879,12.8327774 L45.9614609,15.52776 L48.6217339,12.8327774 C48.790641,12.6616666 48.9957393,12.5761124 49.2370351,12.5761124 C49.4783309,12.5761124 49.6834293,12.6616666 49.8523364,12.8327774 L51.0829388,14.079436 C51.2518459,14.2505469 51.3362982,14.4583213 51.3362982,14.7027654 C51.3362982,14.9472094 51.2518459,15.1549838 51.0829388,15.3260947 L48.4226658,18.0210773 L51.0829388,20.7160599 C51.2518459,20.8871708 51.3362982,21.0949451 51.3362982,21.3393892 C51.3362982,21.5838333 51.2518459,21.7916077 51.0829388,21.9627185 Z" id="x" stroke="#4A4A4A" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" fill="#F2565B"></path>
+                </g>
+                <g id="Group-2-Copy-3">
+                    <path d="M8.13252691,23.9271619 C6.95549844,22.9955915 6.2,21.5521646 6.2,19.9317865 C6.2,17.1223367 8.47113736,14.8448276 11.2727273,14.8448276 C14.0743172,14.8448276 16.3454545,17.1223367 16.3454545,19.9317865 C16.3454545,21.5521646 15.5899561,22.9955915 14.4129276,23.9271619 C17.527356,25.1772932 19.7272727,28.2316954 19.7272727,31.8013572 C19.7272727,36.4837736 15.9420438,36.0404896 11.2727273,36.0404896 C6.60341075,36.0404896 2.81818182,36.4837736 2.81818182,31.8013572 C2.81818182,28.2316954 5.01809856,25.1772932 8.13252691,23.9271619 Z" id="Combined-Shape-Copy-2" stroke="#4A4745" stroke-width="1.68" fill="#DDD9ED"></path>
+                    <path d="M28.5643451,28.8754378 C27.3873166,27.9438674 26.6318182,26.5004404 26.6318182,24.8800623 C26.6318182,22.0706125 28.9029555,19.7931034 31.7045455,19.7931034 C34.5061354,19.7931034 36.7772727,22.0706125 36.7772727,24.8800623 C36.7772727,26.5004404 36.0217743,27.9438674 34.8447458,28.8754378 C37.9591742,30.125569 40.1590909,33.1799713 40.1590909,36.7496331 C40.1590909,41.4320494 36.373862,40.9887655 31.7045455,40.9887655 C27.0352289,40.9887655 23.25,41.4320494 23.25,36.7496331 C23.25,33.1799713 25.4499167,30.125569 28.5643451,28.8754378 Z" id="Combined-Shape-Copy-3" stroke="#4A4745" stroke-width="1.68" fill="#DDD9ED"></path>
+                    <path d="M61.5882527,31.8436016 C61.5882527,32.0911829 61.501642,32.3016238 61.3284179,32.4749307 L53.3477804,40.4593872 C53.1745564,40.6326941 52.9642161,40.7193463 52.7167532,40.7193463 C52.4692904,40.7193463 52.2589501,40.6326941 52.0857261,40.4593872 L47.4643802,35.8358298 C47.2911562,35.6625229 47.2045455,35.452082 47.2045455,35.2045007 C47.2045455,34.9569194 47.2911562,34.7464785 47.4643802,34.5731716 L48.7264345,33.3105134 C48.8996585,33.1372065 49.1099988,33.0505543 49.3574616,33.0505543 C49.6049245,33.0505543 49.8152648,33.1372065 49.9884888,33.3105134 L52.7167532,36.0493676 L58.8043093,29.9496142 C58.9775333,29.7763073 59.1878736,29.6896552 59.4353365,29.6896552 C59.6827993,29.6896552 59.8931396,29.7763073 60.0663636,29.9496142 L61.3284179,31.2122725 C61.501642,31.3855794 61.5882527,31.5960203 61.5882527,31.8436016 Z" id="-copy-6" stroke="#4A4A4A" stroke-width="1.4" fill="#B8E986"></path>
+                    <path d="M47.240592,9.99879743 C47.240592,12.0978951 46.5129103,13.9231701 45.0575251,15.474677 C43.8447041,16.8740755 42.7228615,18.6537186 41.6919637,20.8136597 C41.4493995,21.3004069 41.252319,21.5437769 41.1007164,21.5437769 C41.0703959,21.5437769 41.0400758,21.5285663 41.0097553,21.4981446 L40.9642747,21.4981446 C40.7823516,21.4373012 40.6838114,21.3232215 40.6686511,21.1559021 C40.6534908,20.9885828 40.6913909,20.6919756 40.7823525,20.2660717 C40.8733141,19.8097461 40.7823539,19.3990593 40.5094691,19.0339988 C40.0243408,18.3647213 39.251179,18.0300875 38.1899606,18.0300875 L31.9591239,18.0300875 C29.7457256,18.0300875 27.8583013,17.2467404 26.2967943,15.6800225 C24.7352873,14.1133047 23.9545455,12.2195819 23.9545455,9.99879743 C23.9545455,7.71716951 24.7428673,5.81584144 26.3195346,4.29475616 C27.8962018,2.71282748 29.7760462,1.921875 31.9591239,1.921875 L39.2360135,1.921875 C41.4494118,1.921875 43.3368361,2.71282748 44.8983431,4.29475616 C46.4598502,5.87668485 47.240592,7.77801292 47.240592,9.99879743 Z M41.555522,19.2621604 C42.2832146,17.8323403 43.2079767,16.4481734 44.3298362,15.1096184 L44.2843556,15.1096184 C45.7094203,13.6797982 46.4219419,11.9762083 46.4219419,9.99879743 C46.4219419,7.99096486 45.7170003,6.2797696 44.3070959,4.86516029 C42.8971915,3.45055099 41.2068476,2.74325694 39.2360135,2.74325694 L31.9591239,2.74325694 C29.9882898,2.74325694 28.2903659,3.4581563 26.8653013,4.88797646 C25.4705571,6.34821832 24.7731955,8.05180827 24.7731955,9.99879743 C24.7731955,11.9762083 25.4781372,13.6721929 26.8880415,15.0868022 C28.2979459,16.5014115 29.9882898,17.2087056 31.9591239,17.2087056 L38.2809217,17.2087056 C38.584127,17.2087056 39.0540881,17.31518 39.6908191,17.5281319 C40.3275501,17.7410838 40.8278312,18.0757176 41.1916775,18.5320432 C41.3736007,18.8362602 41.494881,19.0796302 41.555522,19.2621604 Z M30.0489404,8.12787189 C30.5947099,8.12787189 31.064671,8.32561001 31.4588378,8.72109218 C31.8530046,9.11657436 32.0500851,9.58810372 32.0500851,10.1356944 C32.0500851,10.6832851 31.8530046,11.1472092 31.4588378,11.5274805 C31.064671,11.9077518 30.5947099,12.0978846 30.0489404,12.0978846 C29.503171,12.0978846 29.0332099,11.9077518 28.6390431,11.5274805 C28.2448763,11.1472092 28.0477958,10.6832851 28.0477958,10.1356944 C28.0477958,9.58810372 28.2448763,9.11657436 28.6390431,8.72109218 C29.0332099,8.32561001 29.503171,8.12787189 30.0489404,8.12787189 Z M30.0489404,11.2765027 C30.3824662,11.2765027 30.6629269,11.162423 30.8903308,10.9342602 C31.1177347,10.7060974 31.231435,10.4399115 31.231435,10.1356944 C31.231435,9.80105566 31.1101547,9.5196591 30.8675905,9.29149631 C30.6250263,9.06333352 30.3521457,8.94925383 30.0489404,8.94925383 C29.7457352,8.94925383 29.4728546,9.06333352 29.2302904,9.29149631 C28.9877262,9.5196591 28.8664459,9.80105566 28.8664459,10.1356944 C28.8664459,10.4399115 28.9801462,10.7060974 29.2075501,10.9342602 C29.434954,11.162423 29.7154147,11.2765027 30.0489404,11.2765027 Z M35.1882437,8.03660723 C35.7340131,8.03660723 36.2039742,8.23434535 36.598141,8.62982752 C36.9923078,9.0253097 37.1893883,9.49683906 37.1893883,10.0444298 C37.1893883,10.5920205 36.9923078,11.0635498 36.598141,11.459032 C36.2039742,11.8545142 35.7340131,12.0522523 35.1882437,12.0522523 C34.6424742,12.0522523 34.1725131,11.8545142 33.7783463,11.459032 C33.3841795,11.0635498 33.1870991,10.5920205 33.1870991,10.0444298 C33.1870991,9.49683906 33.3841795,9.0253097 33.7783463,8.62982752 C34.1725131,8.23434535 34.6424742,8.03660723 35.1882437,8.03660723 Z M35.1882437,11.2308703 C35.5217694,11.2308703 35.8022301,11.1167907 36.029634,10.8886279 C36.257038,10.6604651 36.3707382,10.3790685 36.3707382,10.0444298 C36.3707382,9.7402127 36.257038,9.47402677 36.029634,9.24586398 C35.8022301,9.01770119 35.5217694,8.9036215 35.1882437,8.9036215 C34.8547179,8.9036215 34.5742573,9.01770119 34.3468533,9.24586398 C34.1194494,9.47402677 34.0057491,9.7402127 34.0057491,10.0444298 C34.0057491,10.3790685 34.1194494,10.6604651 34.3468533,10.8886279 C34.5742573,11.1167907 34.8547179,11.2308703 35.1882437,11.2308703 Z M40.3730275,8.12787189 C40.9187969,8.12787189 41.388758,8.32561001 41.7829248,8.72109218 C42.1770916,9.11657436 42.3741721,9.58810372 42.3741721,10.1356944 C42.3741721,10.6832851 42.1770916,11.1472092 41.7829248,11.5274805 C41.388758,11.9077518 40.9187969,12.0978846 40.3730275,12.0978846 C39.827258,12.0978846 39.364877,11.9077518 38.9858704,11.5274805 C38.6068638,11.1472092 38.4173634,10.6832851 38.4173634,10.1356944 C38.4173634,9.58810372 38.6068638,9.11657436 38.9858704,8.72109218 C39.364877,8.32561001 39.827258,8.12787189 40.3730275,8.12787189 Z M40.3730275,11.2765027 C40.7065532,11.2765027 40.9870139,11.162423 41.2144178,10.9342602 C41.4418218,10.7060974 41.555522,10.4399115 41.555522,10.1356944 C41.555522,9.80105566 41.4418218,9.5196591 41.2144178,9.29149631 C40.9870139,9.06333352 40.7065532,8.94925383 40.3730275,8.94925383 C40.0698222,8.94925383 39.8045216,9.06333352 39.5771177,9.29149631 C39.3497137,9.5196591 39.2360135,9.80105566 39.2360135,10.1356944 C39.2360135,10.4703332 39.3421337,10.7441244 39.5543774,10.9570764 C39.7666211,11.1700283 40.0395017,11.2765027 40.3730275,11.2765027 Z" id="6-copy-2" fill="#4A4A4A"></path>
+                    <path d="M16.9090909,6.29027478 C16.9090909,7.8145281 16.3806871,9.13994588 15.3238636,10.2665679 C14.4431774,11.2827368 13.6285549,12.5750191 12.8799716,14.1434537 C12.7038343,14.4969037 12.560725,14.6736261 12.4506392,14.6736261 C12.428622,14.6736261 12.4066052,14.6625809 12.3845881,14.6404903 L12.3515625,14.6404903 C12.2194596,14.596309 12.1479049,14.5134704 12.1368963,14.391972 C12.1258877,14.2704735 12.1534088,14.0550931 12.2194602,13.7458244 C12.2855117,13.4144649 12.2194612,13.1162459 12.0213068,12.8511584 C11.6690323,12.3651646 11.1076033,12.1221713 10.3370028,12.1221713 L5.8125,12.1221713 C4.20524765,12.1221713 2.83470027,11.5533462 1.70081676,10.4156789 C0.566933251,9.27801155 2.0783375e-13,7.90289061 2.0783375e-13,6.29027478 C2.0783375e-13,4.63347771 0.572437457,3.25283419 1.71732955,2.1483028 C2.86222163,0.999590162 4.2272648,0.425242457 5.8125,0.425242457 L11.0965909,0.425242457 C12.7038433,0.425242457 14.0743906,0.999590162 15.2082741,2.1483028 C16.3421577,3.29701544 16.9090909,4.67765896 16.9090909,6.29027478 Z M12.7808949,13.0168373 C13.3093066,11.9785778 13.9808198,10.9734693 14.7954545,10.0014817 L14.762429,10.0014817 C15.7972353,8.96322218 16.3146307,7.72616558 16.3146307,6.29027478 C16.3146307,4.83229336 15.8027395,3.58971419 14.7789418,2.5625 C13.755144,1.53528581 12.527706,1.02168642 11.0965909,1.02168642 L5.8125,1.02168642 C4.38138489,1.02168642 3.14844267,1.54080839 2.11363636,2.57906789 C1.10084721,3.63941802 0.594460227,4.87647461 0.594460227,6.29027478 C0.594460227,7.72616558 1.10635142,8.95769961 2.13014915,9.98491379 C3.15394688,11.012128 4.38138489,11.5257274 5.8125,11.5257274 L10.403054,11.5257274 C10.6232255,11.5257274 10.9644863,11.6030434 11.4268466,11.7576778 C11.8892069,11.9123122 12.2524845,12.1553055 12.5166903,12.4866649 C12.6487933,12.7075711 12.7368606,12.8842935 12.7808949,13.0168373 Z M4.42542614,4.93170797 C4.82173494,4.93170797 5.16299573,5.0752949 5.44921875,5.36247306 C5.73544177,5.64965122 5.87855114,5.99205081 5.87855114,6.38968211 C5.87855114,6.78731341 5.73544177,7.12419043 5.44921875,7.40032328 C5.16299573,7.67645612 4.82173494,7.81452047 4.42542614,7.81452047 C4.02911734,7.81452047 3.68785654,7.67645612 3.40163352,7.40032328 C3.1154105,7.12419043 2.97230114,6.78731341 2.97230114,6.38968211 C2.97230114,5.99205081 3.1154105,5.64965122 3.40163352,5.36247306 C3.68785654,5.0752949 4.02911734,4.93170797 4.42542614,4.93170797 Z M4.42542614,7.21807651 C4.66761485,7.21807651 4.87127048,7.1352379 5.03639915,6.96955819 C5.20152781,6.80387848 5.28409091,6.61058839 5.28409091,6.38968211 C5.28409091,6.14668521 5.19602361,5.94234997 5.01988636,5.77667026 C4.84374912,5.61099055 4.64559769,5.52815194 4.42542614,5.52815194 C4.20525458,5.52815194 4.00710315,5.61099055 3.83096591,5.77667026 C3.65482866,5.94234997 3.56676136,6.14668521 3.56676136,6.38968211 C3.56676136,6.61058839 3.64932446,6.80387848 3.81445313,6.96955819 C3.97958179,7.1352379 4.18323743,7.21807651 4.42542614,7.21807651 Z M8.15731534,4.86543642 C8.55362414,4.86543642 8.89488493,5.00902335 9.18110795,5.29620151 C9.46733098,5.58337967 9.61044034,5.92577926 9.61044034,6.32341056 C9.61044034,6.72104186 9.46733098,7.06344145 9.18110795,7.35061961 C8.89488493,7.63779777 8.55362414,7.7813847 8.15731534,7.7813847 C7.76100654,7.7813847 7.41974575,7.63779777 7.13352273,7.35061961 C6.84729971,7.06344145 6.70419034,6.72104186 6.70419034,6.32341056 C6.70419034,5.92577926 6.84729971,5.58337967 7.13352273,5.29620151 C7.41974575,5.00902335 7.76100654,4.86543642 8.15731534,4.86543642 Z M8.15731534,7.18494073 C8.39950405,7.18494073 8.60315969,7.10210212 8.76828835,6.93642241 C8.93341702,6.77074271 9.01598011,6.56640746 9.01598011,6.32341056 C9.01598011,6.10250428 8.93341702,5.90921419 8.76828835,5.74353448 C8.60315969,5.57785478 8.39950405,5.49501616 8.15731534,5.49501616 C7.91512663,5.49501616 7.711471,5.57785478 7.54634233,5.74353448 C7.38121366,5.90921419 7.29865057,6.10250428 7.29865057,6.32341056 C7.29865057,6.56640746 7.38121366,6.77074271 7.54634233,6.93642241 C7.711471,7.10210212 7.91512663,7.18494073 8.15731534,7.18494073 Z M11.9222301,4.93170797 C12.3185389,4.93170797 12.6597997,5.0752949 12.9460227,5.36247306 C13.2322457,5.64965122 13.3753551,5.99205081 13.3753551,6.38968211 C13.3753551,6.78731341 13.2322457,7.12419043 12.9460227,7.40032328 C12.6597997,7.67645612 12.3185389,7.81452047 11.9222301,7.81452047 C11.5259213,7.81452047 11.1901647,7.67645612 10.9149503,7.40032328 C10.6397358,7.12419043 10.5021307,6.78731341 10.5021307,6.38968211 C10.5021307,5.99205081 10.6397358,5.64965122 10.9149503,5.36247306 C11.1901647,5.0752949 11.5259213,4.93170797 11.9222301,4.93170797 Z M11.9222301,7.21807651 C12.1644188,7.21807651 12.3680745,7.1352379 12.5332031,6.96955819 C12.6983318,6.80387848 12.7808949,6.61058839 12.7808949,6.38968211 C12.7808949,6.14668521 12.6983318,5.94234997 12.5332031,5.77667026 C12.3680745,5.61099055 12.1644188,5.52815194 11.9222301,5.52815194 C11.7020586,5.52815194 11.5094113,5.61099055 11.3442827,5.77667026 C11.179154,5.94234997 11.0965909,6.14668521 11.0965909,6.38968211 C11.0965909,6.63267902 11.1736498,6.83149168 11.3277699,6.98612608 C11.48189,7.14076047 11.6800414,7.21807651 11.9222301,7.21807651 Z" id="6-copy-3" fill="#4A4A4A" transform="translate(8.454545, 7.549434) scale(-1, 1) translate(-8.454545, -7.549434) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/web-ui/app/images/account-recovery/codes.svg b/web-ui/app/images/account-recovery/codes.svg
new file mode 100644
index 00000000..553064b4
--- /dev/null
+++ b/web-ui/app/images/account-recovery/codes.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="42px" height="65px" viewBox="0 0 42 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>Group Copy 3</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M1.16084559,3.94126428 C1.8019629,3.21411956 2.89307448,2.09351474 3.60127528,1.43519653 L5.14522059,2.64517297e-13 L28.2522602,2.64517297e-13 C29.2175102,2.64517297e-13 30,0.778887644 30,1.75376832 L30,39.0612034 C30,40.0297829 29.2205091,40.7957878 28.2577703,40.7720939 L14.2813382,40.4281215 L8.02105049e-13,37.0941474 L8.02105049e-13,5.25787628 L1.16084559,3.94126428 Z" id="path-1"></path>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="30" height="40.7722731" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+    </defs>
+    <g id="Account-Recovery-MVP" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02-m_Forgot_Password-" transform="translate(-167.000000, -213.000000)">
+            <g id="Group-Copy-3" transform="translate(167.000000, 213.000000)">
+                <g id="Group-28" transform="translate(0.000000, 30.335452)">
+                    <path d="M32.1836735,10.5981349 L16.7446084,1.01926433 L1.66630672,10.9498508 L1.63636364,17.1116022 C1.63636364,17.5098564 1.77460901,17.8402262 2.05548851,18.1072375 C2.33417364,18.371986 2.66552367,18.5032288 3.05173297,18.5032288 L30.4374839,18.5032288 C30.8236932,18.5032288 31.1550432,18.371986 31.4359227,18.1072375 C31.7146078,17.8402262 31.8528532,17.5098564 31.8528532,17.1116022 L32.1836735,10.5981349 Z" id="Path-Copy-2" fill="#E9E7F3"></path>
+                    <path d="M31.3073987,15.0966254 C31.3073987,14.6983713 31.1691533,14.3680014 30.8904682,14.1032529 C30.6095887,13.8385044 30.2782386,13.7049988 29.8920293,13.7049988 L2.50627843,13.7049988 C2.12006912,13.7049988 1.78871909,13.8385044 1.51003396,14.1032529 C1.22915447,14.3680014 1.09090909,14.6983713 1.09090909,15.0966254 L1.09090909,32.0676812 C1.09090909,32.4659353 1.22915447,32.7963052 1.51003396,33.0633164 C1.78871909,33.3280649 2.12006912,33.4593077 2.50627843,33.4593077 L29.8920293,33.4593077 C30.2782386,33.4593077 30.6095887,33.3280649 30.8904682,33.0633164 C31.1691533,32.7963052 31.3073987,32.4659353 31.3073987,32.0676812 L31.3073987,15.0966254 Z" id="Path-Copy-3" fill="#E9E7F3"></path>
+                    <path d="M16.4575118,0.467710658 L1.46537043,10.4722111 C0.983695211,10.8052241 0.904328271,11.1890357 1.22453282,11.6321123 C1.54473738,12.1824304 1.91694096,12.292494 2.34661715,11.9623032 L16.4575118,2.53634221 L30.5684064,11.9623032 C30.9980826,12.292494 31.3702862,12.1824304 31.6932275,11.6321123 C32.0134321,11.1890357 31.9340651,10.8052241 31.4523899,10.4722111 L16.4575118,0.467710658 Z M29.1873295,29.0760343 C29.5735388,29.2977894 29.6371756,29.6281593 29.3804342,30.0694068 C29.2509663,30.2911619 29.0578616,30.4020395 28.8011202,30.4020395 C28.7155398,30.4020395 28.5860719,30.3567833 28.4149109,30.2685338 L22.2443395,26.0257699 C21.8581302,25.8062776 21.7944934,25.4736449 22.0512348,25.0323974 C22.2662832,24.6341433 22.5866614,24.5685219 23.0145637,24.8332704 L29.1873295,29.0760343 Z M10.6712265,26.0257699 L4.50065506,30.2685338 C4.32949411,30.3567833 4.20002622,30.4020395 4.11444575,30.4020395 C3.85770433,30.4020395 3.66459968,30.2911619 3.53732616,30.0694068 C3.27839037,29.6281593 3.3442215,29.2977894 3.72823644,29.0760343 L9.90100225,24.8332704 C10.3289046,24.5685219 10.6492828,24.6341433 10.8643311,25.0323974 C11.1232669,25.4736449 11.0574358,25.8062776 10.6712265,26.0257699 Z M31.5660278,14.8226102 C31.5660278,14.4243561 31.4277824,14.0939862 31.1490973,13.8292378 C30.8682178,13.5644893 30.5368677,13.4309837 30.1506584,13.4309837 L2.76490754,13.4309837 C2.37869823,13.4309837 2.0473482,13.5644893 1.76866308,13.8292378 C1.48778358,14.0939862 1.34953821,14.4243561 1.34953821,14.8226102 L1.34953821,31.793666 C1.34953821,32.1919201 1.48778358,32.52229 1.76866308,32.7893013 C2.0473482,33.0540498 2.37869823,33.1852926 2.76490754,33.1852926 L30.1506584,33.1852926 C30.5368677,33.1852926 30.8682178,33.0540498 31.1490973,32.7893013 C31.4277824,32.52229 31.5660278,32.1919201 31.5660278,31.793666 L31.5660278,14.8226102 Z M32.915566,14.8226102 L32.915566,31.793666 C32.915566,32.5901743 32.6478527,33.2644909 32.1124262,33.8166159 C31.5748053,34.3687409 30.9230771,34.6448034 30.1506584,34.6448034 L2.76490754,34.6448034 C1.99248893,34.6448034 1.34076072,34.3687409 0.80313981,33.8166159 C0.26771327,33.2644909 0,32.5901743 0,31.793666 L0,14.8226102 C0,14.0283648 0.26771327,13.3540482 0.80313981,12.8019232 C1.34076072,12.2475354 1.99248893,11.9714729 2.76490754,11.9714729 L30.1506584,11.9714729 C30.9230771,11.9714729 31.5748053,12.2475354 32.1124262,12.8019232 C32.6478527,13.3540482 32.915566,14.0283648 32.915566,14.8226102 Z" id="Fill-1-Copy" fill="#4A4A4A"></path>
+                </g>
+                <g id="Group-9" transform="translate(22.540482, 23.914018) rotate(-13.000000) translate(-22.540482, -23.914018) translate(7.475265, 3.289018)">
+                    <g id="Group-25" transform="translate(0.000000, 0.000000)">
+                        <g id="Group-15-Copy" transform="translate(-0.000000, 0.000000)">
+                            <use id="Rectangle-10" stroke="#4A4A4A" mask="url(#mask-2)" stroke-width="2.6208" stroke-linejoin="round" fill="#E9E7F3" xlink:href="#path-1"></use>
+                            <path d="M29.0470588,3.90529677 C29.0470588,3.13553874 29.0397386,2.49698946 29.0249818,1.98527532 C29.0101089,1.47356117 28.9925635,1.21551728 28.9721133,1.21551728 L27.5220044,1.21551728 C27.5015541,1.21551728 27.4840087,1.47356117 27.469252,1.98527532 C27.4543791,2.49698946 27.4470588,3.13553874 27.4470588,3.90529677 L27.4470588,36.7074856 C27.4470588,37.4772436 27.4543791,38.1157929 27.469252,38.6318806 C27.4840087,39.1435948 27.5015541,39.3972651 27.5220044,39.3972651 L28.9721133,39.3972651 C28.9925635,39.3972651 29.0101089,39.1435948 29.0249818,38.6318806 C29.0397386,38.1157929 29.0470588,37.4772436 29.0470588,36.7074856 L29.0470588,3.90529677 Z" id="Path" fill="#DDD9ED"></path>
+                        </g>
+                        <path d="M0.575597426,5.18373113 L5.07111673,0.342010537 C5.07111673,0.342010537 5.85144761,5.94661178 5.10834099,6.44591288 C4.36523438,6.94521397 0.575597426,5.18373113 0.575597426,5.18373113 Z" id="Path-2" stroke="#4A4A4A" stroke-width="0.8736" stroke-linecap="round" stroke-linejoin="round" fill="#918DA9"></path>
+                    </g>
+                    <text id="xyz-42-abc" font-family="OpenSans-BoldItalic, Open Sans" font-size="7.4256" font-style="italic" font-weight="bold" line-spacing="10.4832" fill="#4A4A4A">
+                        <tspan x="9.41267109" y="11.309322">xyz</tspan>
+                        <tspan x="10.9101188" y="21.792522">42</tspan>
+                        <tspan x="8.79084961" y="32.275722">abc</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json
index 22ac9f70..8116aba4 100644
--- a/web-ui/app/locales/en_US/translation.json
+++ b/web-ui/app/locales/en_US/translation.json
@@ -105,7 +105,8 @@
         "input-label1": "create new password",
         "input-label2": "confirm your new password",
         "button": "Next"
-      }
+      },
+      "back": "Back to previous step"
     },
     "backup-account": {
       "page-title": "Pixelated Backup Account",
diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
index 75cf6ea5..3d97b191 100644
--- a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
@@ -24,13 +24,18 @@ import SubmitButton from 'src/common/submit_button/submit_button';
 import './forms.scss';
 
 export const AdminRecoveryCodeForm = ({ t, next }) => (
-  <form className='admin-code-form' onSubmit={next}>
+  <form className='account-recovery-form admin-code' onSubmit={next}>
     <img
       className='account-recovery-progress'
       src='/public/images/account-recovery/step_1.svg'
       alt={t('account-recovery.admin-form.image-description')}
     />
     <h1>{t('account-recovery.admin-form.title')}</h1>
+    <img
+      className='admin-codes-image'
+      src='/public/images/account-recovery/admins_contact.svg'
+      alt=''
+    />
     <ul>
       <li>{t('account-recovery.admin-form.tip1')}</li>
       <li>{t('account-recovery.admin-form.tip2')}</li>
diff --git a/web-ui/src/account_recovery/forms/forms.scss b/web-ui/src/account_recovery/forms/forms.scss
index 1ef0e8d3..09d8f2ce 100644
--- a/web-ui/src/account_recovery/forms/forms.scss
+++ b/web-ui/src/account_recovery/forms/forms.scss
@@ -15,6 +15,78 @@
  * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
  */
 
-.account-recovery-progress {
-  width: 100%;
+.account-recovery-form {
+  display: flex;
+  flex-direction: column;
+
+  img {
+    margin: 1em 0;
+    align-self: center;
+  }
+
+  .user-code-form-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .account-recovery-progress {
+    width: 100%;
+  }
+
+  .admin-code-image {
+    height: 2.7em;
+  }
+
+  .user-code-image {
+    height: 4em;
+  }
+
+  .input-field-group {
+    margin-top: 0;
+  }
+}
+
+.new-password {
+  .input-field-group:first-of-type {
+    margin-bottom: 0;
+  }
+}
+
+@media only screen and (min-width : 500px) {
+  .account-recovery-form {
+    align-items: center;
+
+    .account-recovery-progress, h1 {
+      width: 80%;
+    }
+
+    .user-code-form-content {
+      flex-direction: row;
+      width: 80%;
+
+      img {
+        margin: 1.6em;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width : 960px) {
+  .account-recovery-form {
+    .account-recovery-progress {
+      width: 80%;
+      margin-top: 0;
+    }
+
+    h1 {
+      max-width: 80%;
+      width: auto;
+    }
+
+    .input-field-group, .submit-button {
+      width: 60%;
+      align-self: center;
+    }
+  }
 }
diff --git a/web-ui/src/account_recovery/forms/new_password_form.js b/web-ui/src/account_recovery/forms/new_password_form.js
index 71239cfa..114366b3 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.js
+++ b/web-ui/src/account_recovery/forms/new_password_form.js
@@ -20,23 +20,36 @@ import { translate } from 'react-i18next';
 
 import InputField from 'src/common/input_field/input_field';
 import SubmitButton from 'src/common/submit_button/submit_button';
+import BackLink from 'src/common/back_link/back_link';
 
-export const NewPasswordForm = ({ t }) => (
-  <form>
+export const NewPasswordForm = ({ t, previous }) => (
+  <form className='account-recovery-form new-password'>
     <img
       className='account-recovery-progress'
       src='/public/images/account-recovery/step_3.svg'
       alt={t('account-recovery.new-password.image-description')}
     />
     <h1>{t('account-recovery.new-password-form.title')}</h1>
-    <InputField name='new-password' label={t('account-recovery.new-password-form.input-label1')} />
-    <InputField name='confirm-password' label={t('account-recovery.new-password-form.input-label2')} />
+    <InputField
+      type='password' name='new-password'
+      label={t('account-recovery.new-password-form.input-label1')}
+    />
+    <InputField
+      type='password' name='confirm-password'
+      label={t('account-recovery.new-password-form.input-label2')}
+    />
     <SubmitButton buttonText={t('account-recovery.new-password-form.button')} />
+    <BackLink
+      text={t('account-recovery.back')}
+      onClick={previous} onKeyDown={previous}
+      role='button'
+    />
   </form>
 );
 
 NewPasswordForm.propTypes = {
-  t: React.PropTypes.func.isRequired
+  t: React.PropTypes.func.isRequired,
+  previous: React.PropTypes.func.isRequired
 };
 
 export default translate('', { wait: true })(NewPasswordForm);
diff --git a/web-ui/src/account_recovery/forms/new_password_form.spec.js b/web-ui/src/account_recovery/forms/new_password_form.spec.js
index a2986165..5ac96b40 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.spec.js
+++ b/web-ui/src/account_recovery/forms/new_password_form.spec.js
@@ -5,11 +5,13 @@ import { NewPasswordForm } from 'src/account_recovery/forms/new_password_form';
 
 describe('NewPasswordForm', () => {
   let newPasswordForm;
+  let mockPrevious;
 
   beforeEach(() => {
     const mockTranslations = key => key;
+    mockPrevious = expect.createSpy();
     newPasswordForm = shallow(
-      <NewPasswordForm t={mockTranslations} />
+      <NewPasswordForm t={mockTranslations} previous={mockPrevious} />
     );
   });
 
@@ -18,14 +20,26 @@ describe('NewPasswordForm', () => {
   });
 
   it('renders input for new password', () => {
+    expect(newPasswordForm.find('InputField').at(0).props().type).toEqual('password');
     expect(newPasswordForm.find('InputField').at(0).props().label).toEqual('account-recovery.new-password-form.input-label1');
   });
 
   it('renders input to confirm new password', () => {
+    expect(newPasswordForm.find('InputField').at(1).props().type).toEqual('password');
     expect(newPasswordForm.find('InputField').at(1).props().label).toEqual('account-recovery.new-password-form.input-label2');
   });
 
   it('renders submit button', () => {
     expect(newPasswordForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.new-password-form.button');
   });
+
+  it('returns to previous step on link click', () => {
+    newPasswordForm.find('BackLink').simulate('click');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
+
+  it('returns to previous step on key down', () => {
+    newPasswordForm.find('BackLink').simulate('keyDown');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
 });
diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
index aaefd75d..30525cdf 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
@@ -20,25 +20,39 @@ import { translate } from 'react-i18next';
 
 import InputField from 'src/common/input_field/input_field';
 import SubmitButton from 'src/common/submit_button/submit_button';
+import BackLink from 'src/common/back_link/back_link';
 
 import './forms.scss';
 
-export const UserRecoveryCodeForm = ({ t, next }) => (
-  <form className='user-code-form' onSubmit={next}>
+export const UserRecoveryCodeForm = ({ t, previous, next }) => (
+  <form className='account-recovery-form user-code' onSubmit={next}>
     <img
       className='account-recovery-progress'
       src='/public/images/account-recovery/step_2.svg'
       alt={t('account-recovery.user-form.image-description')}
     />
     <h1>{t('account-recovery.user-form.title')}</h1>
-    <p>{t('account-recovery.user-form.description')}</p>
+    <div className='user-code-form-content'>
+      <img
+        className='user-codes-image'
+        src='/public/images/account-recovery/codes.svg'
+        alt=''
+      />
+      <p>{t('account-recovery.user-form.description')}</p>
+    </div>
     <InputField name='admin-code' label={t('account-recovery.user-form.input-label')} />
     <SubmitButton buttonText={t('account-recovery.user-form.button')} />
+    <BackLink
+      text={t('account-recovery.back')}
+      onClick={previous} onKeyDown={previous}
+      role='button'
+    />
   </form>
 );
 
 UserRecoveryCodeForm.propTypes = {
   t: React.PropTypes.func.isRequired,
+  previous: React.PropTypes.func.isRequired,
   next: React.PropTypes.func.isRequired
 };
 
diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
index a20d3b7b..1aebb814 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
+++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
@@ -6,12 +6,16 @@ import { UserRecoveryCodeForm } from 'src/account_recovery/forms/user_recovery_c
 describe('UserRecoveryCodeForm', () => {
   let userRecoveryCodeForm;
   let mockNext;
+  let mockPrevious;
 
   beforeEach(() => {
     const mockTranslations = key => key;
     mockNext = expect.createSpy();
+    mockPrevious = expect.createSpy();
     userRecoveryCodeForm = shallow(
-      <UserRecoveryCodeForm t={mockTranslations} next={mockNext} />
+      <UserRecoveryCodeForm
+        t={mockTranslations} next={mockNext} previous={mockPrevious}
+      />
     );
   });
 
@@ -35,4 +39,14 @@ describe('UserRecoveryCodeForm', () => {
     userRecoveryCodeForm.find('form').simulate('submit');
     expect(mockNext).toHaveBeenCalled();
   });
+
+  it('returns to previous step on link click', () => {
+    userRecoveryCodeForm.find('BackLink').simulate('click');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
+
+  it('returns to previous step on key down', () => {
+    userRecoveryCodeForm.find('BackLink').simulate('keyDown');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
 });
diff --git a/web-ui/src/account_recovery/page.js b/web-ui/src/account_recovery/page.js
index f867fcd5..3043a38b 100644
--- a/web-ui/src/account_recovery/page.js
+++ b/web-ui/src/account_recovery/page.js
@@ -40,10 +40,14 @@ export class Page extends React.Component {
     this.setState({ step: this.state.step + 1 });
   }
 
+  previousStep = () => {
+    this.setState({ step: this.state.step - 1 });
+  }
+
   steps = {
     0: <AdminRecoveryCodeForm next={this.nextStep} />,
-    1: <UserRecoveryCodeForm next={this.nextStep} />,
-    2: <NewPasswordForm />
+    1: <UserRecoveryCodeForm previous={this.previousStep} next={this.nextStep} />,
+    2: <NewPasswordForm previous={this.previousStep} />
   }
 
   mainContent = () => this.steps[this.state.step];
diff --git a/web-ui/src/account_recovery/page.scss b/web-ui/src/account_recovery/page.scss
index a5d62e01..20604b70 100644
--- a/web-ui/src/account_recovery/page.scss
+++ b/web-ui/src/account_recovery/page.scss
@@ -66,22 +66,16 @@ p {
   margin-bottom: 0.5em;
 }
 
-.link {
-  color: $dark_blue;
-  font-style: italic;
-  font-size: 0.8em;
-
-  .fa {
-    font-size: 1.6em;
-    position: relative;
-    top: 3px;
-    margin-right: 0.3em;
-  }
-
-}
-
 @media only screen and (min-width : 500px) {
   body {
     font-size: 1.3em;
   }
 }
+
+@media only screen and (min-width : 960px) {
+  .container {
+    width: 60%;
+    max-width: 700px;
+    padding: 3em;
+  }
+}
diff --git a/web-ui/src/account_recovery/page.spec.js b/web-ui/src/account_recovery/page.spec.js
index f5e52c85..32e1477c 100644
--- a/web-ui/src/account_recovery/page.spec.js
+++ b/web-ui/src/account_recovery/page.spec.js
@@ -45,18 +45,29 @@ describe('Account Recovery Page', () => {
     it('renders user recovery code form when admin code submitted', () => {
       pageInstance.nextStep({ preventDefault: () => {} });
 
-      expect(page.find(AdminRecoveryCodeForm).length).toEqual(0);
       expect(page.find(UserRecoveryCodeForm).length).toEqual(1);
-      expect(page.find(NewPasswordForm).length).toEqual(0);
+    });
+
+    it('returns to admin code form on user code form back link', () => {
+      pageInstance.nextStep({ preventDefault: () => {} });
+      pageInstance.previousStep();
+
+      expect(page.find(AdminRecoveryCodeForm).length).toEqual(1);
     });
 
     it('renders new password form when user code submitted', () => {
       pageInstance.nextStep({ preventDefault: () => {} });
       pageInstance.nextStep({ preventDefault: () => {} });
 
-      expect(page.find(AdminRecoveryCodeForm).length).toEqual(0);
-      expect(page.find(UserRecoveryCodeForm).length).toEqual(0);
       expect(page.find(NewPasswordForm).length).toEqual(1);
     });
+
+    it('returns to user code form on new password form back link', () => {
+      pageInstance.nextStep({ preventDefault: () => {} });
+      pageInstance.nextStep({ preventDefault: () => {} });
+      pageInstance.previousStep();
+
+      expect(page.find(UserRecoveryCodeForm).length).toEqual(1);
+    });
   });
 });
diff --git a/web-ui/src/backup_account/backup_email/backup_email.js b/web-ui/src/backup_account/backup_email/backup_email.js
index 7e6cb66c..9d622d8d 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.js
+++ b/web-ui/src/backup_account/backup_email/backup_email.js
@@ -18,11 +18,13 @@
 import 'isomorphic-fetch';
 import React from 'react';
 import { translate } from 'react-i18next';
-import SubmitButton from 'src/common/submit_button/submit_button';
-import InputField from 'src/common/input_field/input_field';
 import validator from 'validator';
 import browser from 'helpers/browser';
 
+import SubmitButton from 'src/common/submit_button/submit_button';
+import InputField from 'src/common/input_field/input_field';
+import BackLink from 'src/common/back_link/back_link';
+
 import './backup_email.scss';
 
 export class BackupEmail extends React.Component {
@@ -78,12 +80,10 @@ export class BackupEmail extends React.Component {
           <p>{t('backup-account.backup-email.paragraph2')}</p>
           <InputField name='email' label={t('backup-account.backup-email.input-label')} errorText={this.state.error} onChange={this.validateEmail} />
           <SubmitButton buttonText={t('backup-account.backup-email.button')} disabled={this.state.submitButtonDisabled} />
-          <div className='link-content'>
-            <a href='/' className='link'>
-              <i className='fa fa-angle-left' aria-hidden='true' />
-              <span>{t('back-to-inbox')}</span>
-            </a>
-          </div>
+          <BackLink
+            href='/'
+            text={t('back-to-inbox')}
+          />
         </form>
       </div>
     );
diff --git a/web-ui/src/backup_account/page.scss b/web-ui/src/backup_account/page.scss
index 71e3f074..d4f1f887 100644
--- a/web-ui/src/backup_account/page.scss
+++ b/web-ui/src/backup_account/page.scss
@@ -64,20 +64,6 @@ p {
   margin-bottom: 0.5em;
 }
 
-.link {
-  color: $dark_blue;
-  font-style: italic;
-  font-size: 0.8em;
-
-  .fa {
-    font-size: 1.6em;
-    position: relative;
-    top: 3px;
-    margin-right: 0.3em;
-  }
-
-}
-
 @media only screen and (min-width : 500px) {
   body {
     font-size: 1.3em;
diff --git a/web-ui/src/common/back_link/back_link.js b/web-ui/src/common/back_link/back_link.js
new file mode 100644
index 00000000..f3bdb2b5
--- /dev/null
+++ b/web-ui/src/common/back_link/back_link.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import './back_link.scss';
+
+const BackLink = ({ text, ...other }) => (
+  <div className='link-content'>
+    <a className='link' tabIndex='0' {...other}>
+      <i className='fa fa-angle-left' aria-hidden='true' />
+      <span>{text}</span>
+    </a>
+  </div>
+);
+
+BackLink.propTypes = {
+  text: React.PropTypes.string.isRequired
+};
+
+export default BackLink;
diff --git a/web-ui/src/common/back_link/back_link.scss b/web-ui/src/common/back_link/back_link.scss
new file mode 100644
index 00000000..a799a710
--- /dev/null
+++ b/web-ui/src/common/back_link/back_link.scss
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "~scss/base/colors";
+
+.link {
+  color: $dark_blue;
+  font-style: italic;
+  font-size: 0.8em;
+
+  .fa {
+    font-size: 1.6em;
+    position: relative;
+    top: 3px;
+    margin-right: 0.3em;
+  }
+}
diff --git a/web-ui/src/common/back_link/back_link.spec.js b/web-ui/src/common/back_link/back_link.spec.js
new file mode 100644
index 00000000..ee659267
--- /dev/null
+++ b/web-ui/src/common/back_link/back_link.spec.js
@@ -0,0 +1,20 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import BackLink from 'src/common/back_link/back_link';
+
+describe('BackLink', () => {
+  let backLink;
+
+  beforeEach(() => {
+    backLink = shallow(<BackLink text='Back to inbox' href='/' />);
+  });
+
+  it('renders link with text', () => {
+    expect(backLink.find('a').text()).toEqual('Back to inbox');
+  });
+
+  it('adds link action', () => {
+    expect(backLink.find('a').props().href).toEqual('/');
+  });
+});
diff --git a/web-ui/test/integration/translations.spec.js b/web-ui/test/integration/translations.spec.js
index 4b4c7b2d..6faa7483 100644
--- a/web-ui/test/integration/translations.spec.js
+++ b/web-ui/test/integration/translations.spec.js
@@ -16,15 +16,15 @@ describe('Translations', () => {
 
     it('translates all keys on second step', () => {
       const app = mount(<App i18n={testI18n} child={<AccountRecoveryPage />} />);
-      app.find('form.admin-code-form').simulate('submit');
+      app.find('form.admin-code').simulate('submit');
 
       expect(app.text()).toNotContain('untranslated', 'Unstranslated message found in the text: ' + app.text());
     });
 
     it('translates all keys on third step', () => {
       const app = mount(<App i18n={testI18n} child={<AccountRecoveryPage />} />);
-      app.find('form.admin-code-form').simulate('submit');
-      app.find('form.user-code-form').simulate('submit');
+      app.find('form.admin-code').simulate('submit');
+      app.find('form.user-code').simulate('submit');
 
       expect(app.text()).toNotContain('untranslated', 'Unstranslated message found in the text: ' + app.text());
     });