diff --git a/webapp/src/components/Footer/Footer.style.js b/webapp/src/components/Footer/Footer.style.js
index 677bf91a..0b8bc92f 100644
--- a/webapp/src/components/Footer/Footer.style.js
+++ b/webapp/src/components/Footer/Footer.style.js
@@ -23,7 +23,7 @@ export const InformationBox = styled.ul`
     ${({ theme: { fonts } }) => fonts.korean.default};
     > span:not(:first-child) {
       display: inline-flex;
-      width: 98px;
+      width: 110px;
     }
     > a {
       &:hover {
@@ -38,3 +38,7 @@ export const Name = styled.span`
   display: inline-flex;
   width: 64px;
 `;
+
+export const Service_info = styled.span`
+  color: ${({ theme: { colors } }) => colors.greyScale.guide};
+`;
diff --git a/webapp/src/components/Footer/index.jsx b/webapp/src/components/Footer/index.jsx
index 47970928..34c2d6d2 100644
--- a/webapp/src/components/Footer/index.jsx
+++ b/webapp/src/components/Footer/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CREATOR_INFO } from 'constant/main.constant';
+import { CREATOR_INFO, SERVICE_INFO } from 'constant/main.constant';
 import * as S from './Footer.style';
 
 export default function Footer(props) {
@@ -16,6 +16,12 @@ export default function Footer(props) {
             </a>
           </li>
         ))}
+        <br />
+        {SERVICE_INFO.map(({ text }) => (
+          <li key={text}>
+            <S.Service_info>{text}</S.Service_info>
+          </li>
+        ))}
       </S.InformationBox>
     </S.Container>
   );
diff --git a/webapp/src/components/GlobalNavigation/GlobalNavigation.style.js b/webapp/src/components/GlobalNavigation/GlobalNavigation.style.js
index cb1ab2e9..fd5bdcdf 100644
--- a/webapp/src/components/GlobalNavigation/GlobalNavigation.style.js
+++ b/webapp/src/components/GlobalNavigation/GlobalNavigation.style.js
@@ -104,11 +104,20 @@ export const UserName = styled.div`
 export const UserInfoDropdown = {
   overlayStyle: css`
     position: absolute;
+    display: flex;
+    align-items: center;
     top: 64px;
     right: -10px;
   `,
   contentStyle: css`
-    height: 135px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 200px;
+    height: 250px;
+    gap: 20%;
+    border-color: ${({ theme: { colors } }) => colors.primary.normal};
     ${({ theme: { fonts } }) => fonts.korean.emphasis};
   `,
 };
@@ -117,3 +126,19 @@ export const AssignListButton = css`
   width: 99px;
   height: 35px;
 `;
+
+export const LogoutButton = css`
+  width: 99px;
+  cursor: pointer;
+`;
+
+export const ProfileImg = css`
+  width: 80px;
+  height: 80px;
+`;
+export const Edit = styled.div`
+  display: absolute;
+  width: 24px;
+  right: -60px;
+  cursor: pointer;
+`;
diff --git a/webapp/src/components/GlobalNavigation/LoginNav.jsx b/webapp/src/components/GlobalNavigation/LoginNav.jsx
index d7cc541e..97c598ae 100644
--- a/webapp/src/components/GlobalNavigation/LoginNav.jsx
+++ b/webapp/src/components/GlobalNavigation/LoginNav.jsx
@@ -49,6 +49,7 @@ export default function LoginNav({ userInfo }) {
           isDropdownOpen={isDropdownOpen}
           shouldCloseDropdown={shouldCloseDropdown}
           closeDropdown={closeDropdown}
+          userInfo={userInfo}
         />
       </S.AssignList>
     </S.BoardList>
diff --git a/webapp/src/components/GlobalNavigation/UserInfoDropdown.jsx b/webapp/src/components/GlobalNavigation/UserInfoDropdown.jsx
index 5dfd0d0f..72429eed 100644
--- a/webapp/src/components/GlobalNavigation/UserInfoDropdown.jsx
+++ b/webapp/src/components/GlobalNavigation/UserInfoDropdown.jsx
@@ -4,14 +4,25 @@ import { useNavigate } from 'react-router-dom';
 import Dropdown from 'components/Common/Dropdown';
 import { ROUTE } from 'constant/route.constant';
 import useAuthService from 'hooks/useAuthService';
+import Button from 'components/Common/Button';
+import Image from 'components/Common/Image';
+import { loggedUserType } from 'types/user.type';
+import Divider from 'components/Common/Divider';
+import CogEightToothSvg from 'assets/icons/CogEightToothSvg';
 import * as S from './GlobalNavigation.style';
 
 UserInfoDropdown.propTypes = {
   isDropdownOpen: PropTypes.bool.isRequired,
   shouldCloseDropdown: PropTypes.func.isRequired,
   closeDropdown: PropTypes.func.isRequired,
+  userInfo: loggedUserType.isRequired,
 };
-export default function UserInfoDropdown({ isDropdownOpen, shouldCloseDropdown, closeDropdown }) {
+export default function UserInfoDropdown({
+  isDropdownOpen,
+  shouldCloseDropdown,
+  closeDropdown,
+  userInfo,
+}) {
   const navigate = useNavigate();
   const { handleDeleteUserInfo } = useAuthService();
   const onClickLogout = async () => {
@@ -21,6 +32,7 @@ export default function UserInfoDropdown({ isDropdownOpen, shouldCloseDropdown,
     navigate(link);
     closeDropdown();
   };
+  const { nickname, profileImg } = userInfo;
   return (
     <Dropdown
       isDropdownOpen={isDropdownOpen}
@@ -29,10 +41,21 @@ export default function UserInfoDropdown({ isDropdownOpen, shouldCloseDropdown,
       customStyle={S.UserInfoDropdown}
     >
       <ul>
-        <S.Link onClick={() => onClickLinkLi(ROUTE.MY_POST)}>내 작성글</S.Link>
-        <S.Link onClick={() => onClickLinkLi(ROUTE.MY_LIST)}>내 관심글</S.Link>
-        <S.Link onClick={() => onClickLinkLi(ROUTE.PROFILE)}>프로필 설정</S.Link>
-        <S.Link onClick={onClickLogout}>로그아웃</S.Link>
+        <S.Edit onClick={() => onClickLinkLi(ROUTE.PROFILE)}>
+          <CogEightToothSvg />
+        </S.Edit>
+        <Image src={profileImg} alt="dropdown-profile" customStyle={S.ProfileImg} />
+        <span>{nickname}</span>
+        <br />
+        <Divider />
+        <S.Link onClick={() => onClickLinkLi(ROUTE.MY_LIST)}>좋아요 누른 글 목록</S.Link>
+        <Divider />
+        <S.Link onClick={() => onClickLinkLi(ROUTE.MY_POST)}>내가 작성한 글 목록</S.Link>
+        <Divider />
+        <br />
+        <Button theme="gray" customStyle={S.LogoutButton} onClick={onClickLogout}>
+          로그아웃
+        </Button>
       </ul>
     </Dropdown>
   );
diff --git a/webapp/src/constant/main.constant.js b/webapp/src/constant/main.constant.js
index 289a7ff0..73c60110 100644
--- a/webapp/src/constant/main.constant.js
+++ b/webapp/src/constant/main.constant.js
@@ -12,6 +12,12 @@ export const CREATOR_INFO = [
   { name: '윤효정', field: 'BACKEND', contact: 'https://github.com/hyojeongyun' },
   { name: '정영혜', field: 'DESIGNER', contact: 'younghye.hello@gmail.com' },
 ];
+export const SERVICE_INFO = [
+  { text: '서비스 이용약관' },
+  { text: '개인정보 처리방침' },
+  { text: '이용자의 권리 및 유의사항' },
+  { text: '데이터 서비스 이용약관' },
+];
 
 export const MAIN_SERVICE_LINKS = [
   { icon: 'signUp', route: ROUTE.SIGN_UP },
diff --git a/webapp/src/pages/Main/Main.style.js b/webapp/src/pages/Main/Main.style.js
index 269ef750..bfc39709 100644
--- a/webapp/src/pages/Main/Main.style.js
+++ b/webapp/src/pages/Main/Main.style.js
@@ -10,6 +10,7 @@ import MessageIcon from 'assets/images/feedback-message.png';
 import SignUpIcon from 'assets/images/signup-link.png';
 import BoardIcon from 'assets/images/board-link.png';
 import PostIcon from 'assets/images/post-link.png';
+import Gradation from 'assets/images/main-gradient.png';
 
 export const MainContainer = styled.div`
   width: 100vw;
@@ -30,9 +31,16 @@ export const Header = styled.header`
 export const MainSection = styled.div`
   width: 100%;
   height: 100vh;
-  background-color: black;
+  background-image: url(${Gradation});
 `;
 
+// export const Gradient = styled.img.attrs({ src: `${Gradation}` })`
+//   position: relative;
+//   display: flex;
+//   top: -30px;
+//   width: 100%;
+// `;
+
 export const Section = styled.section`
   position: relative;
   width: 100%;
@@ -43,61 +51,6 @@ export const Section = styled.section`
   align-items: center;
 `;
 
-export const Wave = styled.div`
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  top: -180%;
-  background-color: #000;
-`;
-
-export const animateGradation = keyframes`
-  0% {
-    transform: translate(-50%, -75%) rotate(0deg);
-  }
-  100% {
-    transform: translate(-50%, -75%) rotate(360deg);
-  }
-`;
-
-export const Curve = styled.div`
-  position: absolute;
-  width: 750vh;
-  height: 725vh;
-  left: 50%;
-  background: #9d68fe;
-  transform: translate(-50%, -75%);
-  &:nth-child(1) {
-    animation: ${animateGradation} 10s linear infinite;
-    border-radius: 44.5%;
-    background: #e2e7fd;
-    opacity: 80%;
-  }
-  &:nth-child(2) {
-    animation: ${animateGradation} 14s linear infinite;
-    border-radius: 45%;
-    background: #3a0c8e;
-    opacity: 90%;
-  }
-  &:nth-child(3) {
-    top: -10%;
-    animation: ${animateGradation} 20s linear infinite;
-    border-radius: 43%;
-    background: #53d3f4;
-
-    opacity: 90%;
-  }
-  &:nth-child(4) {
-    top: -13%;
-    animation: ${animateGradation} 23s linear infinite;
-    border-radius: 42.5%;
-    background: #9d68fe;
-
-    opacity: 98%;
-  }
-`;
-
 export const Contents = styled.div`
   position: relative;
   display: flex;
@@ -116,29 +69,14 @@ export const Logo = styled.img.attrs({ src: `${MainLogo}` })`
   height: 100px;
 `;
 
-export const GhostEffects = styled.span`
-  transition: 1s;
-  &:nth-child(${(props) => props.index + 1}) {
-    transition-delay: ${(props) => props.index * 0.1}s;
-  }
-`;
-
 export const MainText = styled.h2`
   position: relative;
-  text-transform: uppercase;
   display: flex;
   text-align: center;
   color: ${({ theme: { colors } }) => colors.greyScale.white};
   font-weight: 800;
   ${({ theme: { fonts } }) => fonts.english.main};
   white-space: pre;
-  &:hover {
-    ${GhostEffects} {
-      filter: blur(20px);
-      opacity: 0;
-      transform: scale(2);
-    }
-  }
 `;
 export const SubText = styled.div`
   position: relative;
@@ -151,60 +89,8 @@ export const SubText = styled.div`
   ${({ theme: { fonts } }) => fonts.main.default_noBold};
 `;
 
-export const ScrollDown = styled.div`
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  width: 40px;
-  height: 40px;
-  transform: translateY(-80px) translateX(-50%) rotate(45deg);
-`;
-
-export const animateScroll = keyframes`
-  0% {
-    top: -5px;
-    left: -5px;
-    opacity: 0;
-  } 
-  25% {
-    top: 0;
-    left: 0;
-    opacity: 1;
-  }
-  50%, 100% {
-    top: 5px;
-    left: 5px;
-    opacity: 0;
-  }
-`;
-
-export const Indicator = styled.span`
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-bottom: 2px solid white;
-  border-right: 2px solid white;
-  animation: ${animateScroll} 1.5s linear infinite;
-  opacity: 0;
-  &:nth-child(1) {
-    transform: translate(-15px, -15px);
-    animation-delay: -0.4s;
-  }
-  &:nth-child(2) {
-    transform: translate(0, 0);
-    animation-delay: -0.2s;
-  }
-  &:nth-child(3) {
-    transform: translate(15px, 15px);
-    animation-delay: 0s;
-  }
-`;
-
 export const PurposeSection = styled.div`
-  height: 260vh;
+  height: 220vh;
   width: 100%;
   background-color: #262c41;
 `;
@@ -224,7 +110,7 @@ export const Image3D = styled.div`
   position: relative;
   display: flex;
   justify-content: center;
-  height: 100vh;
+  height: 130vh;
   ${({ theme: { fonts } }) => fonts.main.title};
   & p {
     position: absolute;
@@ -237,40 +123,6 @@ export const Image3D = styled.div`
     color: ${({ theme: { colors } }) => colors.primary.normal};
   }
 `;
-export const animateTextMoving = keyframes`
-    0%, 40%, 100% 
-    {
-        transform: translateY(0);
-    }
-    20% {
-      transform: translateY(-50px);
-    }
-`;
-export const animatePulse = keyframes`
-   0% {
-    transform:scale(1);
-  }
-  25% {
-    transform:scale(0.9);
-  }
-  50% {
-    transform:scale(1);
-  }
-  75% {
-    transform:scale(0.9);
-  }
-  100% {
-    transform:scale(1);
-  }
-`;
-
-export const MoveText = styled.span`
-  position: relative;
-  text-transform: uppercase;
-  display: inline-block;
-  animation: ${animateTextMoving} 2s ease-in-out infinite;
-  animation-delay: ${(props) => `${props.delay * 0.1}s`};
-`;
 
 export const Benefit = styled.div`
   position: relative;
@@ -278,7 +130,7 @@ export const Benefit = styled.div`
   justify-content: center;
   align-items: center;
   width: 100%;
-  height: 80vh;
+  height: 65vh;
   background-color: #262c41;
 `;
 
@@ -303,21 +155,6 @@ export const Circle = styled.div`
   background-color: ${({ theme: { colors } }) => colors.greyScale.white};
 
   ${({ theme: { fonts } }) => fonts.main.emphasis};
-  animation: ${animatePulse} 2s linear infinite;
-  &::before {
-    content: '';
-    position: absolute;
-    top: -99px;
-    width: 370px;
-    height: 270px;
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    left: -99px;
-    width: 270px;
-    height: 370px;
-  }
 `;
 
 export const Subject = styled.div`
@@ -373,35 +210,13 @@ export const Card = styled.div`
   justify-content: space-between;
   align-items: center;
   width: 70%;
-  height: 450px;
+  height: 580px;
   background-color: black;
-  border-radius: 2%;
+  border-radius: 3%;
 
   overflow: hidden;
   box-sizing: border-box;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: calc(-100% + 4px);
-    width: 100%;
-    height: 100%;
-    background-color: black;
-    transition: 0.5s ease-in-out;
-  }
-
-  &:hover::before {
-    bottom: 0;
-  }
-  &:nth-child(1)::before {
-    background-color: #414141;
-  }
-  &:nth-child(2)::before {
-    background-color: #414141;
-  }
-  &:nth-child(3)::before {
-    background-color: #414141;
-  }
+  background-color: #414141;
 `;
 export const CardText = styled.div`
   position: absolute;
diff --git a/webapp/src/pages/Main/index.jsx b/webapp/src/pages/Main/index.jsx
index 0538dbb9..1ba1f32d 100644
--- a/webapp/src/pages/Main/index.jsx
+++ b/webapp/src/pages/Main/index.jsx
@@ -16,7 +16,6 @@ import ToastNotificationProvider, {
 import { deleteMessage } from 'contexts/ToastNotification/action';
 import ToastNotification from 'components/ToastNotification';
 import { throttle } from 'lodash';
-import SimpleListComponent from 'hoc/SimpleListComponent';
 import Footer from 'components/Footer';
 import * as S from './Main.style';
 
@@ -81,17 +80,14 @@ function Main() {
       </S.Header>
       <S.MainSection>
         <S.Section>
-          <S.Wave>
-            <SimpleListComponent Component={S.Curve} idx={4} />
-          </S.Wave>
           <S.Contents>
             <S.Logo />
             <S.MainText>
               {MAIN_TEXT.split('').map((t, i) => (
                 // eslint-disable-next-line react/no-array-index-key
-                <S.GhostEffects key={i} index={i}>
+                <span key={i} index={i}>
                   {t}
-                </S.GhostEffects>
+                </span>
               ))}
             </S.MainText>
             <S.SubText>
@@ -101,20 +97,15 @@ function Main() {
             </S.SubText>
           </S.Contents>
         </S.Section>
-        <S.ScrollDown>
-          <S.Indicator />
-          <S.Indicator />
-          <S.Indicator />
-        </S.ScrollDown>
       </S.MainSection>
       <S.PurposeSection>
         <S.StartQuestion>
           <S.Image3D>
             <p>
               {KOR_TITLE_CONECT.split('').map((s, i) => (
-                <S.MoveText key={s} index={i}>
+                <span key={s} index={i}>
                   {s}
-                </S.MoveText>
+                </span>
               ))}
               는 무엇을 위해 만들어졌을까요?
             </p>