diff --git a/client/src/index.css b/client/src/index.css
index 13b8b12..87ab9b0 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -35,4 +35,48 @@
 .animation-delay-4000 {
   animation-delay: 4s;
 }
+
+/* Precautions page: hover + glitter (shimmer) effect */
+.precaution-card {
+  position: relative;
+  overflow: hidden;
+  will-change: transform;
+  transition: transform 200ms ease, box-shadow 200ms ease;
+}
+
+.precaution-card:hover {
+  transform: translateY(-2px);
+}
+
+.precaution-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  left: -150%;
+  width: 120%;
+  height: 100%;
+  transform: skewX(-20deg);
+  background: linear-gradient(
+    120deg,
+    transparent,
+    rgb(255 255 255 / 0.28),
+    transparent
+  );
+  opacity: 0;
+  pointer-events: none;
+}
+
+.precaution-card:hover::before {
+  opacity: 1;
+  animation: precaution-shine 900ms linear;
+}
+
+@keyframes precaution-shine {
+  from {
+    left: -150%;
+  }
+  to {
+    left: 150%;
+  }
+}
   
\ No newline at end of file
diff --git a/client/src/pages/Precautions.jsx b/client/src/pages/Precautions.jsx
index 78dd832..e86eab7 100644
--- a/client/src/pages/Precautions.jsx
+++ b/client/src/pages/Precautions.jsx
@@ -85,7 +85,7 @@ const Precautions = () => {
         </p>
       ) : (
         <div className="space-y-6">
-          <div className="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 dark:border-yellow-400 p-4 rounded-lg">
+          <div className="precaution-card bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 dark:border-yellow-400 p-4 rounded-lg">
             <p className="text-lg font-medium text-yellow-800 dark:text-yellow-300 mb-2">
               Based on Current Air Quality:
             </p>
@@ -111,7 +111,7 @@ const Precautions = () => {
             </ul>
           </div>
 
-          <div className="bg-gray-50 dark:bg-gray-800/40 border-l-4 border-gray-400 dark:border-gray-500 p-4 rounded-lg">
+          <div className="precaution-card bg-gray-50 dark:bg-gray-800/40 border-l-4 border-gray-400 dark:border-gray-500 p-4 rounded-lg">
             <h3 className="font-semibold text-gray-700 dark:text-gray-100 mb-2">
               🛡️ General Protective Measures:
             </h3>