diff --git a/src/Router.jsx b/src/Router.jsx
index 6797589..477c842 100644
--- a/src/Router.jsx
+++ b/src/Router.jsx
@@ -4,6 +4,9 @@ import Nav from './components/common/Nav.jsx';
 import Footer from './components/common/Footer';
 import ScrollTop from './components/common/ScrollTop.jsx';
 import LoginPage from './pages/LoginPage/LoginPage.jsx';
+import PetItemPage from './pages/PetItemPage/PetItemPage.jsx';
+import PetItemListPage from './pages/PetItemPage/PetItemListPage.jsx';
+import PetItemDetailPage from './pages/PetItemPage/PetItemDetailPage.jsx';
 
 function Router() {
   return (
@@ -13,6 +16,9 @@ function Router() {
         <Routes>
           <Route path="/" element={<MainPage />} />
           <Route path="/Login" element={<LoginPage />} />
+          <Route path="/petitem" element={<PetItemPage />} />
+          <Route path="/petitemList" element={<PetItemListPage />} />
+          <Route path="/petitemDetail/:no" element={<PetItemDetailPage/>} />
         </Routes>
         <Footer />
         <ScrollTop />
diff --git a/src/components/common/Footer.jsx b/src/components/common/Footer.jsx
index df875a1..5cb5222 100644
--- a/src/components/common/Footer.jsx
+++ b/src/components/common/Footer.jsx
@@ -3,21 +3,22 @@ import styled from 'styled-components';
 import { FiGift } from 'react-icons/fi';
 import { LuCalendarHeart } from 'react-icons/lu';
 import { images } from '../Images';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 const Footer = () => {
+  const location = useLocation();
   const [activeTab, setActiveTab] = useState(null);
 
   const tabs = [
     {
       key: 'gift',
-      icon: <FiGift size={20} color={activeTab === 'gift' ? '#FF6E00' : '#000'} />,
+      icon: <FiGift size={20} color={location.pathname === '/#' ? '#FF6E00' : '#000'} />,
       text: '나눔',
-      link: '/#',
+      link: '/petitemList',
     },
     {
       key: 'health',
-      icon: <LuCalendarHeart size={20} color={activeTab === 'health' ? '#FF6E00' : '#000'} />,
+      icon: <LuCalendarHeart size={20} color={location.pathname === '/#' ? '#FF6E00' : '#000'} />,
       text: '건강관리',
       link: '/#',
     },
@@ -41,7 +42,7 @@ const Footer = () => {
         <Link to={link} key={key}>
           <FooterTap onClick={() => handleTabClick(key)}>
             {icon ? icon : <FooterImage src={image} alt={text} />}
-            <FooterText active={activeTab === key}>{text}</FooterText>
+            <FooterText $active={location.pathname === link}>{text}</FooterText>
           </FooterTap>
         </Link>
       ))}
@@ -93,5 +94,5 @@ const FooterText = styled.div`
   }
   font-family: 'TTLaundryGothicB';
   font-size: 12px;
-  color: ${({ active }) => (active ? '#FF6E00' : '#000000')};
+  color: ${({ $active }) => ($active ? '#FF6E00' : '#000000')};
 `;
diff --git a/src/components/common/Nav.jsx b/src/components/common/Nav.jsx
index d0b6864..a5db87f 100644
--- a/src/components/common/Nav.jsx
+++ b/src/components/common/Nav.jsx
@@ -30,7 +30,7 @@ const Nav = () => {
   ];
 
   return (
-    <Navbar isScrolled={isScrolled}>
+    <Navbar $isScrolled={isScrolled}>
       <AnimalWrap>
         <PiDogBold color="#FF6E00" />
         <AnimalName>반려동물 이름</AnimalName>
@@ -58,8 +58,8 @@ const Navbar = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: ${({ isScrolled }) => (isScrolled ? 'rgba(255, 255, 255, 0.7)' : '#ffffff')};
-  backdrop-filter: ${({ isScrolled }) => (isScrolled ? 'blur(4px)' : 'none')};
+  background-color: ${({ $isScrolled }) => ($isScrolled ? 'rgba(255, 255, 255, 0.7)' : '#ffffff')};
+  backdrop-filter: ${({ $isScrolled }) => ($isScrolled ? 'blur(4px)' : 'none')};
   transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
 
   @media (min-width: 375px) {
diff --git a/src/pages/PetItemPage/PetItemDetailPage.jsx b/src/pages/PetItemPage/PetItemDetailPage.jsx
new file mode 100644
index 0000000..6f3cb64
--- /dev/null
+++ b/src/pages/PetItemPage/PetItemDetailPage.jsx
@@ -0,0 +1,205 @@
+import { useEffect, useState } from "react";
+import { HiArrowLeft } from "react-icons/hi";
+import { useNavigate, useParams } from "react-router-dom";
+import styled from "styled-components";
+import { VscAccount } from "react-icons/vsc";
+import { IoChatbubbleEllipsesOutline } from "react-icons/io5";
+import { FiHeart } from "react-icons/fi";
+
+const PetItemDetailPage = () => {
+  const navigate = useNavigate();
+  const {no} = useParams();// %% URL에서 글 번호(no)를 가져옴 %%
+  const [itemDetail, setItemDetail] = useState([]);
+  const [comments, setComments] = useState([]);
+  const [counter,setCounter] =useState(0);
+  useEffect(()=>{
+    fetch(`http://localhost:8080/api/petItems/${no}`)
+    .then((response) => response.json())
+    .then((json) => {
+      console.log("item 내용 :", json);
+      setItemDetail(json);
+    });
+  },[no])
+
+  useEffect(()=>{
+    fetch(`http://localhost:8080/api/comments`)
+    .then((response) => response.json())
+    .then((json) => {
+      console.log("댓글 :", json);
+      setComments(json);
+    });
+  },[no])
+
+  function good () {
+    setCounter(counter+1);
+    console.log("좋아요 :", counter)
+  }
+
+  return (
+    <ItemTitle>
+      <RowTi>
+        <button onClick={() => {navigate("/petitemList");}}>
+          <HiArrowLeft1 />
+        </button>
+        <H1>나눔</H1>
+      </RowTi>
+        
+      <ListImg>{itemDetail.imageUrl}</ListImg>
+      <ImgBt>
+      <ImgNo>1 / 5</ImgNo>
+      </ImgBt>
+      <User1><VscAccount1/>작성자: {itemDetail.user}</User1>
+      <Title>제목: {itemDetail.name}</Title>
+      <Icons>
+        <div>
+          <Like1 onClick={()=>{good()}}/>{counter}
+          <Comment1/>2
+        </div>
+        <div>
+          <ListPrice> {(itemDetail.price ? `${itemDetail.price.toLocaleString()}원` : <나눔>나눔</나눔>)}</ListPrice>
+        </div>
+      </Icons>
+      <Contents>작성글: {itemDetail.description}</Contents>
+      <Line />
+      {comments.map((item)=>(
+      <div  key={item.commentId}>
+      <User2><VscAccount1/>작성자: {item.length > 0 && item[0].user}
+        <ListDate key={item.commentId}>
+          {new Date(item.createdAt).toLocaleDateString('ko-KR', {
+            timeZone: 'Asia/Seoul' 
+          })}
+        </ListDate>
+      </User2>
+        <Comment>{item.comment}</Comment>
+        </div>
+      ))}
+    </ItemTitle>
+  );
+};
+
+export default PetItemDetailPage;
+
+
+const ItemTitle = styled.div`
+  margin: 64px 25px 64px 25px;
+`;
+const RowTi = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+`;
+const HiArrowLeft1 = styled(HiArrowLeft)`
+  font-size: 20px;
+  font-weight: bold;
+  `;
+const H1 = styled.h1`
+  font-size: 18px;
+  font-weight: bold;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right :20px ;
+`;
+const ListImg = styled.div`
+  width: 100%;
+  height: 300px;
+  background-color: #D9D9D9;
+  border-radius: 10px;
+  flex-shrink: 0; /* 이미지 크기를 고정 */
+  background-image: url(${(props) => props.src}); /* 이미지 URL 설정 */
+  background-size: cover; /* 이미지를 채우도록 설정 */
+  background-position: center; /* 이미지 중앙 정렬 */
+`;
+const ImgBt = styled.div`
+  display: flex;
+  position: relative;
+  justify-content: flex-end;
+`;
+const ImgNo = styled.button`
+  background-color: #8D8D8D;
+  border-radius: 30px;
+  font-size: 8px;
+  color: white;
+  border: 1px solid #8D8D8D;
+  width: 35px;
+  height: 20px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+`;
+const User1 = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  margin-top:10px;
+`;
+
+const VscAccount1 = styled(VscAccount)`
+  font-size: 12px;
+  margin-right: 3px;
+  align-items: center;
+  justify-content:center ;
+  `;
+  const Title = styled.div`
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  margin: 10px 0px 10px 0px;
+`;
+const ListPrice = styled.div`
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  width: 100%;
+`;
+const 나눔 = styled.p`
+  font-size: 15px;
+  font-weight: bold;
+  display: flex;
+  width: 100%;
+  color: #FF6E00;
+  justify-content: end;
+`;
+const Icons = styled.div`
+  font-size: 16px;
+  color: #8D8D8D;
+  display: flex;
+  justify-content: space-between;
+`;
+const Like1 = styled(FiHeart)`
+  font-size: 16px;
+  color: red;
+`;
+const Comment1 = styled(IoChatbubbleEllipsesOutline)`
+  margin-left:10px;
+`;
+const Contents = styled.div`
+  font-size: 16px;
+  margin-bottom: 20px;
+  margin-top: 10px;
+`;
+const Line = styled.hr`
+  border: none;   
+  border-top: 1px solid #FF6E00;
+  margin-bottom: 20px;
+`;
+const User2 = styled.div`
+  display: flex;
+  align-items: center;
+  
+  font-size: 12px;
+  margin-top:10px;
+`;
+const ListDate = styled.div`
+  font-size: 8px;
+  color: #8D8D8D;
+  display: flex;
+  margin-left: 5px;
+  margin-top: 2px;
+`;
+const Comment = styled.div`
+  font-size: 12px;
+  display: flex;
+  
+`;
\ No newline at end of file
diff --git a/src/pages/PetItemPage/PetItemListPage.jsx b/src/pages/PetItemPage/PetItemListPage.jsx
new file mode 100644
index 0000000..1c09b07
--- /dev/null
+++ b/src/pages/PetItemPage/PetItemListPage.jsx
@@ -0,0 +1,249 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import { HiArrowLeft, HiArrowSmDown } from "react-icons/hi";
+import { LuSearch } from "react-icons/lu";
+import { IoChatbubbleEllipsesOutline } from "react-icons/io5";
+import { FcLike } from "react-icons/fc";
+
+const PetItemListPage = () => {
+  const navigate = useNavigate();
+  const [petItemList, setPetItemList] = useState([]); 
+  const [counter, setCounter] = useState(0)
+
+  function handleList() {
+    fetch("http://localhost:8080/api/petItems")
+      .then((response) => response.json())
+      .then((json) => {
+        console.log("게시글 목록:", json); 
+        setPetItemList(json);
+      });
+  }
+
+  useEffect(() => {   
+    handleList();
+  }, []);
+
+  function good () {
+    setCounter(counter+1);
+    console.log("좋아요 :", counter)
+  }
+
+  return (
+    <ItemTitle>
+      <RowTi>
+        <button onClick={() => {navigate("/");}}>
+          <HiArrowLeft1 />
+        </button>
+        <H1>나눔</H1>
+      </RowTi>
+      
+        <Search>
+        <Box type="search" placeholder="단어를 입력하세요"/><LuSearch1 />
+        <Buuttons>
+          <ButtonCh>최신순<HiArrowSmDown1 /></ButtonCh>
+          <BuWrite onClick={()=>{navigate("/petitem")}}>글 작성</BuWrite>
+        </Buuttons>
+        </Search>
+      
+      <All>전체 {(petItemList.length).toLocaleString()}개</All>
+        <RowLi>
+          {petItemList.map((item) => ( 
+            <Lists  key={item.petItemId} 
+              onClick={(e)=>{e.preventDefault();
+              navigate(`/petitemDetail/${item.petItemId}`)}}>
+              <ListImg>{item.imageUrl}</ListImg>
+              <ListTitlesContainer>
+                <ListTItle>{item.name}</ListTItle>
+                <ListUser>작성자{item.user}</ListUser>
+                <ListPrice>{(item.price ? `${item.price.toLocaleString()}원` : <나눔>나눔</나눔>)}</ListPrice>
+                <ListDate>
+                  {new Date(item.createdAt).toLocaleDateString('ko-KR', {
+                    timeZone: 'Asia/Seoul' 
+                    })}
+                  <Icons>
+                    <FcLike1 onClick={(e)=>{e.stopPropagation();good()}} />{counter}
+                    <Comment1/>2
+                  </Icons>
+                </ListDate>
+              </ListTitlesContainer>
+            </Lists>
+          ))}
+        </RowLi>
+    </ItemTitle>
+  );
+};
+
+export default PetItemListPage;
+
+const ItemTitle = styled.div`
+margin: 64px 25px 64px 25px;
+`;
+
+const RowTi = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+`;
+
+const H1 = styled.h1`
+  font-size: 18px;
+  font-weight: bold;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right :20px ;
+`;
+const HiArrowLeft1 = styled(HiArrowLeft)`
+  font-size: 20px;
+  font-weight: bold;
+  `;
+const Buuttons = styled.div`
+    position: absolute;
+    right: 0px;
+    flex-direction: row;
+    display: flex; 
+    gap: 5px;
+    align-self: center;
+  `;
+const Box = styled.input`
+  width: 50%;
+  height: 30px;
+  margin: 10px 0px 10px 0px;
+  align-items: self-start;
+  padding-left: 10px;
+  border-radius: 5px;
+  border: 1px solid #F0F0F0;
+  background-color: #F0F0F0;
+  outline: none;
+  &::placeholder {
+    font-size: 12px; /* placeholder의 글씨 크기를 작게 설정 */
+    color: #B3B3B3; /* 필요에 따라 placeholder 색상 변경 */
+  }
+`;
+const HiArrowSmDown1 = styled(HiArrowSmDown)`
+  font-size: 20px;
+`;
+const Search = styled.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content:space-between;             
+`;
+const LuSearch1 = styled(LuSearch)`
+  position: absolute;
+  top: 16px;
+  bottom: 2px;
+  left: 43%;
+  border-radius: 15px;
+  color: #B3B3B3;
+`;
+const ButtonCh = styled.button`
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    padding: 3px 0px 3px 6px;
+    &:hover {
+      background-color: #F0F0F0;
+    }
+`;
+const BuWrite = styled.button`
+  width: 64px;
+  height: 28px;
+  font-size: 12px;
+  display: flex;
+  background-color: #FF6E00;
+  border-radius: 8px;
+  border: 1px solid #FF6E00;
+  outline: none;
+  transition: border-color 0.3s;
+  align-items: center;
+  justify-content: center;
+  color: white;
+`;
+const All = styled.div`
+  font-size: 12px;
+  color: #8D8D8D;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`;
+const RowLi = styled.div`
+  display: flex;
+  flex-wrap: wrap; // 화면에 맞춰 자동 줄바꿈
+  gap: 16px;       // 각 Col 사이의 간격
+  margin: 0 -8px;  // Col 패딩 균등 조절
+`;
+const Lists = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  height: 100px;
+`;
+const ListImg = styled.div`
+  width: 100px;
+  height: 100px;
+  background-color: #D9D9D9;
+  border-radius: 8px;
+  flex-shrink: 0; /* 이미지 크기를 고정 */
+  background-image: url(${(props) => props.src}); /* 이미지 URL 설정 */
+  background-size: cover; /* 이미지를 채우도록 설정 */
+  background-position: center; /* 이미지 중앙 정렬 */
+`;
+const ListTitlesContainer = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between; /* 상하 간격 자동 배분 */
+  padding: 5px;
+`;
+const ListTItle = styled.div`
+  display: flex;
+  font-size: 16px;
+  font-weight: bold;
+  width: 100%;
+  align-self: center;
+`;
+const ListUser = styled.div`
+  font-size: 12px;
+  color: #8D8D8D;
+  display: flex;
+  width: 100%;
+  align-self: center;
+`;
+const ListPrice = styled.div`
+  font-size: 15px;
+  font-weight: bold;
+  display: flex;
+  width: 100%;
+  align-self: center;
+`;
+const 나눔 = styled.p`
+  font-size: 15px;
+  font-weight: bold;
+  display: flex;
+  width: 100%;
+  color: #FF6E00;
+  align-self: center;
+`;
+const ListDate = styled.div`
+  font-size: 10px;
+  color: #8D8D8D;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const Icons = styled.div`
+  font-size: 16px;
+  color: #8D8D8D;
+  margin-left: 5px;
+`;
+const FcLike1 = styled(FcLike)`
+  font-size: 16px;
+`;
+const Comment1 = styled(IoChatbubbleEllipsesOutline)`
+  font-size: 16px;
+  margin-left: 10px;
+`;
diff --git a/src/pages/PetItemPage/PetItemPage.jsx b/src/pages/PetItemPage/PetItemPage.jsx
new file mode 100644
index 0000000..faafa04
--- /dev/null
+++ b/src/pages/PetItemPage/PetItemPage.jsx
@@ -0,0 +1,230 @@
+
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+import { HiArrowLeft } from "react-icons/hi";
+import { MdPhotoCamera } from "react-icons/md";
+
+const PetItemPage = () => {
+  const navigate = useNavigate();
+
+  function handleCreateClick(e) {
+    e.preventDefault(); // 새로고침 방지
+    const formData = new FormData(e.target);
+    const data = Object.fromEntries(formData.entries());
+    // 현재 시간을 createdAt, updatedAt으로 추가
+    const now = new Date().toISOString();
+    data.createdAt = now;
+    // data.updatedAt = now;
+
+    console.log("data = ", data);
+
+    //글 등록
+    fetch("http://localhost:8080/api/petItems", {
+      method: "POST",
+      body: JSON.stringify(data),
+      headers: { "Content-Type": "application/json; charset=UTF-8" },
+    })
+      .then((response) => response.json())
+      .then((json) => console.log("등록 data : ", json));
+      e.target.reset(); // 폼의 모든 입력값 초기화
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault(); //새로고침 방지
+    handleCreateClick(e);
+  }
+
+  return (
+    <ItemTitle>
+      <MainTitle>
+        <button onClick={() => {navigate("/petitemList");}}>
+          <HiArrowLeft1 />
+        </button>
+        <H1>판매 글 작성</H1>
+      </MainTitle>
+      <form onSubmit={handleSubmit}>
+        <label>
+          유저 : <br />
+          <input name="user" type="text" required />
+        </label><br />
+        <LableImg>
+          <input type="file" style={{display:'none'}} name="imageUrl" multiple={true} />
+          <ImgNo>0/5</ImgNo><MdPhotoCamera1 />
+        </LableImg>
+        <br />
+        <label>
+          <Title>제목 </Title>
+          <Box name="name" type="text" required  placeholder="제목을 입력해주세요"/>
+        </label>
+        <Title>거래 방식</Title>
+        <input type="radio" name="status" value="0" checked />나눔
+        <input type="radio" name="status" value="1"  />판매
+            <ButtonRow>
+              <ButtonPan >판매하기</ButtonPan>
+              <ButtonNa >나눔하기</ButtonNa>
+            </ButtonRow>
+          <Box name="price" type="text" placeholder="금액을 입력해주세요"/>
+        <label>
+          <Title> 설명 </Title>
+          <Textarea name="description" required placeholder="공유하고 싶은 내용을 작성해주세요"/>
+        </label>
+        <br />
+        <Div>욕설 광고등 운영저책 위반 시 제재를 받으실 수 있습니다</Div>
+        <BuWrite type="submit">작성 완료</BuWrite>
+      </form>
+    </ItemTitle>
+  );
+};
+
+export default PetItemPage;
+
+const ItemTitle = styled.div`
+  margin: 64px 25px 64px 25px;
+`;
+
+const MainTitle = styled.div`
+  display: flex;
+  margin-bottom: 20px;
+  align-items: center;
+`;
+
+const H1 = styled.h1`
+  font-size: 18px;
+  font-weight: bold;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right :20px ;
+`;
+
+const HiArrowLeft1 = styled(HiArrowLeft)`
+  font-size: 20px;
+`;
+const Title = styled.div`
+  font-size: 15px;
+  font-weight: bold;
+  display: flex;
+  margin: 5px;
+`;
+const Box = styled.input`
+  top: 0;
+  width: 100%;
+  height: 30px;
+  margin: 10px 0px 15px 0px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  border-radius: 5px;
+  border: 1px solid #E4E4E4;
+  outline: none;
+  transition: border-color 0.3s;
+  &::placeholder {
+    font-size: 10px; /* placeholder의 글씨 크기를 작게 설정 */
+    color: #E4E4E4; /* 필요에 따라 placeholder 색상 변경 */
+  }
+`;
+const Textarea = styled.textarea`
+  margin: 10px 0px 15px 0px;
+  width: 100%;
+  height: 15em;
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  border-radius: 5px;
+  border: 1px solid #E4E4E4;
+  outline: none;
+  transition: border-color 0.3s;
+  &::placeholder {
+    font-size: 10px; /* placeholder의 글씨 크기를 작게 설정 */
+    color: #E4E4E4; /* 필요에 따라 placeholder 색상 변경 */
+  }
+`;
+const BuWrite = styled.button`
+  width: 100%;
+  height: 45px;
+  display: flex;
+  background-color: #FF6E00;
+  padding: 15px;
+  border-radius: 8px;
+  border: 1px solid #FF6E00;
+  outline: none;
+  transition: border-color 0.3s;
+  align-items: center;
+  justify-content: center;
+  color: white;
+`;
+const ButtonRow = styled.div`
+  display: flex;        // 플렉스 박스 레이아웃으로 설정
+  gap: 10px;           // 버튼 간의 간격
+`;
+const ButtonNa = styled.button`
+  width: 85px;
+  height: 30px;
+  display: flex;
+  background-color: white;
+  border: 0.3px solid #FF6E00;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  color: #FF6E00;
+  &:hover {
+    background-color: #FF6E00; /* 호버 시 배경색 */
+    color: white; /* 호버 시 텍스트 색상 */
+  }
+`;
+const ButtonPan = styled.button`
+  width: 85px;
+  height: 30px;
+  display: flex;
+  background-color: white;
+  border: 0.3px solid #FF6E00;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  color: #FF6E00;
+  &:hover {
+    background-color: #FF6E00; /* 호버 시 배경색 */
+    color: white; /* 호버 시 텍스트 색상 */
+  }
+`;
+const Div = styled.div`
+  font-size: 10px;
+  font-weight: bold;
+  width: 100%;
+  height: 20px;
+  display: flex;
+  background-color: #FFEFEF;
+  padding: 15px;
+  border-radius: 5px;
+  outline: none;
+  margin-bottom: 15px;
+  align-items: center;
+  justify-content: center;
+  color: #E04F4B;
+`;
+const ImgNo = styled.p`
+  background-color: white;
+  border-radius: 8px;
+  padding-top: 25px;
+  font-size: 10px;
+  color: #8D8D8D;
+  border: 1px solid #E4E4E4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  height: 65px;
+`;
+const MdPhotoCamera1 = styled(MdPhotoCamera)`
+  position: absolute;
+  font-size: 20px;
+  top: 18px;
+  left: 23px;
+  color: #8D8D8D;
+`;
+
+const LableImg = styled.label`
+position: relative;
+display: flex;
+`;  
diff --git a/src/styles/GlobalStyles.js b/src/styles/GlobalStyles.js
index e4e3083..98efed0 100644
--- a/src/styles/GlobalStyles.js
+++ b/src/styles/GlobalStyles.js
@@ -185,7 +185,6 @@ const GlobalStyle = createGlobalStyle`
 
   #root {
     width: 100%;
-    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;