removed limiter from local version

.gitignore

@@ -111,4 +111,6 @@ backend/public/uploads/
 # API keys and secrets (additional protection)
 config/
 secrets/
-keys/
+keys/
+
+icon/

LICENSE

@@ -0,0 +1,6 @@
+Copyright (c) 2026 Theis Gaedigk
+
+All rights reserved.
+
+This source code is not to be copied, modified, or distributed in any form
+without explicit written permission from the author.

RELEASE_NOTES.md

@@ -0,0 +1,9 @@
+## Release Notes
+
+### New Features
+- Changed **web panel** backend, so you don't need to set the API key anymore. [Web Panel](https://weather.the1s.de)
+- You can now see the **last updated** time in the web panel.
+
+### Improvements
+- Changed Website Icons to lucide react icons
+- Changed overall handling of the panel

backend/package-lock.json

@@ -15,6 +15,7 @@
         "dotenv": "^17.2.0",
         "ejs": "^3.1.10",
         "express": "^5.1.0",
+        "express-rate-limit": "^8.5.2",
         "jose": "^6.0.12",
         "mysql2": "^3.14.2"
       }
@@ -69,29 +70,49 @@
       "license": "MIT"
     },
     "node_modules/body-parser": {
-      "version": "2.2.0",
+      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
-      "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
       "license": "MIT",
       "dependencies": {
         "bytes": "^3.1.2",
         "content-type": "^1.0.5",
-        "debug": "^4.4.0",
+        "debug": "^4.4.3",
         "http-errors": "^2.0.0",
-        "iconv-lite": "^0.6.3",
+        "iconv-lite": "^0.7.0",
         "on-finished": "^2.4.1",
-        "qs": "^6.14.0",
+        "qs": "^6.14.1",
-        "raw-body": "^3.0.0",
+        "raw-body": "^3.0.1",
-        "type-is": "^2.0.0"
+        "type-is": "^2.0.1"
       },
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
+      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -248,9 +269,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.1",
+      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -425,6 +446,24 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/express-rate-limit": {
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.5.2.tgz",
+      "integrity": "sha512-5Kb34ipNX694DH48vN9irak1Qx30nb0PLYHXfJgw4YEjiC3ZEmZJhwOp+VfiCYwFzvFTdB9QkArYS5kXa2cx2A==",
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^10.2.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
     "node_modules/filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -435,18 +474,18 @@
       }
     },
     "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.0.2",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
     },
     "node_modules/filelist/node_modules/minimatch": {
-      "version": "5.1.6",
+      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -591,28 +630,23 @@
       }
     },
     "node_modules/http-errors": {
-      "version": "2.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
       "license": "MIT",
       "dependencies": {
-        "depd": "2.0.0",
+        "depd": "~2.0.0",
-        "inherits": "2.0.4",
+        "inherits": "~2.0.4",
-        "setprototypeof": "1.2.0",
+        "setprototypeof": "~1.2.0",
-        "statuses": "2.0.1",
+        "statuses": "~2.0.2",
-        "toidentifier": "1.0.1"
+        "toidentifier": "~1.0.1"
       },
       "engines": {
         "node": ">= 0.8"
-      }
+      },
-    },
+      "funding": {
-    "node_modules/http-errors/node_modules/statuses": {
+        "type": "opencollective",
-      "version": "2.0.1",
+        "url": "https://opencollective.com/express"
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
       }
     },
     "node_modules/iconv-lite": {
@@ -633,6 +667,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/ip-address": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.2.0.tgz",
+      "integrity": "sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -763,9 +806,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
+      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -873,12 +916,13 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "8.2.0",
+      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
-      "integrity": "sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
       "license": "MIT",
-      "engines": {
+      "funding": {
-        "node": ">=16"
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/proxy-addr": {
@@ -895,9 +939,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.14.0",
+      "version": "6.15.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
-      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
@@ -919,18 +963,34 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "3.0.0",
+      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
-      "integrity": "sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
       "license": "MIT",
       "dependencies": {
-        "bytes": "3.1.2",
+        "bytes": "~3.1.2",
-        "http-errors": "2.0.0",
+        "http-errors": "~2.0.1",
-        "iconv-lite": "0.6.3",
+        "iconv-lite": "~0.7.0",
-        "unpipe": "1.0.0"
+        "unpipe": "~1.0.0"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/raw-body/node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/router": {

backend/package.json

@@ -18,6 +18,7 @@
     "dotenv": "^17.2.0",
     "ejs": "^3.1.10",
     "express": "^5.1.0",
+    "express-rate-limit": "^8.5.2",
     "jose": "^6.0.12",
     "mysql2": "^3.14.2"
   }

docker-compose.yml

@@ -3,18 +3,14 @@ services:
     container_name: frontend
     build: ./frontend
     ports:
-      - "7002:7002"
+      - "7002:80"
-    environment:
+    restart: always
-      - CHOKIDAR_USEPOLLING=true
+
+  backend:
+    container_name: backend
+    build: ./backend
+    ports:
+      - "7001:7001"
     volumes:
-      - ./frontend:/app
+      - ./backend:/bikelane-backend
-      - /app/node_modules
     restart: unless-stopped
-#  backend:
-#   container_name: backend
-#  build: ./backend
-# ports:
-#  - "7001:7001"
-#volumes:
-#  - ./backend:/bikelane-backend
-# restart: unless-stopped

frontend/Dockerfile

@@ -1,12 +1,19 @@
-FROM node:20-alpine
+FROM node:22-alpine AS builder
 
 WORKDIR /app
 
-COPY package*.json ./
+COPY package.json package-lock.json ./
-RUN npm install
+RUN npm ci
 
 COPY . .
+RUN npm run build
 
-EXPOSE 7002
+FROM nginx:alpine AS runner
 
-CMD ["npm", "run", "dev"]
+WORKDIR /usr/share/nginx/html
+COPY --from=builder /app/dist .
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/index.html

@@ -1,12 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link
+    <link rel="icon" type="image/png" href="/icon_weather-app_dark.png" />
-      rel="icon"
-      type="image/svg+xml"
-      href="./src/assets/cloud-sun-fill.png"
-    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Weather App</title>
   </head>

frontend/nginx.conf

@@ -0,0 +1,18 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
+    expires 1y;
+    access_log off;
+    add_header Cache-Control "public, immutable";
+    try_files $uri =404;
+  }
+}

frontend/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

frontend/src/components/ChangeAPI.tsx

@@ -53,7 +53,7 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
         </div>
         <button
           type="submit"
-          className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
+          className="cursor-pointer bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
           onClick={handleUpdate}
         >
           Update API Key

frontend/src/components/ChangePreferences.tsx

@@ -47,7 +47,7 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
             Temperature Unit
           </label>
           <select
-            className="w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
+            className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
             value={unit}
             onChange={(e) => setUnit(e.target.value)}
           >
@@ -63,7 +63,7 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
             Theme
           </label>
           <select
-            className="w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
+            className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
             value={theme}
             onChange={(e) => setTheme(e.target.value)}
           >
@@ -77,7 +77,7 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
         {/* Submit */}
         <button
           type="submit"
-          className="w-full bg-gradient-to-r from-blue-600 to-blue-400 text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400"
+          className="cursor-pointer w-full bg-gradient-to-r from-blue-600 to-blue-400 text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400"
         >
           Save Preferences
         </button>

frontend/src/components/Header.tsx

@@ -3,7 +3,7 @@ import ChangeAPI from "./ChangeAPI";
 import ChangePreferences from "./ChangePreferences";
 import { useState } from "react";
 import Cookies from "js-cookie";
-import logo from "../assets/cloud-sun-fill.png";
+import logo from "/icon_weather-app_default.png";
 import { Github, KeyRound, Settings2 } from "lucide-react";
 
 const Header: React.FC = () => {
@@ -21,14 +21,14 @@ const Header: React.FC = () => {
             className="w-10 h-10 drop-shadow-lg"
           />
           <h1 className="text-4xl font-extrabold tracking-wide drop-shadow-lg">
-            Weather App
+            Weather App - <strong>Local hosted</strong>
           </h1>
         </div>
         <div className="flex items-center gap-4">
           {" "}
           {/* Added container for buttons */}
           <button
-            className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
+            className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
             onClick={() => setApiCard(true)}
           >
             <span className="flex items-center gap-2">
@@ -37,7 +37,7 @@ const Header: React.FC = () => {
             </span>
           </button>
           <button
-            className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
+            className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
             onClick={() => setPreferencesCard(true)}
           >
             <span className="flex items-center gap-2">
@@ -50,7 +50,7 @@ const Header: React.FC = () => {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <button className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2">
+            <button className="cursor-help bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2">
               <span className="flex items-center gap-2">
                 <Github /> Docs
               </span>

frontend/src/components/WeatherData.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Sunrise, Sunset } from "lucide-react";
+import { getDateTime } from "../utils/utils";
 
 const WeatherData: React.FC = () => {
   const weatherRaw = localStorage.getItem("weather");
@@ -75,6 +76,11 @@ const WeatherData: React.FC = () => {
                 : "--:--"}
             </span>
           </div>
+          <div className="flex items-center gap-3">
+            <span className="text-base text-gray-600 italic font-semibold">
+              Last updated: {getDateTime()}
+            </span>
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/WeatherForm.tsx

@@ -23,8 +23,6 @@ const WeatherCard: React.FC = () => {
       .promise(fetchWeather(city, getAPIKey(), getUnit()), {
         pending: "Fetching weather data...",
         success: "Weather data loaded successfully!",
-        error:
-          "Failed to load weather data. Please check your entered city name. (Error: x4040)",
       })
       .then(() => {
         if (localStorage.getItem("weather")) {
@@ -52,6 +50,9 @@ const WeatherCard: React.FC = () => {
       <p className="mb-2 text-gray-600">
         Current weather will be displayed here.
       </p>
+      <p className="mb-2 text-gray-600">
+        <strong>Make sure to set your API key in the header section.</strong>
+      </p>
       <form onSubmit={handleSubmit} className="flex flex-col gap-4 mt-4">
         <label htmlFor="city" className="font-medium text-gray-700">
           Enter City:
@@ -69,7 +70,7 @@ const WeatherCard: React.FC = () => {
         <div className="flex items-center gap-2">
           <button
             type="submit"
-            className="flex-1 bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-4 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
+            className="cursor-pointer flex-1 bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-4 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
           >
             Get Weather
           </button>
@@ -80,7 +81,7 @@ const WeatherCard: React.FC = () => {
                 setWeatherData(false);
                 localStorage.removeItem("weather");
               }}
-              className="flex-shrink-0 bg-red-500 hover:bg-red-600 text-white rounded-xl p-3 shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400"
+              className="cursor-pointer flex-shrink-0 bg-red-500 hover:bg-red-600 text-white rounded-xl p-3 shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400"
               aria-label="Close weather data"
             >
               <X />

frontend/src/utils/utils.ts

@@ -0,0 +1,24 @@
+export const getDateTime = () => {
+  const now = new Date();
+  const day = now.getDate();
+  const month = now.toLocaleString("en-GB", { month: "long" });
+  const hours = now.getHours().toString().padStart(2, "0");
+  const minutes = now.getMinutes().toString().padStart(2, "0");
+
+  // Ordinal suffix
+  const getOrdinal = (n: number) => {
+    if (n > 3 && n < 21) return "th";
+    switch (n % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
+    }
+  };
+
+  return `${day}${getOrdinal(day)} ${month}, ${hours}:${minutes}`;
+};