diff --git a/views/homepage/Overview.tsx b/views/homepage/Overview.tsx
index 94717188..cb41ed4c 100644
--- a/views/homepage/Overview.tsx
+++ b/views/homepage/Overview.tsx
@@ -51,10 +51,10 @@ const Overview = () => {
 
 	return (
 		<div className={clsx(styles.overview)}>
-			<div className={styles.moon1}>
+			<div className={isMobile ? styles.moon1Mobile : styles.moon1}>
 				<Image alt="moon1" src={'/images/background/moon1.png'} layout="fill" />
 			</div>
-			<div className={styles.moon2}>
+			<div className={isMobile ? styles.moon2Mobile : styles.moon2}>
 				<Image alt="moon2" src={'/images/background/moon2.png'} layout="fill" />
 			</div>
 			<div className="row md-wrap">
diff --git a/views/homepage/style.module.scss b/views/homepage/style.module.scss
index 25126928..d9c28574 100644
--- a/views/homepage/style.module.scss
+++ b/views/homepage/style.module.scss
@@ -78,6 +78,15 @@
 	z-index: -1;
 }
 
+.moon1Mobile {
+	position: absolute;
+	width: 240px;
+	height: 177px;
+	top: -80px;
+	left: -155px;
+	z-index: -1;
+}
+
 .moon2 {
 	position: absolute;
 	width: 171px;
@@ -86,3 +95,12 @@
 	right: -102px;
 	z-index: -1;
 }
+
+.moon2Mobile {
+	position: absolute;
+	width: 171px;
+	height: 128px;
+	bottom: -80px;
+	right: -10px;
+	z-index: -1;
+}