diff --git a/src/pages/Halving/HalvingInfo.tsx b/src/pages/Halving/HalvingInfo.tsx
index f63ad33a8..037a48e3e 100644
--- a/src/pages/Halving/HalvingInfo.tsx
+++ b/src/pages/Halving/HalvingInfo.tsx
@@ -1,5 +1,6 @@
 import { Tooltip } from 'antd'
 import BigNumber from 'bignumber.js'
+import classnames from 'classnames'
 import dayjs from 'dayjs'
 import { ReactComponent as WarningCircle } from '../../assets/warning_circle.svg'
 import i18n from '../../utils/i18n'
@@ -44,14 +45,20 @@ export const HalvingInfo = () => {
           <div className={styles.epochInfoItem}>
             <div className={styles.epochInfoValue}>
               <Tooltip
+                placement="topRight"
                 color="#fff"
                 overlayInnerStyle={{ color: '#333333' }}
                 title={`UTC ${utcOffset > 0 ? `+ ${utcOffset}` : utcOffset}`}
               >
-                {dayjs(estimatedDate).format('YYYY.MM.DD hh:mm:ss')}
+                <div className={styles.flexItemsCenter}>
+                  {dayjs(estimatedDate).format('YYYY.MM.DD hh:mm:ss')}
+                  <WarningCircle style={{ marginLeft: 2 }} width={12} height={12} />
+                </div>
               </Tooltip>
             </div>
-            <div className={styles.textSecondary}>{i18n.t('halving.estimated_time')}</div>
+            <div className={classnames(styles.textSecondary, styles.fontSizeSm)}>
+              {i18n.t('halving.estimated_time')}
+            </div>
           </div>
         </div>
       </>
@@ -90,7 +97,7 @@ export const HalvingInfo = () => {
             overlayInnerStyle={{ color: '#333333' }}
             title={`UTC ${utcOffset > 0 ? `+ ${utcOffset}` : utcOffset}`}
           >
-            <WarningCircle style={{ marginLeft: '4px' }} width={16} height={16} />
+            <WarningCircle style={{ cursor: 'pointer', marginLeft: '4px' }} width={16} height={16} />
           </Tooltip>
         </strong>
         <div className={styles.textSecondary}>{i18n.t('halving.estimated_time')}</div>
diff --git a/src/pages/Halving/index.module.scss b/src/pages/Halving/index.module.scss
index 1df8f2589..9c621e721 100644
--- a/src/pages/Halving/index.module.scss
+++ b/src/pages/Halving/index.module.scss
@@ -181,9 +181,13 @@
   color: white;
   background-color: rgb(5 22 6 / 100%);
   background-position: bottom;
-  background-size: 100% auto;
+  background-size: 200% auto;
   background-repeat: no-repeat;
 
+  @media (width >= 750px) {
+    background-size: 100% auto;
+  }
+
   .halvingBannerWrapper {
     display: flex;
     justify-content: center;
@@ -218,11 +222,20 @@
   text-align: center;
 }
 
+.halvingPanelWrapper {
+  background: linear-gradient(90deg, #00574380, #ffffff24, #00574380);
+  padding: 2px;
+  border-radius: 12px;
+
+  @media (width >= 750px) {
+    border-radius: 24px;
+  }
+}
+
 .halvingPanel {
-  background: rgb(21 19 23 / 100%);
+  background: #000f0b;
   background-size: cover;
-  border: 2px solid rgb(51 41 69 / 50%);
-  border-radius: 12px;
+  border-radius: 10px;
   overflow: hidden;
   padding: 24px 16px;
   gap: 24px;
@@ -230,7 +243,7 @@
   flex-direction: column;
 
   .halvingSuccessText {
-    font-size: 24px;
+    font-size: 20px;
     font-weight: 500;
   }
 
@@ -252,7 +265,7 @@
   @media (width >= 750px) {
     padding: 32px 64px;
     gap: 32px;
-    border-radius: 24px;
+    border-radius: 22px;
 
     .halvingPanelTitle {
       font-weight: 700;
@@ -366,6 +379,15 @@
   }
 }
 
+.flexItemsCenter {
+  display: flex;
+  align-items: center;
+}
+
+.fontSizeSm {
+  font-size: 14px;
+}
+
 .textSecondary {
   color: rgb(240 240 240 / 50%);
 }
@@ -381,3 +403,65 @@
 .textCapitalize {
   text-transform: capitalize;
 }
+
+.halvingPopover {
+  border-radius: 4px;
+  width: 300px;
+
+  :global {
+    /* stylelint-disable-next-line selector-class-pattern */
+    .ant-popover-inner {
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    /* stylelint-disable-next-line selector-class-pattern */
+    .ant-popover-inner-content {
+      padding: 0 16px;
+    }
+  }
+}
+
+.historyTable {
+  :global {
+    /* stylelint-disable-next-line selector-class-pattern */
+    .ant-table {
+      /* stylelint-disable-next-line selector-class-pattern */
+      .ant-table-thead {
+        tr > th {
+          background: transparent;
+          color: #666;
+          padding: 8px 20px;
+
+          &::before {
+            width: 0 !important;
+          }
+
+          &:first-child {
+            padding-left: 0;
+          }
+
+          &:last-child {
+            padding-right: 0;
+          }
+        }
+      }
+
+      /* stylelint-disable-next-line selector-class-pattern */
+      .ant-table-tbody {
+        tr > td {
+          padding: 8px 20px;
+          font-weight: 500;
+
+          &:first-child {
+            padding-left: 0;
+          }
+
+          &:last-child {
+            padding-right: 0;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/Halving/index.tsx b/src/pages/Halving/index.tsx
index 614f4380d..60bcba6f9 100644
--- a/src/pages/Halving/index.tsx
+++ b/src/pages/Halving/index.tsx
@@ -84,42 +84,44 @@ export const HalvingCountdownPage = () => {
   const renderHalvingPanel = () => {
     if (isLoading || Number.isNaN(seconds)) {
       return (
-        <div className={classnames(styles.halvingPanel, styles.loadingPanel)}>
-          <SmallLoading />
+        <div className={styles.halvingPanelWrapper}>
+          <div className={classnames(styles.halvingPanel, styles.loadingPanel)}>
+            <SmallLoading />
+          </div>
         </div>
       )
     }
 
     if (inCelebration) {
       return (
-        <div
-          className={styles.halvingPanel}
-          style={{ paddingTop: isMobile ? 64 : 128, paddingBottom: 128, backgroundImage: `url(${halvingSuccessBg})` }}
-        >
-          <div className={classnames(styles.halvingSuccessText, styles.textCenter)}>
-            {i18n.t('halving.congratulations')}!
-            <div className={styles.textCapitalize}>
-              {i18n.t('halving.the')}
-              {i18n.t('symbol.char_space')}
-              {i18n.t(`ordinal.${numberToOrdinal(halvingCount)}`)}
-              {i18n.t('symbol.char_space')}
-              {i18n.t('halving.halving')}
-              {i18n.t('halving.actived')}{' '}
-              <a className={styles.textPrimary} href={`/block/${getTargetBlockByHavingCount(halvingCount)}`}>
-                {new BigNumber(getTargetBlockByHavingCount(halvingCount)).toFormat()}.
-              </a>
+        <div className={styles.halvingPanelWrapper} style={{ paddingTop: isMobile ? 64 : 128, paddingBottom: 128 }}>
+          <div className={styles.halvingPanel} style={{ backgroundImage: `url(${halvingSuccessBg})` }}>
+            <div className={classnames(styles.halvingSuccessText, styles.textCenter)}>
+              {i18n.t('halving.congratulations')}!
+              <div>
+                <span className={styles.textCapitalize}>{i18n.t('halving.the')}</span>
+                {i18n.t('symbol.char_space')}
+                {i18n.t(`ordinal.${numberToOrdinal(halvingCount)}`)}
+                {i18n.t('symbol.char_space')}
+                {i18n.t('halving.halving')}
+                {i18n.t('symbol.char_space')}
+                {i18n.t('halving.actived')}{' '}
+                <a className={styles.textPrimary} href={`/block/${getTargetBlockByHavingCount(halvingCount)}`}>
+                  {new BigNumber(getTargetBlockByHavingCount(halvingCount)).toFormat()}.
+                </a>
+              </div>
+            </div>
+            <div className={styles.textCenter}>
+              <button
+                className={classnames(styles.halvingSuccessBtn, styles.textCapitalize)}
+                type="button"
+                onClick={() => skipCelebration()}
+              >
+                {i18n.t('halving.next')}
+                {i18n.t('symbol.char_space')}
+                {i18n.t('halving.halving')}
+              </button>
             </div>
-          </div>
-          <div className={styles.textCenter}>
-            <button
-              className={classnames(styles.halvingSuccessBtn, styles.textCapitalize)}
-              type="button"
-              onClick={() => skipCelebration()}
-            >
-              {i18n.t('halving.next')}
-              {i18n.t('symbol.char_space')}
-              {i18n.t('halving.halving')}
-            </button>
           </div>
         </div>
       )
@@ -127,100 +129,118 @@ export const HalvingCountdownPage = () => {
 
     if (expired) {
       return (
-        <div className={classnames(styles.halvingPanel, styles.loadingPanel)}>
-          {i18n.t('halving.comming_soon')}
-          <SmallLoading />
+        <div className={styles.halvingPanelWrapper}>
+          <div className={classnames(styles.halvingPanel, styles.loadingPanel)}>
+            {i18n.t('halving.comming_soon')}
+            <SmallLoading />
+          </div>
         </div>
       )
     }
 
     return (
-      <div className={styles.halvingPanel}>
-        <div className={classnames(styles.halvingPanelTitle, styles.textCapitalize)}>
-          {i18n.t(`ordinal.${numberToOrdinal(halvingCount)}`)}
-          {i18n.t('symbol.char_space')}
-          {i18n.t('halving.halving')}
+      <div className={styles.halvingPanelWrapper}>
+        <div className={styles.halvingPanel}>
+          <div className={classnames(styles.halvingPanelTitle, styles.textCapitalize)}>
+            {i18n.t(`ordinal.${numberToOrdinal(halvingCount)}`)}
+            {i18n.t('symbol.char_space')}
+            {i18n.t('halving.halving')}
 
-          {halvingCount > 1 && (
-            <Popover
-              content={
-                <Table
-                  pagination={false}
-                  dataSource={new Array(halvingCount - 1).fill({}).map((_, index) => ({
-                    key: index,
-                    event: `${i18n.t(`ordinal.${numberToOrdinal(index + 1)}`)}
+            {halvingCount > 1 && (
+              <Popover
+                placement="top"
+                arrowPointAtCenter
+                content={
+                  <Table
+                    onHeaderRow={() => ({
+                      className: styles.historyTableHeaderRow,
+                    })}
+                    size="middle"
+                    className={styles.historyTable}
+                    pagination={false}
+                    dataSource={new Array(halvingCount - 1).fill({}).map((_, index) => ({
+                      key: index,
+                      event: `${i18n.t(`ordinal.${numberToOrdinal(index + 1)}`)}
                   ${i18n.t('symbol.char_space')}
                   ${i18n.t('halving.halving')}`,
-                    epoch: new BigNumber(EPOCHS_PER_HALVING * (index + 1)).toFormat(),
-                    height: getTargetBlockByHavingCount(index + 1),
-                  }))}
-                  columns={[
-                    {
-                      title: 'Event',
-                      dataIndex: 'event',
-                      key: 'event',
-                      render: event => <span className={styles.textCapitalize}>{event}</span>,
-                    },
-                    { title: 'Epoch', dataIndex: 'epoch', key: 'epoch' },
-                    {
-                      title: 'Height',
-                      dataIndex: 'height',
-                      key: 'height',
-                      render: block => (
-                        <a className={styles.textPrimary} href={`/block/${block}`}>
-                          {new BigNumber(block).toFormat()}
-                        </a>
-                      ),
-                    },
-                  ]}
+                      epoch: new BigNumber(EPOCHS_PER_HALVING * (index + 1)).toFormat(),
+                      height: getTargetBlockByHavingCount(index + 1),
+                    }))}
+                    columns={[
+                      {
+                        title: 'Event',
+                        dataIndex: 'event',
+                        key: 'event',
+                        render: event => <span className={styles.textCapitalize}>{event}</span>,
+                      },
+                      { title: 'Epoch', dataIndex: 'epoch', key: 'epoch' },
+                      {
+                        title: 'Height',
+                        dataIndex: 'height',
+                        key: 'height',
+                        render: block => (
+                          <a className={styles.textPrimary} href={`/block/${block}`}>
+                            {new BigNumber(block).toFormat()}
+                          </a>
+                        ),
+                      },
+                    ]}
+                  />
+                }
+                title={null}
+                trigger="hover"
+                overlayClassName={styles.halvingPopover}
+              >
+                <CalendarIcon
+                  style={{ marginLeft: 4, cursor: 'pointer' }}
+                  width={isMobile ? 16 : 20}
+                  height={isMobile ? 16 : 20}
                 />
+              </Popover>
+            )}
+
+            <Tooltip
+              placement={isMobile ? 'topRight' : 'top'}
+              color="#fff"
+              arrowPointAtCenter
+              overlayStyle={{ minWidth: 400 }}
+              overlayInnerStyle={{ color: '#333333' }}
+              title={
+                <>
+                  <p>{i18n.t('halving.countdown_tooltip_section1')}</p>
+                  <p>
+                    <strong>{i18n.t('halving.countdown_tooltip_section2')}</strong>
+                  </p>
+                  <p>{i18n.t('halving.countdown_tooltip_section3')}</p>
+                </>
               }
-              title={null}
-              trigger="hover"
             >
-              <CalendarIcon
-                style={{ marginLeft: 4, cursor: 'pointer' }}
+              <WarningCircle
                 width={isMobile ? 16 : 20}
                 height={isMobile ? 16 : 20}
+                style={{ cursor: 'pointer', marginLeft: 'auto' }}
               />
-            </Popover>
-          )}
-
-          <Tooltip
-            placement="top"
-            color="#fff"
-            overlayInnerStyle={{ color: '#333333' }}
-            title={
-              <>
-                <p>{i18n.t('halving.countdown_tooltip_section1')}</p>
-                <p>
-                  <strong>{i18n.t('halving.countdown_tooltip_section2')}</strong>
-                </p>
-                <p>{i18n.t('halving.countdown_tooltip_section3')}</p>
-              </>
-            }
-          >
-            <WarningCircle width={isMobile ? 16 : 20} height={isMobile ? 16 : 20} style={{ marginLeft: 'auto' }} />
-          </Tooltip>
-        </div>
+            </Tooltip>
+          </div>
 
-        <HalvingCountdown />
+          <HalvingCountdown />
 
-        <div>
-          <Progress
-            className={styles.halvingProgress}
-            strokeColor={getPrimaryColor()}
-            percent={Number(percent.toFixed(2))}
-            strokeWidth={12}
-            showInfo={false}
-          />
-          <div className={styles.halvingProgressMarks}>
-            <span>25%</span>
-            <span>50%</span>
-            <span>75%</span>
+          <div>
+            <Progress
+              className={styles.halvingProgress}
+              strokeColor={getPrimaryColor()}
+              percent={Number(percent.toFixed(2))}
+              strokeWidth={isMobile ? 8 : 12}
+              showInfo={false}
+            />
+            <div className={styles.halvingProgressMarks}>
+              <span>25%</span>
+              <span>50%</span>
+              <span>75%</span>
+            </div>
           </div>
+          <HalvingInfo />
         </div>
-        <HalvingInfo />
       </div>
     )
   }