diff --git a/app/(main)/lottery/active/page.tsx b/app/(main)/lottery/active/page.tsx
index b1a6097..d3c305f 100644
--- a/app/(main)/lottery/active/page.tsx
+++ b/app/(main)/lottery/active/page.tsx
@@ -35,7 +35,7 @@ const page = () => {
   }
 
   return (
-    <div className="flex flex-col gap-[128px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] pb-[128px] text-lightOnSurface">
+    <div className="flex flex-col md:gap-[128px] gap-[80px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] pb-[128px] text-lightOnSurface">
       {data && (
         <section className="">
           <div className="container">
@@ -82,10 +82,10 @@ const page = () => {
                 </div>
               )}
 
-              <div className="bg-lightSurfaceContainer flex flex-col gap-6">
+              <div className="bg-lightSurfaceContainer flex flex-col">
                 <LotteryCountDown
-                  startDate={'2024-12-9 16:15:00'}
-                  endDate={'2024-12-10 16:00:00'}
+                  startDate={'2024-12-14 16:15:00'}
+                  endDate={'2024-12-15 16:00:00'}
                   lotteryStatus={lotteryStatus}
                   setLotteryStatus={setLotteryStatus}
                 />
@@ -99,15 +99,15 @@ const page = () => {
       <section className="flex flex-col gap-[40px]">
         {lotteryStatus === 'not-started' && (
           <LotteryCountDown
-            startDate={'2024-12-9 16:15:00'}
-            endDate={'2024-12-10 16:00:00'}
+            startDate={'2024-12-14 16:15:00'}
+            endDate={'2024-12-15 16:00:00'}
             lotteryStatus={lotteryStatus}
             setLotteryStatus={setLotteryStatus}
           />
         )}
         <LotteryCountDownAllert
-          startDate={'2024-12-9 16:15:00'}
-          endDate={'2024-12-10 16:00:00'}
+          startDate={'2024-12-14 16:15:00'}
+          endDate={'2024-12-15 16:00:00'}
           lotteryStatus={lotteryStatus}
           setLotteryStatus={setLotteryStatus}
         />
diff --git a/components/lottery/LotteryWinnersSection.tsx b/components/lottery/LotteryWinnersSection.tsx
index 0d012eb..2975ede 100644
--- a/components/lottery/LotteryWinnersSection.tsx
+++ b/components/lottery/LotteryWinnersSection.tsx
@@ -10,12 +10,12 @@ const LotteryWinnersSection = () => {
   return (
     <section>
       <div className="container">
-        <div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px]">
+        <div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px] flex-1">
           {/* Winners */}
           <LotteryWinnersList winners={winners} />
 
           {/* Sping the wheel */}
-          <div className="flex justify-center items-center w-full h-full px-8 py-[29px]">
+          <div className="flex justify-center items-center md:w-full h-full md:px-8 md:py-[29px] p-6">
             <SpinWheel setWinners={setWinners} />
           </div>
         </div>
diff --git a/components/lottery/countDown/LotteryCountDown.tsx b/components/lottery/countDown/LotteryCountDown.tsx
index 5c21de3..0fe4473 100644
--- a/components/lottery/countDown/LotteryCountDown.tsx
+++ b/components/lottery/countDown/LotteryCountDown.tsx
@@ -44,9 +44,11 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
     return () => clearInterval(timer); // Clean up interval on component unmount
   }, [startDate, endDate, lotteryStatus, setLotteryStatus]);
 
+  console.log(lotteryStatus);
+
   return (
-    <div className="bg-lightPrimaryContainer sm:p-6 p-2 flex flex-col w-full gap-2 rounded-[12px] text-lightOnPrimaryContainer">
-      <h3 className="text-center font-heading-1-regular text-lightOnSurface">
+    <div className="bg-lightPrimaryContainer sm:p-6 p-2 flex flex-col w-full md:gap-2 rounded-[12px] text-lightOnPrimaryContainer">
+      <h3 className="text-center md:font-heading-1-regular text-[32px] leading-[40px] text-lightOnSurface">
         {lotteryStatus === 'started'
           ? 'Bije dowam edýär'
           : lotteryStatus === 'ended'
diff --git a/components/lottery/form/LotteryForm.tsx b/components/lottery/form/LotteryForm.tsx
index c3f1bbc..25d182a 100644
--- a/components/lottery/form/LotteryForm.tsx
+++ b/components/lottery/form/LotteryForm.tsx
@@ -19,7 +19,7 @@ const LotteryForm = () => {
         </div>
       </div>
 
-      <button className="p-[10px] w-full flex items-center justify-center text-lightPrimary font-small-medium rounded-full outline-none border border-lightOutline hover:bg-[#57599214] transition-all ease-in-out duration-300">
+      <button className="p-[10px] w-full flex items-center justify-center text-lightPrimary md:font-small-medium text-[14px] leading-[20px] rounded-full outline-none border border-lightOutline hover:bg-[#57599214] transition-all ease-in-out duration-300">
         Tassyklamak
       </button>
     </div>
diff --git a/components/lottery/rules/LotteryRulesSection.tsx b/components/lottery/rules/LotteryRulesSection.tsx
index c86c003..8fc2bd8 100644
--- a/components/lottery/rules/LotteryRulesSection.tsx
+++ b/components/lottery/rules/LotteryRulesSection.tsx
@@ -2,12 +2,16 @@ const LotteryRulesSection = () => {
   return (
     <section>
       <div className="container">
-        <div className="flex flex-col gap-8">
-          <h2 className="font-heading-1-regular">Lotereýanyň duzgunleri:</h2>
+        <div className="flex flex-col md:gap-8 gap-6">
+          <h2 className="md:font-heading-1-regular text-[32px] leading-[40px]">
+            Lotereýanyň duzgunleri:
+          </h2>
           <div className="flex gap-6">
-            <div className="flex flex-col gap-4 bg-lightSurfaceContainer py-4 px-8 rounded-[12px] w-full">
-              <h3 className="font-heading-5-regular">Umumy düzgünler:</h3>
-              <ul className="list-disc flex flex-col gap-4 pl-[16px]">
+            <div className="flex flex-col md:gap-4 gap-2 bg-lightSurfaceContainer py-4 md:px-8 px-6 rounded-[12px] w-full">
+              <h3 className="md:font-heading-5-regular text-[20px] leading-[24px]">
+                Umumy düzgünler:
+              </h3>
+              <ul className="list-disc flex flex-col md:gap-4 gap-2 pl-[16px]">
                 {Array(5)
                   .fill(' ')
                   .map((item, i) => (
@@ -18,9 +22,9 @@ const LotteryRulesSection = () => {
               </ul>
             </div>
 
-            <div className="flex flex-col gap-4 bg-lightSurfaceContainer py-4 px-8 rounded-[12px] w-full">
-              <h3 className="font-heading-5-regular">Üns beriň:</h3>
-              <ul className="list-disc flex flex-col gap-4 pl-[16px]">
+            <div className="flex flex-col md:gap-4 gap-2 bg-lightSurfaceContainer py-4 md:px-8 px-6 rounded-[12px] w-full">
+              <h3 className="md:font-heading-5-regular text-[20px] leading-[24px]">Üns beriň:</h3>
+              <ul className="list-disc flex flex-col md:gap-4 gap-2 pl-[16px]">
                 {Array(1)
                   .fill(' ')
                   .map((item, i) => (
diff --git a/components/lottery/spinWheel/SpinWheel.tsx b/components/lottery/spinWheel/SpinWheel.tsx
index b96ae75..61f9a35 100644
--- a/components/lottery/spinWheel/SpinWheel.tsx
+++ b/components/lottery/spinWheel/SpinWheel.tsx
@@ -82,14 +82,14 @@ const SpinWheel = ({ setWinners }: IProps) => {
           />
         </div>
       )}
-      <div className="relative rounded-full max-w-[554px] max-h-[554px] w-full h-full">
+      <div className="relative rounded-full md:max-w-[554px] md:max-h-[554px] w-[276px] h-[276px] md:w-full md:h-full">
         {/* Wheel triangle */}
         <Image
           src={'/wheel-triangle.svg'}
           alt="wheel"
           height={34}
           width={35}
-          className="absolute z-10 left-[50%] -translate-x-[50%] lg:top-7 top-[17px]"
+          className="absolute z-10 left-[50%] -translate-x-[50%] lg:top-7 top-[17px] md:w-[34px] md:h-[34px] w-[17px] h-[17px]"
         />
 
         {/* Wheel */}
@@ -111,15 +111,15 @@ const SpinWheel = ({ setWinners }: IProps) => {
         </div>
 
         {/* Countdown */}
-        <div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] lg:w-[105px] lg:h-[105px] h-[75px] w-[75px] rounded-full z-10 bg-white flex items-center justify-center ">
-          <span className="text-[#79536A] font-roboto lg:text-[60px] text-[45px]  leading-[70px] tracking-[-1%]">
+        <div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] lg:w-[105px] lg:h-[105px] md:h-[75px] md:w-[75px] w-[50px] h-[50px] rounded-full z-10 bg-white flex items-center justify-center ">
+          <span className="text-[#79536A] font-roboto lg:text-[60px] md:text-[45px] text-[28px]  leading-[70px] tracking-[-1%]">
             {countdown}
           </span>
         </div>
       </div>
 
       {/* Spin Button */}
-      <button
+      {/* <button
         onClick={handleSpinClick}
         disabled={isSpinning || isCountingDown}
         className={`mt-6 px-6 py-3 rounded-full text-white font-bold ${
@@ -132,7 +132,7 @@ const SpinWheel = ({ setWinners }: IProps) => {
           : isSpinning
           ? 'Spinning...'
           : 'Spin the Wheel'}
-      </button>
+      </button> */}
     </div>
   );
 };
diff --git a/components/lottery/winners/LotteryWinner.tsx b/components/lottery/winners/LotteryWinner.tsx
index c551b8f..6c99bb8 100644
--- a/components/lottery/winners/LotteryWinner.tsx
+++ b/components/lottery/winners/LotteryWinner.tsx
@@ -18,8 +18,10 @@ const LotteryWinner = ({ index, number }: IProps) => {
         opacity: 1,
         translateY: 0,
       }}
-      className="flex flex-col gap-2 pb-4 last:border-none border-b border-lightOutlineVariant">
-      <h4 className="font-heading-5-regular">The winner of the {index + 1} stage:</h4>
+      className="flex flex-col gap-2 md:pb-4 pb-3 last:border-none border-b border-lightOutlineVariant">
+      <h4 className="md:font-heading-5-regular text-[20px] leading-[28px]">
+        The winner of the {index + 1} stage:
+      </h4>
       <p className="font-base-medium">8 XX XX-XX-XX</p>
     </motion.div>
   );
diff --git a/components/lottery/winners/LotteryWinnersList.tsx b/components/lottery/winners/LotteryWinnersList.tsx
index 40fc344..83a74e7 100644
--- a/components/lottery/winners/LotteryWinnersList.tsx
+++ b/components/lottery/winners/LotteryWinnersList.tsx
@@ -2,15 +2,17 @@ import LotteryWinner from './LotteryWinner';
 
 const LotteryWinnersList = ({ winners }: { winners: number[] }) => {
   return (
-    <div className="flex flex-col w-full p-8 gap-4">
-      <div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant">
+    <div className="flex flex-col w-full md:p-8 p-6 gap-4">
+      <div className="flex flex-col gap-2 md:pb-4 pb-3 border-b border-lightOutlineVariant">
         <h4 className="font-heading-3-regular">Results</h4>
         <p className="font-base-medium">The results after each stage will be shown here.</p>
       </div>
 
-      {winners.map((_, index) => (
-        <LotteryWinner number="8 XX XX-XX-XX" index={index} />
-      ))}
+      <div className="flex flex-col w-full gap-4">
+        {winners.map((_, index) => (
+          <LotteryWinner number="8 XX XX-XX-XX" index={index} />
+        ))}
+      </div>
     </div>
   );
 };