diff --git a/docs/site/docusaurus.config.js b/docs/site/docusaurus.config.js
index 12e1bd24232..a54c50813a3 100644
--- a/docs/site/docusaurus.config.js
+++ b/docs/site/docusaurus.config.js
@@ -201,8 +201,8 @@ const config = {
       footer: {
         logo: {
           alt: "IOTA Wiki Logo",
-          src: "img/IOTA-logo.svg",
-          srcDark: "img/IOTA-logo.svg",
+          src: "img/iota-logo.svg",
+          srcDark: "img/iota-logo.svg",
           width: 138,
           height: 48,
         },
diff --git a/docs/site/src/pages/index.js b/docs/site/src/pages/index.js
index 37aae26fabd..1b1bea1c907 100644
--- a/docs/site/src/pages/index.js
+++ b/docs/site/src/pages/index.js
@@ -7,12 +7,21 @@ import React from "react";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import styles from "./index.module.css";
+import heroCardBg from "@site/static/img/heroCardBg.png";
+import heroCardBg1 from "@site/static/img/heroCardBg1.png";
+import heroCardBg2 from "@site/static/img/heroCardBg2.png";
 export default function Home() {
   const HomeCard = (props) => {
-    const { title, children } = props;
+    const { title, children, heroCardBg } = props;
+
     return (
       <div className={`p-px col-span-3 w-[350px]`}>
-        <div className={styles.card}>
+        <div
+          className={styles.card}
+          style={{
+            background: `black url(${heroCardBg}) no-repeat top`,
+          }}
+        >
           {title && <h4 className="h4 text-white">{title}</h4>}
           <div className={styles.cardLinksContainer}>{children}</div>
         </div>
@@ -23,7 +32,12 @@ export default function Home() {
     const { children } = props;
     return (
       <div className={`p-px col-span-3 w-[350px]`}>
-        <div className={styles.cardCTA}>
+        <div
+          className={styles.cardCTA}
+          style={{
+            background: `black url(${heroCardBg}) no-repeat top`,
+          }}
+        >
           <div className={styles.cardLinksContainer}>{children}</div>
         </div>
       </div>
@@ -36,6 +50,7 @@ export default function Home() {
         background: "var(--iota-black)",
       }}
     >
+      {" "}
       <div className="bg-iota-black overflow-hidden">
         <div className={styles.backgroundImage}>
           <div className="w-full mt-24 mb-12 mx-auto">
@@ -61,7 +76,7 @@ export default function Home() {
         </div>
 
         <div className="flex flex-row flex-wrap justify-center gap-2 max-w-[1066px] mx-auto">
-          <HomeCard title="About IOTA">
+          <HomeCard title="About IOTA" heroCardBg={heroCardBg}>
             <Link className={styles.cardLink} to="./concepts/tokenomics">
               Tokenomics
             </Link>
@@ -72,7 +87,7 @@ export default function Home() {
               Standards
             </Link>
           </HomeCard>
-          <HomeCard title="Developers">
+          <HomeCard title="Developers" heroCardBg={heroCardBg1}>
             <Link
               className={styles.cardLink}
               to="./guides/developer/getting-started"
@@ -89,7 +104,10 @@ export default function Home() {
               Move
             </Link>
           </HomeCard>
-          <HomeCard title="Validators and Node operators">
+          <HomeCard
+            title="Validators and Node operators"
+            heroCardBg={heroCardBg2}
+          >
             <Link
               className={styles.cardLink}
               to="./guides/operator/validator-config"
@@ -104,7 +122,7 @@ export default function Home() {
               <span className="block bg-auto bg-[url(../static/img/index/right-arrow.svg)]"></span>
             </Link>
           </HomeCard>
-          <HomeCard title="References" aux>
+          <HomeCard title="References" aux heroCardBg={heroCardBg1}>
             <Link
               className={styles.cardLink}
               to="https://sdk.mystenlabs.com/dapp-kit?ref=blog.iota.io"
@@ -127,7 +145,7 @@ export default function Home() {
               Rust SDK (GitHub)
             </Link>
           </HomeCard>
-          <HomeCard title="Resources" aux>
+          <HomeCard title="Resources" aux heroCardBg={heroCardBg2}>
             <Link
               className={styles.cardLink}
               to="https://iota.directory/?_project_type=api%2Cdeveloper-tools%2Cinfrastructure%2Csdk"
diff --git a/docs/site/src/pages/index.module.css b/docs/site/src/pages/index.module.css
index a42e3845e99..0116a75051f 100644
--- a/docs/site/src/pages/index.module.css
+++ b/docs/site/src/pages/index.module.css
@@ -26,12 +26,61 @@
   background-repeat: no-repeat;
   background-size: 50% 100%;
   margin-bottom: 2rem;
-  /* background-size: 50% 100%; */
+}
+
+@media (max-width: 1000px) {
+  .backgroundImage {
+    background-size: 77% 99%;
+  }
+}
+@media (max-width: 1100px) {
+  .backgroundImage {
+    background-size: 75% 100%;
+  }
+}
+@media (max-width: 2000px) {
+  .backgroundImage {
+    background-size: 40% 100%;
+  }
+}
+@media (max-width: 1700px) {
+  .backgroundImage {
+    background-size: 50% 100%;
+  }
+}
+@media (max-width: 800px) {
+  .backgroundImage {
+    background-size: 77% 99%;
+  }
+  .heroText {
+    padding-top: 5rem;
+    padding-left: 4rem;
+  }
+}
+@media (max-width: 1200px) and (min-width: 900px) {
+  .backgroundImage {
+    background-size: 83% 100%;
+  }
+}
+@media (max-width: 1000px) and (min-width: 900px) {
+  .backgroundImage {
+    background-size: 77% 99%;
+  }
+}
+@media (max-width: 899px) and (min-width: 799px) {
+  .backgroundImage {
+    background-size: 94% 107%;
+  }
+}
+
+@media (max-width: 1100px) and (min-width: 1200px) {
+  .backgroundImage {
+    background-size: 75% 100%;
+  }
 }
 .card,
 .cardCTA {
   height: 480px;
-  background-color: black;
   border: 1px solid;
   border-color: var(--iota-line);
   display: flex;
@@ -39,10 +88,9 @@
   padding: 1.875rem;
   justify-content: space-between;
   border-radius: 30px;
-  background: black url(../../static/img/heroCardg.svg);
   background-position: top;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: 101% 60%;
 }
 .cardCTA {
   height: 100%;
diff --git a/docs/site/src/theme/SearchBar/styles.css b/docs/site/src/theme/SearchBar/styles.css
index f4c286c1baf..8c4e0b9b04a 100644
--- a/docs/site/src/theme/SearchBar/styles.css
+++ b/docs/site/src/theme/SearchBar/styles.css
@@ -3,6 +3,13 @@
   --docsearch-text-color: var(--ifm-font-color-base);
 }
 
+html[data-theme="light"] .DocSearch-Button:hover {
+  margin: 0;
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+  background-color: var(--iota-black);
+}
+
 .DocSearch-Button {
   margin: 0;
   transition: all var(--ifm-transition-fast)
diff --git a/docs/site/static/img/heroCardBg.png b/docs/site/static/img/heroCardBg.png
new file mode 100644
index 00000000000..f72c90c9d86
Binary files /dev/null and b/docs/site/static/img/heroCardBg.png differ
diff --git a/docs/site/static/img/heroCardBg1.png b/docs/site/static/img/heroCardBg1.png
new file mode 100644
index 00000000000..7c4113a31d2
Binary files /dev/null and b/docs/site/static/img/heroCardBg1.png differ
diff --git a/docs/site/static/img/heroCardBg2.png b/docs/site/static/img/heroCardBg2.png
new file mode 100644
index 00000000000..bcf47de3e93
Binary files /dev/null and b/docs/site/static/img/heroCardBg2.png differ
diff --git a/docs/site/static/img/heroCardg.svg b/docs/site/static/img/heroCardg.svg
deleted file mode 100644
index 7f72fd484af..00000000000
--- a/docs/site/static/img/heroCardg.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="416" height="299" viewBox="0 0 416 299" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1_32135)">
-<path opacity="0.95" d="M319.334 46.7593C328.764 51.9139 340.199 51.7803 349.506 46.4069L550.921 -69.8792C556.124 -72.8829 556.036 -80.4224 550.764 -83.3038L340.659 -198.148C331.228 -203.303 319.793 -203.169 310.486 -197.796L109.071 -81.5098C103.869 -78.506 103.957 -70.9666 109.228 -68.0852L319.334 46.7593Z" fill="#0101FF"/>
-<path opacity="0.95" d="M340.658 -198.148C331.228 -203.303 319.793 -203.169 310.486 -197.796L109.071 -81.5095C103.868 -78.5057 103.956 -70.9663 109.228 -68.0849L319.334 46.7596C328.764 51.9142 340.199 51.7806 349.506 46.4072L550.921 -69.8788C556.124 -72.8826 556.036 -80.4221 550.764 -83.3035L340.658 -198.148Z" fill="#0101FF"/>
-<path opacity="0.75" d="M304.69 -137.16C295.264 -142.309 283.835 -142.176 274.533 -136.807L73.224 -20.6357C68.024 -17.6348 68.112 -10.1028 73.3807 -7.2242L283.376 107.507C292.802 112.657 304.231 112.523 313.533 107.155L514.842 -9.01642C520.042 -12.0173 519.954 -19.5493 514.685 -22.4279L304.69 -137.16Z" fill="#0101FF"/>
-<path opacity="0.5" d="M269.231 -76.4863C259.892 -81.5605 248.599 -81.4041 239.402 -76.0732L37.3509 41.05C32.1753 44.0501 32.2788 51.5857 37.5349 54.4414L247.143 168.324C256.483 173.399 267.776 173.242 276.972 167.911L479.024 50.7882C484.199 47.788 484.096 40.2524 478.84 37.3968L269.231 -76.4863Z" fill="#0101FF"/>
-<path opacity="0.3" d="M233.386 -15.7421C224.046 -20.8163 212.753 -20.6599 203.557 -15.3291L1.50534 101.794C-3.67026 104.794 -3.56674 112.33 1.68927 115.186L211.298 229.069C220.637 234.143 231.93 233.986 241.127 228.655L443.178 111.532C448.354 108.532 448.25 100.997 442.994 98.1409L233.386 -15.7421Z" fill="#0101FF"/>
-<path opacity="0.15" d="M197.54 45.003C188.201 39.9288 176.907 40.0852 167.711 45.4161L-34.3404 162.539C-39.516 165.539 -39.4124 173.075 -34.1564 175.931L175.452 289.814C184.791 294.888 196.084 294.731 205.281 289.401L407.332 172.277C412.508 169.277 412.404 161.742 407.148 158.886L197.54 45.003Z" fill="#0101FF"/>
-</g>
-<defs>
-<clipPath id="clip0_1_32135">
-<rect width="586" height="300" fill="white" transform="translate(0 -1)"/>
-</clipPath>
-</defs>
-</svg>