diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 7dd869ffc..cacfb7af1 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -15,6 +15,12 @@
         "api_error": "API Error",
         "status": "Status"
     },
+    "weather": {
+      "current": "Current Location",
+      "allow": "Click to allow",
+      "updating": "Updating",
+      "wait": "Please wait"
+    },
     "search": {
         "placeholder": "Search…"
     },
diff --git a/src/components/widgets/openweathermap/weather.jsx b/src/components/widgets/openweathermap/weather.jsx
index d4c292f94..13640b14c 100644
--- a/src/components/widgets/openweathermap/weather.jsx
+++ b/src/components/widgets/openweathermap/weather.jsx
@@ -1,25 +1,28 @@
 import useSWR from "swr";
+import { useState } from "react";
 import { BiError } from "react-icons/bi";
+import { WiCloudDown } from "react-icons/wi";
+import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
 import { useTranslation } from "react-i18next";
 
 import Icon from "./icon";
 
-export default function OpenWeatherMap({ options }) {
+function Widget({ options }) {
   const { t, i18n } = useTranslation();
 
   const { data, error } = useSWR(
     `/api/widgets/openweathermap?${new URLSearchParams({ lang: i18n.language, ...options }).toString()}`
   );
 
-  if (error || data?.cod === 401) {
+  if (error || data?.cod === 401 || data?.error) {
     return (
-      <div className="flex flex-col">
+      <div className="flex flex-col justify-center">
         <div className="flex flex-row items-center justify-end">
           <div className="flex flex-col items-center">
             <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
             <div className="flex flex-col ml-3 text-left">
-              <span className="text-theme-800 dark:text-theme-200 text-sm">API</span>
-              <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
+              <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
             </div>
           </div>
         </div>
@@ -28,11 +31,19 @@ export default function OpenWeatherMap({ options }) {
   }
 
   if (!data) {
-    return <div className="flex flex-row items-center" />;
-  }
-
-  if (data.error) {
-    return <div className="flex flex-row items-center" />;
+    return (
+      <div className="flex flex-col justify-center">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-col items-center">
+            <WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
+          </div>
+          <div className="flex flex-col ml-3 text-left">
+            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.updating")}</span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.wait")}</span>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   const unit = options.units === "metric" ? "celsius" : "fahrenheit";
@@ -57,3 +68,53 @@ export default function OpenWeatherMap({ options }) {
     </div>
   );
 }
+
+export default function OpenWeatherMap({ options }) {
+  const { t } = useTranslation();
+  const [location, setLocation] = useState(false);
+  const [requesting, setRequesting] = useState(false);
+
+  if (!location && options.latitude && options.longitude) {
+    setLocation({ latitude: options.latitude, longitude: options.longitude });
+  }
+
+  const requestLocation = () => {
+    setRequesting(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLocation({ latitude: position.coords.latitude, longitude: position.coords.longitude });
+        setRequesting(false);
+      },
+      () => {
+        setRequesting(false);
+      },
+      {
+        enableHighAccuracy: true,
+        maximumAge: 1000 * 60 * 60 * 3,
+        timeout: 1000 * 30,
+      }
+    );
+  };
+
+  if (!location) {
+    return (
+      <button type="button" onClick={() => requestLocation()} className="flex flex-col justify-center">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-col items-center">
+            {requesting ? (
+              <MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
+            ) : (
+              <MdLocationDisabled className="w-6 h-6 text-theme-800 dark:text-theme-200" />
+            )}
+          </div>
+          <div className="flex flex-col ml-3 text-left">
+            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.current")}</span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.allow")}</span>
+          </div>
+        </div>
+      </button>
+    );
+  }
+
+  return <Widget options={{ ...location, ...options }} />;
+}
diff --git a/src/components/widgets/weather/weather.jsx b/src/components/widgets/weather/weather.jsx
index 85d32303e..1b1a35e71 100644
--- a/src/components/widgets/weather/weather.jsx
+++ b/src/components/widgets/weather/weather.jsx
@@ -1,25 +1,28 @@
 import useSWR from "swr";
+import { useState } from "react";
 import { BiError } from "react-icons/bi";
+import { WiCloudDown } from "react-icons/wi";
+import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
 import { useTranslation } from "react-i18next";
 
 import Icon from "./icon";
 
-export default function WeatherApi({ options }) {
+function Widget({ options }) {
   const { t, i18n } = useTranslation();
 
   const { data, error } = useSWR(
     `/api/widgets/weather?${new URLSearchParams({ lang: i18n.language, ...options }).toString()}`
   );
 
-  if (error) {
+  if (error || data?.error) {
     return (
-      <div className="flex flex-col">
+      <div className="flex flex-col justify-center">
         <div className="flex flex-row items-center justify-end">
           <div className="flex flex-col items-center">
             <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
             <div className="flex flex-col ml-3 text-left">
-              <span className="text-theme-800 dark:text-theme-200 text-sm">API</span>
-              <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
+              <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
             </div>
           </div>
         </div>
@@ -28,11 +31,19 @@ export default function WeatherApi({ options }) {
   }
 
   if (!data) {
-    return <div className="flex flex-row items-center justify-end" />;
-  }
-
-  if (data.error) {
-    return <div className="flex flex-row items-center justify-end" />;
+    return (
+      <div className="flex flex-col justify-center">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-col items-center">
+            <WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
+          </div>
+          <div className="flex flex-col ml-3 text-left">
+            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.updating")}</span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.wait")}</span>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   const unit = options.units === "metric" ? "celsius" : "fahrenheit";
@@ -58,3 +69,53 @@ export default function WeatherApi({ options }) {
     </div>
   );
 }
+
+export default function WeatherApi({ options }) {
+  const { t } = useTranslation();
+  const [location, setLocation] = useState(false);
+  const [requesting, setRequesting] = useState(false);
+
+  if (options.latitude && options.longitude) {
+    setLocation({ latitude: options.latitude, longitude: options.longitude });
+  }
+
+  const requestLocation = () => {
+    setRequesting(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLocation({ latitude: position.coords.latitude, longitude: position.coords.longitude });
+        setRequesting(false);
+      },
+      () => {
+        setRequesting(false);
+      },
+      {
+        enableHighAccuracy: true,
+        maximumAge: 1000 * 60 * 60 * 3,
+        timeout: 1000 * 30,
+      }
+    );
+  };
+
+  if (!location) {
+    return (
+      <button type="button" onClick={() => requestLocation()} className="flex flex-col justify-center">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-col items-center">
+            {requesting ? (
+              <MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
+            ) : (
+              <MdLocationDisabled className="w-6 h-6 text-theme-800 dark:text-theme-200" />
+            )}
+          </div>
+          <div className="flex flex-col ml-3 text-left">
+            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.current")}</span>
+            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.allow")}</span>
+          </div>
+        </div>
+      </button>
+    );
+  }
+
+  return <Widget options={{ ...location, ...options }} />;
+}