diff --git a/public/background.png b/public/background.png
deleted file mode 100644
index a1ffe65..0000000
Binary files a/public/background.png and /dev/null differ
diff --git a/public/img/onboarding.png b/public/img/onboarding.png
new file mode 100644
index 0000000..835c6a1
Binary files /dev/null and b/public/img/onboarding.png differ
diff --git a/public/img/onboarding.webp b/public/img/onboarding.webp
new file mode 100644
index 0000000..4a98a41
Binary files /dev/null and b/public/img/onboarding.webp differ
diff --git a/public/img/onboarding@1.5x.png b/public/img/onboarding@1.5x.png
new file mode 100644
index 0000000..c3aba00
Binary files /dev/null and b/public/img/onboarding@1.5x.png differ
diff --git a/public/img/onboarding@1.5x.webp b/public/img/onboarding@1.5x.webp
new file mode 100644
index 0000000..4db91ed
Binary files /dev/null and b/public/img/onboarding@1.5x.webp differ
diff --git a/public/img/onboarding@2x.png b/public/img/onboarding@2x.png
new file mode 100644
index 0000000..ba46953
Binary files /dev/null and b/public/img/onboarding@2x.png differ
diff --git a/public/img/onboarding@2x.webp b/public/img/onboarding@2x.webp
new file mode 100644
index 0000000..188cd00
Binary files /dev/null and b/public/img/onboarding@2x.webp differ
diff --git a/public/img/onboarding@3x.png b/public/img/onboarding@3x.png
new file mode 100644
index 0000000..1eae209
Binary files /dev/null and b/public/img/onboarding@3x.png differ
diff --git a/public/img/onboarding@3x.webp b/public/img/onboarding@3x.webp
new file mode 100644
index 0000000..7147642
Binary files /dev/null and b/public/img/onboarding@3x.webp differ
diff --git a/public/img/onboarding@4x.png b/public/img/onboarding@4x.png
new file mode 100644
index 0000000..434359b
Binary files /dev/null and b/public/img/onboarding@4x.png differ
diff --git a/public/img/onboarding@4x.webp b/public/img/onboarding@4x.webp
new file mode 100644
index 0000000..92ce2de
Binary files /dev/null and b/public/img/onboarding@4x.webp differ
diff --git a/src/components/OnBoarding/OmBoardingImage.css b/src/components/OnBoarding/OmBoardingImage.css
new file mode 100644
index 0000000..f8e980a
--- /dev/null
+++ b/src/components/OnBoarding/OmBoardingImage.css
@@ -0,0 +1,6 @@
+.onboarding-image {
+  position: absolute;
+  right: -40px;
+  max-height: 90%;
+  width: auto;
+}
diff --git a/src/components/OnBoarding/OnBoardingImage.tsx b/src/components/OnBoarding/OnBoardingImage.tsx
new file mode 100644
index 0000000..e2780cf
--- /dev/null
+++ b/src/components/OnBoarding/OnBoardingImage.tsx
@@ -0,0 +1,35 @@
+import "./OmBoardingImage.css";
+
+export function OnBoardingImage() {
+  return (
+    <picture>
+      <source
+        srcSet="/img/onboarding@4x.webp 4x, 
+                            /img/onboarding@3x.webp 3x, 
+                            /img/onboarding@2x.webp 2x, 
+                            /img/onboarding@1.5x.webp 1.5x, 
+                            /img/onboarding.webp 1x"
+        sizes="(max-width: 600px) 100vw, 
+                           (max-width: 1200px) 50vw, 
+                           33vw"
+        type="image/webp"
+      />
+      <source
+        srcSet="/img/onboarding@4x.png 4x, 
+                            /img/onboarding@3x.png 3x, 
+                            /img/onboarding@2x.png 2x, 
+                            /img/onboarding@1.5x.png 1.5x, 
+                            /img/onboarding.png 1x"
+        sizes="(max-width: 600px) 100vw, 
+                           (max-width: 1200px) 50vw, 
+                           33vw"
+        type="image/png"
+      />
+      <img
+        src="/img/onboarding.png"
+        alt="Onboarding Image"
+        className="onboarding-image"
+      />
+    </picture>
+  );
+}
diff --git a/src/routes/index.css b/src/routes/index.css
index 05adf5c..0bbebca 100644
--- a/src/routes/index.css
+++ b/src/routes/index.css
@@ -1,10 +1,5 @@
 .index {
   width: 100%;
-  background-image: url(/bg.png);
-  background-position: 10px 10px;
-  background-position: right;
-  background-repeat: no-repeat;
-  background-size: auto 90%;
   padding: 3rem 6rem;
 }
 
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index eb91fb0..575063f 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -11,6 +11,7 @@ import { classnames } from "../utils/classnames";
 import { OnBoardingStepThree } from "../components/OnBoarding/OnBoardingStepThree";
 import { attributes } from "../utils/attributes";
 import { CodexLogo } from "../components/CodexLogo/CodexLogo";
+import { OnBoardingImage } from "../components/OnBoarding/OnBoardingImage";
 
 export const Route = createFileRoute("/")({
   component: Index,
@@ -80,6 +81,9 @@ function Index() {
             </div>
           </div>
         </div>
+        <div className="index-column">
+          <OnBoardingImage />
+        </div>
         <div className="index-columnRight">
           <div className="index-logo">
             <div className="index-network">