diff --git a/app/controllers/RefuelController.php b/app/controllers/RefuelController.php
index 5b2e439..ffd8e64 100644
--- a/app/controllers/RefuelController.php
+++ b/app/controllers/RefuelController.php
@@ -46,6 +46,7 @@ class RefuelController extends Controller {
                     'validationErrors' => $validator->errors() ?: [],
                     'vehicles' => $vehicles,
                     'title' => 'New refuel record',
+                    'status' => '400'
                 ]);
                 return;
             }
diff --git a/core/View.php b/core/View.php
index 03a79ed..56c2337 100644
--- a/core/View.php
+++ b/core/View.php
@@ -7,6 +7,11 @@ class View
         // Store the data 
         $this->data = $data;
 
+        // check for status code in data
+        if(isset($this->data['status'])){
+            http_response_code($this->data['status']);
+        }
+
         // Capture the view content
         ob_start();
         require_once views . $view . '.php';
diff --git a/public/js/offline-records.js b/public/js/offline-records.js
index fbadaa1..3eb1d1f 100644
--- a/public/js/offline-records.js
+++ b/public/js/offline-records.js
@@ -45,11 +45,15 @@ setInterval(async () => {
 				showDashboard();
 			});
 		}
+	}
 
-		if (localStorage.getItem("refuelOfflineData")) {
-			btnOffline.textContent = "Sync data";
-			btnOffline.setAttribute("disabled", "disabled");
-		}
+	if (localStorage.getItem("refuelOfflineData")) {
+		Array.from(divActions.children).forEach(
+			(el) => (el.style.display = "none"),
+		);
+		btnOffline.style.display = "block";
+		btnOffline.textContent = "Sync data";
+		btnOffline.setAttribute("disabled", "disabled");
 	}
 
 	if (isOnline && !visible) {
@@ -107,7 +111,18 @@ btnOffline.addEventListener("click", async (e) => {
 			});
 
 			if (!res.ok) {
-				throw new Error(`Server error: ${res.statusText}`);
+				if (res.status == 400) {
+					const html = await res.text();
+
+					document.open();
+					document.write(html);
+					document.close();
+
+					localStorage.removeItem("refuelOfflineData");
+					return;
+				} else {
+					throw new Error(`Server error: ${res.statusText}`);
+				}
 			}
 
 			localStorage.removeItem("refuelOfflineData");
@@ -150,11 +165,6 @@ btnOffline.addEventListener("click", async (e) => {
     </div>
     <section class="form">
         <h1 class="header-form">Create offline record</h1>
-        <!-- <?php if ($this->get('error')): ?> -->
-        <!--     <div class="error" style="color: red; margin-bottom: 1rem;"> -->
-        <!--         <?= htmlspecialchars($this->get('error')) ?> -->
-        <!--     </div> -->
-        <!-- <?php endif; ?> -->
         <form id="offline_refuel_add">
             <label for="vehicle">Vehicle</label>
             <select name="vehicle" id="vehicle">
@@ -164,13 +174,7 @@ btnOffline.addEventListener("click", async (e) => {
 									`<option value="${el.id}">${el.name} | ${el.registration_plate}</option>`,
 							)
 							.join("")}
-            <!-- <?php foreach ($this->get('vehicles') as $vehicle): ?> -->
-            <!--     <option value="<?= $vehicle['id'] ?>"><?= $vehicle['name'] . " | " . $vehicle['registration_plate'] ?></option> -->
-            <!-- <?php endforeach; ?> -->
             </select>
-            <!-- <?php if (isset($this->get('validationErrors')['vehicle'])): ?> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['vehicle'] ?></small> -->
-            <!-- <?php endif; ?> -->
 
             <label for="fuel_type">Fuel type</label>
             <select name="fuel_type" id="fuel_type">
@@ -182,45 +186,67 @@ btnOffline.addEventListener("click", async (e) => {
                 <option value="Premium Gasoline 98">Premium Gasoline 98</option>
                 <option value="Other">Other</option>
             </select>
-            <!-- <?php if (isset($this->get('validationErrors')['fuel_type'])): ?> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['fuel_type'] ?></small> -->
-            <!-- <?php endif; ?> -->
 
             <label for="liters">Liters</label>
             <input type="number" name="liters" id="liters" min="0" step=".01" value="0.0">
-            <!-- <?php if (isset($this->get('validationErrors')['liters'])): ?> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['liters'] ?></small> -->
-            <!-- <?php endif; ?> -->
+            <!-- <small class="error"><?= $this->get('validationErrors')['liters'] ?></small> -->
 
             <label for="price_per_liter">Price per liter</label>
             <input type="number" name="price_per_liter" id="price_per_liter" min="0" step=".01" value="0.0">
-            <!-- <?php if (isset($this->get('validationErrors')['price_per_liter'])): ?> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['price_per_liter'] ?></small> -->
-            <!-- <?php endif; ?> -->
+            <!-- <small class="error"><?= $this->get('validationErrors')['price_per_liter'] ?></small> -->
 
             <label for="total_price">Total price</label>
             <input type="number" name="total_price" id="total_price" min="0" step=".01" value="0.0">
-            <!-- <?php if (isset($this->get('validationErrors')['total_price'])): ?> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['total_price'] ?></small> -->
-            <!-- <?php endif; ?> -->
+            <!-- <small class="error"><?= $this->get('validationErrors')['total_price'] ?></small> -->
 
         		<label for="mileage">Mileage</label>
         		<input type="number" name="mileage" id="mileage" min="0" step="1" value="0">
-        		<!-- <?php if (isset($this->get('validationErrors')['mileage'])): ?> -->
-         		<!--    	<small class="error"><?= $this->get('validationErrors')['mileage'] ?></small> -->
-        		<!-- <?php endif; ?> -->
+         		<!-- <small class="error"><?= $this->get('validationErrors')['mileage'] ?></small> -->
 
             <label for="note">Note</label>
             <input type="text" name="note" id="note">
-            <!-- <?php if (isset($this->get('validationErrors')['note'])): ?> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['note'] ?></small> -->
-            <!-- <?php endif; ?> -->
+            <!-- <small class="error"><?= $this->get('validationErrors')['note'] ?></small> -->
 
             <input type="submit" id="btn-offline-submit" value="Create fuel record">
         </form>
     </section>
   `;
 	document.querySelector("main").appendChild(offline);
+
+	const inp_lit = document.querySelector("input#liters");
+	const inp_ppl = document.querySelector("input#price_per_liter");
+	const inp_tot = document.querySelector("input#total_price");
+
+	const rnd = (num) => Math.round((num + Number.EPSILON) * 100) / 100;
+
+	function calculate() {
+		let liters = Number(inp_lit.value);
+		let price_per_liter = Number(inp_ppl.value);
+		let total_price = Number(inp_tot.value);
+
+		if (price_per_liter > 0 && liters > 0) {
+			total_price = rnd(liters * price_per_liter);
+		}
+
+		if (price_per_liter > 0 && total_price > 0) {
+			liters = rnd(total_price / price_per_liter);
+		}
+
+		if (liters > 0 && total_price > 0) {
+			price_per_liter = rnd(total_price / liters);
+		}
+
+		inp_lit.value = liters;
+		inp_ppl.value = price_per_liter;
+		inp_tot.value = total_price;
+	}
+
+	[inp_lit, inp_ppl, inp_tot].forEach((inp) => {
+		inp.addEventListener("change", () => {
+			calculate();
+		});
+	});
+
 	const btnSubmit = document.querySelector("#btn-offline-submit");
 	btnSubmit.addEventListener("click", (e) => {
 		e.preventDefault();