diff --git a/public/images/new/new_hero_mobile_bg.webp b/public/images/new/new_hero_mobile_bg.webp
new file mode 100644
index 0000000..fb43551
Binary files /dev/null and b/public/images/new/new_hero_mobile_bg.webp differ
diff --git a/public/images/new/new_hero_pc_bg.webp b/public/images/new/new_hero_pc_bg.webp
new file mode 100644
index 0000000..a407b58
Binary files /dev/null and b/public/images/new/new_hero_pc_bg.webp differ
diff --git a/src/components/new_ui/hero1.tsx b/src/components/new_ui/hero1.tsx
index ac2573b..20b8b07 100644
--- a/src/components/new_ui/hero1.tsx
+++ b/src/components/new_ui/hero1.tsx
@@ -1,10 +1,11 @@
-import { Box, Image, Stack } from '@chakra-ui/react'
+import { Box, Image, Stack, Text } from '@chakra-ui/react'
 import CyclingImage from './CyclingImage'
 import { useEffect, useState } from 'react'
 import { motion } from 'framer-motion'
 
 const MotionImage = motion.create(Image)
-
+const MotionStack = motion.create(Stack)
+const MotionText = motion.create(Text)
 function Hero1() {
   const [headerHeight, setHeaderHeight] = useState(80);
   const bigWarningSize = { base: "17vw", sm: "15vw", md: "9vw", lg: "9vw", xl: "8vw" };
@@ -96,20 +97,20 @@ function Hero1() {
         <Box
           position="relative"
           w="100%"
-          minH={{ base: "110vw", sm: "110vw", md: "70vw", lg: "70vw", xl: "45vw" }}
-          bgImage={{ base: "url('/images/new/confuse_mobile.webp')", sm: "url('/images/new/confuse_mobile.webp')", md: "url('/images/new/confuse.webp')", lg: "url('/images/new/confuse.webp')", xl: "url('/images/new/confuse.webp')" }}
+          minH={{ base: "220vw", sm: "220vw", md: "93vw", lg: "95vw", xl: "93vw" }}
+          bgImage={{ base: "url('/images/new/new_hero_mobile_bg.webp')", sm: "url('/images/new/new_hero_mobile_bg.webp')", md: "url('/images/new/new_hero_pc_bg.webp')", lg: "url('/images/new/new_hero_pc_bg.webp')", xl: "url('/images/new/new_hero_pc_bg.webp')" }}
           bgSize="cover"
           backgroundPosition="center"
           justifyItems={'center'}
           bgRepeat="no-repeat"
         >
           {/* Hero 1 title */}
-          <MotionImage 
+          <MotionImage
             src="/images/new/hero_text1x.webp"
             position={'absolute'}
             left="50%"
-            bottom={{ base: '70px', sm: '100px', md: '100px', lg: '100px', xl: '100px' }}
-            maxW={{ base: "70vw", sm: "70vw", md: "50vw", lg: "50vw", xl: "35vw" }}
+            top={{ base: '80vw', sm: '80vw', md: '26vw', lg: '26vw', xl: '28vw' }}
+            maxW={{ base: "70vw", sm: "70vw", md: "40vw", lg: "50vw", xl: "35vw" }}
             alt='hero title'
             initial={{ opacity: 0, y: 30, x: '-50%' }}
             whileInView={{ opacity: 1, y: 0, x: '-50%' }}
@@ -123,7 +124,7 @@ function Hero1() {
             position={'absolute'}
             left="50%"
             transform="translateX(-50%)"
-            maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }}
+            maxW={{ base: "90%", sm: "90%", md: "70%", lg: "70%", xl: "70%" }}
             bottom={'10px'}
             display={{ base: "block", sm: "block", md: "none", lg: "none", xl: "none" }}
             cycleDuration={0.5}
@@ -142,6 +143,137 @@ function Hero1() {
             cycleDuration={0.5}
             intensity={0}
           />
+
+
+          {/* title */}
+          <MotionStack
+            position="absolute"
+            left="50%"
+            w={'100%'}
+            top={{ base: '140vw', sm: '140vw', md: '60vw', lg: '60vw', xl: '58vw' }}
+            alignItems={'center'}
+            gap={'1px'}
+            initial={{ opacity: 0, y: 50, x: '-50%' }}
+            whileInView={{ opacity: 1, y: 0, x: '-50%' }}
+            viewport={{ once: true, amount: 0.3 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+          >
+            {/* <MotionText
+              className="font-melle font-xbold"
+              fontSize={{ base: '15vw', sm: '13vw', 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" }}
+            >
+              {'你要注意！'}
+            </MotionText> */}
+            <MotionText
+              className="font-melle font-xbold"
+              fontSize={{ base: '7vw', sm: '7vw', md: '3vw', lg: '3vw', xl: '3vw' }}
+              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" }}
+            >
+              {'身體健康響起警號！'}
+            </MotionText>
+            <MotionText
+              className="font-melle font-medium"
+              fontSize={{ base: '7vw', sm: '7vw', md: '2.5vw', lg: '3vw', xl: '3vw' }}
+              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" }}
+            >
+              {'好多時係同'}
+            </MotionText>
+
+            <Box display="inline" mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }} mr={4}>
+              <MotionText
+                className="font-melle font-xbold"
+                fontSize={{ base: '7vw', sm: '7vw', md: '2.5vw', lg: '3vw', xl: '3vw' }}
+                color={"white"}
+                display="inline"
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                viewport={{ once: true, amount: 0.3 }}
+                transition={{ duration: 0.5, delay: 0.5 }}
+              >
+                {'日常飲食習慣'}
+              </MotionText>
+              <MotionText
+                className="font-melle font-medium"
+                fontSize={{ base: '7vw', sm: '7vw', md: '2.5vw', lg: '3vw', xl: '3vw' }}
+                color={"white"}
+                display="inline"
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                viewport={{ once: true, amount: 0.3 }}
+                transition={{ duration: 0.5, delay: 0.6 }}
+              >
+                {'有關！'}
+              </MotionText>
+            </Box>
+            <MotionText
+              className="font-melle font-medium"
+              fontSize={{ base: '7vw', sm: '7vw', md: '2.5vw', lg: '3vw', xl: '3vw' }}
+              color={"white"}
+              mt={-2}
+              // 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" }}
+            >
+              {'簡單到喺你屋企'}
+            </MotionText>
+
+            <MotionImage
+              src="/images/new/wraning_subtitle.webp"
+              w={{ base: '70vw', sm: '70vw', md: '30vw', lg: '30vw', xl: '30vw' }}
+              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" }}
+            />
+            <MotionText
+              className="font-melle font-medium"
+              fontSize={{ base: '7vw', sm: '7vw', md: '3vw', lg: '3vw', xl: '3vw' }}
+              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" }}
+            >
+              {'其實已經日積月累'}
+            </MotionText>
+            <MotionText
+              className="font-melle font-medium"
+              fontSize={{ base: '7vw', sm: '7vw', md: '2.3vw', lg: '3vw', xl: '3vw' }}
+              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" }}
+            >
+              {'咁影響緊你！'}
+            </MotionText>
+          </MotionStack>
+
           {/* signs */}
           <Box
             position={'absolute'}
@@ -164,8 +296,8 @@ function Hero1() {
           <Box
             position={'absolute'}
             w={{ base: "13vw", sm: "13vw", md: "6vw", lg: "6vw", xl: "5vw" }}
-            left={{ base: '6vw', sm: '6vw', md: '13vw', lg: '13vw', xl: '25vw' }}
-            bottom={{ base: '50vw', sm: '50vw', md: '27vw', lg: '27vw', xl: '18vw' }}
+            left={{ base: '10vw', sm: '10vw', md: '23vw', lg: '23vw', xl: '25vw' }}
+            top={{ base: '50vw', sm: '50vw', md: '27vw', lg: '27vw', xl: '22vw' }}
             css={{
               animation: 'floatMedium 3.5s ease-in-out infinite',
               animationDelay: '0.5s'
@@ -181,9 +313,9 @@ function Hero1() {
           </Box>
           <Box
             position={'absolute'}
-            w={{ base: "13vw", sm: "13vw", md: "6vw", lg: "6vw", xl: "5vw" }}
-            right={{ base: '7vw', sm: '7vw', md: '14vw', lg: '14vw', xl: '20vw' }}
-            top={{ base: '60vw', sm: '60vw', md: '40vw', lg: '40vw', xl: '25vw' }}
+            w={bigWarningSize}
+            right={{ base: '7vw', sm: '7vw', md: '17vw', lg: '17vw', xl: '20vw' }}
+            top={{ base: '60vw', sm: '60vw', md: '30vw', lg: '30vw', xl: '30vw' }}
             css={{
               animation: 'floatFast 3.2s ease-in-out infinite',
               animationDelay: '1s'
@@ -201,7 +333,7 @@ function Hero1() {
             position={'absolute'}
             w={bigWarningSize}
             right={{ base: '5vw', sm: '5vw', md: '18vw', lg: '18vw', xl: '18vw' }}
-            top={{ base: '12vw', sm: '12vw', md: '20vw', lg: '20vw', xl: '10vw' }}
+            top={{ base: '12vw', sm: '12vw', md: '15vw', lg: '15vw', xl: '10vw' }}
             css={{
               animation: 'floatSlow 3.3s ease-in-out infinite',
               animationDelay: '1.5s'
@@ -219,8 +351,8 @@ function Hero1() {
           <Box
             position={'absolute'}
             w={{ base: "25vw", sm: "25vw", md: "11vw", lg: "11vw", xl: "10vw" }}
-            left={{ base: "23vw", sm: "23vw", md: "30vw", lg: "30vw", xl: "37vw" }}
-            top={{ base: "9vw", sm: "9vw", md: "7vw", lg: "7vw", xl: "3vw" }}
+            left={{ base: "23vw", sm: "23vw", md: "37vw", lg: "37vw", xl: "37vw" }}
+            top={{ base: "9vw", sm: "9vw", md: "4vw", lg: "4vw", xl: "3vw" }}
             css={{
               animation: 'floatMedium 3.2s ease-in-out infinite',
               animationDelay: '0.2s'
@@ -237,8 +369,8 @@ function Hero1() {
           <Box
             position={'absolute'}
             w={{ base: "27vw", sm: "27vw", md: "10vw", lg: "10vw", xl: "9vw" }}
-            left={{ base: "35vw", sm: "35vw", md: "18vw", lg: "18vw", xl: "25vw" }}
-            top={{ base: "25vw", sm: "25vw", md: "20vw", lg: "20vw", xl: "14vw" }}
+            left={{ base: "35vw", sm: "35vw", md: "23vw", lg: "23vw", xl: "25vw" }}
+            top={{ base: "25vw", sm: "25vw", md: "14vw", lg: "14vw", xl: "14vw" }}
             css={{
               animation: 'floatFast 3.5s ease-in-out infinite',
               animationDelay: '0.7s'
@@ -273,8 +405,8 @@ function Hero1() {
           <Box
             position={'absolute'}
             w={{ base: "19vw", sm: "19vw", md: "8vw", lg: "8vw", xl: "7vw" }}
-            right={{ base: "10vw", sm: "10vw", md: "26vw", lg: "26vw", xl: "26vw" }}
-            top={{ base: "35vw", sm: "35vw", md: "18vw", lg: "18vw", xl: "12vw" }}
+            right={{ base: "10vw", sm: "10vw", md: "28vw", lg: "28vw", xl: "26vw" }}
+            top={{ base: "35vw", sm: "35vw", md: "14vw", lg: "14vw", xl: "12vw" }}
             css={{
               animation: 'floatFast 3.3s ease-in-out infinite',
               animationDelay: '0.9s'
@@ -288,6 +420,61 @@ function Hero1() {
               intensity={0.1}
             />
           </Box>
+
+          <Box
+            position={'absolute'}
+            w={bigWarningSize}
+            left={{ base: '40vw', sm: '40vw', md: '45vw', lg: '45vw', xl: '45vw' }}
+            top={{ base: '120vw', sm: '120vw', md: '51vw', lg: '51vw', xl: '50vw' }}
+            css={{
+              animation: 'floatSlow 3s ease-in-out infinite',
+              animationDelay: '0s'
+            }}
+          >
+            <CyclingImage
+              src="/images/new/bigwarning.webp"
+              position={'relative'}
+              w="100%"
+              cycleDuration={3}
+              intensity={0.1}
+            />
+          </Box>
+          <Box
+            position={'absolute'}
+            w={{ base: "8vw", sm: "8vw", md: "6vw", lg: "6vw", xl: "5vw" }}
+            right={{ base: '6vw', sm: '6vw', md: '25vw', lg: '25vw', xl: '25vw' }}
+            bottom={{ base: '55vw', sm: '55vw', md: '18vw', lg: '18vw', xl: '18vw' }}
+            css={{
+              animation: 'floatMedium 3.5s ease-in-out infinite',
+              animationDelay: '0.5s'
+            }}
+          >
+            <CyclingImage
+              src="/images/new/bigwarning.webp"
+              position={'relative'}
+              w="100%"
+              cycleDuration={3}
+              intensity={0.1}
+            />
+          </Box>
+          <Box
+            position={'absolute'}
+            w={{ base: "8vw", sm: "8vw", md: "6vw", lg: "6vw", xl: "5vw" }}
+            left={{ base: '6vw', sm: '6vw', md: '25vw', lg: '25vw', xl: '25vw' }}
+            bottom={{ base: '70vw', sm: '70vw', md: '24vw', lg: '24vw', xl: '24vw' }}
+            css={{
+              animation: 'floatMedium 3.5s ease-in-out infinite',
+              animationDelay: '0.5s'
+            }}
+          >
+            <CyclingImage
+              src="/images/new/bigwarning.webp"
+              position={'relative'}
+              w="100%"
+              cycleDuration={3}
+              intensity={0.1}
+            />
+          </Box>
         </Box>
       </Stack>
     </Box>
diff --git a/src/components/new_ui/hero2.tsx b/src/components/new_ui/hero2.tsx
index ba1182d..0bc4f92 100644
--- a/src/components/new_ui/hero2.tsx
+++ b/src/components/new_ui/hero2.tsx
@@ -16,7 +16,7 @@ function Hero2() {
                 <Stack
                     position="relative"
                     w="100%"
-                    minH={{ base: "105vw", sm: "103vw", md: "82vw", lg: "66vw", xl: "57vw" }}
+                    minH={{ base: "110vw", sm: "110vw", md: "72vw", lg: "66vw", xl: "50vw" }}
                     bgImage={"url('/images/new/hero2bg.webp')"}
                     bgSize="cover"
                     backgroundPosition="center"
@@ -29,8 +29,8 @@ function Hero2() {
                         src="/images/new/hero2title.webp"
                         position={'absolute'}
                         left="50%"
-                        top={{ base: "10px", sm: "50px", md: "50px", lg: "50px", xl: "50px" }}
-                        w={{ base: "70vw", sm: "60vw", md: "50vw", lg: "35vw", xl: "35vw" }}
+                        top={{ base: "10px", sm: "20px", md: "30px", lg: "30px", xl: "40px" }}
+                        w={{ base: "70vw", sm: "70vw", md: "35vw", lg: "35vw", xl: "28vw" }}
                         initial={{ opacity: 0, y: -30, x: '-50%' }}
                         whileInView={{ opacity: 1, y: 0, x: '-50%' }}
                         viewport={{ once: true, amount: 0.3 }}
@@ -40,9 +40,9 @@ function Hero2() {
                         src="/images/new/hero2subtitle.webp"
                         position={'absolute'}
                         zIndex={1}
-                        top={{ base: "30vw", sm: "35vw", md: "24vw", lg: "20vw", xl: "18vw" }}
-                        right={{ base: "15vw", sm: "15vw", md: "20vw", lg: "28vw", xl: "30vw" }}
-                        w={{ base: "30vw", sm: "30vw", md: "25vw", lg: "18vw", xl: "18vw" }}
+                        top={{ base: "30vw", sm: "30vw", md: "17vw", lg: "15vw", xl: "12vw" }}
+                        right={{ base: "55vw", sm: "55vw", md: "24vw", lg: "25vw", xl: "30vw" }}
+                        w={{ base: "30vw", sm: "30vw", md: "22vw", lg: "22vw", xl: "18vw" }}
                         initial={{ opacity: 0, x: 30 }}
                         whileInView={{ opacity: 1, x: 0 }}
                         viewport={{ once: true, amount: 0.3 }}
@@ -55,7 +55,7 @@ function Hero2() {
                         position={'absolute'}
                         left="50%"
                         bottom={0}
-                        w={{ base: "80vw", sm: "70vw", md: "60vw", lg: "50vw", xl: "40vw" }}
+                        w={{ base: "85vw", sm: "85vw", md: "58vw", lg: "53vw", xl: "40vw" }}
                         initial={{ opacity: 0, y: 50, x: '-50%' }}
                         whileInView={{ opacity: 1, y: 0, x: '-50%' }}
                         viewport={{ once: true, amount: 0.3 }}
diff --git a/src/pages/main.tsx b/src/pages/main.tsx
index 73237a9..92220ab 100644
--- a/src/pages/main.tsx
+++ b/src/pages/main.tsx
@@ -87,7 +87,7 @@ function MainPage() {
       <Header showMenu={true} />
       <Hero1 />
       <Hero2 />
-      <Wraning />
+      {/* <Wraning /> */}
       <Info />
       <Advantages />
       <OilInfo />