diff --git a/public/roadmap/roadmap_img1.png b/public/roadmap/roadmap_img1.png
new file mode 100644
index 000000000..80e6787e8
Binary files /dev/null and b/public/roadmap/roadmap_img1.png differ
diff --git a/public/roadmap/roadmap_img10.png b/public/roadmap/roadmap_img10.png
new file mode 100644
index 000000000..bea2cad76
Binary files /dev/null and b/public/roadmap/roadmap_img10.png differ
diff --git a/public/roadmap/roadmap_img11.png b/public/roadmap/roadmap_img11.png
new file mode 100644
index 000000000..77fb29385
Binary files /dev/null and b/public/roadmap/roadmap_img11.png differ
diff --git a/public/roadmap/roadmap_img2.png b/public/roadmap/roadmap_img2.png
new file mode 100644
index 000000000..e4e0a8f10
Binary files /dev/null and b/public/roadmap/roadmap_img2.png differ
diff --git a/public/roadmap/roadmap_img3.png b/public/roadmap/roadmap_img3.png
new file mode 100644
index 000000000..257418172
Binary files /dev/null and b/public/roadmap/roadmap_img3.png differ
diff --git a/public/roadmap/roadmap_img4.png b/public/roadmap/roadmap_img4.png
new file mode 100644
index 000000000..974ba94c3
Binary files /dev/null and b/public/roadmap/roadmap_img4.png differ
diff --git a/public/roadmap/roadmap_img5.png b/public/roadmap/roadmap_img5.png
new file mode 100644
index 000000000..183b9c4ac
Binary files /dev/null and b/public/roadmap/roadmap_img5.png differ
diff --git a/public/roadmap/roadmap_img6.png b/public/roadmap/roadmap_img6.png
new file mode 100644
index 000000000..8663913a6
Binary files /dev/null and b/public/roadmap/roadmap_img6.png differ
diff --git a/public/roadmap/roadmap_img7.png b/public/roadmap/roadmap_img7.png
new file mode 100644
index 000000000..948feabe3
Binary files /dev/null and b/public/roadmap/roadmap_img7.png differ
diff --git a/public/roadmap/roadmap_img8.png b/public/roadmap/roadmap_img8.png
new file mode 100644
index 000000000..2753238d5
Binary files /dev/null and b/public/roadmap/roadmap_img8.png differ
diff --git a/public/roadmap/roadmap_img9.png b/public/roadmap/roadmap_img9.png
new file mode 100644
index 000000000..ca7ce66f1
Binary files /dev/null and b/public/roadmap/roadmap_img9.png differ
diff --git a/src/app/roadmap/page.tsx b/src/app/roadmap/page.tsx
new file mode 100644
index 000000000..a4e36cfb4
--- /dev/null
+++ b/src/app/roadmap/page.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import MainLayout from '@/layouts/MainLayout';
+// import BVMModule from '@/modules/bvm';
+import RoadmapModule from '@/modules/roadmap';
+
+const RoadMapPage = () => {
+  return (
+    <MainLayout
+      headerProps={{
+        color: 'black',
+      }}
+    >
+      <RoadmapModule />
+    </MainLayout>
+  );
+};
+
+export default RoadMapPage;
diff --git a/src/layouts/Header/menuConfig.ts b/src/layouts/Header/menuConfig.ts
index 0053c1d86..f40ec28c0 100644
--- a/src/layouts/Header/menuConfig.ts
+++ b/src/layouts/Header/menuConfig.ts
@@ -29,6 +29,12 @@ export const NAV_ITEMS: Array<NavItem> = [
     isNewWindow: false,
     isHide: false,
   },
+  {
+    label: 'Roadmap',
+    href: '/roadmap',
+    isNewWindow: false,
+    isHide: false,
+  },
   {
     label: 'Developers',
     href: DEVELOPERS_DOC_URL,
diff --git a/src/modules/roadmap/Section_1/index.tsx b/src/modules/roadmap/Section_1/index.tsx
new file mode 100644
index 000000000..8847613ae
--- /dev/null
+++ b/src/modules/roadmap/Section_1/index.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { Flex, Text } from '@chakra-ui/react';
+
+const Section_1 = () => {
+  return (
+    <Flex
+      w={'100%'}
+      flexDir={'column'}
+      bgColor={'transparent'}
+      gap={['16px']}
+      align={"center"}
+    >
+      <Text
+        fontSize={['16px', '40px']}
+        lineHeight={'48px'}
+        fontWeight={400}
+        color={'#000'}
+      >
+        Roadmap
+      </Text>
+      <Text
+        fontSize={['14px', '20px']}
+        lineHeight={'36px'}
+        fontWeight={400}
+        color={'#000'}
+        maxW={'744px'}
+      >
+        Our mission is to make Bitcoin as generalized as possible — usable for far more than just a currency. We want DeFi, AI, DAOs, NFTs, and gaming all on Bitcoin.
+      </Text>
+    </Flex>
+  );
+};
+
+export default Section_1;
diff --git a/src/modules/roadmap/Section_2/index.tsx b/src/modules/roadmap/Section_2/index.tsx
new file mode 100644
index 000000000..60339d432
--- /dev/null
+++ b/src/modules/roadmap/Section_2/index.tsx
@@ -0,0 +1,301 @@
+'use client';
+
+import { ChevronRightIcon } from '@chakra-ui/icons';
+import { Flex, Image, Text } from '@chakra-ui/react';
+
+export interface IContent {
+  key: string;
+  dateStr: string;
+  title: string;
+  desc: string;
+  img: string;
+  isShow: boolean;
+  href: string;
+  isShowViewUpdate: boolean;
+  zIndex: number;
+}
+
+const Contents: Array<IContent> = [
+  {
+    key: 'KEY_1',
+    dateStr: 'March 2023',
+    title: 'Bitcoin Virtual Machine #0: Add EVM to Bitcoin',
+    desc: 'In this release, we shipped a full-featured EVM on Bitcoin. This is the first building block to make Bitcoin usable far more than just a currency because developers can now write smart contracts and build dapps for Bitcoin.',
+    img: '/roadmap/roadmap_img1.png',
+    href: 'https://twitter.com/punk3700/status/1650524119136628736',
+    isShow: true,
+    isShowViewUpdate: true,
+    zIndex: 10,
+  },
+  {
+    key: 'KEY_2',
+    dateStr: 'March 2023',
+    title: '$GM: Deploy the first smart contract on Bitcoin',
+    desc: 'In this release, we shipped the first smart contract on Bitcoin. While the contract is simple, it is a historical milestone because, for the first time, smart contracts are possible on Bitcoin.',
+    img: '/roadmap/roadmap_img2.png',
+    href: 'https://twitter.com/punk3700/status/1657478010696798208',
+    isShow: true,
+    isShowViewUpdate: true,
+    zIndex: 9,
+  },
+  {
+    key: 'KEY_3',
+    dateStr: 'May 2023',
+    title: 'New Bitcoin DEX: Deploy the first AMM DEX on Bitcoin',
+    desc: 'In this release, we shipped a decentralized crypto trading protocol (based on the Uniswap v2 code base) on Bitcoin. This is important because it enables trustless trading between Bitcoin and other cryptocurrencies. It also shows that we can build really complex dapps and protocols on Bitcoin.',
+    img: '/roadmap/roadmap_img3.png',
+    href: 'https://twitter.com/punk3700/status/1654532883388977158',
+    isShow: true,
+    isShowViewUpdate: true,
+    zIndex: 8,
+  },
+  {
+    key: 'KEY_4',
+    dateStr: 'June 2023',
+    title: 'Bitcoin Virtual Machine #1: Deploy the first L2 on Bitcoin',
+    desc: 'In this release, we shipped a low-cost and lightning-fast Bitcoin L2 (based on the Optimism code base). This is an important building block for scaling Bitcoin for mass adoption.',
+    img: '/roadmap/roadmap_img4.png',
+    href: 'https://twitter.com/punk3700/status/1664211213432291335',
+    isShow: true,
+    isShowViewUpdate: true,
+    zIndex: 7,
+  },
+  {
+    key: 'KEY_5',
+    dateStr: 'July 2023',
+    title: 'CryptoGraffiti: Deploy the first fully onchain game on Bitcoin',
+    desc: 'In this release, we shipped a multi-player, real-time, fully-onchain game on Bitcoin. This showed off the low latency and high throughput of Bitcoin Virtual Machine #1.',
+    img: '/roadmap/roadmap_img5.png',
+    href: 'https://twitter.com/punk3700/status/1684972258379563008',
+    isShow: true,
+    isShowViewUpdate: true,
+    zIndex: 6,
+  },
+  {
+    key: 'KEY_6',
+    dateStr: 'Sep 2023',
+    title: 'L2aaS: Release Bitcoin L2 as a Service',
+    desc: 'In this release, we shipped a no-code tool that lets anyone launch a Bitcoin L2 in one click. This is an important building block because it hyperscales Bitcoin with an infinite number of L2s and unlimited throughput.',
+    img: '/roadmap/roadmap_img6.png',
+    href: 'https://twitter.com/punk3700/status/1699821767781658669',
+    isShow: true,
+    isShowViewUpdate: true,
+    zIndex: 5,
+  },
+  {
+    key: 'KEY_7',
+    dateStr: 'Q1 2024',
+    title: 'BTC option for paying gas fees',
+    desc: 'Enable payment of Bitcoin L2 gas fees in BTC, same to how Ethereum Rollup L2 solutions use ETH for transaction gas.',
+    img: '/roadmap/roadmap_img7.png',
+    href: '',
+    isShow: true,
+    isShowViewUpdate: false,
+    zIndex: 4,
+  },
+  {
+    key: 'KEY_8',
+    dateStr: 'Q1 2024',
+    title: 'Bitcoin L2 App Store',
+    desc: 'Install dApps like Uniswap, GMX, and Compound as default when creating a new Bitcoin L2.',
+    img: '/roadmap/roadmap_img8.png',
+    href: '',
+    isShow: true,
+    isShowViewUpdate: false,
+    zIndex: 3,
+  },
+  {
+    key: 'KEY_9',
+    dateStr: 'Q2 2024',
+    title: 'Hyperbridges for enhanced connectivity',
+    desc: 'Reduce liquidity fragmentation between Bitcoin L2 implementations by facilitating connectivity using Hyperbridges in the Bitcoin Virtual Machine, similar to how the web uses hyperlinks.',
+    img: '/roadmap/roadmap_img9.png',
+    href: '',
+    isShow: true,
+    isShowViewUpdate: false,
+    zIndex: 2,
+  },
+  {
+    key: 'KEY_10',
+    dateStr: 'Q3 2024',
+    title: 'Integration of ZK Rollups into Rollup Frameworks',
+    desc: 'Improve the Rollup protocol’s function in the Bitcoin L2 blockchain by including ZK rollups, which are recognized for their security, speed, and transparency, alongside Optimistic rollups.',
+    img: '/roadmap/roadmap_img10.png',
+    href: '',
+    isShow: true,
+    isShowViewUpdate: false,
+    zIndex: 2,
+  },
+  {
+    key: 'KEY_11',
+    dateStr: 'Q4 2024',
+    title: 'Parallel EVM Implementation for Execution Layers',
+    desc: 'Offer Bitcoin builders to use Parallel EVM, an upgraded engine capable of processing multiple transactions simultaneously, increasing the already impressive processing speed.',
+    img: '/roadmap/roadmap_img11.png',
+    href: '',
+    isShow: true,
+    isShowViewUpdate: false,
+    zIndex: 1,
+  },
+];
+
+const Section_2 = () => {
+  const renderItem = (item: IContent, index: number) => {
+    const isEven = index % 2 === 0;
+    return (
+      <Flex
+        key={`${item.key} ${index}`}
+        display={'flex'}
+        flexDirection={'row'}
+        alignItems={'center'}
+        justify={{
+          sm: 'left',
+        }}
+        marginTop={{
+          sm: '0x',
+          lg: item.isShowViewUpdate ? '-40px' : '10px',
+        }}
+        w="100%"
+      >
+        {isEven && (
+          <Flex
+            display={{
+              sm: 'none',
+              lg: 'flex',
+            }}
+            flex={1}
+            width={'100%'}
+          />
+        )}
+        {isEven && (
+          <Flex
+            display={{
+              sm: 'none',
+              lg: 'flex',
+            }}
+            flex={1}
+            maxW={'330px'}
+            mx={'10px'}
+            height={'auto'}
+            align={'center'}
+            flexDir={'column'}
+            alignSelf={'baseline'}
+          >
+            <Image src={`${item.img}`} fit={'contain'} />
+          </Flex>
+        )}
+        <Flex
+          flex={1}
+          align={{
+            sm: 'flex-start',
+            lg: isEven ? 'flex-start' : 'flex-end',
+          }}
+          flexDir={'column'}
+          justify={'flex-start'}
+        >
+          <Text
+            fontSize={['14px', '16px']}
+            lineHeight={'110%'}
+            fontWeight={300}
+            color={'#000'}
+          >
+            {item.dateStr}
+          </Text>
+          <Text
+            marginTop={'5px'}
+            fontSize={['20px', '24px']}
+            lineHeight={'110%'}
+            fontWeight={500}
+            color={'#000'}
+          >
+            {item.title}
+          </Text>
+          <Text
+            marginTop={'16px'}
+            marginBottom={'16px'}
+            fontSize={['15px', '18px']}
+            lineHeight={'26px'}
+            textAlign={{
+              sm: 'left',
+              lg: isEven ? 'left' : 'right',
+            }}
+            fontWeight={400}
+            color={'#000'}
+          >
+            {item.desc}
+          </Text>
+          {item.isShowViewUpdate && (
+            <Flex
+              flex={1}
+              display={'flex'}
+              align={'flex-start'}
+              flexDir={'row'}
+              color={'#FA4E0E'}
+              fontWeight={400}
+              fontSize={'16px'}
+              _hover={{
+                opacity: 0.8,
+                cursor: 'pointer',
+              }}
+              onClick={() => {
+                window.open(item.href, '_blank');
+              }}
+            >
+              {`View update`}
+              <ChevronRightIcon
+                width={'20px'}
+                height={'20px'}
+                ml={'4px'}
+                mt={'2px'}
+              />
+            </Flex>
+          )}
+        </Flex>
+
+        {!isEven && (
+          <Flex
+            display={{
+              sm: 'none',
+              lg: 'flex',
+            }}
+            flex={1}
+            mx={'10px'}
+            maxW={'330px'}
+            height={'auto'}
+            align={'center'}
+            flexDir={'column'}
+            alignSelf={'baseline'}
+          >
+            <Image src={`${item.img}`} fit={'contain'} />
+          </Flex>
+        )}
+        {!isEven && (
+          <Flex
+            display={{
+              sm: 'none',
+              lg: 'flex',
+            }}
+            width={'100%'}
+            flex={1}
+          />
+        )}
+      </Flex>
+    );
+  };
+
+  return (
+    <Flex
+      bgColor={'#F3F1E8'}
+      display={'flex'}
+      flexDirection={'column'}
+      align={'center'}
+      gap={{
+        sm: '40px',
+      }}
+    >
+      {Contents.map(renderItem)}
+    </Flex>
+  );
+};
+
+export default Section_2;
diff --git a/src/modules/roadmap/index.tsx b/src/modules/roadmap/index.tsx
new file mode 100644
index 000000000..3bc687ea1
--- /dev/null
+++ b/src/modules/roadmap/index.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { Box } from '@chakra-ui/react';
+import s from './styles.module.scss';
+
+import BoxContent from '@/layouts/BoxContent';
+import Section1 from './Section_1';
+import Section2 from './Section_2';
+
+const RoadmapModule = () => {
+  return (
+    <Box className={s.container}>
+      <BoxContent>
+        <Box h={['20px', '140px']} />
+        <Section1 />
+        <Box h={['20px', '80px', '140px']} />
+        <Section2 />
+        <Box h={['20px', '40px']} />
+      </BoxContent>
+    </Box>
+  );
+};
+
+export default RoadmapModule;
diff --git a/src/modules/roadmap/styles.module.scss b/src/modules/roadmap/styles.module.scss
new file mode 100644
index 000000000..b3fce81dc
--- /dev/null
+++ b/src/modules/roadmap/styles.module.scss
@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  background-color: #F3F1E8;
+}