diff --git a/src/assets/icon.svg b/src/assets/icon.svg
index 779783e4..98989fef 100644
--- a/src/assets/icon.svg
+++ b/src/assets/icon.svg
@@ -347,6 +347,7 @@
     </defs>
   </symbol>
   <symbol id="star-alert" viewBox="0 0 231 217" fill="none" stroke="none">
+
     <path d="M32.8458 79.1477C33.4305 62.2181 51.4896 51.7565 66.3941 59.7132L77.7738 65.7882C84.4796 69.3681 92.5204 69.3681 99.2262 65.7882L110.606 59.7132C125.51 51.7565 143.57 62.2181 144.154 79.1477L144.601 92.0736C144.864 99.6905 148.884 106.678 155.327 110.715L166.26 117.565C180.58 126.538 180.58 147.462 166.26 156.435L155.327 163.285C148.884 167.322 144.864 174.31 144.601 181.926L144.154 194.852C143.57 211.782 125.51 222.244 110.606 214.287L99.2262 208.212C92.5204 204.632 84.4796 204.632 77.7738 208.212L66.3941 214.287C51.4896 222.244 33.4305 211.782 32.8458 194.852L32.3993 181.926C32.1363 174.31 28.1158 167.322 21.6731 163.285L10.7399 156.435C-3.57996 147.462 -3.57995 126.538 10.7399 117.565L21.6732 110.715C28.1158 106.678 32.1363 99.6905 32.3993 92.0736L32.8458 79.1477Z" fill="url(#paint0_radial_1771_9900)"/>
     <path d="M176.433 34.4438C176.654 27.9894 183.49 24.0009 189.132 27.0344L193.44 29.3505C195.978 30.7153 199.022 30.7153 201.56 29.3505L205.868 27.0344C211.51 24.0009 218.346 27.9894 218.567 34.4438L218.736 39.3718C218.835 42.2758 220.357 44.9396 222.796 46.4787L226.935 49.0906C232.355 52.5115 232.355 60.4885 226.935 63.9094L222.796 66.5213C220.357 68.0604 218.835 70.7243 218.736 73.6282L218.567 78.5562C218.346 85.0106 211.51 88.9991 205.868 85.9656L201.56 83.6495C199.022 82.2847 195.978 82.2847 193.44 83.6495L189.132 85.9656C183.49 88.9991 176.654 85.0106 176.433 78.5562L176.264 73.6282C176.165 70.7243 174.643 68.0604 172.204 66.5213L168.065 63.9094C162.645 60.4885 162.645 52.5115 168.065 49.0906L172.204 46.4787C174.643 44.9396 176.165 42.2758 176.264 39.3718L176.433 34.4438Z" fill="url(#paint1_radial_1771_9900)"/>
     <path d="M130.608 5.12166C130.744 1.20668 134.927 -1.21257 138.379 0.62743L141.015 2.03228C142.569 2.86012 144.431 2.86012 145.985 2.03228L148.621 0.627428C152.073 -1.21257 156.256 1.20669 156.392 5.12167L156.495 8.11078C156.556 9.87218 157.487 11.4879 158.98 12.4215L161.512 14.0058C164.829 16.0807 164.829 20.9193 161.512 22.9942L158.98 24.5785C157.487 25.5121 156.556 27.1278 156.495 28.8892L156.392 31.8783C156.256 35.7933 152.073 38.2126 148.621 36.3726L145.985 34.9677C144.431 34.1399 142.569 34.1399 141.015 34.9677L138.379 36.3726C134.927 38.2126 130.744 35.7933 130.608 31.8783L130.505 28.8892C130.444 27.1278 129.513 25.5121 128.02 24.5785L125.488 22.9942C122.171 20.9192 122.171 16.0807 125.488 14.0058L128.02 12.4215C129.513 11.4879 130.444 9.87218 130.505 8.11077L130.608 5.12166Z" fill="url(#paint2_radial_1771_9900)"/>
diff --git a/src/pages/LoginPage/FindIdPage/FindIdPage.module.css b/src/pages/LoginPage/FindIdPage/FindIdPage.module.css
index c953293d..9e237fc1 100644
--- a/src/pages/LoginPage/FindIdPage/FindIdPage.module.css
+++ b/src/pages/LoginPage/FindIdPage/FindIdPage.module.css
@@ -11,11 +11,9 @@
 .pageFrame form {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 .back {
+  margin-top: 0.875rem;
   margin-bottom: 0.875rem;
 }
 .back:hover {
@@ -24,6 +22,7 @@
 
 .findIdFrame {
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
diff --git a/src/pages/LoginPage/FoundIdPage/FoundIdPage.jsx b/src/pages/LoginPage/FoundIdPage/FoundIdPage.jsx
index 9fd338ff..92c9efea 100644
--- a/src/pages/LoginPage/FoundIdPage/FoundIdPage.jsx
+++ b/src/pages/LoginPage/FoundIdPage/FoundIdPage.jsx
@@ -4,8 +4,6 @@ import { useLocation, Link, useNavigate } from 'react-router-dom';
 import { Icon } from '@/components/Icon';
 import { Submit } from '@/components/Submit';
 
-import excitedWoman from '@/assets/images/excitedWoman.svg';
-
 import styles from './FoundIdPage.module.css';
 import { BackAppBar } from '@/components/index.js';
 
@@ -36,15 +34,10 @@ export default function FoundIdPage() {
           <span className={`${styles.dot} ${styles.third}`}></span>
         </div>
       </div>
+      <div className={styles.pageMiddleFrame}>
+        <Icon id='star-mail' width={231} height={217} />
+      </div>
       <div className={styles.pageBottomFrame}>
-        <div className={styles.bodyFrame}>
-          <img
-            src={excitedWoman}
-            alt='frustrated woman image'
-            className={styles.img}
-          />
-        </div>
-
         <Link to='/login'>
           <div className={styles.loginButton}>
             <Submit btnName='로그인하기' className='right' />
diff --git a/src/pages/LoginPage/FoundIdPage/FoundIdPage.module.css b/src/pages/LoginPage/FoundIdPage/FoundIdPage.module.css
index 53f991b6..78902f54 100644
--- a/src/pages/LoginPage/FoundIdPage/FoundIdPage.module.css
+++ b/src/pages/LoginPage/FoundIdPage/FoundIdPage.module.css
@@ -14,7 +14,7 @@
 .pageTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  margin-top: 0.875rem;
+  margin-top: 3.2rem;
 }
 
 .pageExplanation {
@@ -70,11 +70,10 @@
   background-color: var(--blue-4);
 }
 
-.img {
-  width: 13.25rem;
-  height: 14.5rem;
-  margin-bottom: 1.875rem;
-  margin-left: auto;
+.pageMiddleFrame {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .loginButton {
diff --git a/src/pages/LoginPage/FoundPwPage/FoundPwPage.jsx b/src/pages/LoginPage/FoundPwPage/FoundPwPage.jsx
index 856e2577..50d884cd 100644
--- a/src/pages/LoginPage/FoundPwPage/FoundPwPage.jsx
+++ b/src/pages/LoginPage/FoundPwPage/FoundPwPage.jsx
@@ -4,8 +4,6 @@ import { useLocation, Link, useNavigate } from 'react-router-dom';
 import { Icon } from '@/components/Icon';
 import { Submit } from '@/components/Submit';
 
-import EnlightenedWoman from '@/assets/images/EnlightenedWoman.svg';
-
 import styles from './FoundPwPage.module.css';
 import { BackAppBar } from '@/components/index.js';
 
@@ -24,7 +22,7 @@ export default function FoundPwPage() {
   return (
     <div className={styles.pageFrame}>
       <BackAppBar backNavTo='/login' />
-      <div className={styles.pageBottomFrame}>
+      <div className={styles.pageTopFrame}>
         <p className={styles.pageTitle}>비밀번호 찾기</p>
         <p className={styles.pageSubtitle}>
           비밀번호 초기화 이메일이 발송되었어요
@@ -43,14 +41,10 @@ export default function FoundPwPage() {
           </div>
         </div>
       </div>
+      <div className={styles.pageMiddleFrame}>
+        <Icon id='star-mail' width={231} height={217} />
+      </div>
       <div className={styles.pageBottomFrame}>
-        <div className={styles.bodyFrame}>
-          <img
-            src={EnlightenedWoman}
-            alt='frustrated woman image'
-            className={styles.img}
-          />
-        </div>
         <Link to='/find-pw'>
           <div className={styles.loginButton}>
             <Submit btnName='뒤로가기' className='right' />
diff --git a/src/pages/LoginPage/FoundPwPage/FoundPwPage.module.css b/src/pages/LoginPage/FoundPwPage/FoundPwPage.module.css
index dba1d0f9..a699c3a2 100644
--- a/src/pages/LoginPage/FoundPwPage/FoundPwPage.module.css
+++ b/src/pages/LoginPage/FoundPwPage/FoundPwPage.module.css
@@ -7,14 +7,17 @@
   margin: 0 auto;
 }
 
-.pageBottomFrame {
+.pageTopFrame {
   padding: 0 1.25rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .pageTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  margin: 0.875rem 0;
+  margin-top: 3.2rem;
+  margin-bottom: 0.813rem;
 }
 
 .pageSubtitle {
@@ -30,17 +33,16 @@
   margin-bottom: 1rem;
 }
 
-.pageBottomFrame {
-  padding: 0 1.25rem;
+.pageMiddleFrame {
   display: flex;
-  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.bodyFrame {
+.pageBottomFrame {
+  padding: 0 1.25rem;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  position: relative;
+  flex-direction: column;
 }
 
 .resultFrame {
diff --git a/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.jsx b/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.jsx
index a74336e1..be84bccb 100644
--- a/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.jsx
+++ b/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.jsx
@@ -2,8 +2,7 @@ import { useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 import { Submit } from '@/components/Submit';
-
-import frustratedWoman from '@/assets/images/frustratedWoman.svg';
+import { Icon } from '@/components/Icon';
 
 import styles from './NotFoundIdPage.module.css';
 import { BackAppBar } from '@/components/index.js';
@@ -21,19 +20,24 @@ export default function NotFoundIdPage() {
 
   return (
     <div className={styles.pageFrame}>
-      <BackAppBar backNavTo='/login' />
+      <BackAppBar backNavTo='/login' classname={styles.backAppBar} />
       <div className={styles.pageTopFrame}>
-        <p className={styles.pageTitle}>아이디 찾기</p>
-        <p className={styles.pageExplanation}>
-          입력하신 정보와 일치하는 정보가 없어요
-        </p>
+        <div className={styles.explanation}>
+          <p className={styles.pageTitle}>아이디 찾기</p>
+          <p className={styles.pageExplanation}>
+            입력하신 정보와 일치하는 정보가 없어요
+          </p>
+        </div>
       </div>
-      <div className={styles.pageBottomFrame}>
-        <img
-          src={frustratedWoman}
-          alt='frustrated woman image'
-          className={styles.img}
+      <div className={styles.pageMiddleFrame}>
+        <Icon
+          id='star-alert'
+          className={styles.starAlert}
+          width={231}
+          height={217}
         />
+      </div>
+      <div className={styles.pageBottomFrame}>
         <Link to='/find-id'>
           <div className={styles.goBackButton}>
             <Submit btnName='뒤로가기' className='wrong' />
diff --git a/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.module.css b/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.module.css
index 495f32d5..2dd61ea1 100644
--- a/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.module.css
+++ b/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.module.css
@@ -7,14 +7,29 @@
   margin: 0 auto;
 }
 
+.backAppBar {
+  display: block;
+}
+
 .pageTopFrame {
+}
+
+.pageMiddleFrame {
+  height: fit-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.explanation {
+  height: fit-content;
   padding: 0 1.25rem;
 }
 
 .pageTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  margin-top: 0.875rem;
+  margin-top: 3.2rem;
 }
 
 .pageExplanation {
@@ -30,13 +45,6 @@
   flex-direction: column;
 }
 
-.img {
-  width: 13.25rem;
-  height: 14.5rem;
-  margin-bottom: 1.875rem;
-  margin-left: auto;
-}
-
 .goBackButton {
   display: block;
   margin-bottom: 0.5rem;
diff --git a/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.jsx b/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.jsx
index cbd4f8f5..b72521d4 100644
--- a/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.jsx
+++ b/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.jsx
@@ -2,8 +2,7 @@ import { useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 import { Submit } from '@/components/Submit';
-
-import frustratedWoman from '@/assets/images/frustratedWoman.svg';
+import { Icon } from '@/components/Icon';
 
 import styles from './NotFoundPwPage.module.css';
 import { BackAppBar } from '@/components/index.js';
@@ -29,12 +28,10 @@ export default function NotFoundPwPage() {
           입력하신 정보와 일치하는 정보가 없어요
         </p>
       </div>
+      <div className={styles.pageMiddleFrame}>
+        <Icon id='star-alert' width={231} height={217} />
+      </div>
       <div className={styles.pageBottomFrame}>
-        <img
-          src={frustratedWoman}
-          alt='frustrated woman image'
-          className={styles.img}
-        />
         <Link to='/find-pw'>
           <div className={styles.goBackButton}>
             <Submit btnName='뒤로가기' className='ready' />
diff --git a/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.module.css b/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.module.css
index c6f85c3c..9e9b5111 100644
--- a/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.module.css
+++ b/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.module.css
@@ -8,6 +8,12 @@
   margin: 0 auto;
 }
 
+.pageMiddleFrame {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .pageTopFrame {
   padding: 0 1.25rem;
 }
@@ -15,7 +21,7 @@
 .pageTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  margin-top: 0.875rem;
+  margin-top: 3.2rem;
 }
 
 .pageExplanation {
diff --git a/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.jsx b/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.jsx
index d74b0b3e..391eb4ad 100644
--- a/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.jsx
+++ b/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.jsx
@@ -2,8 +2,7 @@ import { useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 import { Submit } from '@/components/Submit';
-
-import frustratedWoman from '@/assets/images/frustratedWoman.svg';
+import { Icon } from '@/components/Icon';
 
 import styles from './SignUpFailurePage.module.css';
 import { BackAppBar } from '@/components/index.js';
@@ -26,12 +25,10 @@ export default function SignUpFailurePage() {
         <p className={styles.pageTitle}>회원가입 실패</p>
         <p className={styles.pageExplanation}>{state?.message}</p>
       </div>
+      <div className={styles.pageMiddleFrame}>
+        <Icon id='star-alert' width={231} height={217} />
+      </div>
       <div className={styles.pageBottomFrame}>
-        <img
-          src={frustratedWoman}
-          alt='frustrated woman image'
-          className={styles.img}
-        />
         <Link to='/signup'>
           <div className={styles.loginButton}>
             <Submit btnName='뒤로가기' className='right' />
diff --git a/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.module.css b/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.module.css
index 650099eb..3ca8185f 100644
--- a/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.module.css
+++ b/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.module.css
@@ -15,7 +15,7 @@
 .pageTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  margin-top: 0.875rem;
+  margin-top: 3.2rem;
 }
 
 .pageExplanation {
@@ -25,6 +25,12 @@
   margin-top: 0.875rem;
 }
 
+.pageMiddleFrame {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .pageBottomFrame {
   padding: 0 1.25rem;
   display: flex;
diff --git a/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.jsx b/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.jsx
index cb082e74..8a3b85a0 100644
--- a/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.jsx
+++ b/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.jsx
@@ -4,8 +4,6 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { Icon } from '@/components/Icon';
 import { Submit } from '@/components/Submit';
 
-import excitedWoman from '@/assets/images/excitedWoman.svg';
-
 import styles from './SignUpSuccessPage.module.css';
 
 export default function SignUpSuccessPage() {
@@ -30,11 +28,11 @@ export default function SignUpSuccessPage() {
           스노로즈 전체 서비스를 이용하실 수 있어요
         </p>
       </div>
-      <div>
-        <div className={styles.img}>
-          <img src={excitedWoman} alt='excitedWoman' />
-        </div>
+      <div className={styles.img}>
+        <Icon id='star-check' width={231} height={217} />
+      </div>
 
+      <div>
         <div className={styles.submit}>
           <Submit
             btnName='로그인하기'
diff --git a/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.module.css b/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.module.css
index 88b02d8d..abda313a 100644
--- a/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.module.css
+++ b/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.module.css
@@ -19,9 +19,10 @@
 
 .img {
   width: 100%;
+  height: fit-content;
   display: flex;
-  justify-content: flex-end;
-  padding-right: 0.813rem;
+  justify-content: center;
+  align-items: center;
 }
 
 .submit {