diff --git a/src/modules/l2-rollup/index.tsx b/src/modules/l2-rollup/index.tsx
index e9af96571..a9e1d291b 100644
--- a/src/modules/l2-rollup/index.tsx
+++ b/src/modules/l2-rollup/index.tsx
@@ -26,6 +26,11 @@ import {
   Text,
   Tooltip,
   useDisclosure,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
 } from '@chakra-ui/react';
 import orderBy from 'lodash/orderBy';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -84,7 +89,7 @@ const L2Rollup = () => {
   const rollupL2Api = new CRollupL2API();
 
   const [currentSort, setCurrentSort] = useState<ISort>({
-    type: SortRollupType.level,
+    type: SortRollupType.tps,
     ascending: false,
   });
 
@@ -1088,201 +1093,229 @@ const L2Rollup = () => {
           mt={isShowIntro ? 'calc(100dvh - 696px)' : 'calc(100dvh - 412px)'}
         >
           {isShowIntro && renderIntro()}
-          <Box
-            w={'100%'}
-            mb={'32px'}
-            mt={'48px'}
-            display={'flex'}
-            flexDirection={'column'}
-            my={'32px'}
-          >
-            <Flex
-              alignSelf={'flex-end'}
-              borderRadius={hoverTooltip ? '100px' : '50%'}
-              w={'fit-content'}
-              alignItems={'center'}
-              p={'4px'}
-              bg={'#fff'}
-              mb={'12px'}
-              gap={'8px'}
-              onMouseEnter={() => setHoverTooltip(true)}
-              onMouseLeave={() => setHoverTooltip(false)}
-            >
-              {hoverTooltip && (
-                <Text pl={'8px'} fontSize={'14px'}>
-                  About project Bitcoin Heartbeats
-                </Text>
-              )}
-              <Image
-                cursor={'pointer'}
-                width="24px"
-                height="24px"
-                alt=""
-                src={'/heartbeat/ic-tooltip-homepage.svg'}
-                onClick={() => setIsShowIntro(!isShowIntro)}
-              />
-            </Flex>
-            <SimpleGrid columns={[1, 3]} gap={['8px', '16px']}>
-              <L2RollupFee
-                data={_dataChart.txs}
-                prefix="Ξ"
-                header={
-                  <Flex
-                    alignItems={'center'}
-                    justifyContent={'space-between'}
-                    p={'6px'}
-                    backgroundColor={'#fff'}
-                  >
-                    <Text fontSize={'14px'}>Transaction Count</Text>
-                    <Text fontSize={'14px'}>{`Today Ξ${formatCurrency(
-                      (_dataChart.txs?.[_dataChart.txs.length - 1] as any)
-                        ?.y as any,
-                      0,
-                      2,
-                    )}`}</Text>
-                  </Flex>
-                }
-              />
-              <L2RollupFee
-                data={_dataChart.addresses}
-                prefix="Ξ"
-                header={
-                  <Flex
-                    alignItems={'center'}
-                    justifyContent={'space-between'}
-                    p={'6px'}
-                    backgroundColor={'#fff'}
-                  >
-                    <Text fontSize={'14px'}>Bitcoin l2 Active addresses</Text>
-                    <Tooltip label="Active addresses are those that have executed at least one transaction. The count of addresses is specific to Layer 2 on Bitcoin, excluding BTC addresses">
-                      <Flex alignItems={'center'} gap={'2px'}>
-                        <Text fontSize={'14px'} cursor={'pointer'}>
-                          {`Ξ${formatCurrency(
+          <Tabs className={s.tabContainer}>
+            <TabList className={s.tabList} fontSize={['16px', '18px', ' 20px']}>
+              <Tab>Realtime Data</Tab>
+              <Tab>Static Data</Tab>
+              <Flex position={'absolute'} right={0} top={'12px'}>
+                <Flex
+                  alignSelf={'flex-end'}
+                  borderRadius={hoverTooltip ? '100px' : '50%'}
+                  w={'fit-content'}
+                  alignItems={'center'}
+                  p={'4px'}
+                  bg={'#fff'}
+                  mb={'12px'}
+                  gap={'8px'}
+                  onMouseEnter={() => setHoverTooltip(true)}
+                  onMouseLeave={() => setHoverTooltip(false)}
+                >
+                  {hoverTooltip && (
+                    <Text pl={'8px'} fontSize={'14px'}>
+                      About project Bitcoin Heartbeats
+                    </Text>
+                  )}
+                  <Image
+                    cursor={'pointer'}
+                    width="24px"
+                    height="24px"
+                    alt=""
+                    src={'/heartbeat/ic-tooltip-homepage.svg'}
+                    onClick={() => setIsShowIntro(!isShowIntro)}
+                  />
+                </Flex>
+              </Flex>
+            </TabList>
+            <TabPanels className={s.tabPanel}>
+              <TabPanel>
+                <Box w="100%" bg="#FAFAFA" minH={'450px'} mt={'32px'}>
+                  {data.length <= 0 ? (
+                    <Box mt={'24px'}>
+                      <AppLoading />
+                    </Box>
+                  ) : (
+                    <ListTable
+                      data={data}
+                      columns={columns}
+                      className={s.tableContainer}
+                    />
+                  )}
+                </Box>
+              </TabPanel>
+              <TabPanel>
+                <Box
+                  w={'100%'}
+                  display={'flex'}
+                  flexDirection={'column'}
+                  my={'32px'}
+                >
+                  <SimpleGrid columns={[1, 3]} gap={['8px', '16px']}>
+                    <L2RollupFee
+                      data={_dataChart.txs}
+                      prefix="Ξ"
+                      header={
+                        <Flex
+                          alignItems={'center'}
+                          justifyContent={'space-between'}
+                          p={'6px'}
+                          backgroundColor={'#fff'}
+                        >
+                          <Text fontSize={'14px'}>Transaction Count</Text>
+                          <Text fontSize={'14px'}>{`Today Ξ${formatCurrency(
+                            (_dataChart.txs?.[_dataChart.txs.length - 1] as any)
+                              ?.y as any,
+                            0,
+                            2,
+                          )}`}</Text>
+                        </Flex>
+                      }
+                    />
+                    <L2RollupFee
+                      data={_dataChart.addresses}
+                      prefix="Ξ"
+                      header={
+                        <Flex
+                          alignItems={'center'}
+                          justifyContent={'space-between'}
+                          p={'6px'}
+                          backgroundColor={'#fff'}
+                        >
+                          <Text fontSize={'14px'}>
+                            Bitcoin l2 Active addresses
+                          </Text>
+                          <Tooltip label="Active addresses are those that have executed at least one transaction. The count of addresses is specific to Layer 2 on Bitcoin, excluding BTC addresses">
+                            <Flex alignItems={'center'} gap={'2px'}>
+                              <Text fontSize={'14px'} cursor={'pointer'}>
+                                {`Ξ${formatCurrency(
+                                  (
+                                    _dataChart.addresses?.[
+                                      _dataChart.addresses.length - 1
+                                    ] as any
+                                  )?.y as any,
+                                  0,
+                                  2,
+                                )}`}
+                              </Text>
+                              <svg
+                                stroke="rgba(0, 0, 0, 0.5)"
+                                fill="none"
+                                stroke-width="2"
+                                viewBox="0 0 24 24"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                height="10px"
+                                width="10px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <line x1="12" y1="16" x2="12" y2="12"></line>
+                                <line x1="12" y1="8" x2="12.01" y2="8"></line>
+                              </svg>
+                            </Flex>
+                          </Tooltip>
+                        </Flex>
+                      }
+                    />
+                    <L2RollupFee
+                      data={_dataChart.fees}
+                      prefix="$"
+                      header={
+                        <Flex
+                          alignItems={'center'}
+                          justifyContent={'space-between'}
+                          p={'6px'}
+                          backgroundColor={'#fff'}
+                        >
+                          <Text fontSize={'14px'}>Fees Paid by Users</Text>
+                          <Text fontSize={'14px'}>{`Today $${formatCurrency(
                             (
-                              _dataChart.addresses?.[
-                                _dataChart.addresses.length - 1
+                              _dataChart.fees?.[
+                                _dataChart.fees.length - 1
                               ] as any
                             )?.y as any,
                             0,
                             2,
-                          )}`}
-                        </Text>
-                        <svg
-                          stroke="rgba(0, 0, 0, 0.5)"
-                          fill="none"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          height="10px"
-                          width="10px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <circle cx="12" cy="12" r="10"></circle>
-                          <line x1="12" y1="16" x2="12" y2="12"></line>
-                          <line x1="12" y1="8" x2="12.01" y2="8"></line>
-                        </svg>
-                      </Flex>
-                    </Tooltip>
-                  </Flex>
-                }
-              />
-              <L2RollupFee
-                data={_dataChart.fees}
-                prefix="$"
-                header={
+                          )}`}</Text>
+                        </Flex>
+                      }
+                    />
+                  </SimpleGrid>
+                  <Box mt={'6px'}>
+                    <Text fontSize={'12px'} color={'#fff'} opacity={'0.8'}>
+                      * This data has been collected from{' '}
+                      {chainsSupportForChart.join(', ')} chains.{' '}
+                      <b>
+                        Rollux, Merlin, Core, and Stacks will be coming soon.
+                      </b>
+                    </Text>
+                  </Box>
+                </Box>
+                <Box
+                  w={'100%'}
+                  mb={'32px'}
+                  mt={'48px'}
+                  display={'flex'}
+                  flexDirection={'column'}
+                  my={'32px'}
+                >
+                  <AddressesEngagement />
+                </Box>
+
+                <Flex
+                  className={s.totalContainer}
+                  bg="#FAFAFA"
+                  w="100%"
+                  direction={'column'}
+                  gap={'8px'}
+                >
+                  <Text
+                    fontSize={'24px'}
+                    fontWeight={'600'}
+                    textAlign={'center'}
+                  >
+                    Total
+                  </Text>
                   <Flex
-                    alignItems={'center'}
-                    justifyContent={'space-between'}
-                    p={'6px'}
-                    backgroundColor={'#fff'}
+                    w="100%"
+                    direction={'row'}
+                    justifyContent={'space-evenly'}
                   >
-                    <Text fontSize={'14px'}>Fees Paid by Users</Text>
-                    <Text fontSize={'14px'}>{`Today $${formatCurrency(
-                      (_dataChart.fees?.[_dataChart.fees.length - 1] as any)
-                        ?.y as any,
-                      0,
-                      2,
-                    )}`}</Text>
+                    {renderItemTotal(
+                      'TPS',
+                      formatCurrency(total.tps, MIN_DECIMAL, MIN_DECIMAL),
+                      'The total transactions per second',
+                      bitcoinRollup
+                        ? `(${formatCurrency(
+                            Math.abs(total.tps / bitcoinRollup.tps),
+                            MIN_DECIMAL,
+                            MIN_DECIMAL,
+                          )}x)`
+                        : '-',
+                    )}
+                    {renderItemTotal(
+                      'Mgas/s',
+                      formatCurrency(total.mgas, MIN_DECIMAL, MIN_DECIMAL),
+                      'The total megagas (Million Gas) per second',
+                      '',
+                    )}
+                    {renderItemTotal(
+                      'KB/s',
+                      formatCurrency(total.kbs, MIN_DECIMAL, MIN_DECIMAL),
+                      'Total KB per second',
+                      bitcoinRollup
+                        ? `(${formatCurrency(
+                            Math.abs(total.kbs / bitcoinRollup.kbs),
+                            MIN_DECIMAL,
+                            MIN_DECIMAL,
+                          )}x)`
+                        : '-',
+                    )}
                   </Flex>
-                }
-              />
-            </SimpleGrid>
-            <Box mt={'6px'}>
-              <Text fontSize={'12px'} color={'#fff'} opacity={'0.8'}>
-                * This data has been collected from{' '}
-                {chainsSupportForChart.join(', ')} chains.{' '}
-                <b>Rollux, Merlin, Core, and Stacks will be coming soon.</b>
-              </Text>
-            </Box>
-          </Box>
-          <Box
-            w={'100%'}
-            mb={'32px'}
-            mt={'48px'}
-            display={'flex'}
-            flexDirection={'column'}
-            my={'32px'}
-          >
-            <AddressesEngagement />
-          </Box>
+                </Flex>
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
 
-          <Flex
-            className={s.totalContainer}
-            bg="#FAFAFA"
-            w="100%"
-            direction={'column'}
-            gap={'8px'}
-          >
-            <Text fontSize={'24px'} fontWeight={'600'} textAlign={'center'}>
-              Total
-            </Text>
-            <Flex w="100%" direction={'row'} justifyContent={'space-evenly'}>
-              {renderItemTotal(
-                'TPS',
-                formatCurrency(total.tps, MIN_DECIMAL, MIN_DECIMAL),
-                'The total transactions per second',
-                bitcoinRollup
-                  ? `(${formatCurrency(
-                      Math.abs(total.tps / bitcoinRollup.tps),
-                      MIN_DECIMAL,
-                      MIN_DECIMAL,
-                    )}x)`
-                  : '-',
-              )}
-              {renderItemTotal(
-                'Mgas/s',
-                formatCurrency(total.mgas, MIN_DECIMAL, MIN_DECIMAL),
-                'The total megagas (Million Gas) per second',
-                '',
-              )}
-              {renderItemTotal(
-                'KB/s',
-                formatCurrency(total.kbs, MIN_DECIMAL, MIN_DECIMAL),
-                'Total KB per second',
-                bitcoinRollup
-                  ? `(${formatCurrency(
-                      Math.abs(total.kbs / bitcoinRollup.kbs),
-                      MIN_DECIMAL,
-                      MIN_DECIMAL,
-                    )}x)`
-                  : '-',
-              )}
-            </Flex>
-          </Flex>
-          <Box w="100%" bg="#FAFAFA" minH={'450px'} mt={'56px'}>
-            {data.length <= 0 ? (
-              <Box mt={'24px'}>
-                <AppLoading />
-              </Box>
-            ) : (
-              <ListTable
-                data={data}
-                columns={columns}
-                className={s.tableContainer}
-              />
-            )}
-          </Box>
           <Box
             display="flex"
             flexDirection="column"
diff --git a/src/modules/l2-rollup/styles.module.scss b/src/modules/l2-rollup/styles.module.scss
index 73712d843..e5e2a0e3f 100644
--- a/src/modules/l2-rollup/styles.module.scss
+++ b/src/modules/l2-rollup/styles.module.scss
@@ -216,6 +216,60 @@ table {
       font-size: 20px;
     }
   }
+
+  .tabContainer {
+    width: 100% !important;
+    padding: 0px !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .tabList {
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    gap: 12px;
+    margin-bottom: 12px;
+    border-bottom: 1px solid #efefef;
+    width: fit-content;
+
+    > button {
+      background: none;
+      border: none;
+      color: #fff;
+      opacity: 50%;
+      font-weight: 400;
+
+      flex: unset;
+      position: relative;
+      text-align: center;
+
+      &[aria-selected='true'] {
+        opacity: 1;
+        font-weight: 600;
+        color: #fa4e0e !important;
+
+        &::after {
+          content: '';
+          display: block;
+          height: 2px;
+          width: 100%;
+          background-color: #fa4e0e !important;
+          position: absolute;
+          bottom: 0;
+        }
+      }
+    }
+  }
+
+  .tabPanel {
+    > [role='tabpanel'] {
+      padding: 0;
+      border-color: transparent !important;
+    }
+    border-color: transparent !important;
+  }
 }
 
 .search {