diff --git a/app/page.module.css b/app/(route)/main/page.module.css
similarity index 100%
rename from app/page.module.css
rename to app/(route)/main/page.module.css
diff --git a/app/(route)/main/page.tsx b/app/(route)/main/page.tsx
new file mode 100644
index 0000000..02ba5d1
--- /dev/null
+++ b/app/(route)/main/page.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import Link from 'next/link'
+import Nav from '../../_common/nav/index'
+import Title from '../../_common/text/title'
+import Search from '../../_components/search'
+import S from './page.module.css'
+
+//TODO: 주석처리 사항들에 데이터 가져오기
+function Main() {
+  return (
+    <main className={S.wrapper}>
+      <Nav />
+      <div className={S.inWrapper}>
+        <Search />
+        <div className={S.marginWrapper}>
+          <Title title="인기 많은 툴" />
+        </div>
+        <div className={S.toolCardWrapper}>
+          {/* <ToolCard
+            title=""
+            subTitle=""
+            description=""
+            toolImg=""
+          /> */}
+        </div>
+        <div className={S.rowWrapper}>
+          <Title title="검증 툴 리스트" />
+          <Link href="/list">자세히 보기</Link>
+        </div>
+        <div className={S.keyWordCardWrapper}>
+          {/* <KeyWordTool title="" subTitle="" toolImg="" /> */}
+        </div>
+      </div>
+    </main>
+  )
+}
+
+export default Main
diff --git a/app/(route)/onboard/Onboard.module.css b/app/(route)/onboard/Onboard.module.css
index ddd721c..2284acd 100644
--- a/app/(route)/onboard/Onboard.module.css
+++ b/app/(route)/onboard/Onboard.module.css
@@ -1,97 +1,100 @@
 .background {
-  background: #6c76f4;
-  width: 100%;
-  height: 100%;
-
-  overflow: hidden;
+  background: var(--purple-700);
+  display: flex;
+  flex-direction: column;
+  padding: 0 22px;
+  min-height: 100vh;
+  height: auto;
 }
 
 .wordwrap {
-  height: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
 }
+
 .wrap {
   height: 100%;
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 
 .word {
   color: #fff;
   text-align: center;
-  font-size: 36px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
+  font-size: 2.6rem;
+  font-weight: 800;
 }
 
 .smallword {
   color: #fff;
   text-align: center;
-  font-size: 20px;
-  font-style: normal;
+  font-size: 1.35rem;
   font-weight: 600;
-  line-height: normal;
+}
+
+.nonMember {
+  font-size: 0.89rem;
+  color: #fbfbfb;
 }
 
 .largeword {
   color: #fff;
   text-align: center;
-  font-size: 64px;
-  font-style: normal;
-  font-weight: 800;
-  line-height: normal;
+  font-size: 4.3rem;
+  font-weight: 700;
 }
 
-.gray {
-  color: #e8e8e8;
-}
 .blue {
   color: #183876;
 }
+
 .topmargin {
   margin-top: 100px;
 }
+
 .leftmargin {
-  margin-left: 10px;
+  margin-left: 5px;
   cursor: pointer;
+  color: white;
+  font-size: 0.93rem;
 }
-.leftmargin:hover {
-  color: #04030d;
-}
+
 .flex {
-  margin-top: 10px;
+  margin: 13px 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .intosignin {
-  width: 360px;
-  height: 60px;
-  border-radius: 7px;
-  background: #fff;
-
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 55px;
+  gap: 7px;
+  margin-top: 22px;
+  border-radius: 8px;
+  background: #fff;
+  color: #121212;
 
-  color: #04030d;
-  text-align: center;
-  font-size: 20px;
-
-  font-style: normal;
-  font-weight: 600;
-  letter-spacing: 0.1px;
-
+  font-size: 1.15rem;
+  font-weight: 700;
   cursor: pointer;
 }
 
 .intosignin:hover {
   opacity: 0.8;
+  transition: all 0.4s;
+}
+
+.img {
+  width: 430px;
+  height: 430px;
+  margin-top: 48.4px;
 }
 
 @keyframes fadeInUp {
@@ -115,20 +118,22 @@
 }
 
 .word:nth-child(2) {
-  animation-delay: 1s;
+  animation-delay: 1.5s;
 }
 
 .wrap {
   opacity: 0;
-  animation: fadeInUp 1s ease forwards;
+  animation: fadeInUp 1.6s ease forwards;
 }
+
 .wrap:nth-child(1) {
   animation-delay: 0.5s;
 }
 
 .wrap:nth-child(2) {
-  animation-delay: 1s;
+  animation-delay: 2s;
 }
+
 .wrap:nth-child(3) {
-  animation-delay: 2s;
+  animation-delay: 2mss;
 }
diff --git a/app/(route)/onboard/_components/OnBoarding.tsx b/app/(route)/onboard/_components/OnBoarding.tsx
index 50fe0ad..ad71a32 100644
--- a/app/(route)/onboard/_components/OnBoarding.tsx
+++ b/app/(route)/onboard/_components/OnBoarding.tsx
@@ -1,19 +1,19 @@
 'use client'
 
-import styles from '../Onboard.module.css'
-import rocketLogo from '../../../_assets/_images/rocketLogo.png'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
+import rocketLogo from '../../../_assets/_images/rocketLogo.png'
+import styles from '../Onboard.module.css'
 
 function Onboarding() {
   const router = useRouter()
 
-  const handleClickSignin = () => {
-    router.push('/signin')
+  const handleClickMain = () => {
+    router.push('/main')
   }
 
   const handleCilckSignup = () => {
-    router.push('/singup')
+    router.push('/signin')
   }
 
   return (
@@ -22,29 +22,28 @@ function Onboarding() {
         <p className={styles.smallword}>아이디어 검증 툴 서비스</p>
         <p className={styles.largeword}>프리무스</p>
       </div>
-      <div style={{ width: '370px', height: '370px' }}>
+      <div className={styles.img}>
         <Image
           src={rocketLogo}
-          alt="로켓로고"
+          alt="로켓 로고"
           layout="responsive"
-          width={370}
-          height={370}
+          width={430}
+          height={430}
         />
       </div>
-      <div className={styles.topmargin}>
-        <div className={styles.intosignin} onClick={handleClickSignin}>
-          아이디어 검증하러 가기
+
+      <div className={styles.intosignin} onClick={handleClickMain}>
+        아이디어 검증하러 가기
+      </div>
+      <div className={styles.flex}>
+        <div className={`${styles.smallword} ${styles.nonMember}`}>
+          아직 회원이 아니시라면?
         </div>
-        <div className={styles.flex}>
-          <div className={`${styles.smallword} ${styles.gray}`}>
-            아직 회원이 아니시라면?
-          </div>
-          <div
-            className={`${styles.smallword} ${styles.leftmargin}`}
-            onClick={handleCilckSignup}
-          >
-            회원가입
-          </div>
+        <div
+          className={`${styles.smallword} ${styles.leftmargin}`}
+          onClick={handleCilckSignup}
+        >
+          회원가입
         </div>
       </div>
     </div>
diff --git a/app/(route)/onboard/_components/WatchWord.tsx b/app/(route)/onboard/_components/WatchWord.tsx
index 2a71652..ed9f223 100644
--- a/app/(route)/onboard/_components/WatchWord.tsx
+++ b/app/(route)/onboard/_components/WatchWord.tsx
@@ -18,7 +18,7 @@ function WatchWord({ handleView }: { handleView: (params: boolean) => void }) {
   return (
     <div className={styles.wordwrap} ref={animationRef}>
       <p className={styles.word}>당신의 아이디어가</p>
-      <p className={styles.word}>로켓처럼 성장하도록</p>
+      <p className={styles.word}>로켓처럼 성장하도록.</p>
     </div>
   )
 }
diff --git a/app/(route)/search/page.tsx b/app/(route)/search/page.tsx
index 8c37175..3f50c66 100644
--- a/app/(route)/search/page.tsx
+++ b/app/(route)/search/page.tsx
@@ -1,6 +1,6 @@
 import SearchBar from '../../_components/search/index'
-import CommonS from '../../page.module.css'
 import Nav from '../list/_components/nav'
+import CommonS from '../main/page.module.css'
 
 //TODO: 검색 결과 카드(toolCard) 가져오기
 function Search() {
diff --git a/app/(route)/signin/Signin.module.css b/app/(route)/signin/Signin.module.css
index 08624b6..e935a51 100644
--- a/app/(route)/signin/Signin.module.css
+++ b/app/(route)/signin/Signin.module.css
@@ -1,85 +1,72 @@
 .background {
-  background: #6c76f4;
-  width: 100%;
-  height: 100%;
-
+  background: var(--purple-700);
   display: flex;
   flex-direction: column;
-  align-items: center;
+  padding: 0 22px;
+  min-height: 100vh;
+  height: auto;
 }
 
 .wordwrap {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-top: 140px;
+  margin-top: 150px;
 }
 
 .largeword {
   color: #fff;
-  font-size: 29px;
-  font-style: normal;
-  font-weight: 600;
+  font-size: 2.2rem;
+  font-weight: 700;
   line-height: normal;
 }
 
 .smallword {
   color: #fff;
   font-size: 18px;
-  font-style: normal;
   font-weight: 300;
-  line-height: normal;
+  margin-top: 3px;
 }
 
 .img {
-  width: 370px;
-  height: 370px;
-  margin-top: 10px;
+  width: 400px;
+  height: 400px;
+  margin-top: 50px;
+}
+
+.icon {
+  width: 25px;
+  height: 25px;
 }
 
 .kakaologin {
-  display: inline-flex;
-  height: 60px;
-  padding: 16.5px 95px 15px 94px;
+  display: flex;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
+  height: 55px;
   gap: 7px;
-  flex-shrink: 0;
-  margin-top: 10px;
-
+  margin-top: 29px;
   border-radius: 8px;
   background: #fee500;
-
   color: #1a1a1a;
-
-  text-align: center;
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 600;
-
+  font-size: 1.12rem;
+  font-weight: 500;
   cursor: pointer;
 }
-.kakaologin:hover {
-  opacity: 0.7;
-}
 
 .nonmember {
-  width: 160px;
-  height: 55px;
-  flex-shrink: 0;
-
+  display: flex;
+  justify-content: center;
+  align-items: center;
   color: #fff;
-
-  font-size: 15px;
-  font-style: normal;
+  font-size: 0.9rem;
   font-weight: 600;
-  line-height: normal;
-  text-align: center;
-
-  margin-top: 10px;
+  margin-top: 13px;
   cursor: pointer;
+  padding-bottom: 20px;
 }
 
 .nonmember:hover {
   opacity: 0.7;
+  transition: all 0.28s;
 }
diff --git a/app/(route)/signin/_components/Login.tsx b/app/(route)/signin/_components/Login.tsx
index 43da119..24f41cc 100644
--- a/app/(route)/signin/_components/Login.tsx
+++ b/app/(route)/signin/_components/Login.tsx
@@ -1,10 +1,12 @@
 'use client'
 
-import rocketLogo from '../../../_assets/_images/rocketLogo.png'
+import { motion, useAnimation } from 'framer-motion'
 import Image from 'next/image'
-import styles from '../Signin.module.css'
-import { RiKakaoTalkFill } from 'react-icons/ri'
 import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+import { RiKakaoTalkFill } from 'react-icons/ri'
+import rocketLogo from '../../../_assets/_images/rocketLogo.png'
+import styles from '../Signin.module.css'
 
 function Login() {
   const router = useRouter()
@@ -12,6 +14,25 @@ function Login() {
   const handleClickNonMember = () => {
     router.push('/main')
   }
+  const controls = useAnimation()
+
+  const animateDiagonal = async () => {
+    await controls.start({
+      x: '25px',
+      y: '-28px',
+      transition: { duration: 5 },
+    })
+    await controls.start({
+      x: '-20px',
+      y: '-10px',
+      transition: { duration: 5 },
+    })
+    animateDiagonal()
+  }
+
+  useEffect(() => {
+    animateDiagonal()
+  }, [])
 
   const handleClicksignin = () => {
     router.push('/main')
@@ -20,20 +41,26 @@ function Login() {
   return (
     <div className={styles.background}>
       <div className={styles.wordwrap}>
-        <p className={styles.largeword}>안녕하세요</p>
-        <p className={styles.largeword}>프리무스입니다</p>
-        <p className={styles.smallword}>서비스 이용을 위해서 로그인 해주세요</p>
+        <p className={styles.largeword}>안녕하세요.</p>
+        <p className={styles.largeword}>프리무스입니다.</p>
+        <p className={styles.smallword}>
+          서비스 이용을 위해서 로그인 해주세요.
+        </p>
       </div>
 
-      <div className={styles.img}>
+      <motion.div
+        className={styles.img}
+        animate={controls}
+        style={{ position: 'relative' }}
+      >
         <Image
           src={rocketLogo}
-          alt="로켓로고"
+          alt="로켓 로고"
           layout="responsive"
-          width={370}
-          height={370}
+          width={400}
+          height={400}
         />
-      </div>
+      </motion.div>
 
       <div className={styles.kakaologin} onClick={handleClicksignin}>
         <RiKakaoTalkFill className={styles.icon} /> 카카오로 시작하기
diff --git a/app/(route)/signin/page.tsx b/app/(route)/signin/page.tsx
index c869103..5d0a888 100644
--- a/app/(route)/signin/page.tsx
+++ b/app/(route)/signin/page.tsx
@@ -1,4 +1,5 @@
 import Login from './_components/Login'
+
 function Signin() {
   return <Login />
 }
diff --git a/app/(route)/verification/ibulsin/_components/CancelBtn/index.tsx b/app/(route)/verification/ibulsin/_components/CancelBtn/index.tsx
index 7ed76f0..af1656a 100644
--- a/app/(route)/verification/ibulsin/_components/CancelBtn/index.tsx
+++ b/app/(route)/verification/ibulsin/_components/CancelBtn/index.tsx
@@ -1,9 +1,8 @@
 'use client'
 
-import React from 'react'
-import S from './index.module.css'
-import { MdChevronLeft } from 'react-icons/md'
 import { useRouter } from 'next/navigation'
+import { MdChevronLeft } from 'react-icons/md'
+import S from './index.module.css'
 
 function CancelBtn() {
   const router = useRouter()
@@ -14,7 +13,7 @@ function CancelBtn() {
     )
 
     if (verify) {
-      router.push('/')
+      router.push('/main')
     }
   }
 
diff --git a/app/_assets/_images/rocketLogo.png b/app/_assets/_images/rocketLogo.png
index 38279ad..e3c07c9 100644
Binary files a/app/_assets/_images/rocketLogo.png and b/app/_assets/_images/rocketLogo.png differ
diff --git a/app/_common/nav/index.tsx b/app/_common/nav/index.tsx
index 64756e1..db33b46 100644
--- a/app/_common/nav/index.tsx
+++ b/app/_common/nav/index.tsx
@@ -7,7 +7,7 @@ import S from './nav.module.css'
 function Nav() {
   return (
     <div className={S.nav}>
-      <Link href="/">
+      <Link href="/main">
         <Image src={logo} alt="로고" width={100} height={100} />
       </Link>
 
diff --git a/app/_style/globals.css b/app/_style/globals.css
index b07a7bc..bd4d9ff 100644
--- a/app/_style/globals.css
+++ b/app/_style/globals.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap');
+
 * {
   margin: 0;
   padding: 0;
@@ -8,9 +10,9 @@
 html,
 body {
   color: black;
-  -ms-overflow-style: none; 
-  scrollbar-width: none; 
-  background-color: rgb(245,245,245);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  background-color: rgb(245, 245, 245);
 }
 
 button,
@@ -23,4 +25,3 @@ a {
 ::-webkit-scrollbar {
   display: none;
 }
-
diff --git a/app/page.tsx b/app/page.tsx
index 700186a..7908728 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,39 +1,16 @@
 'use client'
 
-import Link from 'next/link'
-import Nav from './_common/nav'
-import Title from './_common/text/title'
-import Search from './_components/search'
-import S from './page.module.css'
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
 
-//TODO: 주석처리 사항들에 데이터 가져오기
-function Home() {
-  return (
-    <main className={S.wrapper}>
-      <Nav />
-      <div className={S.inWrapper}>
-        <Search />
-        <div className={S.marginWrapper}>
-          <Title title="인기 많은 툴" />
-        </div>
-        <div className={S.toolCardWrapper}>
-          {/* <ToolCard
-            title=""
-            subTitle=""
-            description=""
-            toolImg=""
-          /> */}
-        </div>
-        <div className={S.rowWrapper}>
-          <Title title="검증 툴 리스트" />
-          <Link href="/list">자세히 보기</Link>
-        </div>
-        <div className={S.keyWordCardWrapper}>
-          {/* <KeyWordTool title="" subTitle="" toolImg="" /> */}
-        </div>
-      </div>
-    </main>
-  )
+function Index() {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.push('/onboard')
+  }, [])
+
+  return null
 }
 
-export default Home
+export default Index
diff --git a/package-lock.json b/package-lock.json
index bcc6b02..036ceb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,8 @@
         "react-dom": "^18",
         "react-hook-form": "^7.51.2",
         "react-icons": "^5.0.1",
-        "recoil": "^0.7.7"
+        "recoil": "^0.7.7",
+        "sharp": "^0.33.3"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -57,6 +58,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.1.1.tgz",
+      "integrity": "sha512-3bfqkzuR1KLx57nZfjr2NLnFOobvyS0aTszaEGCGqmYMVDRaGvgIZbjGSV/MHSSmLgQ/b9JFHQ5xm5WRZYd+XQ==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -146,6 +156,437 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.3.tgz",
+      "integrity": "sha512-FaNiGX1MrOuJ3hxuNzWgsT/mg5OHG/Izh59WW2mk1UwYHUwtfbhk5QNKYZgxf0pLOhx9ctGiGa2OykD71vOnSw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.3.tgz",
+      "integrity": "sha512-2QeSl7QDK9ru//YBT4sQkoq7L0EAJZA3rtV+v9p8xTKl4U1bUqTIaCnoC7Ctx2kCjQgwFXDasOtPTCT8eCTXvw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz",
+      "integrity": "sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=11",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.2.tgz",
+      "integrity": "sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=10.13",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.2.tgz",
+      "integrity": "sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.2.tgz",
+      "integrity": "sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.2.tgz",
+      "integrity": "sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.2.tgz",
+      "integrity": "sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.2.tgz",
+      "integrity": "sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.2.tgz",
+      "integrity": "sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.3.tgz",
+      "integrity": "sha512-Q7Ee3fFSC9P7vUSqVEF0zccJsZ8GiiCJYGWDdhEjdlOeS9/jdkyJ6sUSPj+bL8VuOYFSbofrW0t/86ceVhx32w==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.3.tgz",
+      "integrity": "sha512-Zf+sF1jHZJKA6Gor9hoYG2ljr4wo9cY4twaxgFDvlG0Xz9V7sinsPp8pFd1XtlhTzYo0IhDbl3rK7P6MzHpnYA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.3.tgz",
+      "integrity": "sha512-vFk441DKRFepjhTEH20oBlFrHcLjPfI8B0pMIxGm3+yilKyYeHEVvrZhYFdqIseSclIqbQ3SnZMwEMWonY5XFA==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.3.tgz",
+      "integrity": "sha512-Q4I++herIJxJi+qmbySd072oDPRkCg/SClLEIDh5IL9h1zjhqjv82H0Seupd+q2m0yOfD+/fJnjSoDFtKiHu2g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.3.tgz",
+      "integrity": "sha512-qnDccehRDXadhM9PM5hLvcPRYqyFCBN31kq+ErBSZtZlsAc1U4Z85xf/RXv1qolkdu+ibw64fUDaRdktxTNP9A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.3.tgz",
+      "integrity": "sha512-Jhchim8kHWIU/GZ+9poHMWRcefeaxFIs9EBqf9KtcC14Ojk6qua7ghKiPs0sbeLbLj/2IGBtDcxHyjCdYWkk2w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.3.tgz",
+      "integrity": "sha512-68zivsdJ0koE96stdUfM+gmyaK/NcoSZK5dV5CAjES0FUXS9lchYt8LAB5rTbM7nlWtxaU/2GON0HVN6/ZYJAQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.1.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.3.tgz",
+      "integrity": "sha512-CyimAduT2whQD8ER4Ux7exKrtfoaUiVr7HG0zZvO0XTFn2idUWljjxv58GxNTkFb8/J9Ub9AqITGkJD6ZginxQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.3.tgz",
+      "integrity": "sha512-viT4fUIDKnli3IfOephGnolMzhz5VaTvDRkYqtZxOMIoMQ4MrAziO7pT1nVnOt2FAm7qW5aa+CCc13aEY6Le0g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1155,11 +1596,22 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1170,8 +1622,16 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
@@ -1341,6 +1801,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2730,6 +3198,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -4051,7 +4524,6 @@
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
       "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -4066,7 +4538,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -4106,6 +4577,45 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/sharp": {
+      "version": "0.33.3",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.3.tgz",
+      "integrity": "sha512-vHUeXJU1UvlO/BNwTpT0x/r53WkLUVxrmb5JTgW92fdFCFk0ispLMAeu/jPO2vjkXM1fYUi3K7/qcLF47pwM1A==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.0"
+      },
+      "engines": {
+        "libvips": ">=8.15.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.3",
+        "@img/sharp-darwin-x64": "0.33.3",
+        "@img/sharp-libvips-darwin-arm64": "1.0.2",
+        "@img/sharp-libvips-darwin-x64": "1.0.2",
+        "@img/sharp-libvips-linux-arm": "1.0.2",
+        "@img/sharp-libvips-linux-arm64": "1.0.2",
+        "@img/sharp-libvips-linux-s390x": "1.0.2",
+        "@img/sharp-libvips-linux-x64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
+        "@img/sharp-linux-arm": "0.33.3",
+        "@img/sharp-linux-arm64": "0.33.3",
+        "@img/sharp-linux-s390x": "0.33.3",
+        "@img/sharp-linux-x64": "0.33.3",
+        "@img/sharp-linuxmusl-arm64": "0.33.3",
+        "@img/sharp-linuxmusl-x64": "0.33.3",
+        "@img/sharp-wasm32": "0.33.3",
+        "@img/sharp-win32-ia32": "0.33.3",
+        "@img/sharp-win32-x64": "0.33.3"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4157,6 +4667,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4823,8 +5341,7 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
diff --git a/package.json b/package.json
index e194c34..305fbea 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.2",
     "react-icons": "^5.0.1",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "sharp": "^0.33.3"
   },
   "devDependencies": {
     "@types/node": "^20",