1 files changed, 9 insertions, 9 deletions
diff --git a/src/core/components/elements/CountDown/CountDown.jsx b/src/core/components/elements/CountDown/CountDown.jsx
index 49a33d77..877f7998 100644
--- a/src/core/components/elements/CountDown/CountDown.jsx
+++ b/src/core/components/elements/CountDown/CountDown.jsx
@@ -31,22 +31,22 @@ const CountDown = ({ initialTime }) => {
   }, [timeLeft])
 
   return (
-    <div className='flex gap-x-3 w-fit'>
+    <div className='flex gap-x-2.5 w-fit'>
       <div className='flex flex-col items-center'>
-        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.day}</span>
-        <span className='text-caption-1 text-gray-807'>Hari</span>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.day.toString().padStart(2, '0')}</span>
+        <span className='text-caption-1 text-gray-700 mt-1'>Hari</span>
       </div>
       <div className='flex flex-col items-center'>
-        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.hour}</span>
-        <span className='text-caption-1 text-gray-807'>Jam</span>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.hour.toString().padStart(2, '0')}</span>
+        <span className='text-caption-1 text-gray-700 mt-1'>Jam</span>
       </div>
       <div className='flex flex-col items-center'>
-        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.minute}</span>
-        <span className='text-caption-1 text-gray-700'>Menit</span>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.minute.toString().padStart(2, '0')}</span>
+        <span className='text-caption-1 text-gray-700 mt-1'>Menit</span>
       </div>
       <div className='flex flex-col items-center'>
-        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.second}</span>
-        <span className='text-caption-1 text-gray-700'>Detik</span>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.second.toString().padStart(2, '0')}</span>
+        <span className='text-caption-1 text-gray-700 mt-1'>Detik</span>
       </div>
     </div>
   )