diff --git a/public/images/new/info_title.webp b/public/images/new/info_title.webp
new file mode 100644
index 0000000..70deca8
Binary files /dev/null and b/public/images/new/info_title.webp differ
diff --git a/public/images/new/wraning_bg_mobile.webp b/public/images/new/wraning_bg_mobile.webp
index 8f0cedd..d39b8ab 100644
Binary files a/public/images/new/wraning_bg_mobile.webp and b/public/images/new/wraning_bg_mobile.webp differ
diff --git a/src/components/new_ui/wraning.tsx b/src/components/new_ui/wraning.tsx
index 7eca387..0940e0d 100644
--- a/src/components/new_ui/wraning.tsx
+++ b/src/components/new_ui/wraning.tsx
@@ -1,5 +1,11 @@
 import { Box, Stack, Text, Image } from '@chakra-ui/react'
+import { motion } from 'framer-motion'
 import CyclingImage from './CyclingImage'
+
+const MotionStack = motion.create(Stack)
+const MotionText = motion.create(Text)
+const MotionImage = motion.create(Image)
+
 function Wraning() {
   const bigWarningSize = { base: "15vw", sm: "15vw", md: "9vw", lg: "7vw", xl: "6vw" };
   const midWarningSize = { base: "10vw", sm: "10vw", md: "6vw", lg: "4vw", xl: "4vw" };
@@ -99,8 +105,8 @@ function Wraning() {
           <Box
             position={'absolute'}
             w={smallWarningSize}
-            left={{ base: '37vw', sm: '37vw', md: '30vw', lg: '37vw', xl: '37vw' }}
-            bottom={{ base: '34vw', sm: '34vw', md: '22vw', lg: '13vw', xl: '13vw' }}
+            left={{ base: '7vw', sm: '7vw', md: '30vw', lg: '37vw', xl: '37vw' }}
+            bottom={{ base: '65vw', sm: '65vw', md: '22vw', lg: '13vw', xl: '13vw' }}
             css={{
               animation: 'floatSlow 3s ease-in-out infinite',
               animationDelay: '0s'
@@ -119,8 +125,8 @@ function Wraning() {
           <Box
             position={'absolute'}
             w={midWarningSize}
-            right={{ base: '37vw', sm: '37vw', md: '35vw', lg: '37vw', xl: '37vw' }}
-            bottom={{ base: '34vw', sm: '34vw', md: '17vw', lg: '10vw', xl: '10vw' }}
+            right={{ base: '10vw', sm: '10vw', md: '35vw', lg: '37vw', xl: '37vw' }}
+            bottom={{ base: '50vw', sm: '50vw', md: '17vw', lg: '10vw', xl: '10vw' }}
             css={{
               animation: 'floatSlow 3s ease-in-out infinite',
               animationDelay: '0s'
@@ -138,90 +144,130 @@ function Wraning() {
 
 
           {/* title */}
-          <Stack
+          <MotionStack
             position="absolute"
             top={{ base: '55vw', sm: '60vw', md: '35vw', lg: '23vw', xl: '20vw' }}
             alignItems={'center'}
             gap={'1px'}
+            initial={{ opacity: 0, y: 50 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.3 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
           >
-            <Text
+            <MotionText
               className="font-melle font-xbold"
               fontSize={{ base: '15vw', sm: '15vw', md: '6vw', lg: '5vw', xl: '3.5vw' }}
               color={"#FED407"}
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
             >
               {'你要注意！'}
-            </Text>
-            <Text
+            </MotionText>
+            <MotionText
               className="font-melle font-xbold"
               fontSize={{ base: '9vw', sm: '9vw', md: '3.5vw', lg: '2vw', xl: '2vw' }}
               color={"#FED407"}
               mt={{ base: -5, sm: -7, md: -5, lg: -5, xl: -5 }}
               mr={{ base: 3, sm: 3, md: 0, lg: 0, xl: 0 }}
+              initial={{ opacity: 0, x: -30 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
             >
               {'身體健康響起警號！'}
-            </Text>
-            <Text
+            </MotionText>
+            <MotionText
               className="font-melle font-medium"
               fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
               color={"white"}
               mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }}
               mr={4}
+              initial={{ opacity: 0, x: 30 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
             >
               {'好多時係同'}
-            </Text>
+            </MotionText>
 
             <Box display="inline" mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }} mr={4}>
-              <Text
+              <MotionText
                 className="font-melle font-xbold"
                 fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
                 color={"white"}
                 display="inline"
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                viewport={{ once: true, amount: 0.3 }}
+                transition={{ duration: 0.5, delay: 0.5 }}
               >
                 {'日常飲食習慣'}
-              </Text>
-              <Text
+              </MotionText>
+              <MotionText
                 className="font-melle font-medium"
                 fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
                 color={"white"}
                 display="inline"
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                viewport={{ once: true, amount: 0.3 }}
+                transition={{ duration: 0.5, delay: 0.6 }}
               >
                 {'有關！'}
-              </Text>
+              </MotionText>
             </Box>
-            <Text
+            <MotionText
               className="font-melle font-medium"
               fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
               color={"#FED407"}
               mt={{ base: 8, sm: 7, md: 5, lg: 5, xl: 5 }}
               mr={4}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.6, delay: 0.7, ease: "easeOut" }}
             >
               {'簡單到喺你屋企'}
-            </Text>
+            </MotionText>
 
-            <Image
+            <MotionImage
               src="/images/new/wraning_subtitle.webp"
               w={{ base: '90vw', sm: '90vw', md: '34vw', lg: '22vw', xl: '22vw' }}
               mt={-1}
+              initial={{ opacity: 0, scale: 0.9 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.6, delay: 0.8, ease: "easeOut" }}
             />
-            <Text
+            <MotionText
               className="font-melle font-medium"
               fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
               color={"white"}
               mt={-3}
               mr={4}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.6, delay: 0.9, ease: "easeOut" }}
             >
               {'其實已經日積月累'}
-            </Text>
-            <Text
+            </MotionText>
+            <MotionText
               className="font-melle font-medium"
               fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
               color={"white"}
               mt={-3}
               mr={4}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.6, delay: 1.0, ease: "easeOut" }}
             >
               {'咁影響緊你！'}
-            </Text>
-          </Stack>
+            </MotionText>
+          </MotionStack>
         </Box>
       </Stack >
     </Box >