diff --git a/src/components/shared/home/home-timer.tsx b/src/components/shared/home/home-timer.tsx
index 4176c77..f8fafbf 100644
--- a/src/components/shared/home/home-timer.tsx
+++ b/src/components/shared/home/home-timer.tsx
@@ -86,29 +86,27 @@ export const HomeTimer: FC<Props> = ({ className }) => {
     seconds: string;
   };
   return (
-    <section className={cn("2xl:w-[600px] xl:w-[450px] w-[350px]", className)}>
-      <div className="grid grid-cols-4 w-full mr-[50%] gap-6 items-end place-items-center">
-        <TimerItem
-          value={timeLeft.days}
-          prevValue={prevValues.days || timeLeft.days}
-          label={daysLabel}
-        />
-        <TimerItem
-          value={timeLeft.hours}
-          prevValue={prevValues.hours || timeLeft.hours}
-          label={hoursLabel}
-        />
-        <TimerItem
-          value={timeLeft.minutes}
-          prevValue={prevValues.minutes || timeLeft.minutes}
-          label={minutesLabel}
-        />
-        <TimerItem
-          value={timeLeft.seconds}
-          prevValue={prevValues.seconds || timeLeft.seconds}
-          label={secondsLabel}
-        />
-      </div>
-    </section>
+    <div className="flex flex-col fixed left-0 top-1/3 gap-2 bg-[#E7E5E5] py-4 pr-4 rounded drop-shadow-md  z-[100]">
+      <TimerItem
+        value={timeLeft.days}
+        prevValue={prevValues.days || timeLeft.days}
+        label={daysLabel}
+      />
+      <TimerItem
+        value={timeLeft.hours}
+        prevValue={prevValues.hours || timeLeft.hours}
+        label={hoursLabel}
+      />
+      <TimerItem
+        value={timeLeft.minutes}
+        prevValue={prevValues.minutes || timeLeft.minutes}
+        label={minutesLabel}
+      />
+      <TimerItem
+        value={timeLeft.seconds}
+        prevValue={prevValues.seconds || timeLeft.seconds}
+        label={secondsLabel}
+      />
+    </div>
   );
 };
diff --git a/src/components/shared/timer-item.tsx b/src/components/shared/timer-item.tsx
index 7a39402..ae3479c 100644
--- a/src/components/shared/timer-item.tsx
+++ b/src/components/shared/timer-item.tsx
@@ -7,24 +7,24 @@ export const TimerItem = ({
   label: string;
   prevValue: string;
 }) => (
-  <div className="timer-item flex flex-col items-center">
-    <div className="relative sm:h-14 h-6 w-16 overflow-hidden font-bold">
+  <div className="timer-item flex flex-col items-center justify-center bg-teritary p-1 rounded-[2px]">
+    <div className="relative font-bold h-10 ">
       <span
-        className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-white to-surface_high text-transparent bg-clip-text sm:text-5xl text-xl leading-none transition-all duration-300 ${
+        className={`absolute -translate-x-1/2 black flex text-center text-white text-transparent size-10 sm:text-3xl text-xl leading-none transition-all duration-300 ${
           prevValue !== value ? " opacity-0" : " opacity-100"
         }`}
       >
         {prevValue}
       </span>
       <span
-        className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-white to-surface_high text-transparent bg-clip-text  sm:text-5xl text-xl leading-none transition-all duration-300 ${
+        className={`absolute -translate-x-1/2 black text-center bg-gradient-to-t from-white to-surface_high text-transparent bg-clip-text  sm:text-3xl text-xl leading-none transition-all duration-300 ${
           prevValue !== value ? "opacity-100" : "opacity-0"
         }`}
       >
         {value}
       </span>
     </div>
-    <div className="label normal sm:text-lg text-base text-[#FAD8DB]">
+    <div className="label normal sm:text-lg text-base text-[#FACFAE] text-center">
       {label}
     </div>
   </div>