diff --git a/app/page.tsx b/app/page.tsx
index 649a80f..a1f976a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -40,7 +40,7 @@ export default function Home() {
     <>
       <Banner />
       <div className={'bg-[rgb(252,246,238)] '}>
-        <div className='container mx-auto pt-20 mo:pt-10'>
+        <div className='container mx-auto pt-20 mo:pt-10 '>
           <What />
           <With />
           <Offer />
@@ -64,10 +64,10 @@ export default function Home() {
                   <Popover.Portal>
                     <Popover.Content side={isMobile ? 'bottom' : 'right'} align={'start'} style={{ width: width + 'px' }}>
                       <div
-                        className={'why-popover active w-[380px] mo:w-auto mo:mx-10  mo:mt-[20px] mo:h-[258px] '}
+                        className={'why-popover active w-[380px] mo:w-auto mo:mx-10  mo:mt-[20px] mo:h-[258px]  '}
                         style={{ transform: !isMobile ? 'translateX(-380px)' : 'none' }}
                       >
-                        <div className={'text-[16px]  mo:text-lg mo:font-medium font-medium mb-2'}>
+                        <div className={'text-[16px]  mo:text-lg mo:font-medium font-medium mb-2 '}>
                           Data Availability Sampling Mechanism
                         </div>
                         <div className={'text-sm mo:text-base mo:font-medium leading-7'}>
@@ -110,7 +110,7 @@ export default function Home() {
               </div>
             </div>
             <div className={'flex items-center justify-between  mo:inline-block mb-12  mo:w-full'}>
-              <div className={'relative mo:hidden'}>
+              <div className={'relative mo:hidden '}>
                 <Popover.Root>
                   <Popover.Trigger asChild>
                     <button className={`why-button ${enter ? 'active' : ''}`}>
@@ -123,11 +123,11 @@ export default function Home() {
                       side={'right'}
                       align={'end'}
                       style={{ width: width + 'px' }}
-                      className='mo:max-w-[430px] mo:px-10 mo:mt-[30px]'
+                      className='mo:max-w-[430px]  md:ml-[130px] mo:px-10 mo:mt-[30px]  '
                     >
                       <div
                         className={
-                          'why-popover active w-[380px] mo:backdrop-blur-lg mo:w-full mo:whitespace-normal mo:p-4 mo:text-left  mo:border mo:border-primary    mo:rounded-2xl  mo:text-[#373C4F] mo:bg-[rgba(250,247,243,.6)]'
+                          'why-popover active w-[380px] md:w-[300px] mo:backdrop-blur-lg mo:w-full mo:whitespace-normal mo:p-4 mo:text-left  mo:border mo:border-primary mo:rounded-2xl  mo:text-[#373C4F] mo:bg-[rgba(250,247,243,.6)]'
                         }
                         style={{ transform: 'translateX(-380px)' }}
                       >
diff --git a/components/Banner.tsx b/components/Banner.tsx
index 7d480f6..3f9c7d0 100644
--- a/components/Banner.tsx
+++ b/components/Banner.tsx
@@ -4,15 +4,15 @@ import Link from 'next/link'
 export const Banner = () => {
   return (
     <div className={'h-[750px] bg-cover'} style={{ backgroundImage: 'url(/banner.png)' }}>
-      <Header wrapperClassName={'mt-[67px]'} btnClassName={'text-white '} className={'py-[28px]'} />
-      <div className={'h-[calc(100%-66px)] flex flex-col justify-center mo:justify-center mo:flex-row mo:mt-10'}>
+      <Header wrapperClassName={'mt-[67px]'} btnClassName={'text-white '} className={'py-[28px] md:mx-[30px]'} />
+      <div className={'h-[calc(100%-66px)] flex flex-col justify-center mo:justify-center mo:flex-row mo:mt-10 md:px-[30px]'}>
         <div className='container mx-auto text-white font-bold flex justify-between mo:justify-center mo:text-center mo:flex mo:flex-wrap'>
           <div className='mo:text-center'>
-            <div className={'text-[80px] mo:text-[38px]'}>
+            <div className={'text-[80px] mo:text-[38px] md:text-[60px]'}>
               Scale <span className={'text-transparent bg-clip-text bg-gradient-to-r from-[#ff9937] to-[#ff3d00]'}>Ethereum</span>
             </div>
-            <div className={'text-[70px] mo:text-[38px]'}>With Data</div>
-            <div className={'text-[70px] mo:text-[38px]'}>Availability Layer2</div>
+            <div className={'text-[70px] mo:text-[38px] md:text-[60px]'}>With Data</div>
+            <div className={'text-[70px] mo:text-[38px] md:text-[60px]'}>Availability Layer2</div>
             <div className='mo:flex justify-center'>
               <Link
                 href={'https://docs.ethda.io/'}
diff --git a/components/Competitive.tsx b/components/Competitive.tsx
index cb165fb..a641805 100644
--- a/components/Competitive.tsx
+++ b/components/Competitive.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image'
 
 export const Competitive = () => {
   return (
-    <div className={'py-28 mo:py-5 bg-gradient-to-b from-[rgb(245,230,221)] to-[rgb(249,246,241)] '}>
+    <div className={'py-28 md:px-[30px] mo:py-5 bg-gradient-to-b from-[rgb(245,230,221)] to-[rgb(249,246,241)] '}>
       <div className='text-center title mb-10'>Competitive Landscape</div>
       <div className='container mx-auto  mo:mx-10 mo:w-auto  '>
         <div className='table-container '>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index b4be93d..0471439 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -6,9 +6,10 @@ import { GithubIcon } from '@/components/icons/Github'
 import { DiscordIcon } from '@/components/icons/Discord'
 
 export const Footer = () => {
+  const currentYear = new Date()?.getFullYear()
   return (
-    <footer className={'bg-gray-900 py-20 mo:py-10'}>
-      <div className='container mx-auto mo:flex mo:flex-row justify-center mo:flex-wrap'>
+    <footer className={'bg-gray-900 py-20 mo:py-10 '}>
+      <div className='container mx-auto mo:flex mo:flex-row justify-center mo:flex-wrap md:px-[30px]'>
         <div className='flex justify-between mo:flex-col '>
           <div className={'text-white text-[24px] mo:text-xl font-semibold mo:w-full mo:flex mo:justify-center'}>
             Sign up for EthDA updates
@@ -32,7 +33,7 @@ export const Footer = () => {
         </div>
         <div className={'bg-[#333] my-10 mo:my-5 h-[1px] w-full'} />
         <div className='flex justify-between items-center mo:flex-col mo:w-full '>
-          <div className={'text-gray-500 text-sm '}>Copyright © EthDA 2023 All Rights Reserved</div>
+          <div className={'text-gray-500 text-sm '}>Copyright © EthDA {currentYear} All Rights Reserved</div>
           <div className='flex gap-10 mo:gap-[60px] mo:my-5 mo:w-full mo:justify-center'>
             <Link href={'https://t.me/CrustNetwork'} target={'_blank'} className={'link-icon'}>
               <TelegramIcon />
diff --git a/components/Header.tsx b/components/Header.tsx
index 8842238..0984565 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -91,56 +91,58 @@ export const Header: FC<HeaderType> = ({
     push(address)
   }
   return (
-    <header className={classNames(`py-5 border-b ${isShow && ' bg-white'}  border-b-[rgba(255,255,255,.2)]`, className)}>
-      <div className=' mo:mx-[30px] '>
-        <div className={classNames('flex justify-between items-center', containerClassName)}>
-          <Link href={'/'}>
-            <Image src={`${isShow ? 'b-EthDA.svg' : logo}`} alt={` ${isShow ? 'b-EthDA.svg' : 'logo.svg'}`} width={110} height={22} />
-          </Link>
-          {isMobile ? (
-            <button
-              onClick={() => {
-                setIsShow(!isShow)
-                document.documentElement.classList.add('overflow-hidden')
-                document.body.classList.add('overflow-hidden')
-              }}
-            >
-              {isShow ? (
-                <HiOutlineX className={classNames(`${isShow && '!text-black'} w-6 h-6 `, btnClassName)} />
-              ) : (
-                <HiOutlineMenu className={classNames(btnClassName, `w-6 h-6 `)} />
-              )}
-            </button>
-          ) : (
-            <div className={classNames('flex items-center gap-8 text-white text-sm', headerTextClassName)}>
-              <div onClick={() => onSwitchTo('/')} className={`nav-item ${pathname === '/' ? 'active' : ''}`}>
-                Home
-              </div>
-              <div
-                onClick={() => onSwitchTo('https://scan-devnet.ethda.io')}
-                className={`nav-item ${pathname === '/Explorer' ? 'active' : ''}`}
-              >
-                Explorer
-              </div>
-              <div
-                onClick={() => onSwitchTo('https://blobscan-devnet.ethda.io/')}
-                className={`nav-item ${pathname === '/Blobscan' ? 'active' : ''}`}
+    <div className='border-b'>
+      <header className={classNames(`py-5  ${isShow && ' bg-white'}  border-b-[rgba(255,255,255,.2)]`, className)}>
+        <div className=' mo:mx-[30px] '>
+          <div className={classNames('flex justify-between items-center', containerClassName)}>
+            <Link href={'/'}>
+              <Image src={`${isShow ? 'b-EthDA.svg' : logo}`} alt={` ${isShow ? 'b-EthDA.svg' : 'logo.svg'}`} width={110} height={22} />
+            </Link>
+            {isMobile ? (
+              <button
+                onClick={() => {
+                  setIsShow(!isShow)
+                  document.documentElement.classList.add('overflow-hidden')
+                  document.body.classList.add('overflow-hidden')
+                }}
               >
-                Blobscan
-              </div>
-              <div onClick={() => onSwitchTo('blobtx')} className={`nav-item ${pathname === '/blobtx' ? 'active' : ''}`}>
-                Try BlobTx
+                {isShow ? (
+                  <HiOutlineX className={classNames(`${isShow && '!text-black'} w-6 h-6 `, btnClassName)} />
+                ) : (
+                  <HiOutlineMenu className={classNames(btnClassName, `w-6 h-6 `)} />
+                )}
+              </button>
+            ) : (
+              <div className={classNames('flex items-center gap-8 text-white text-sm', headerTextClassName)}>
+                <div onClick={() => onSwitchTo('/')} className={`nav-item ${pathname === '/' ? 'active' : ''}`}>
+                  Home
+                </div>
+                <div
+                  onClick={() => onSwitchTo('https://scan-devnet.ethda.io')}
+                  className={`nav-item ${pathname === '/Explorer' ? 'active' : ''}`}
+                >
+                  Explorer
+                </div>
+                <div
+                  onClick={() => onSwitchTo('https://blobscan-devnet.ethda.io/')}
+                  className={`nav-item ${pathname === '/Blobscan' ? 'active' : ''}`}
+                >
+                  Blobscan
+                </div>
+                <div onClick={() => onSwitchTo('blobtx')} className={`nav-item ${pathname === '/blobtx' ? 'active' : ''}`}>
+                  Try BlobTx
+                </div>
+                <Link href={'https://docs.ethda.io/'} target={'_blank'} className={`block nav-item`}>
+                  Document
+                </Link>
               </div>
-              <Link href={'https://docs.ethda.io/'} target={'_blank'} className={`block nav-item`}>
-                Document
-              </Link>
-            </div>
-          )}
+            )}
+          </div>
         </div>
-      </div>
-      {isShow && (
-        <FullModal wrapperClassName={wrapperClassName} menus={currentMenus} onChooseItem={onChooseItem} chooseValue={chooseValue} />
-      )}
-    </header>
+        {isShow && (
+          <FullModal wrapperClassName={wrapperClassName} menus={currentMenus} onChooseItem={onChooseItem} chooseValue={chooseValue} />
+        )}
+      </header>
+    </div>
   )
 }
diff --git a/components/Offer.tsx b/components/Offer.tsx
index 477c170..2f185de 100644
--- a/components/Offer.tsx
+++ b/components/Offer.tsx
@@ -1,37 +1,39 @@
 export const Offer = () => {
   return (
     <div
-      className={'bg-no-repeat pb-20 mo:px-10 '}
+      className={'bg-no-repeat pb-20 mo:px-10'}
       style={{ backgroundImage: 'url(/offer-1.png)', backgroundSize: '900px', backgroundPosition: '300px top' }}
     >
-      <div className={'subtitle mt-20 mb-6 mo:text-center'}>
-        <span className={'text-[25px] mo:text-xl text-primary '}>DApps</span> Leverage EthDA for Decentralized Storage
-      </div>
-      <div className='flex gap-6 mb-8 mo:w-full mo:flex-wrap'>
-        <button className={'feature-button mo:w-full mo:text-sm mo:font-light mo:h-[42px]'}>Fully on-chain</button>
-        <button className={'feature-button mo:w-full mo:text-sm mo:font-light mo:h-[42px]'}>ETH as fees</button>
-      </div>
-      <div className='flex gap-12 justify-between mo:flex-wrap mo:flex-col-reverse '>
-        <div className='screen w-[380px] grow shrink-0 mo:w-full'>
-          <div className='flex mb-4 gap-1'>
-            <div className='screen-dot' />
-            <div className='screen-dot' />
-            <div className='screen-dot' />
-          </div>
-          <div className={'screen-content mo:text-base mo:font-light'}>
-            DApps use EthDA's dStorage infrastructures and toolset to store websites and user-generated data, making DApps fully-on-chain,
-            censorship-resistant and unstoppable.
+      <div className='md:mx-[30px]'>
+        <div className={'subtitle mt-20 mb-6 mo:text-center'}>
+          <span className={'text-[25px] mo:text-xl text-primary '}>DApps</span> Leverage EthDA for Decentralized Storage
+        </div>
+        <div className='flex gap-6 mb-8 mo:w-full mo:flex-wrap'>
+          <button className={'feature-button mo:w-full mo:text-sm mo:font-light mo:h-[42px]'}>Fully on-chain</button>
+          <button className={'feature-button mo:w-full mo:text-sm mo:font-light mo:h-[42px]'}>ETH as fees</button>
+        </div>
+        <div className='flex gap-12 justify-between mo:flex-wrap mo:flex-col-reverse '>
+          <div className='screen w-[380px] grow shrink-0 mo:w-full'>
+            <div className='flex mb-4 gap-1'>
+              <div className='screen-dot' />
+              <div className='screen-dot' />
+              <div className='screen-dot' />
+            </div>
+            <div className={'screen-content mo:text-base mo:font-light'}>
+              DApps use EthDA's dStorage infrastructures and toolset to store websites and user-generated data, making DApps fully-on-chain,
+              censorship-resistant and unstoppable.
+            </div>
+            <div className='flex mt-4'>
+              <div className='screen-bar w-[40px]' />
+              <div className='screen-bar w-[40px] ml-4' />
+              <div className='screen-bar w-[40px] ml-auto' />
+              <div className='screen-bar w-[40px] ml-4' />
+            </div>
           </div>
-          <div className='flex mt-4'>
-            <div className='screen-bar w-[40px]' />
-            <div className='screen-bar w-[40px] ml-4' />
-            <div className='screen-bar w-[40px] ml-auto' />
-            <div className='screen-bar w-[40px] ml-4' />
+          <div className={'shrink'}>
+            <img src='/offer-2.png' alt='offer' width={'80%'} className='mo:w-auto' />
           </div>
         </div>
-        <div className={'shrink'}>
-          <img src='/offer-2.png' alt='offer' width={'80%'} className='mo:w-auto' />
-        </div>
       </div>
     </div>
   )
diff --git a/components/What.tsx b/components/What.tsx
index 305a0d9..9da87f2 100644
--- a/components/What.tsx
+++ b/components/What.tsx
@@ -27,7 +27,7 @@ export const What = () => {
           backgroundSize: '420px, 700px',
         }}
       >
-        <div className='w-[420px] shrink-0 mo:w-full'>
+        <div className='w-[420px] shrink-0 mo:w-full md:mx-[30px] '>
           <div className='subtitle mb-6  mo:text-xl mo:text-center'>
             {isMobile ? (
               <span>EthDA is a scalable Ethereum layer2 Data Availability solution.</span>
@@ -47,7 +47,7 @@ export const What = () => {
             </div>
           </div>
         </div>
-        <div className={'flex justify-center w-[560px] mo:w-full'}>
+        <div className={'flex justify-center w-[560px] mo:w-full '}>
           <div className={'sm:text-right mo:text-center mo:w-full'}>
             <Link
               target={'_blank'}
diff --git a/components/With.tsx b/components/With.tsx
index 762281d..0d3e56d 100644
--- a/components/With.tsx
+++ b/components/With.tsx
@@ -5,44 +5,46 @@ export const With = () => {
   const title: Title = [{ name: 'Cost saving' }, { name: 'Persistent DA' }, { name: 'High throughput' }]
   return (
     <div
-      className={'bg-no-repeat mo:px-10'}
+      className={'bg-no-repeat mo:px-10 '}
       style={{ backgroundImage: 'url(/with-1.png)', backgroundSize: '1100px', backgroundPosition: '0 100px' }}
     >
-      <div className={'title mo:text-center mo:text-[28px]'}>With EthDA</div>
-      <div className='desc mb-8 just mo:text-base mo:text-center'>
-        With EthDA, Ethereum's scalability is enhanced by extending its data availability and storage at layer2
-      </div>
-      <div className='subtitle mb-6 mo:text-center'>
-        <span className={'text-[25px] mo:text-xl text-primary'}>L2s</span> Leverage EthDA for Data Availability.
-      </div>
-      <div className='flex gap-8 mo:flex-wrap mo:w-full'>
-        <div className={'w-[660px] mo:w-full'}>
-          <div className='flex gap-6 mb-8 mo:flex-wrap mo:w-full'>
-            {title.map((item, i: number) => {
-              return (
-                <button key={`btn_title_${i}`} className={'feature-button mo:w-full mo:text-sm mo:h-[42px] font-light'}>
-                  {item.name}
-                </button>
-              )
-            })}
-          </div>
-          <img src='/with-2.png' alt='with' width={'90%'} className='mo:w-full' />
+      <div className='md:mx-[30px]'>
+        <div className={'title mo:text-center mo:text-[28px]'}>With EthDA</div>
+        <div className='desc mb-8 just mo:text-base mo:text-center'>
+          With EthDA, Ethereum's scalability is enhanced by extending its data availability and storage at layer2
         </div>
-        <div className='screen w-[380px] mt-8 mo:mt-5 mo:w-full '>
-          <div className='flex mb-4 gap-1'>
-            <div className='screen-dot' />
-            <div className='screen-dot' />
-            <div className='screen-dot' />
-          </div>
-          <div className={'screen-content  mo:text-base'}>
-            Optimistic rollups post compressed transaction data to EthDA via EIP-4844 blob-carrying transactions. EthDA employs DAS scheme to store
-            blobs among a decentralized sequencer network, and posts storage proofs to Ethereum L1. Rollups check storage proofs to validate
-            data storage, and download transaction data blobs from EthDA for fraud proving.
+        <div className='subtitle mb-6 mo:text-center'>
+          <span className={'text-[25px] mo:text-xl text-primary'}>L2s</span> Leverage EthDA for Data Availability.
+        </div>
+        <div className='flex gap-8 mo:flex-wrap mo:w-full'>
+          <div className={'w-[660px] mo:w-full'}>
+            <div className='flex gap-6 mb-8 mo:flex-wrap mo:w-full'>
+              {title.map((item, i: number) => {
+                return (
+                  <button key={`btn_title_${i}`} className={'feature-button mo:w-full mo:text-sm mo:h-[42px] font-light'}>
+                    {item.name}
+                  </button>
+                )
+              })}
+            </div>
+            <img src='/with-2.png' alt='with' width={'90%'} className='mo:w-full' />
           </div>
-          <div className='flex mt-4'>
-            <div className='screen-bar w-[120px]' />
-            <div className='screen-bar w-[60px] ml-auto' />
-            <div className='screen-bar w-[60px] ml-4' />
+          <div className='screen w-[380px] mt-8 mo:mt-5 mo:w-full '>
+            <div className='flex mb-4 gap-1'>
+              <div className='screen-dot' />
+              <div className='screen-dot' />
+              <div className='screen-dot' />
+            </div>
+            <div className={'screen-content  mo:text-base'}>
+              Optimistic rollups post compressed transaction data to EthDA via EIP-4844 blob-carrying transactions. EthDA employs DAS scheme
+              to store blobs among a decentralized sequencer network, and posts storage proofs to Ethereum L1. Rollups check storage proofs
+              to validate data storage, and download transaction data blobs from EthDA for fraud proving.
+            </div>
+            <div className='flex mt-4'>
+              <div className='screen-bar w-[120px]' />
+              <div className='screen-bar w-[60px] ml-auto' />
+              <div className='screen-bar w-[60px] ml-4' />
+            </div>
           </div>
         </div>
       </div>