diff --git a/src/components/NewsArticleWidget.tsx b/src/components/NewsArticleWidget.tsx
index eca6940..44e7290 100644
--- a/src/components/NewsArticleWidget.tsx
+++ b/src/components/NewsArticleWidget.tsx
@@ -27,7 +27,7 @@ const NewsArticleWidget = () => {
   }, []);
 
   return (
-    <div className="bg-light-secondary dark:bg-dark-secondary rounded-xl border border-light-200 dark:border-dark-200 shadow-sm flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3 overflow-hidden">
+    <div className="bg-light-secondary dark:bg-dark-secondary rounded-2xl border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/25 flex flex-row items-stretch w-full h-24 min-h-[96px] max-h-[96px] p-0 overflow-hidden">
       {loading ? (
         <>
           <div className="animate-pulse flex flex-row items-center w-full h-full">
@@ -43,22 +43,24 @@ const NewsArticleWidget = () => {
       ) : article ? (
         <a
           href={`/?q=Summary: ${article.url}`}
-          className="flex flex-row items-center w-full h-full group"
+          className="flex flex-row items-stretch w-full h-full relative overflow-hidden group"
         >
-          <img
-            className="object-cover rounded-lg w-16 min-w-16 max-w-16 h-16 min-h-16 max-h-16 border border-light-200 dark:border-dark-200 bg-light-200 dark:bg-dark-200 group-hover:opacity-90 transition"
-            src={
-              new URL(article.thumbnail).origin +
-              new URL(article.thumbnail).pathname +
-              `?id=${new URL(article.thumbnail).searchParams.get('id')}`
-            }
-            alt={article.title}
-          />
-          <div className="flex flex-col justify-center flex-1 h-full pl-3 w-0">
-            <div className="font-bold text-xs text-black dark:text-white leading-tight truncate overflow-hidden whitespace-nowrap">
+          <div className="relative w-24 min-w-24 max-w-24 h-full overflow-hidden">
+            <img
+              className="object-cover w-full h-full bg-light-200 dark:bg-dark-200 group-hover:scale-110 transition-transform duration-300"
+              src={
+                new URL(article.thumbnail).origin +
+                new URL(article.thumbnail).pathname +
+                `?id=${new URL(article.thumbnail).searchParams.get('id')}`
+              }
+              alt={article.title}
+            />
+          </div>
+          <div className="flex flex-col justify-center flex-1 px-3 py-2">
+            <div className="font-semibold text-xs text-black dark:text-white leading-tight line-clamp-2 mb-1">
               {article.title}
             </div>
-            <p className="text-black/70 dark:text-white/70 text-xs leading-snug truncate overflow-hidden whitespace-nowrap">
+            <p className="text-black/60 dark:text-white/60 text-[10px] leading-relaxed line-clamp-2">
               {article.content}
             </p>
           </div>
diff --git a/src/components/WeatherWidget.tsx b/src/components/WeatherWidget.tsx
index 8eaf871..5703ab2 100644
--- a/src/components/WeatherWidget.tsx
+++ b/src/components/WeatherWidget.tsx
@@ -15,61 +15,61 @@ const WeatherWidget = () => {
 
   const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    const getApproxLocation = async () => {
-      const res = await fetch('https://ipwhois.app/json/');
-      const data = await res.json();
+  const getApproxLocation = async () => {
+    const res = await fetch('https://ipwhois.app/json/');
+    const data = await res.json();
 
-      return {
-        latitude: data.latitude,
-        longitude: data.longitude,
-        city: data.city,
-      };
+    return {
+      latitude: data.latitude,
+      longitude: data.longitude,
+      city: data.city,
     };
+  };
 
-    const getLocation = async (
-      callback: (location: {
-        latitude: number;
-        longitude: number;
-        city: string;
-      }) => void,
-    ) => {
-      if (navigator.geolocation) {
-        const result = await navigator.permissions.query({
-          name: 'geolocation',
-        });
+  const getLocation = async (
+    callback: (location: {
+      latitude: number;
+      longitude: number;
+      city: string;
+    }) => void,
+  ) => {
+    if (navigator.geolocation) {
+      const result = await navigator.permissions.query({
+        name: 'geolocation',
+      });
 
-        if (result.state === 'granted') {
-          navigator.geolocation.getCurrentPosition(async (position) => {
-            const res = await fetch(
-              `https://api-bdc.io/data/reverse-geocode-client?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}&localityLanguage=en`,
-              {
-                method: 'GET',
-                headers: {
-                  'Content-Type': 'application/json',
-                },
+      if (result.state === 'granted') {
+        navigator.geolocation.getCurrentPosition(async (position) => {
+          const res = await fetch(
+            `https://api-bdc.io/data/reverse-geocode-client?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}&localityLanguage=en`,
+            {
+              method: 'GET',
+              headers: {
+                'Content-Type': 'application/json',
               },
-            );
+            },
+          );
 
-            const data = await res.json();
+          const data = await res.json();
 
-            callback({
-              latitude: position.coords.latitude,
-              longitude: position.coords.longitude,
-              city: data.locality,
-            });
+          callback({
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude,
+            city: data.locality,
           });
-        } else if (result.state === 'prompt') {
-          callback(await getApproxLocation());
-          navigator.geolocation.getCurrentPosition((position) => {});
-        } else if (result.state === 'denied') {
-          callback(await getApproxLocation());
-        }
-      } else {
+        });
+      } else if (result.state === 'prompt') {
+        callback(await getApproxLocation());
+        navigator.geolocation.getCurrentPosition((position) => {});
+      } else if (result.state === 'denied') {
         callback(await getApproxLocation());
       }
-    };
+    } else {
+      callback(await getApproxLocation());
+    }
+  };
 
+  const updateWeather = async () => {
     getLocation(async (location) => {
       const res = await fetch(`/api/weather`, {
         method: 'POST',
@@ -100,10 +100,16 @@ const WeatherWidget = () => {
       });
       setLoading(false);
     });
+  };
+
+  useEffect(() => {
+    updateWeather();
+    const intervalId = setInterval(updateWeather, 2 * 60 * 1000);
+    return () => clearInterval(intervalId);
   }, []);
 
   return (
-    <div className="bg-light-secondary dark:bg-dark-secondary rounded-xl border border-light-200 dark:border-dark-200 shadow-sm flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3">
+    <div className="bg-light-secondary dark:bg-dark-secondary rounded-2xl border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/25 flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3">
       {loading ? (
         <>
           <div className="flex flex-col items-center justify-center w-16 min-w-16 max-w-16 h-full animate-pulse">
@@ -134,22 +140,24 @@ const WeatherWidget = () => {
               {data.temperature}°{data.temperatureUnit}
             </span>
           </div>
-          <div className="flex flex-col justify-between flex-1 h-full py-1">
+          <div className="flex flex-col justify-between flex-1 h-full py-2">
             <div className="flex flex-row items-center justify-between">
-              <span className="text-xs font-medium text-black dark:text-white">
+              <span className="text-sm font-semibold text-black dark:text-white">
                 {data.location}
               </span>
-              <span className="flex items-center text-xs text-black/60 dark:text-white/60">
+              <span className="flex items-center text-xs text-black/60 dark:text-white/60 font-medium">
                 <Wind className="w-3 h-3 mr-1" />
                 {data.windSpeed} {data.windSpeedUnit}
               </span>
             </div>
-            <span className="text-xs text-black/60 dark:text-white/60 mt-1">
+            <span className="text-xs text-black/50 dark:text-white/50 italic">
               {data.condition}
             </span>
-            <div className="flex flex-row justify-between w-full mt-auto pt-1 border-t border-light-200 dark:border-dark-200 text-xs text-black/60 dark:text-white/60">
-              <span>Humidity: {data.humidity}%</span>
-              <span>Now</span>
+            <div className="flex flex-row justify-between w-full mt-auto pt-2 border-t border-light-200/50 dark:border-dark-200/50 text-xs text-black/50 dark:text-white/50 font-medium">
+              <span>Humidity {data.humidity}%</span>
+              <span className="font-semibold text-black/70 dark:text-white/70">
+                Now
+              </span>
             </div>
           </div>
         </>