diff --git a/FITple-Frontend/src/components/UserItem/UserItem.jsx b/FITple-Frontend/src/components/UserItem/UserItem.jsx
index 9e239a3..12c395f 100644
--- a/FITple-Frontend/src/components/UserItem/UserItem.jsx
+++ b/FITple-Frontend/src/components/UserItem/UserItem.jsx
@@ -20,7 +20,12 @@ import {
   UserInfo,
 } from "./UserItem.style";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 const UserItem = ({ ...props }) => {
+  const navigate = useNavigate();
+  const navgateToDetail = () => {
+    navigate(`/clothdetail/${item.cloth_id}`);
+  };
   const [isOpen, setIsOpen] = useState(false);
   // 더미데이터
   const dummyItem = {
@@ -41,19 +46,19 @@ const UserItem = ({ ...props }) => {
     console.log(isOpen);
   };
   return (
+    <Container>
+      {/* 아이템 이미지 */}
+      <ImgWrap onClick={navgateToDetail}>
+        <ItemImg
+          src={
+            item.cloth_image ||
+            "https://search.pstatic.net/common/?src=https%3A%2F%2Fshopping-phinf.pstatic.net%2Fmain_8829244%2F88292446418.jpg&type=f372_372"
+          }
+        />
+        {item.likes == 1 && <HeartImg src={HeartIcon} />}
+      </ImgWrap>
     <>
-      {props.data[0] !== "해당 제품은 등록되어 있지 않아요." ? (
-        <Container>
-          {/* 아이템 이미지 */}
-          <ImgWrap>
-            <ItemImg
-              src={
-                item.cloth_image ||
-                "https://search.pstatic.net/common/?src=https%3A%2F%2Fshopping-phinf.pstatic.net%2Fmain_8829244%2F88292446418.jpg&type=f372_372"
-              }
-            />
-            {item.likes == 1 && props.$main && <HeartImg src={HeartIcon} />}
-          </ImgWrap>
+  
 
           {/* 유저정보 */}
           <UserInfo {...props}>
diff --git a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx
index 87737ab..11fd691 100644
--- a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx
+++ b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx
@@ -225,14 +225,23 @@ function ClothdetailPage() {
   return (
     <div>
       <Parent1>
-        <ChangeButton onClick={comparePopUpOpen} />
+        <ChangeButton
+          onClick={comparePopUpOpen}
+          src="../assets/changebutton.svg"
+        />
         {isBookmark ? (
-          <FilledBookmark onClick={handleBookmark} />
+          <FilledBookmark
+            onClick={handleBookmark}
+            src="../assets/filledbookmark.svg"
+          />
         ) : (
-          <EmptyBookmark onClick={handleBookmark} />
+          <EmptyBookmark
+            onClick={handleBookmark}
+            src="../assets/emptybookmark.svg"
+          />
         )}
         <Link to="/cloth">
-          <BackIcon />
+          <BackIcon src="../assets/BackArrow.svg" />
         </Link>
         <CurrentCloth>옷장{">"}아우터</CurrentCloth>
       </Parent1>
@@ -259,9 +268,9 @@ function ClothdetailPage() {
             </ClothName>
 
             <ClothdebarContainer onClick={toggleEdit}>
-              <Clothdebar />
-              <Clothdebar />
-              <Clothdebar />
+              <Clothdebar src="../assets/detailbar.svg" />
+              <Clothdebar src="../assets/detailbar.svg" />
+              <Clothdebar src="../assets/detailbar.svg" />
               {isEdit && (
                 <EditButtons isEdit={isEdit}>
                   <Link to="/clothupdate">
diff --git a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js
index 3566e6a..0adcbb4 100644
--- a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js
+++ b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js
@@ -71,7 +71,6 @@ export const ProductDeImagemin = styled.img`
   margin-right: 10px;
   margin-bottom: 10px;
   background-color: #efefef;
-  background-image: url();
   background-position: center;
   background-size: cover;
 `;
@@ -99,19 +98,14 @@ export const ClothdebarContainer = styled.div`
     background-color: #f0f0f0;
   }
 `;
-export const Clothdebar = styled.div`
+export const Clothdebar = styled.img`
   //옷 이름 옆 점 세개(추가,수정나오는칸)
-  background: url(assets/detailbar.svg);
   width: 7px;
   height: 7px;
   margin-bottom: 3px;
 `;
 
-export const BackIcon = styled.div`
-  //뒤로가기 아이콘
-  width: 15px;
-  height: 38.83px;
-  background: url(assets/back.svg);
+export const BackIcon = styled.img`
   margin-left: 70px;
   margin-top: 20px;
 `;
@@ -189,8 +183,8 @@ export const Detailbox = styled.div`
 export const EditButtons = styled.div`
   display: flex;
   position: absolute;
-  right: 390px;
-  bottom: 330px;
+  right: 350px;
+  bottom: 430px;
   flex-direction: column;
   justify-content: center;
   opacity: ${(props) => (props.isEdit ? 1 : 0)};
@@ -211,16 +205,14 @@ export const EditButton = styled.button`
   }
 `;
 
-export const FullStar = styled.div`
+export const FullStar = styled.img.attrs({ src: "/assets/star8.svg" })`
   width: 38px;
   height: 37px;
-  background: url(assets/Star8.svg);
   z-index: 1;
 `;
-export const EmptyStar = styled.div`
+export const EmptyStar = styled.img.attrs({ src: "/assets/star5.svg" })`
   width: 38px;
   height: 37px;
-  background: url(assets/Star5.svg);
   z-index: 1;
 `;
 
@@ -265,9 +257,8 @@ export const MeasureArea = styled.textarea`
   margin-right: 20px;
 `;
 //비교
-export const ChangeButton = styled.div`
+export const ChangeButton = styled.img`
   position: fixed;
-  background: url(assets/changebutton.svg);
   width: 97px;
   height: 97px;
   top: 450px;
@@ -276,9 +267,8 @@ export const ChangeButton = styled.div`
   z-index: 1;
 `;
 // 하얀찜
-export const EmptyBookmark = styled.div`
+export const EmptyBookmark = styled.img`
   position: fixed;
-  background: url(assets/emptybookmark.svg);
   width: 97px;
   height: 97px;
   top: 550px;
@@ -287,9 +277,8 @@ export const EmptyBookmark = styled.div`
   z-index: 1;
 `;
 //파란색찜
-export const FilledBookmark = styled.div`
+export const FilledBookmark = styled.img`
   position: fixed;
-  background: url(assets/filledbookmark.svg);
   width: 97px;
   height: 97px;
   top: 550px;
diff --git a/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx b/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx
index 8b6efa9..98f9eef 100644
--- a/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx
+++ b/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx
@@ -86,80 +86,12 @@ const ClothmainPage = () => {
         </SearchContainer>
       </FirstContainer>
       <SecondContainer>
-        {/* <SideBar
-          onCategoryClick={(categoryId) => fetchClothData(categoryId)} // 카테고리 ID를 그대로 category로 전달
-        /> */}
         <Wrap>
           <SideBarWrap>
             <SideBar setCategory={setCategory} />
           </SideBarWrap>
           <ItemListWrap>
             <ItemList $main data={clothData} />
-            {/* <ProductContainer>
-              {filteredData.map((item) => (
-                <ProductItem key={item.cloth_id}>
-                  <Imgcontainer>
-                    <Link to={`/clothdetail/${item.cloth_id}`}>
-                      <ProductImage
-                        image={`../../assets/${item.cloth_id}.jpg`} // 수정된 경로
-                      />
-                      {item.likes > 0 && <FilledHeart />}
-                    </Link>
-                  </Imgcontainer>
-
-                  <ProductBrand>{item.brand}</ProductBrand>
-                  <ClothdebarContainer
-                    onClick={() => toggleEdit(item.cloth_id)}
-                  >
-                    <Clothdebar />
-                    <Clothdebar />
-                    <Clothdebar /> */}
-            {/* isEdit 상태를 활용해 Edit 버튼을 보여줌 */}
-            {/* {isEdit[item.cloth_id] && (
-                      <EditButtons>
-                        <Link to="/clothupdate">
-                          <EditButton>옷 정보 수정하기</EditButton>
-                        </Link>
-
-                        <EditButton onClick={handleDeleteCloth}>
-                          옷 정보 삭제하기
-                        </EditButton>
-                      </EditButtons>
-                    )}
-                    {isDeletePopupOpen && (
-                      <Modal
-                        isOpen={isDeletePopupOpen}
-                        onRequestClose={() => setisDeletePopupOpen(false)}
-                        style={{
-                          overlay: {
-                            backgroundColor: "rgba(81, 78, 78, 0.162)",
-                          },
-                          content: {
-                            border: "none",
-                            backgroundColor: "transparent",
-                            overflow: "hidden",
-                          },
-                        }}
-                      >
-                        <DeletePopUp
-                          isOpen={isDeletePopupOpen}
-                          onClose={() => setisDeletePopupOpen(false)}
-                        />
-                      </Modal>
-                    )}
-                  </ClothdebarContainer>
-
-                  <ProductName>{item.cloth_name}</ProductName>
-
-                  <ProductDetail>
-                    {item.size} • {item.fit}
-                  </ProductDetail>
-                </ProductItem>
-              ))}
-              <Link to="/clothregister">
-                <PLUSbutton />
-              </Link>
-            </ProductContainer> */}
             <PLUSbutton onClick={() => goToResister()} />
           </ItemListWrap>
         </Wrap>