diff --git a/front/src/index.ts b/front/src/index.ts
index a82e0f4..38d1880 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -139,7 +139,7 @@ enum PackageStatus {
   STACK_PARCEL_IN_BOX_MACHINE_PICKUP_TIME_EXPIRED = "stack_parcel_in_box_machine_pickup_time_expired",
 }
 
-let phone = 0;
+let phone: string | null = localStorage.getItem("phone");
 const leafletLoaderJS = document.createElement("script");
 leafletLoaderJS.setAttribute("src", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js");
 leafletLoaderJS.setAttribute(
@@ -302,17 +302,37 @@ window.addEventListener("load", () => {
   register.addEventListener("submit", async (event) => {
     event.preventDefault();
     const form = event.target as HTMLFormElement;
-    phone = form.phone.value;
+    phone = (form.querySelector('input[name="phone"]')! as HTMLInputElement).value;
+    localStorage.setItem("phone", phone);
     const res = await request("register", {
-      login: form.login.value,
-      password: form.password.value,
-      phone: form.phone.value,
+      login: (form.querySelector('input[name="login"]')! as HTMLInputElement).value,
+      password: (form.querySelector('input[name="password"]')! as HTMLInputElement).value,
+      mail: (form.querySelector('input[name="email"]')! as HTMLInputElement).value,
     });
     if (res.status == 200) {
       [".register-box", ".login-box"].forEach((element) => {
         (document.querySelector(element)! as HTMLDivElement).style.display = "none";
       });
+      (document.querySelector(".mail-box")! as HTMLDivElement).style.display = "block";
+    } else {
+      openError(res.description || res.msg);
+    }
+  });
+
+  const mail = document.querySelector(".mail-form")!;
+  mail.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const form = event.target as HTMLFormElement;
+    const res = await request("mailcode", {
+      code: form.code.value,
+      phone,
+    });
+    if (res.status == 200) {
+      (document.querySelector(".mail-box")! as HTMLDivElement).style.display = "none";
       (document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block";
+      if (!phone) {
+        (document.querySelector(".sms-phone-field")! as HTMLDivElement).style.display = "block";
+      }
     } else {
       openError(res.description || res.msg);
     }
@@ -322,12 +342,17 @@ window.addEventListener("load", () => {
   sms.addEventListener("submit", async (event) => {
     event.preventDefault();
     const form = event.target as HTMLFormElement;
+    if (!phone) {
+      phone = (form.querySelector('input[name="phone"]')! as HTMLInputElement).value;
+    }
     const res = await request("smscode", {
       code: form.code.value,
       phone,
     });
     if (res.status == 200) {
       (document.querySelector(".sms-box")! as HTMLDivElement).style.display = "none";
+      phone = null;
+      localStorage.removeItem("phone");
       await refreshPackages();
       (document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
     } else {
@@ -347,16 +372,28 @@ window.addEventListener("load", () => {
   });
 
   request("session", {}).then((res) => {
-    if (res.status == 200) {
-      // logged in
-      refreshPackages().then(() => {
-        (document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
-      });
-    } else {
-      // not logged in
-      [".login-box", ".register-box"].forEach((elementName) => {
-        (document.querySelector(elementName)! as HTMLDivElement).style.display = "block";
-      });
+    switch (parseInt(res.status, 10)) {
+      case 200:
+        // logged in, verified e-mail and phone
+        refreshPackages().then(() => {
+          (document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
+        });
+        localStorage.removeItem("phone");
+        break;
+      case -1:
+        // not logged in
+        [".login-box", ".register-box"].forEach((elementName) => {
+          (document.querySelector(elementName)! as HTMLDivElement).style.display = "block";
+        });
+        break;
+      case -2:
+        (document.querySelector(".mail-box")! as HTMLDivElement).style.display = "block";
+        break;
+      case -3:
+        (document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block";
+        break;
+      default:
+        openError(res.description || res.msg || `Session error: ${res.status}`);
     }
   });
 });
diff --git a/front/src/style.scss b/front/src/style.scss
index 0383bdf..f8685b1 100644
--- a/front/src/style.scss
+++ b/front/src/style.scss
@@ -4,7 +4,9 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
 
 .login-box,
 .register-box,
+.mail-box,
 .sms-box,
+.sms-phone-field,
 .error-box,
 .areyousure-box,
 .package-list {
diff --git a/webroot/index.html b/webroot/index.html
index 296325a..313a7be 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -44,6 +44,13 @@
               <input type="password" name="password" class="input" placeholder="***** ***">
             </div>
           </div>
+          <div class="field">
+            <label for="email" class="label">E-mail address</label>
+            <div class="control">
+              <input type="email" name="email" class="input" placeholder="@2137.pl">
+            </div>
+            <p class="help">For password recovery. Verified on account registration</p>
+          </div>
           <div class="field">
             <label for="phone" class="label">Phone number</label>
             <div class="control">
@@ -56,6 +63,19 @@
           </div>
         </form>
       </div>
+      <div class="mail-box column">
+        <label class="label is-large">E-mail</label>
+        <form method="POST" class="mail-form">
+          <div class="field">
+            <label for="code" class="label">E-mail code</label>
+            <div class="control">
+              <input type="number" name="code" class="input">
+            </div>
+          </div>
+          <input type="submit" class="button" value="Submit">
+        </form>
+      </div>
+    </div>
       <div class="sms-box column">
         <label class="label is-large">SMS</label>
         <form method="POST" class="sms-form">
@@ -65,6 +85,13 @@
               <input type="number" name="code" class="input">
             </div>
           </div>
+          <div class="field sms-phone-field">
+            <label for="phone" class="label">Phone number</label>
+            <div class="control">
+              <input type="tel" name="phone" class="input" placeholder="222922597">
+            </div>
+            <p class="help">The one your packages are assigned to</p>
+          </div>
           <input type="submit" class="button" value="Submit">
         </form>
       </div>
@@ -87,21 +114,21 @@
         </div>
       </div>
     </div>
-    <div class="package-list table-container">
+    <div class="package-list container">
       <div class="logout-button button">Log out</div>
-	  <table class="table is-striped">
-        <thead>
-          <tr>
-            <th>Package number</th>
-            <th>Sender</th>
-            <th>Status</th>
-            <th>Location</th>
-            <th></th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody></tbody>
-	  </table>
+	      <table class="table is-striped">
+          <thead>
+            <tr>
+              <th>Package number</th>
+              <th>Sender</th>
+              <th>Status</th>
+              <th>Location</th>
+              <th></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+	    </table>
     </div>
     <div class="details-box">
       <div id="map">