diff --git a/docs/assets/bcfusion/bcfusion.png b/docs/assets/bcfusion/bcfusion.png
new file mode 100644
index 00000000..bf9a4719
Binary files /dev/null and b/docs/assets/bcfusion/bcfusion.png differ
diff --git a/docs/assets/style/components/content.css b/docs/assets/style/components/content.css
index a170edc1..f67496a3 100644
--- a/docs/assets/style/components/content.css
+++ b/docs/assets/style/components/content.css
@@ -1,9 +1,3 @@
-@media screen and (min-width: 76.25em) {
-    [dir=ltr] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
-        margin-left: 0;
-    }
-}
-
 .md-content .md-content__inner {
     margin-left: 0;
     margin-right: 0;
@@ -16,16 +10,6 @@
     margin-bottom: 40px;
 }
 
-@media (max-width: 767px) {
-    .section-head {
-        flex-direction: column;
-    }
-
-    .section-head .image {
-        max-width: 100%;
-    }
-}
-
 .section-head h1 {
     color: var(--doc-text-primary);
     font-size: 32px;
@@ -74,15 +58,9 @@
     padding-bottom: 60px;
 }
 
-@media (max-width: 767px) {
-    .section-body {
-        padding-top: 24px;
-    }
-}
-
 .section-body a {
     border: 1px solid var(--doc-border-3);
-    background: var(--doc-layer-3);
+    background: var(--doc-layer-2);
     padding: 16px;
     border-radius: 8px;
     transition: all 0.15s;
@@ -90,13 +68,6 @@
     width: 32%;
 }
 
-@media (max-width: 767px) {
-    .section-body a {
-        flex: 100%;
-        width: 100%;
-    }
-}
-
 .section-body > a:active,
 .section-body > a:hover {
     background: var(--doc-layer-4);
@@ -127,13 +98,6 @@
     background: var(--doc-layer-4);
 }
 
-@media (max-width: 767px) {
-    .home-hero img {
-        margin-bottom: 24px;
-        height: 240px;
-    }
-}
-
 .md-main__inner {
     margin-top: 0;
     flex: 1;
@@ -152,23 +116,6 @@
     height: 2px;
 }
 
-@media screen and (min-width: 76.25em) {
-    [dir=ltr] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
-        margin-left: 40px;
-    }
-}
-
-@media screen and (min-width: 76.25em) {
-    .md-sidebar--primary:not([hidden]) ~ .md-content {
-        border-left: 1px solid var(--doc-border-3);
-    }
-
-    [dir=ltr] .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner,
-    [dir=rtl] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
-        margin-right: 40px;
-    }
-}
-
 .md-sidebar {
     width: 200px;
     padding: 52px 0;
@@ -188,6 +135,7 @@
 .doc-announce > a {
     border-radius: 8px;
     border: 1px solid var(--doc-border-3);
+    background: var(--doc-layer-2);
     padding: 16px 32px;
     transition: all .15s;
     display: flex;
@@ -195,14 +143,6 @@
     align-items: center;
 }
 
-@media (max-width: 767px) {
-    .doc-announce > a {
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 16px;
-    }
-}
-
 .doc-announce > a > div {
     flex: 1;
     display: flex;
@@ -230,7 +170,7 @@
 }
 
 .doc-announce > a:hover {
-    background: var(--doc-layer-2);
+    background: var(--doc-layer-4);
 }
 
 .doc-announce-info > span {
@@ -240,3 +180,49 @@
 .doc-announce-info .announce-date {
     font-size: 14px;
 }
+
+@media (max-width: 767px) {
+    .doc-announce > a {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 16px;
+    }
+
+    .section-body a {
+        flex: 100%;
+        width: 100%;
+    }
+
+    .section-body {
+        padding-top: 24px;
+    }
+
+    .section-head {
+        flex-direction: column;
+    }
+
+    .section-head .image {
+        max-width: 100%;
+    }
+}
+
+@media screen and (min-width: 76.25em) {
+    [dir=ltr] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
+        margin-left: 40px;
+    }
+
+    [dir=ltr] .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner,
+    [dir=rtl] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
+        margin-right: 40px;
+    }
+
+    .md-sidebar--primary:not([hidden]) ~ .md-content {
+        border-left: 1px solid var(--doc-border-3);
+    }
+
+    .md-sidebar--primary[hidden] + .md-sidebar--secondary[hidden] ~ .md-content {
+        max-width: 840px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
diff --git a/docs/assets/style/components/nav.css b/docs/assets/style/components/nav.css
index 2fbd7652..b6a9bbed 100644
--- a/docs/assets/style/components/nav.css
+++ b/docs/assets/style/components/nav.css
@@ -33,45 +33,6 @@
     color: var(--doc-dark-text-secondary);
 }
 
-@media screen and (min-width: 60em) {
-    [data-md-toggle=search]:not(:checked) ~ .md-header .md-search__form {
-        border-radius: 8px;
-        border: 1px solid var(--doc-dark-border-4);
-    }
-}
-
-@media screen and (min-width: 60em) {
-    .md-search__form {
-        height: 40px;
-    }
-}
-
-@media screen and (min-width: 60em) {
-    .md-search__input::placeholder {
-        font-size: 14px;
-        font-weight: 400;
-        color: var(--doc-dark-text-placeholder);
-    }
-}
-
-@media screen and (min-width: 60em) {
-    [dir=ltr] .md-search__input {
-        padding-left: 40px;
-    }
-}
-
-@media screen and (min-width: 60em) {
-    .md-search__input + .md-search__icon {
-        color: var(--doc-dark-text-tertiary);
-    }
-}
-
-[data-md-toggle=search]:not(:checked) ~ .md-header .md-search__form .md-search__icon.md-icon svg,
-[data-md-toggle=search]:not(:checked) ~ .md-header .md-search__form .md-search__icon {
-    width: 16px;
-    height: 16px;
-}
-
 .md-search__icon[for=__search] {
     top: 12px;
 }
@@ -80,16 +41,6 @@
     left: 16px;
 }
 
-@media screen and (min-width: 60em) {
-    .md-search__form {
-        background: var(--doc-dark-layer-3);
-    }
-
-    .md-search__form:hover {
-        background-color: var(--doc-dark-input-1);
-    }
-}
-
 .md-header__source {
     margin-left: 24px;
     border-radius: 6px;
@@ -132,13 +83,6 @@
     margin-right: 4px;
 }
 
-
-@media screen and (min-width: 60em) {
-    .md-header__source {
-        max-width: 225px;
-    }
-}
-
 [data-md-toggle=search]:checked ~ .md-header .md-search__form {
     border-radius: 12px 12px 0 0;
 }
@@ -151,21 +95,6 @@
     border-bottom-left-radius: 12px;
 }
 
-@media screen and (min-width: 60em) {
-    [data-md-toggle=search]:checked ~ .md-header .md-search__suggest,
-    [data-md-toggle=search]:checked ~ .md-header .md-search__form .md-search__input {
-        padding-left: 60px;
-        padding-right: 80px;
-    }
-}
-
-[data-md-toggle=search]:checked ~ .md-header .md-search__form .md-search__icon.md-icon svg,
-[data-md-toggle=search]:checked ~ .md-header .md-search__form .md-search__icon {
-    width: 28px;
-    height: 28px;
-    top: 8px;
-}
-
 .md-search-result__meta {
     background: var(--doc-layer-2);
 }
@@ -178,16 +107,6 @@
     background: var(--doc-layer-4);
 }
 
-@media (max-width: 767px) {
-    .md-header__inner {
-        max-width: 100%;
-    }
-
-    [dir=ltr] .md-header__title {
-        margin-left: 0;
-    }
-}
-
 .md-tabs {
     background: var(--doc-bg-1);
     color: var(--doc-text-tertiary);
@@ -195,7 +114,7 @@
 
 .md-tabs__link {
     opacity: 1;
-    font-size: 20px;
+    font-size: 16px;
     line-height: 1.4;
     margin-top: 20px;
 }
@@ -249,57 +168,14 @@
     color: var(--doc-text-tertiary);
 }
 
-@media screen and (min-width: 76.25em) {
-    .md-nav__item--section > .md-nav__link {
-        font-weight: 700;
-        color: var(--doc-text-secondary);
-    }
-}
-
-@media screen and (min-width: 76.25em) {
-    .md-nav__item--section > .md-nav__link[for] {
-        color: var(--doc-text-secondary);
-    }
-}
-
-@media screen and (min-width: 60em) {
-    .md-search__inner {
-        width: 201px;
-    }
-}
-
 .md-header__button {
     margin: 0 0.8rem;
 }
 
-@media (max-width: 767px) {
-    .md-header__option .md-header__button:first-of-type {
-        margin: 0 -16px 0 0;
-    }
-}
-
-
 .md-nav__link {
     margin-top: 12px;
 }
 
-@media screen and (min-width: 76.25em) {
-    .md-nav__item--section {
-        margin: 20px 0;
-    }
-}
-
-.md-nav {
-    font-size: 16px;
-}
-
-@media (max-width: 767px) {
-    .md-nav {
-        font-size: 14px;
-    }
-}
-
-
 .md-nav--lifted .md-logo {
     max-width: 127px;
 }
@@ -311,55 +187,105 @@
 .md-nav--lifted .md-nav__title {
     color: var(--doc-text-primary);
 }
-@media screen and (min-width: 60em) {
-    .md-search__inner {
-        width: 201px;
-    }
-}
 
 .md-header__button {
     margin: 0 0.8rem;
 }
 
+.md-option[data-md-color-media] ~ .md-icon svg {
+    width: 24px;
+    height: 24px;
+}
+
 @media (max-width: 767px) {
-    .md-header__option .md-header__button:first-of-type {
+    .md-header__inner {
+        max-width: 100%;
+    }
+
+    [dir=ltr] .md-header__title {
+        margin-left: 0;
+    }
+
+    .md-header__option .md-option[data-md-color-media] ~ .md-header__button {
         margin: 0 -16px 0 0;
     }
 }
 
+@media screen and (min-width: 60em) {
+    [data-md-toggle=search]:checked ~ .md-header .md-search__suggest,
+    [data-md-toggle=search]:checked ~ .md-header .md-search__form .md-search__input {
+        padding-left: 60px;
+        padding-right: 80px;
+    }
 
-.md-nav__link {
-    margin-top: 12px;
-}
+    .md-header__source {
+        max-width: 225px;
+    }
 
-@media screen and (min-width: 76.25em) {
-    .md-nav__item--section {
-        margin: 20px 0;
+    .md-search__form {
+        background: var(--doc-dark-layer-3);
     }
-}
 
-.md-nav {
-    font-size: 16px;
-}
+    .md-search__form:hover {
+        background-color: var(--doc-dark-input-1);
+    }
 
-@media (max-width: 767px) {
-    .md-nav {
+    .md-search__inner {
+        width: 201px;
+    }
+
+    .md-search__output {
+        top: 40px;
+    }
+
+    [data-md-toggle=search]:not(:checked) ~ .md-header .md-search__form {
+        border-radius: 8px;
+        border: 1px solid var(--doc-dark-border-4);
+    }
+
+    .md-search__form {
+        height: 40px;
+    }
+
+    .md-search__input::placeholder {
         font-size: 14px;
+        font-weight: 400;
+        color: var(--doc-dark-text-placeholder);
     }
-}
 
-.md-nav--secondary .md-nav__item {
-    font-size: 12px;
-}
+    [dir=ltr] .md-search__input {
+        padding-left: 40px;
+    }
 
-.md-nav--lifted .md-logo {
-    max-width: 127px;
-}
+    .md-search__input + .md-search__icon {
+        color: var(--doc-dark-text-tertiary);
+    }
 
-.md-nav--lifted .md-nav__source {
-    padding-bottom: 10px;
+    [data-md-toggle=search]:not(:checked) ~ .md-header .md-search__form .md-search__icon.md-icon svg,
+    [data-md-toggle=search]:not(:checked) ~ .md-header .md-search__form .md-search__icon {
+        width: 16px;
+        height: 16px;
+    }
+
+    [data-md-toggle=search]:checked ~ .md-header .md-search__form .md-search__icon.md-icon svg,
+    [data-md-toggle=search]:checked ~ .md-header .md-search__form .md-search__icon {
+        width: 28px;
+        height: 28px;
+        top: 8px;
+    }
 }
 
-.md-nav--lifted .md-nav__title {
-    color: var(--doc-text-primary);
-}
\ No newline at end of file
+@media screen and (min-width: 76.25em) {
+    .md-nav__item--section > .md-nav__link {
+        font-weight: 700;
+        color: var(--doc-text-secondary);
+    }
+
+    .md-nav__item--section > .md-nav__link[for] {
+        color: var(--doc-text-secondary);
+    }
+
+    .md-nav__item--section {
+        margin: 20px 0;
+    }
+}
diff --git a/docs/assets/style/components/sidebar.css b/docs/assets/style/components/sidebar.css
index bfcb82ef..74a09af9 100644
--- a/docs/assets/style/components/sidebar.css
+++ b/docs/assets/style/components/sidebar.css
@@ -1,9 +1,3 @@
-@media screen and (min-width: 76.25em) {
-    .md-sidebar__inner > .md-nav {
-        margin-left: -0.6rem;
-    }
-}
-
 .md-sidebar__scrollwrap {
     margin: 0;
 }
@@ -12,6 +6,12 @@
     color: var(--doc-text-brand);
 }
 
+@media screen and (min-width: 76.25em) {
+    .md-sidebar__inner > .md-nav {
+        margin-left: -0.6rem;
+    }
+}
+
 @media screen and (max-width: 76.234375em) {
     [data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary {
         width: 260px;
diff --git a/docs/assets/style/index.css b/docs/assets/style/index.css
index c608396c..5e55400c 100644
--- a/docs/assets/style/index.css
+++ b/docs/assets/style/index.css
@@ -112,13 +112,6 @@ body {
     width: 1320px;
 }
 
-@media (max-width: 767px) {
-    .md-grid {
-        max-width: calc(100% - 40px);
-        width: 1320px;
-    }
-}
-
 .md-typeset h1 {
     font-weight: 700;
     font-size: 2em;
@@ -163,19 +156,13 @@ body {
     border-radius: 12px;
 }
 
-@media (max-width: 767px) {
-    .md-typeset {
-        font-size: 14px;
-    }
-}
-
 .doc-cards {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }
 
-.doc-cards > div {
+.doc-cards > a {
     border-radius: 8px;
     border: 1px solid var(--doc-border-3);
     background: var(--doc-layer-2);
@@ -184,9 +171,25 @@ body {
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
+    transition: all .15s;
 }
 
-.doc-cards > div > p {
+.doc-cards > a:hover,
+.doc-cards > a:active {
+    background: var(--doc-layer-4);
+}
+
+.doc-cards > a > h3 {
+    font-size: 14px;
+}
+
+.doc-cards > a > p {
+    color: var(--doc-text-secondary);
+    font-size: 12px;
+}
+
+.doc-cards > a > p,
+.doc-cards > a > h3 {
     margin: 0;
 }
 
@@ -201,4 +204,15 @@ body {
 .doc-footer,
 .md-footer {
     position: relative;
+}
+
+@media (max-width: 767px) {
+    .md-grid {
+        max-width: calc(100% - 40px);
+        width: 1320px;
+    }
+
+     .md-typeset {
+        font-size: 14px;
+    }
 }
\ No newline at end of file
diff --git a/docs/bc_fusion/index.md b/docs/bc_fusion/index.md
index ccb35c88..c1327b9d 100644
--- a/docs/bc_fusion/index.md
+++ b/docs/bc_fusion/index.md
@@ -15,7 +15,7 @@ hide:
         <p>The BNB Chain Fusion is a strategic shift to migrate the BNB Beacon Chain’s functionalities to BNB Smart Chain (BSC) and retire BNB Beacon Chain. This move aims to streamline the network, improve efficiency, reduce security risks, and align BNB Chain's architecture with the current technological demands and future growth.</p>
     </div>
     <div class="image">
-        <img src="../bnb_smart_chain/img/bnb_smart_chain.png" alt="BNB Chain Fusion" loading="lazy">
+        <img src="../assets/bcfusion/bcfusion.png" alt="BNB Chain Fusion" loading="lazy">
     </div>
 </div>
 
diff --git a/docs/index.md b/docs/index.md
index 875ff562..4cf44441 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -4,17 +4,10 @@ hide:
 - toc
 ---
 
-<style>
-   .md-source-file, .md-content__button.md-icon {
-      display: none;
-   }
-</style>
-<div class="home-hero">
-    <img src="./assets/home-hero.png">
-</div>
-
 # BNB Chain: Empowering the Future of Decentralized Applications
 
+![BNB Chain](./assets/home-hero.png)
+
 BNB Chain is a leading blockchain ecosystem designed to support the growing demands of the decentralized web (Web3). Offering a unique combination of speed, scalability, and affordability, BNB Chain has become a popular choice for developers building decentralized applications (DApps) and for users seeking to participate in the world of decentralized finance (DeFi).
 
 ## **Key Features and Benefits:**
@@ -29,24 +22,21 @@ BNB Chain is a leading blockchain ecosystem designed to support the growing dema
 
 ## **Chains**
 
-<div class="doc-cards" markdown>
-<div markdown>
-**BNB Smart Chain (BSC)**
-
-BNB Smart Chain (BSC) is a high-performance blockchain platform designed to enable the development of scalable and user-friendly decentralized applications (DApps). As a core component of the BNB Chain ecosystem, BSC offers a robust infrastructure for building a wide range of applications, particularly in the decentralized finance (DeFi) space.
-</div>
-
-<div markdown>
-**opBNB**
-
-A layer-2 scaling solution for BNB Smart Chain that significantly increases transaction speed and reduces fees. It achieves this by leveraging Optimistic Rollups technology, making BNB Chain even more suitable for high-throughput applications.
-</div>
-
-<div markdown>
-**BNB Greenfield**
-
-A decentralized storage infrastructure designed to provide a secure and scalable platform for storing and managing data on the blockchain. It enables users to store files, NFTs, and other digital assets in a decentralized manner, promoting data ownership and control.
-</div>
+<div class="doc-cards">
+<a href="./bnb_smart_chain">
+<h3>BNB Smart Chain (BSC)</h3>
+<p>BNB Smart Chain (BSC) is a high-performance blockchain platform designed to enable the development of scalable and user-friendly decentralized applications (DApps). As a core component of the BNB Chain ecosystem, BSC offers a robust infrastructure for building a wide range of applications, particularly in the decentralized finance (DeFi) space.</p>
+</a>
+
+<a href="./bnb_opbnb">
+<h3>opBNB</h3>
+<p>A layer-2 scaling solution for BNB Smart Chain that significantly increases transaction speed and reduces fees. It achieves this by leveraging Optimistic Rollups technology, making BNB Chain even more suitable for high-throughput applications.</p>
+</a>
+
+<a href="./bnb_greenfield">
+<h3>BNB Greenfield</h3>
+<p>A decentralized storage infrastructure designed to provide a secure and scalable platform for storing and managing data on the blockchain. It enables users to store files, NFTs, and other digital assets in a decentralized manner, promoting data ownership and control.</p>
+</a>
 </div>
 
 ## **Use Cases:**
diff --git a/mkdocs.yml b/mkdocs.yml
index ef3b0988..16608c09 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -1,5 +1,5 @@
 # Project information
-site_name: BNBChain Knowledge Base
+site_name: Documentation
 site_url: https://docs.bnbchain.org
 site_author: BNB Chain
 site_description: >-
@@ -18,18 +18,19 @@ theme:
   language: en
   icon:
     repo: fontawesome/brands/github
+    share: octicons/share-android-24
   palette:
     - scheme: default
       primary: custom
       accent: custom
       toggle:
-        icon: material/weather-night
+        icon: octicons/moon-24
         name: Switch to dark mode
     - scheme: slate
       primary: custom
       accent: custom
       toggle:
-        icon: material/weather-sunny
+        icon: octicons/sun-24
         name: Switch to light mode
   features:
 #    - announce.dismiss