diff --git a/components/Input.tsx b/components/Input.tsx
index d017a63..dfee754 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -59,6 +59,17 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
       return type;
     };
 
+    const getAutoComplete = () => {
+      switch (type) {
+        case 'password':
+          return 'current-password';
+        case 'passwordConfirm':
+          return 'new-password';
+        default:
+          return undefined;
+      }
+    };
+
     const togglePasswordVisibility = () => {
       setShowPassword(!showPassword);
     };
@@ -117,6 +128,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
                 ? new Date().toISOString().split('T')[0]
                 : undefined
             }
+            autoComplete={getAutoComplete()}
           />
           {(type === 'password' || type === 'passwordConfirm') && (
             <button
diff --git a/package-lock.json b/package-lock.json
index 58512ff..f06f26c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@tanstack/react-query-devtools": "^5.62.8",
         "axios": "^1.7.9",
         "date-fns": "^4.1.0",
+        "framer-motion": "^11.15.0",
         "next": "^15.1.2",
         "postcss-nesting": "^13.0.1",
         "react": "^19.0.0",
@@ -3277,6 +3278,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.15.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz",
+      "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.14.3",
+        "motion-utils": "^11.14.3",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4428,6 +4456,18 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
+      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==",
+      "license": "MIT"
+    },
+    "node_modules/motion-utils": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
+      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 342df89..08f5242 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@tanstack/react-query-devtools": "^5.62.8",
     "axios": "^1.7.9",
     "date-fns": "^4.1.0",
+    "framer-motion": "^11.15.0",
     "next": "^15.1.2",
     "postcss-nesting": "^13.0.1",
     "react": "^19.0.0",
diff --git a/pages/index.tsx b/pages/index.tsx
index d81ed97..0efd348 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,8 @@
 import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
+import { motion } from 'framer-motion';
+import { Fragment } from 'react';
 
 import Button from '@/components/Button';
 import Footers from '@/components/Footers';
@@ -60,60 +62,90 @@ export default function LandingPage() {
               onClick={handleButtonClick}
               variant="dark"
               size="large"
-              className="mb-[54px] font-['Pretendard'] mo:mb-[44px] mo:text-20b"
+              className="mb-[54px] w-[170px] font-['Pretendard'] mo:mb-[44px] mo:text-20b"
             >
-              {isAuthenticated && profile ? '내 위키 보러가기' : '위키 만들기'}
+              {isAuthenticated && profile ? '내 위키 보기' : '위키 만들기'}
             </Button>
-            <Image
-              src="/images/img-wiki.png"
-              alt="위키 이미지"
-              width={498}
-              height={590}
-              className="h-auto object-contain mo:w-[336px]"
-              priority
-            />
+            <motion.div
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.7, delay: 0.4, ease: 'easeOut' }}
+            >
+              <Image
+                src="/images/img-wiki.png"
+                alt="위키 이미지"
+                width={498}
+                height={590}
+                className="size-auto object-contain mo:h-auto mo:w-[336px]"
+                priority
+              />
+            </motion.div>
           </div>
         </section>
-
         {/* 친구의 위키 */}
         <section className={`mt-[-2px] bg-[#474d66] ${mainStyled.padding}`}>
-          <div
-            className={`flex items-center justify-center gap-10 mo:gap-[10px] ta:gap-5 ${mainStyled.container}`}
+          <motion.div
+            initial={{ opacity: 0, y: 40 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.3 }}
+            transition={{ duration: 0.7, delay: 0.4, ease: 'easeOut' }}
           >
-            <div>
-              <SectionTitle
-                caption="WRITE"
-                className="mb-[60px] text-[#fff] mo:mb-[30px] ta:mb-[40px]"
-                title={
-                  <>
-                    친구의 위키,
-                    <br />
-                    직접 작성해 봐요
-                  </>
-                }
-                align="left"
-              />
+            <div
+              className={`flex items-center justify-center gap-10 mo:gap-[10px] ta:gap-5 ${mainStyled.container}`}
+            >
+              <div>
+                <SectionTitle
+                  caption="WRITE"
+                  className="mb-[60px] text-[#fff] mo:mb-[30px] ta:mb-[40px]"
+                  title={
+                    <>
+                      친구의 위키,
+                      <br />
+                      직접 작성해 봐요
+                    </>
+                  }
+                  align="left"
+                />
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  whileInView={{
+                    opacity: 1,
+                    scale: 1,
+                    y: [0, -10, 0], // 위아래로 부드럽게 움직임
+                  }}
+                  viewport={{ once: true, amount: 0.3 }}
+                  transition={{
+                    duration: 2,
+                    y: {
+                      duration: 2,
+                      repeat: Infinity,
+                      ease: 'easeInOut',
+                    },
+                  }}
+                >
+                  <Image
+                    src="/images/img-write.png"
+                    alt="타이핑 이미지"
+                    width={364}
+                    height={681}
+                    className="h-[681px] w-[364px] object-contain mo:h-[249px] mo:w-[133px] ta:h-[490px] ta:w-[262px]"
+                    priority
+                  />
+                </motion.div>
+              </div>
+
               <Image
-                src="/images/img-write.png"
-                alt="타이핑 이미지"
-                width={364}
+                src="/images/img-text-dark.png"
+                alt="텍스트 이미지"
+                width={520}
                 height={681}
-                className="h-auto object-contain mo:w-[133px] ta:w-[262px]"
+                className="size-auto object-contain mo:w-[192px] ta:w-[365px]"
                 priority
               />
-            </div>
-
-            <Image
-              src="/images/img-text-dark.png"
-              alt="텍스트 이미지"
-              width={520}
-              height={681}
-              className="h-auto object-contain mo:w-[192px] ta:w-[365px]"
-              priority
-            />
-          </div>
-        </section>
-
+            </div>{' '}
+          </motion.div>
+        </section>{' '}
         {/* share */}
         <section className={mainStyled.padding}>
           <SectionTitle
@@ -129,82 +161,154 @@ export default function LandingPage() {
             }
           />
 
-          <Image
-            src="/images/img-belt.png"
-            alt="벨트 이미지"
-            width={1920}
-            height={200}
-            className="w-full object-cover"
-            priority
-          />
-        </section>
-
-        {/* view */}
-        <section className={`bg-blue-50 ${mainStyled.padding} `}>
-          <div className={mainStyled.container}>
-            <SectionTitle
-              caption="VIEW"
-              className="mb-[120px] mo:mb-[40px] ta:mb-[80px]"
-              title={
-                <>
-                  친구들이 달아준
-                  <br />
-                  내용을 확인해 봐요
-                </>
-              }
-              align="left"
-            />
+          <div className="relative w-full overflow-hidden">
             <div
-              className="grid gap-10 mo:gap-[0.7rem] ta:gap-8"
+              className="animate-infinite-scroll flex gap-[70px] mo:gap-[10px] ta:gap-[20px]"
               style={{
-                gridTemplateAreas: `
-                "image-comment image-comment"
-                "image-notification image-notifications"
-              `,
-                gridTemplateColumns: '297fr 575fr',
+                width: 'max-content',
               }}
             >
-              <Image
-                src="/images/img-text-green.png"
-                className="h-auto w-full object-cover"
-                alt="텍스트 이미지"
-                width={913}
-                height={309}
-                style={{ gridArea: 'image-comment' }}
-              />
-              <Image
-                src="/images/img-bell.png"
-                alt="벨 이미지"
-                width={297}
-                height={297}
-                className="size-full rounded-2xl object-cover"
-                style={{ gridArea: 'image-notification' }}
-              />
-              <Image
-                src="/images/img-text-white.png"
-                alt="알림 이미지"
-                width={575}
-                height={298}
-                className="size-full rounded-xl object-cover"
-                style={{ gridArea: 'image-notifications' }}
-              />
+              {[1, 2, 3, 4, 5, 6].map((set) => (
+                <Fragment key={`set-${set}`}>
+                  <Image
+                    key={`belt1-${set}`}
+                    src="/images/img-belt1.png"
+                    alt="벨트 이미지1"
+                    width={360}
+                    height={360}
+                    className="size-[360px] object-cover mo:size-[76px] ta:size-[147px]"
+                    priority
+                  />
+                  <Image
+                    key={`belt2-${set}`}
+                    src="/images/img-belt2.png"
+                    alt="벨트 이미지2"
+                    width={360}
+                    height={360}
+                    className="size-[360px] object-cover mo:size-[76px] ta:size-[147px]"
+                    priority
+                  />
+                  <Image
+                    key={`belt3-${set}`}
+                    src="/images/img-belt3.png"
+                    alt="벨트 이미지3"
+                    width={360}
+                    height={360}
+                    className="size-[360px] object-cover mo:size-[76px] ta:size-[147px]"
+                    priority
+                  />
+                  <Image
+                    key={`belt4-${set}`}
+                    src="/images/img-belt4.png"
+                    alt="벨트 이미지4"
+                    width={360}
+                    height={360}
+                    className="size-[360px] object-cover mo:size-[76px] ta:size-[147px]"
+                    priority
+                  />
+                </Fragment>
+              ))}
             </div>
           </div>
         </section>
-
+        {/* view */}
+        <section className={`bg-blue-50 ${mainStyled.padding} `}>
+          <motion.div
+            initial={{ opacity: 0, y: 50 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.3 }}
+            transition={{ duration: 0.7, delay: 0.4, ease: 'easeOut' }}
+          >
+            <div className={mainStyled.container}>
+              <SectionTitle
+                caption="VIEW"
+                className="mb-[120px] mo:mb-[40px] ta:mb-[80px]"
+                title={
+                  <>
+                    친구들이 달아준
+                    <br />
+                    내용을 확인해 봐요
+                  </>
+                }
+                align="left"
+              />
+              <div
+                className="grid gap-10 mo:gap-[0.7rem] ta:gap-8"
+                style={{
+                  gridTemplateAreas: `
+                "image-comment image-comment"
+                "image-notification image-notifications"
+              `,
+                  gridTemplateColumns: '297fr 575fr',
+                }}
+              >
+                <Image
+                  src="/images/img-text-green.png"
+                  className="h-auto w-full object-cover"
+                  alt="텍스트 이미지"
+                  width={913}
+                  height={309}
+                  style={{ gridArea: 'image-comment' }}
+                  priority
+                />
+                <div
+                  className="relative size-full rounded-2xl bg-purple-100"
+                  style={{ gridArea: 'image-notification' }}
+                >
+                  <motion.div
+                    animate={{
+                      rotate: [-10, 10, -10],
+                    }}
+                    transition={{
+                      duration: 0.5,
+                      repeat: Infinity,
+                      ease: 'easeInOut',
+                    }}
+                    className="size-full"
+                  >
+                    <Image
+                      src="/images/img-bell.png"
+                      alt="벨 이미지"
+                      width={297}
+                      height={297}
+                      className="size-full object-cover"
+                      priority
+                    />
+                  </motion.div>
+                </div>
+                <Image
+                  src="/images/img-text-white.png"
+                  alt="알림 이미지"
+                  width={575}
+                  height={298}
+                  className="size-full rounded-xl object-cover"
+                  style={{ gridArea: 'image-notifications' }}
+                  priority
+                />
+              </div>
+            </div>{' '}
+          </motion.div>
+        </section>
         {/* final */}
         <section className={`bg-[#474d66] text-center ${mainStyled.padding}`}>
-          <h2 className="text-[60px] font-bold leading-none text-white mo:text-[30px]">
-            나만의 위키 만들어 보기
-          </h2>
-          <Button
-            onClick={handleButtonClick}
-            variant="light"
-            size="large"
-            className="mt-[40px] font-['Pretendard'] mo:h-[54px] mo:w-[169px] mo:text-20b"
+          <motion.div
+            initial={{ opacity: 0, y: 40 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.3 }}
+            transition={{ duration: 0.7, delay: 0.4, ease: 'easeOut' }}
           >
-            지금 시작하기
-          </Button>
+            <h2 className="text-[60px] font-bold leading-none text-white mo:text-[30px]">
+              나만의 위키 만들어 보기
+            </h2>
+            <Button
+              onClick={handleButtonClick}
+              variant="light"
+              size="large"
+              className="mt-[40px] font-['Pretendard'] mo:h-[54px] mo:w-[169px] mo:text-20b"
+            >
+              지금 시작하기
+            </Button>{' '}
+          </motion.div>
         </section>
       </main>
 
diff --git a/pages/login/index.tsx b/pages/login/index.tsx
index 5710186..6e732e1 100644
--- a/pages/login/index.tsx
+++ b/pages/login/index.tsx
@@ -66,7 +66,7 @@ export default function Login() {
   };
 
   return (
-    <div className="flex min-h-screen justify-center pt-[233px] mo:pt-[203px]">
+    <div className="flex min-h-screen justify-center pt-[233px] mo:px-[20px] mo:pt-[203px]">
       <form onSubmit={handleSubmit} className="w-[400px] mo:w-[355px]">
         <div className="flex flex-col items-center gap-[24px]">
           <h2 className="mb-[40px] text-center text-2xl font-semibold text-gray-500 mo:mb-[8px] ta:mb-[24px]">
diff --git a/pages/mypage/index.tsx b/pages/mypage/index.tsx
index c67a185..5cbbba5 100644
--- a/pages/mypage/index.tsx
+++ b/pages/mypage/index.tsx
@@ -155,15 +155,16 @@ function MyPage(): React.ReactElement {
   const inputContainerStyle = 'flex w-full flex-col gap-[8px]';
 
   return (
-    <div className="flex min-h-screen justify-center pb-0 pt-[221px] mo:pb-[80px] mo:pt-[108px]">
-      <div className="flex w-full flex-col items-center gap-[32px]">
-        <h2 className="mb-[32px] text-center text-24sb text-gray-500">
+    <div className="flex min-h-screen justify-center pt-[221px] mo:px-[20px] mo:pb-[80px] mo:pt-[108px]">
+      <div className="w-[400px] mo:w-[355px]">
+        <h2 className="mb-[64px] text-center text-24sb text-gray-500">
           계정설정
         </h2>
+
         {/* 비밀번호 변경 폼 */}
         <form
           onSubmit={handlePasswordSubmit}
-          className="flex w-[400px] flex-col items-center gap-[32px] mo:w-[335px]"
+          className="mb-[32px] flex w-full flex-col items-center gap-[32px]"
         >
           <div className={inputSectionStyle}>
             <div className={inputContainerStyle}>
@@ -205,13 +206,14 @@ function MyPage(): React.ReactElement {
             </div>
           </div>
         </form>
+
         {/* 위키가 없을 때만 구분선과 위키 생성 폼 표시 */}
         {!profile?.code && (
           <>
-            <div className="w-[400px] border-b border-gray-200 mo:w-[335px]"></div>
+            <div className="w-full border-b border-gray-200"></div>
             <form
               onSubmit={handleWikiSubmit}
-              className="flex w-[400px] flex-col items-center gap-[32px] mo:w-[335px]"
+              className="mt-[32px] flex w-full flex-col items-center gap-[32px]"
             >
               <div className={inputSectionStyle}>
                 <div className={inputContainerStyle}>
@@ -231,7 +233,6 @@ function MyPage(): React.ReactElement {
                     onChange={handleAnswerChange}
                     placeholder="답을 입력해 주세요"
                   />
-
                   <Button
                     type="submit"
                     disabled={!isWikiFormValid}
diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
index 17cb91b..ae49024 100644
--- a/pages/signup/index.tsx
+++ b/pages/signup/index.tsx
@@ -84,7 +84,7 @@ function SignUp() {
   const isFormValid = Object.values(validFields).every(Boolean);
 
   return (
-    <div className="flex min-h-screen justify-center pt-[233px] mo:pt-[108px]">
+    <div className="flex min-h-screen justify-center pt-[233px] mo:px-[20px] mo:pb-[60px] mo:pt-[108px]">
       <form onSubmit={handleSubmit} className="w-[400px] mo:w-[355px]">
         <div className="flex flex-col items-center gap-[24px]">
           <h2 className="mb-[40px] text-center text-24sb text-gray-500 mo:mb-[8px] ta:mb-[24px]">
diff --git a/public/images/img-bell.png b/public/images/img-bell.png
index 49cd061..a8d63b0 100644
Binary files a/public/images/img-bell.png and b/public/images/img-bell.png differ
diff --git a/public/images/img-belt.png b/public/images/img-belt.png
deleted file mode 100644
index 864f169..0000000
Binary files a/public/images/img-belt.png and /dev/null differ
diff --git a/public/images/img-belt1.png b/public/images/img-belt1.png
new file mode 100644
index 0000000..be8fbbc
Binary files /dev/null and b/public/images/img-belt1.png differ
diff --git a/public/images/img-belt2.png b/public/images/img-belt2.png
new file mode 100644
index 0000000..e5d4a08
Binary files /dev/null and b/public/images/img-belt2.png differ
diff --git a/public/images/img-belt3.png b/public/images/img-belt3.png
new file mode 100644
index 0000000..3fb77bf
Binary files /dev/null and b/public/images/img-belt3.png differ
diff --git a/public/images/img-belt4.png b/public/images/img-belt4.png
new file mode 100644
index 0000000..ff47aec
Binary files /dev/null and b/public/images/img-belt4.png differ
diff --git a/public/images/img-text-green.png b/public/images/img-text-green.png
index 95a9762..8eebb1d 100644
Binary files a/public/images/img-text-green.png and b/public/images/img-text-green.png differ
diff --git a/public/images/img-text-white.png b/public/images/img-text-white.png
index 94ed009..c1431cb 100644
Binary files a/public/images/img-text-white.png and b/public/images/img-text-white.png differ
diff --git a/styles/globals.css b/styles/globals.css
index ed81516..e2283d6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -191,6 +191,19 @@ body {
   @apply transition-all hover:scale-[1.02] hover:bg-gray-100 hover:shadow-xl;
 }
 
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(-100% / 2));
+  }
+}
+
+.animate-infinite-scroll {
+  animation: scroll 20s linear infinite;
+}
+
 .downFadein {
   @apply animate-pcFadeIn tamo:animate-tamoFadeIn;
 }