diff --git a/src/App.jsx b/src/App.jsx
index ce09bf0..8ee9266 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -45,7 +45,7 @@ function App() {
             <Route path="/" element={<Main />} />
             <Route path="/about" element={<About />} />
             <Route path="/work-list" element={<WorkList />} />
-            <Route path="/work-detail" element={<WorkDetail />} />
+            <Route path="/:id" element={<WorkDetail />} />  {/* id를 URL 파라미터로 사용 */}
             <Route path="/guestbook" element={<GuestBook />} />
             <Route path="/about-hidden" element={<HiddenAbout />} />
           </Routes>
diff --git a/src/components/footer/Footer.style.js b/src/components/footer/Footer.style.js
index fc4ce9d..070c7e4 100644
--- a/src/components/footer/Footer.style.js
+++ b/src/components/footer/Footer.style.js
@@ -12,6 +12,7 @@ export const FooterContainer = styled.footer`
 
   @media(max-width: 768px) {
     font-size: 0.8em;
+    margin : 0;
 
   }
 
@@ -24,11 +25,12 @@ export const FooterTop = styled.div`
   width: 100%;
   max-width: 85vw;
   margin: 0 auto;
-  padding: 1% 5%;
+  padding: 0% 5%;
 
   @media(max-width: 768px) {
     flex-direction: column;
     margin-top:5%;
+    padding :0;
   }
 
 `;
@@ -214,7 +216,6 @@ export const UrlContainer = styled.div`
 
     img{
       height : 5vh;
-      width: 8vw;
       }
   }
 
diff --git a/src/components/guestBook/MessageCard.style.js b/src/components/guestBook/MessageCard.style.js
index 73327e5..8d2ea75 100644
--- a/src/components/guestBook/MessageCard.style.js
+++ b/src/components/guestBook/MessageCard.style.js
@@ -21,7 +21,7 @@ export const CardContainer = styled.div`
 //cd 이미지 및 관련 내용 
 export const CDContainer = styled.div`
   width: 24vw;
-  height: 50vh;
+  height: 24vw;
   background-image: url(${(props) => props.src});
   background-size: cover;
   background-position: center;
@@ -33,20 +33,20 @@ export const CDContainer = styled.div`
 
   @media (max-width:768px) {
     width:40vw;
-    height:25vh;
+    height:40vw;
     margin:2%;
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
     width: 30vw; /* 아이패드에서 이미지 크기 조정 */
-    height: 40vh;
+    height: 30vw;
     margin:0 auto ;
   }
 `;
 
 export const ToText = styled.p`
   color: black;
-  font-size: 1.5em;
+  font-size: 1.2em;
   text-align: left;
   position: absolute;
   top: 5%;
@@ -68,7 +68,7 @@ export const ToText = styled.p`
 
 export const FromText = styled.p`
   color: black;
-  font-size: 1.5em;
+  font-size: 1.2em;
   text-align: right; 
   position: absolute; 
   bottom: 5%;
@@ -83,7 +83,7 @@ export const FromText = styled.p`
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    font-size: 1.2em;
+    font-size: 1.1em;
     right: 8%;
     bottom:15%;
   }
@@ -97,14 +97,15 @@ export const MessageText = styled.p`
   position: absolute;
   top: 18%; 
   left:15%;
-  max-height:33vh;
-  width:16vw;
+  max-height:95%;
+  width:70%;
+  height:60%;
   overflow:auto; 
   z-index: 10;
 
   /* 스크롤바 스타일링 (Webkit 기반 브라우저용) */
     &::-webkit-scrollbar {
-      width: 0.7vw; /* 스크롤바 너비 */
+      width: 0.6vw; /* 스크롤바 너비 */
     }
     &::-webkit-scrollbar-thumb {
       background-color: rgba(0, 0, 0, 0.5); /* 스크롤바 색상 */
@@ -129,8 +130,8 @@ export const MessageText = styled.p`
   
   @media (min-width: 769px) and (max-width: 1024px) {
     font-size: 1em;
-    width: 20vw;
-    height:23vh;
+    width: 40%;
+    height:50%;  
     top: 18%;
   }
   
diff --git a/src/components/guestBook/MessageInputSection.jsx b/src/components/guestBook/MessageInputSection.jsx
index f54aa45..b74f0bb 100644
--- a/src/components/guestBook/MessageInputSection.jsx
+++ b/src/components/guestBook/MessageInputSection.jsx
@@ -75,7 +75,7 @@ const MessageInputSection = ({ onSendMessage, onViewGuestBook }) => {
           onChange={(e) => setNewMessage({ ...newMessage, message: e.target.value })}
          
         />
-        <Label className='from-label'>
+        <Label className='from-label'length={newMessage.from.length}>
           <HighlightedText>From.</HighlightedText>
           <Input className='from'
           type="text" 
diff --git a/src/components/guestBook/MessageInputSection.style.js b/src/components/guestBook/MessageInputSection.style.js
index f26492e..3ad2427 100644
--- a/src/components/guestBook/MessageInputSection.style.js
+++ b/src/components/guestBook/MessageInputSection.style.js
@@ -5,24 +5,26 @@ export const Container = styled.div`
   justify-content: space-between;
   align-items: flex-start;
   width: 100%;
+  height:85vh;
   color: white;
   margin: 0 auto;
   padding: 0 10%;
   position: relative;
-  height: 100vh;
 
   @media (max-width: 768px) {
     width: 100%;
     flex-direction: column;
     align-items: center;
     padding: 0 2%;
-    height:0%;
+    height:50%;
   }
     
 
   @media (min-width: 769px) and (max-width: 1024px) {
     width:100%;
     padding: 0 10%;
+
+    min-height: 110vh;
   }
 `;
 
@@ -133,7 +135,8 @@ export const Label = styled.label`
 
   &.from-label {
     bottom: 5%;
-    right: -30%;
+    right: ${({ length }) => `calc(-35% + ${length * 0.5}em)`}; /* 입력된 글자의 길이에 따라 위치 조정 */
+
   }
 
   @media (max-width: 768px) {
@@ -146,7 +149,8 @@ export const Label = styled.label`
 
     &.from-label {
       bottom: 5%;
-      right: -17%;
+      right:${({ length }) => `calc(-20% + ${length * 0.35}em)`};
+     
     }
   }
 
@@ -159,6 +163,7 @@ export const Label = styled.label`
 
     &.from-label {
       bottom: 5%;
+      right:${({ length }) => `calc(-25% + ${length * 0.35}em)`};
     }
   }
 `;
@@ -198,12 +203,12 @@ export const TextArea = styled.textarea`
   font-family: 'Pretendard';
   font-style: normal;
   font-weight: 400;
-  width: 24vw;
-  height: 42vh;
+  width: 70%;
+  height: 58%;
   border: none;
   color: black;
   background: transparent;
-  font-size: 1.4em;
+  font-size: 1.1em;
   resize: none;
   text-align: left;
   z-index: 10;
@@ -227,13 +232,13 @@ export const TextArea = styled.textarea`
     height: 60%;
     top: 20%;
     left:15%;
-    font-size: 1.1em;
+    font-size: 0.8em;
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    width: 27vw;
-    height: 31vh;
-    top: 14%;
+    width: 70%;
+    height: 63%;
+    top: 20%;
   }
 `;
 
diff --git a/src/components/guestBook/Pagination.style.js b/src/components/guestBook/Pagination.style.js
index 59b2fee..f119bf2 100644
--- a/src/components/guestBook/Pagination.style.js
+++ b/src/components/guestBook/Pagination.style.js
@@ -8,19 +8,23 @@ export const PaginationContainer = styled.div`
   margin: 20px;
   color: #ffffff; 
   margin-bottom:4%;
+  flex-wrap: nowrap; 
 
 
   @media (max-width: 768px) {
-    width :80vw;
+    width :100%;
     margin-top:6%;
     text-align:center;
+    flex-wrap: nowrap; 
+
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    width: 90%;
+    width: 100%;
     margin:0 auto;
     text-align:center;
     justify-content:center;
+    flex-wrap: nowrap; 
   }
 
 
@@ -47,12 +51,12 @@ export const PageButton = styled.button.withConfig({
   }
 
    @media (max-width:768px){
-      padding:3%;
+      padding:2%;
       font-size:0.7em;
    }
 
    @media (min-width: 769px) and (max-width: 1024px) {
-    padding: 0 10px;
+    padding: 0 1%;
     font-size: 1.2em;
   }
 `;
diff --git a/src/components/workdetail/developer/Developer.style.js b/src/components/workdetail/developer/Developer.style.js
index 88f9da3..b77317e 100644
--- a/src/components/workdetail/developer/Developer.style.js
+++ b/src/components/workdetail/developer/Developer.style.js
@@ -24,6 +24,7 @@ export const DeveloperName = styled.div`
   font-size: 22px;
   font-family: 'Pretendard-Medium';
   margin: 0px;
+  line-height: initial;
 
   ${({ isTwoCharacters }) =>
     isTwoCharacters &&
@@ -68,6 +69,8 @@ export const DeveloperPosition = styled.div`
   font-family: 'Pretendard-Regular';
   color: #696969;
   margin: 0px;
+  flex: 1;
+  line-height: initial;
 
     @media (max-width: 1500px) {
     font-size: 20px;
diff --git a/src/components/workdetail/mobile/WorkIntroduce.jsx b/src/components/workdetail/mobile/WorkIntroduce.jsx
index 6e57ff1..15d5a1f 100644
--- a/src/components/workdetail/mobile/WorkIntroduce.jsx
+++ b/src/components/workdetail/mobile/WorkIntroduce.jsx
@@ -42,21 +42,31 @@ export default function WorkIntroduce({ data }) {
       </W.WorkTitleWrapper>
       <W.ImageWrapper>
         <LeftButton position="top" onClick={handlePrevClick} />
-        <Image src={data.images[currentImageIndex].url} />
+          {/* 이미지가 있는 경우에만 Image 컴포넌트를 렌더링 */}
+            {data.images && data.images[currentImageIndex] && (
+              <Image src={data.images[currentImageIndex].url} />
+          )}
         <RightButton style={{padding: "0px"}} position="top" onClick={handleNextClick} />
       </W.ImageWrapper>
       <W.DeveloperWrapper>
         <W.TeamItem>
           <W.TeamTitle>{data.teamName}</W.TeamTitle>
           <W.LinkTo>
-            <a href={data.instagramUrl}>
-              <img src={Instagram} alt="instagram" />
-            </a>
-            <a href={data.githubUrl}>
-              <img src={Github} alt="github" />
-            </a>
+            {data.instagramUrl && (
+              <a href={data.instagramUrl}>
+                <img src={Instagram} alt="instagram" />
+              </a>
+            )}
+            
+            {data.githubUrl && (
+              <a href={data.githubUrl}>
+                <img src={Github} alt="github" />
+              </a>
+            )}
 
-            <ViewSite deployUrl={data.deployUrl} src={viewSiteImage}/>
+            {data.deployUrl && (
+              <ViewSite deployUrl={data.deployUrl} src={viewSiteImage} />
+            )}
           </W.LinkTo>
         </W.TeamItem>
         {data.developers.map((d) => (
diff --git a/src/components/workdetail/rightcomponent/RightContent.jsx b/src/components/workdetail/rightcomponent/RightContent.jsx
index 52b28ae..05911ec 100644
--- a/src/components/workdetail/rightcomponent/RightContent.jsx
+++ b/src/components/workdetail/rightcomponent/RightContent.jsx
@@ -20,13 +20,21 @@ export default function RightContent({ data }) {
         <R.TeamItem>
           <R.TeamTitle>{data.teamName}</R.TeamTitle>
           <R.LinkTo>
-            <a href={data.instagramUrl}>
-              <img src={Instagram} alt="instagram" />
-            </a>
-            <a href={data.githubUrl}>
-              <img src={Github} alt="github" />
-            </a>
-            <ViewSite deployUrl={data.deployUrl} src={viewSiteImage}/>
+            {data.instagramUrl && (
+                <a href={data.instagramUrl}>
+                  <img src={Instagram} alt="instagram" />
+                </a>
+              )}
+              
+              {data.githubUrl && (
+                <a href={data.githubUrl}>
+                  <img src={Github} alt="github" />
+                </a>
+              )}
+
+              {data.deployUrl && (
+                <ViewSite deployUrl={data.deployUrl} src={viewSiteImage} />
+              )}
           </R.LinkTo>
         </R.TeamItem>
         <R.DeveloperWrapper>
diff --git a/src/components/workdetail/rightcomponent/RightContent.style.js b/src/components/workdetail/rightcomponent/RightContent.style.js
index e24d3bc..b5727ef 100644
--- a/src/components/workdetail/rightcomponent/RightContent.style.js
+++ b/src/components/workdetail/rightcomponent/RightContent.style.js
@@ -152,14 +152,14 @@ export const LinkTo = styled.div`
 export const DeveloperWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 50px;
+  gap: 20px;
   justify-content: flex-start;
   align-items: flex-start;
   text-align: left;
   margin: 0px;
 
   @media (max-width: 1200px) {
-    gap: 40px;
+    gap: 18px;
   }
 `;
 
diff --git a/src/components/worklist/WorkItem.jsx b/src/components/worklist/WorkItem.jsx
index 0194750..ff1435b 100644
--- a/src/components/worklist/WorkItem.jsx
+++ b/src/components/worklist/WorkItem.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import * as W from './WorkItem.style';
 import { useNavigate } from 'react-router-dom';
 
@@ -10,6 +10,24 @@ const WorkItem = React.memo(function ({
   slideIndex,
 }) {
   const navigate = useNavigate();
+  const titleRef = useRef(null);
+  const [isOverflow, setIsOverflow] = useState(false);
+  const [widthScroll, setWidthScroll] = useState(0);
+
+  // overflow 여부 체크
+  useEffect(() => {
+    if (titleRef.current) {
+      const currentScrollWidth = titleRef.current.scrollWidth;
+      setIsOverflow(currentScrollWidth > titleRef.current.clientWidth);
+      setWidthScroll(currentScrollWidth);
+
+      // widthScroll이 업데이트된 후에 콘솔 출력
+      console.log(currentScrollWidth, widthScroll);
+    }
+  }, [dataIndex, slideIndex, widthScroll]); // dataIndex가 변경될 때마다 확인
+
+  // 슬라이드가 변경될 때마다 애니메이션을 재시작하기 위해 key를 변경
+  const titleKey = `${dataIndex}-${isOverflow}`; // 고유 키 생성
 
   if (!data || !data[dataIndex]) {
     return null;
@@ -19,7 +37,7 @@ const WorkItem = React.memo(function ({
 
   const handleItemClick = () => {
     if (isCenterSlide) {
-      navigate(`/work-detail`, { state: { category: type, id } });
+      navigate(`/${id}`, { state: { category: type } });
       console.log(`type: ${type}, id: ${id}`);
     }
   };
@@ -35,7 +53,25 @@ const WorkItem = React.memo(function ({
       </div>
       <W.Card>
         <img alt={title} src={image} />
-        {isCenterSlide && <W.Title>{title}</W.Title>}
+        {isCenterSlide && (
+          <W.TitleContainer>
+            <W.Title
+              key={`${titleKey}-1`}
+              ref={titleRef}
+              isOverflow={isOverflow}
+              widthScroll={widthScroll}
+            >
+              {title}
+              {isOverflow && (
+                <span>
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                  {title}
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
+              )}
+            </W.Title>
+          </W.TitleContainer>
+        )}
         {isCenterSlide && <W.Team>{team}</W.Team>}
       </W.Card>
     </W.Container>
diff --git a/src/components/worklist/WorkItem.style.js b/src/components/worklist/WorkItem.style.js
index 7412804..49af778 100644
--- a/src/components/worklist/WorkItem.style.js
+++ b/src/components/worklist/WorkItem.style.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 export const Container = styled.div`
   transition: all 300ms ease;
@@ -60,7 +60,19 @@ export const Card = styled.div`
   }
 `;
 
+export const TitleContainer = styled.div`
+  width: 100%;
+  overflow: hidden;
+`;
+
+const animate = (widthScroll) => keyframes`
+  100% {
+    transform: translateX(-${widthScroll / 2}px);
+  }
+`;
+
 export const Title = styled.p`
+  width: 100%;
   color: white;
   text-align: center;
   font-family: Pretendard;
@@ -69,7 +81,12 @@ export const Title = styled.p`
   font-weight: 700;
   line-height: normal;
   margin-bottom: 5px;
-  white-space: pre;
+  white-space: nowrap;
+  display: inline-block;
+
+  animation: ${(props) =>
+      props.isOverflow ? animate(props.widthScroll) : 'none'}
+    ${(props) => props.widthScroll / 130}s 1s linear infinite;
 
   @media (max-width: 1920px) {
     font-size: 28px;
diff --git a/src/pages/WorkDetail.jsx b/src/pages/WorkDetail.jsx
index 6f02166..0a8df5a 100644
--- a/src/pages/WorkDetail.jsx
+++ b/src/pages/WorkDetail.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams  } from 'react-router-dom';
 import axios from 'axios';
 import cdCaseImage from '../assets/img/detail_cd_case.svg';
 import RightButton from '../components/workdetail/button/RightButton';
@@ -17,8 +17,9 @@ export default function WorkDetail() {
   const imageContainerRef = useRef(null);
   const navigate = useNavigate();
 
+  const { id } = useParams();  // URL의 id 파라미터를 받아옴
   const location = useLocation();
-  const { category, id } = location.state || { category: 'big_data', id: 2 };
+  const { category = 'all' } = location.state || {};
   console.log(category);
 
   // API 데이터 fetch
@@ -79,17 +80,17 @@ export default function WorkDetail() {
     return <div>Loading...</div>;
   }
 
-  // 이전 버튼 클릭 핸들러
-  const handlePrevClick = (shouldScroll = true) => {
-    if (data && data.prev) {
-      if (shouldScroll) {
-        window.scrollTo(0, 0); // 스크롤 동작
-      }
-      navigate(`/work-detail`, { state: { category, id: data.prev } }); // 페이지 이동
-    } else {
-      console.error('이전 항목을 찾을 수 없습니다.');
+// 이전 버튼 클릭 핸들러
+const handlePrevClick = (shouldScroll = true) => {
+  if (data && data.prev) {
+    if (shouldScroll) {
+      window.scrollTo(0, 0); // 스크롤 동작
     }
-  };
+    navigate(`/${data.prev}`, { state: { category } }); // 이전 항목의 id를 경로에 포함하여 페이지 이동
+  } else {
+    console.error('이전 항목을 찾을 수 없습니다.');
+  }
+};
 
   // 다음 버튼 클릭 핸들러
   const handleNextClick = (shouldScroll = true) => {
@@ -97,7 +98,9 @@ export default function WorkDetail() {
       if (shouldScroll) {
         window.scrollTo(0, 0); // 스크롤 동작
       }
-      navigate(`/work-detail`, { state: { category, id: data.next } }); // 페이지 이동
+      navigate(`/${data.next}`, { state: { category } }); // 다음 항목의 id를 경로에 포함하여 페이지 이동
+    } else {
+      console.error('다음 항목을 찾을 수 없습니다.');
     }
   };