diff --git a/src/app/pages/Designathons/Designathon24/components/About/About.module.scss b/src/app/pages/Designathons/Designathon24/components/About/About.module.scss
index 9585b4c8..6a50fb9c 100644
--- a/src/app/pages/Designathons/Designathon24/components/About/About.module.scss
+++ b/src/app/pages/Designathons/Designathon24/components/About/About.module.scss
@@ -63,8 +63,6 @@
 	.bl {
 		position: absolute;
 		max-width: 200px;
-		z-index: -1;
-
 		bottom: 0px;
 		left: 0px;
 
@@ -76,8 +74,6 @@
 	.tr {
 		position: absolute;
 		max-width: 200px;
-		z-index: -1;
-
 		top: 0px;
 		right: 0px;
 
diff --git a/src/app/pages/Designathons/Designathon24/components/About/index.jsx b/src/app/pages/Designathons/Designathon24/components/About/index.jsx
index 4e3b858b..90fa73c2 100644
--- a/src/app/pages/Designathons/Designathon24/components/About/index.jsx
+++ b/src/app/pages/Designathons/Designathon24/components/About/index.jsx
@@ -12,6 +12,15 @@ import Notecard from "../Notecard/Notecard";
 const About = () => {
 	return (
 		<div className={cn.container} id="s-about">
+			<img
+				src={tr_gradient}
+				alt="tr_gradient"
+				className={clsx(cn.tr, cn.gradient)}
+			/>
+			<img src={bl_gradient} alt="" className={cn.bl} />
+			<img src={tr_stars} alt="" className={cn.tr} />
+			<img src={bl_stars} alt="" className={cn.bl} />
+
 			<h2 className={cn.aboutHeading}>About</h2>
 			<Notecard lineAdjustment={1}>
 				<div style={{ maxWidth: "95%" }}>
@@ -41,21 +50,12 @@ const About = () => {
 					</p>
 				</div>
 			</Notecard>
-
+			<img src={paperclip} alt="" className={cn.paperclip} />
 			<img
 				src={airplane}
 				alt=""
 				className={clsx(cn.airplane, "wait flopR")}
 			/>
-			<img src={paperclip} alt="" className={cn.paperclip} />
-			<img
-				src={tr_gradient}
-				alt="tr_gradient"
-				className={clsx(cn.tr, cn.gradient)}
-			/>
-			<img src={bl_gradient} alt="" className={cn.bl} />
-			<img src={tr_stars} alt="" className={cn.tr} />
-			<img src={bl_stars} alt="" className={cn.bl} />
 		</div>
 	);
 };