diff --git a/app/globals.css b/app/globals.css
index a4ab8bb..d8edb93 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -50,4 +50,30 @@ select {
   .text-balance {
     text-wrap: balance;
   }
+
+  .weather-scrollbar {
+    scrollbar-color: rgba(14, 116, 144, 0.55) rgba(255, 255, 255, 0.16);
+    scrollbar-width: thin;
+  }
+
+  .weather-scrollbar::-webkit-scrollbar {
+    height: 0.55rem;
+  }
+
+  .weather-scrollbar::-webkit-scrollbar-track {
+    border-radius: 9999px;
+    background: rgba(255, 255, 255, 0.16);
+  }
+
+  .weather-scrollbar::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: 9999px;
+    background: rgba(14, 116, 144, 0.55);
+    background-clip: padding-box;
+  }
+
+  .weather-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(8, 145, 178, 0.78);
+    background-clip: padding-box;
+  }
 }
diff --git a/components/forecast/forecast-panel.tsx b/components/forecast/forecast-panel.tsx
index 57314ba..36651e5 100644
--- a/components/forecast/forecast-panel.tsx
+++ b/components/forecast/forecast-panel.tsx
@@ -69,7 +69,7 @@ export function ForecastPanel({ latitude, longitude, locationName }: { latitude?
         <div className="grid items-start gap-3 lg:grid-cols-[1.35fr_1fr]">
           <Card className="overflow-hidden p-4 sm:p-5">
             <h3 className="flex items-center gap-2 text-sm font-semibold"><Clock3 className="size-4 text-sky-600 dark:text-sky-300" />{t("forecast.hourly")}</h3>
-            <div className="-mx-4 mt-4 overflow-x-auto px-4 pb-1 sm:-mx-5 sm:px-5">
+            <div className="weather-scrollbar -mx-4 mt-4 overflow-x-auto px-4 pb-2 sm:-mx-5 sm:px-5">
               <ul className="flex min-w-max gap-2">
                 {forecast.hourly.map((hour, index) => (
                   <motion.li