diff --git a/front/src/index.ts b/front/src/index.ts
index 2ceb90e..b40f514 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -1,4 +1,5 @@
 let phone = 0;
+
 const request = (resource: string, data: any) =>
   fetch(`/api/${resource}.shs`, {
     method: "POST",
@@ -6,6 +7,43 @@ const request = (resource: string, data: any) =>
     credentials: "include",
   }).then((res) => res.json());
 
+const openLocker = (lat: string, lon: string, openCode: string, id: string) => {
+  (document.querySelector(".areyousure-box") as HTMLElement).style.display =
+    "block";
+  document
+    .querySelector(".areyousure-button")!
+    .addEventListener("click", () => openLockerConfirm(lat, lon, openCode, id));
+};
+
+const openLockerConfirm = (
+  lat: string,
+  lon: string,
+  openCode: string,
+  id: string
+) => {
+  (document.querySelector(".areyousure-box") as HTMLElement).style.display =
+    "none";
+  request("collect", {
+    lat,
+    lon,
+    openCode,
+    id,
+  }).then((res) => {
+    if (res.status != 200) {
+      const errorBoxText = <HTMLElement>(
+        document.querySelector(".error-box-text")!
+      );
+      const errorBoxWindow = <HTMLElement>document.querySelector(".error-box")!;
+      errorBoxWindow.style.display = "block";
+      if (res.description != null) {
+        errorBoxText.innerText = res.description;
+      } else {
+        errorBoxText.innerText = res.error;
+      }
+    }
+  });
+};
+
 window.addEventListener("load", () => {
   const login = document.querySelector(".login-form")!;
   login.addEventListener("submit", function (event) {
@@ -39,6 +77,14 @@ window.addEventListener("load", () => {
     });
   });
 
+  const errorBoxWindow = <HTMLElement>document.querySelector(".error-box")!;
+  const errorBoxButton = <HTMLElement>(
+    document.querySelector(".error-box-button")!
+  );
+  errorBoxButton.addEventListener("click", (event) => {
+    errorBoxWindow.style.display = "none";
+  });
+
   request("packages", {}).then((res) => {
     const table = document.querySelector("tbody")!;
     res.forEach((shipment: Package) => {
@@ -61,9 +107,9 @@ window.addEventListener("load", () => {
         shipment.pickupPoint.name + " - " + shipment.pickupPoint.description;
       openAction.innerHTML = "Open";
       openAction.addEventListener("click", (event) => {
-        console.log(
-          ((event.target as Element).parentNode as HTMLElement).dataset
-        );
+        let data = ((event.target as Element).parentNode as HTMLElement)
+          .dataset;
+        openLocker(data.lat!, data.lon!, data.openCode!, data.id!);
       });
 
       // console.log(shipment);
diff --git a/webroot/api/collect.shs b/webroot/api/collect.shs
index cfde6f6..d7bb150 100755
--- a/webroot/api/collect.shs
+++ b/webroot/api/collect.shs
@@ -5,7 +5,7 @@ fi
 
 source "${cfg[namespace]}/code/common.sh"
 
-data=$(curl -s -X POST -H "$(get_auth_string)" -H "Content-type: application/json" "https://api-inmobile-pl.easypack24.net/v1/collect/validate" --data '{"geoPoint":{"accuracy":"1","latitude":"'${get_data[lat]}'","longitude":"'${get_data[lon]}'"},"parcel":{"openCode":"'${get_data[openCode]}'","shipmentNumber":"'${get_data[id]}'"}}')
+data=$(curl -s -X POST -H "$(get_auth_string)" -H "Content-type: application/json" "https://api-inmobile-pl.easypack24.net/v1/collect/validate" --data '{"geoPoint":{"accuracy":"1","latitude":"'${post_data[lat]}'","longitude":"'${post_data[lon]}'"},"parcel":{"openCode":"'${post_data[openCode]}'","shipmentNumber":"'${post_data[id]}'"}}')
 
 if [[ $(echo $data | jq .status) == "403" ]]; then
 	echo $data | jq "{status: .status, error: .error}"
diff --git a/webroot/index.html b/webroot/index.html
index 8edfcb5..613ee56 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -37,6 +37,14 @@
         <input type="submit">
       </form>
     </div>
+    <div class="areyousure-box">
+      Are you sure?
+      <div class="areyousure-button">Open locker</div>
+    </div>
+    <div class="error-box">
+	  <span class="error-box-text"></span>
+	  <div class="error-box-button">OK</div>
+    </div>
     <div class="package-list">
 	  <table>
         <thead>