diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx
index a2f3595..fd023d1 100644
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@@ -16,7 +16,7 @@ const HeaderNav: React.FC<HeaderProps> = ({
   
 
 return (
-<div className="opacity-90 fixed top-0 left-0 right-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] pt-6 pb-2 z-50 shadow-lg rounded-b-3xl">
+<div className=" opacity-90 fixed top-0 left-0 right-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] pt-6 pb-2 z-50 shadow-lg rounded-b-3xl backdrop-blur-lg glass-morphism">
     <div className="absolute inset-0 bg-gradient-to-r from-black/10 to-transparent"></div>
     <div className="relative px-6 py-4 max-w-4xl mx-auto ">
         <p className="text-cyan-100 text-sm font-medium">{text}</p>
diff --git a/src/pages/Exercise.tsx b/src/pages/Exercise.tsx
index 7e20b9a..31c9837 100644
--- a/src/pages/Exercise.tsx
+++ b/src/pages/Exercise.tsx
@@ -317,7 +317,7 @@ export const Exercise = () => {
         </div>
 
         {/* Fixed Timer at Bottom */}
-        <div className="fixed bottom-36 left-0 right-0 bg-white opacity-85 border-t border-white/20 px-4 sm:px-6 py-4 shadow-2xl z-30">
+        <div className="fixed bottom-36 left-0 right-0 bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-gray-200/50 shadow-lg glass-morphism z-30">
           <div className="max-w-md mx-auto">
             <div className="flex items-center justify-between mb-3">
               <div className="flex items-center space-x-2">
@@ -389,7 +389,7 @@ export const Exercise = () => {
                 onTouchStart={() => setIsActive(true)}
                 onTouchEnd={() => setIsActive(false)}
 
-                className={`cursor-pointer px-6 py-3 font-bold rounded-xl transition-all duration-700 hover:scale-105 hover:shadow-lg border border-gray-200 flex items-center justify-center ${!isActive ? "bg-white text-orange-400" : "bg-orange-400 text-white"}`}
+                className={`cursor-pointer px-6 py-3 font-bold rounded-xl transition-all duration-300 hover:shadow-lg border border-gray-200 hover:bg-orange-400 hover:text-white flex items-center justify-center ${!isActive ? "bg-white text-orange-400 scale-100" : "bg-orange-400 text-white scale-105"}`}
               >
                 <CheckIcon
                   className="w-6 h-6"