diff --git a/server.js b/server.js
index 6385067..0e3223f 100644
--- a/server.js
+++ b/server.js
@@ -12,23 +12,41 @@ const PASSWORD = process.env.ADMIN_PASSWORD;
 app.set("view engine", "ejs");
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(express.static("public"));
+app.use((req, res, next) => {
+  console.log(`[${new Date().toLocaleString()}] ${req.method} ${req.url}`);
+  next();
+});
 
+
+// Load packages from JSON
 function loadPackages() {
+  if (!fs.existsSync(DATA_PATH)) return [];
   return JSON.parse(fs.readFileSync(DATA_PATH));
 }
 
+// Save packages to JSON
 function savePackages(data) {
   fs.writeFileSync(DATA_PATH, JSON.stringify(data, null, 2));
 }
 
-// Homepage - tracking form
+// Format local date/time to "YYYY-MM-DD HH:mm"
+function getLocalTimeString() {
+  const now = new Date();
+  return now.getFullYear() + "-" +
+    String(now.getMonth() + 1).padStart(2, '0') + "-" +
+    String(now.getDate()).padStart(2, '0') + " " +
+    String(now.getHours()).padStart(2, '0') + ":" +
+    String(now.getMinutes()).padStart(2, '0');
+}
+
+// Home page
 app.get("/", (req, res) => {
   res.sendFile(path.join(__dirname, "public", "index.html"));
 });
 
-// Handle tracking request (POST)
+// Track package
 app.post("/track", (req, res) => {
-  const id = req.body.id?.trim(); // Get package ID from the form submission
+  const id = req.body.id?.trim();
   if (!id) return res.send("Invalid tracking ID");
 
   const packages = loadPackages();
@@ -36,26 +54,23 @@ app.post("/track", (req, res) => {
 
   if (!pack) return res.send(`<p>ID not found</p><a href="/">Back</a>`);
 
-  // Prepare data to be passed to the view
   const latest = pack.updates[pack.updates.length - 1];
   const history = [...pack.updates].reverse();
 
-  // Estimate delivery time (3 days from last update)
-  const estimatedDeliveryDate = new Date();
-  estimatedDeliveryDate.setDate(estimatedDeliveryDate.getDate() + 3); // Add 3 days
-
-  const estimatedDeliveryTime = `Estimated Delivery Date: ${estimatedDeliveryDate.toLocaleDateString()}`;
-
-  // Render track.ejs with the package data
-  res.render("track", { package: pack, latest, history, estimatedDeliveryTime });
+  res.render("track", {
+    id: pack.id,
+    latest,
+    history,
+    eta: pack.eta || "Not set"
+  });
 });
 
-// Admin login form
+// Admin panel
 app.get("/admin", (req, res) => {
   res.render("admin", { packages: null, error: null });
 });
 
-// Admin password check
+// Admin login
 app.post("/admin", (req, res) => {
   const { password } = req.body;
   if (password !== PASSWORD) {
@@ -65,16 +80,15 @@ app.post("/admin", (req, res) => {
   res.render("admin", { packages, error: null });
 });
 
-// Handle updates
+// Handle update
 app.post("/update", (req, res) => {
-  const { id, progress, status, password } = req.body;
+  const { id, progress, status, eta, password } = req.body;
   if (password !== PASSWORD) return res.send("Invalid password");
 
-  const now = new Date().toISOString().replace("T", " ").slice(0, 16);
   const update = {
     progress: parseInt(progress),
     status,
-    time: now
+    time: getLocalTimeString()
   };
 
   const packages = loadPackages();
@@ -82,8 +96,14 @@ app.post("/update", (req, res) => {
 
   if (pack) {
     pack.updates.push(update);
+    if (eta) pack.eta = eta;
   } else {
-    packages.push({ id, updates: [update] });
+    const newPackage = {
+      id,
+      updates: [update],
+      eta: eta || ""
+    };
+    packages.push(newPackage);
   }
 
   savePackages(packages);
diff --git a/views/admin.ejs b/views/admin.ejs
index 6e0159b..b992df0 100644
--- a/views/admin.ejs
+++ b/views/admin.ejs
@@ -110,6 +110,7 @@
         <input name="id" placeholder="Tracking ID" required />
         <input name="progress" type="number" placeholder="Progress %" required />
         <input name="status" placeholder="Status" required />
+        <input name="eta" type="date" placeholder="ETA (optional)" />
         <button type="submit">Update</button>
       </form>
 
@@ -119,11 +120,12 @@
           <div class="package-item">
             <strong><%= p.id %></strong><br>
             <% if (p.updates && p.updates.length > 0) { %>
-              <%= p.updates[p.updates.length - 1].status %> — 
-              <%= p.updates[p.updates.length - 1].progress %>%
+              <%= p.updates[p.updates.length - 1].status %> —
+              <%= p.updates[p.updates.length - 1].progress %>%<br>
             <% } else { %>
-              <em>No updates yet</em>
+              <em>No updates yet</em><br>
             <% } %>
+            ETA: <%= p.eta || 'Not set' %>
           </div>
         <% }) %>
       </div>
diff --git a/views/track.ejs b/views/track.ejs
index d97cc94..a167224 100644
--- a/views/track.ejs
+++ b/views/track.ejs
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Track Your Package</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Tracking Info</title>
   <style>
     body {
       font-family: 'Arial', sans-serif;
@@ -14,135 +14,93 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      height: 100vh;
+      min-height: 100vh;
     }
 
     .container {
       background-color: #2c2c2c;
       border-radius: 15px;
-      padding: 40px 60px;
+      padding: 40px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-      width: 100%;
       max-width: 600px;
+      width: 90%;
+    }
+
+    h1, h2, h3 {
+      color: #fff;
       text-align: center;
     }
 
-    h1 {
-      font-size: 36px;
-      color: #f1f1f1;
-      margin-bottom: 30px;
-    }
-
-    .status {
-      background-color: #333;
-      padding: 20px;
-      margin: 20px 0;
-      border-radius: 8px;
-    }
-
-    .status h3 {
-      margin: 0;
-      color: #4caf50;
-    }
-
-    .status p {
-      margin: 5px 0;
-      color: #ddd;
-    }
-
-    .status .progress-bar {
-      width: 100%;
-      height: 10px;
+    .progress-bar {
       background-color: #444;
-      border-radius: 5px;
+      border-radius: 10px;
+      overflow: hidden;
+      height: 10px; /* Thinner bar */
+      margin: 20px 0;
     }
 
     .progress {
       height: 100%;
       background-color: #4caf50;
-      border-radius: 5px;
+      width: <%= latest.progress %>%;
+      transition: width 0.3s;
     }
 
-    .history {
-      text-align: left;
-      padding: 20px;
-      margin-top: 20px;
-      background-color: #444;
+    ul {
+      list-style: none;
+      padding: 0;
+    }
+
+    li {
+      background-color: #333;
+      padding: 10px;
       border-radius: 8px;
+      margin: 5px 0;
     }
 
-    .history li {
-      margin-bottom: 10px;
+    .eta-box {
+      margin-top: 30px;
+      padding: 15px;
+      border-radius: 10px;
+      background-color: #333;
+      text-align: center;
+      color: #4caf50;
+      font-weight: bold;
     }
 
-    .message {
-      font-size: 18px;
-      color: #ddd;
-      margin-top: 20px;
-    }
-
-    .message a {
+    a {
       color: #4caf50;
       text-decoration: none;
-    }
-
-    button {
-      padding: 12px;
-      width: 100%;
-      background-color: #4caf50;
-      color: #fff;
-      border: none;
-      border-radius: 10px;
-      font-size: 16px;
-      cursor: pointer;
-      transition: background-color 0.3s;
-    }
-
-    button:hover {
-      background-color: #45a049;
+      display: block;
+      text-align: center;
+      margin-top: 20px;
     }
   </style>
 </head>
 <body>
   <div class="container">
     <h1>Metsamarja Vedu</h1>
+    <h2>Tracking ID: <%= id %></h2>
+    <h3><%= latest.status %> — <%= latest.progress %>%</h3>
 
-    <% if (package) { %>
-      <div class="status">
-        <h3>Package ID: <%= package.id %></h3>
-        <p>Status: <%= latest.status %></p>
-        <p>Progress: <%= latest.progress %>%</p>
+    <div class="progress-bar">
+      <div class="progress"></div>
+    </div>
 
-        <!-- Progress Bar -->
-        <div class="progress-bar">
-          <div class="progress" style="width: <%= latest.progress + '%' %>"></div>
-        </div>
-      </div>
+    <h3>Tracking History</h3>
+    <ul>
+      <% history.forEach(u => { %>
+        <li>[<%= u.time %>] <%= u.status %> — <%= u.progress %>%</li>
+      <% }) %>
+    </ul>
 
-      <!-- Estimated Delivery Time -->
-      <div class="status">
-        <h3>Estimated Delivery Time</h3>
-        <p><%= estimatedDeliveryTime %></p>
-      </div>
-
-      <!-- Tracking History -->
-      <div class="history">
-        <h4>Tracking History:</h4>
-        <ul>
-          <% history.forEach(u => { %>
-            <li><strong><%= u.time %>:</strong> <%= u.status %> – <%= u.progress %>%</li>
-          <% }) %>
-        </ul>
-      </div>
-
-      <div class="message">
-        <p>Want to track another package? <a href="/">Go back to Home</a></p>
-      </div>
-    <% } else { %>
-      <div class="message">
-        <p>Package not found. <a href="/">Try again</a></p>
+    <% if (eta) { %>
+      <div class="eta-box">
+        Estimated Delivery: <%= eta %>
       </div>
     <% } %>
+
+    <a href="/">Back to Home</a>
   </div>
 </body>
 </html>