diff --git a/frontend/src/App.js b/frontend/src/App.js
index 4f15edd..f7a68a3 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -43,4 +43,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/frontend/src/bootstrap-custom.css b/frontend/src/bootstrap-custom.css
index 5cce1d0..f484901 100644
--- a/frontend/src/bootstrap-custom.css
+++ b/frontend/src/bootstrap-custom.css
@@ -10726,4 +10726,12 @@ textarea.form-control-lg {
 .category {
   width: 100px;
   margin: 0 0 0 auto;
+}
+
+.category_deactivate {
+  background-color: #cacaca;
+}
+
+.category_activate {
+  background-color: #ff6f61;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/DetailPage.js b/frontend/src/pages/DetailPage.js
index 6b57a22..7f9bf4f 100644
--- a/frontend/src/pages/DetailPage.js
+++ b/frontend/src/pages/DetailPage.js
@@ -3,15 +3,13 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import ItemSwiper from '../products/ItemSwiper';
 import axios from 'axios';
+import StarRate from '../products/StarRate';
 import { useParams } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import StarRate from '../products/StarRate';
 
 // 상세 제품 페이지
 function Detail() {
     const [ product, setProduct ] = useState([]);
-    const [ count, setCount ] = useState(0);
-    const [ cloud, setCloud ] = useState('#');
     const [ similar, setSimilar ] = useState([]);
     var [clicked, setClicked] = useState(false);
   
@@ -37,23 +35,16 @@ function Detail() {
             setProduct(data);
         })
         .catch( error => console.log(error) );
-        axios.get('http://localhost:8000/item/' + item_id)
-        .then(response => response.data)
-        .then(data => {
-            setCloud(data.img_main);
-        })
-        .catch( error => console.log(error) );
         axios.get(`http://115.85.181.95:30002/recommend/similar/item?item_id=${item_id}&top_k=10`)
         .then(response => response.data)
         .then(data => {
-            console.log(data);
             setSimilar(data);
         })
         .catch( error => console.log(error) );
         return () => {
         controller.abort();
         }
-        }, []);
+    }, []);
     
     return (
         <>
@@ -61,24 +52,27 @@ function Detail() {
                 <Container>
                     <ItemBox>
                         <ImgBox>
-                            <img src={product.img_main}/>
+                            <img src={product.img_main} alt="상품 이미지"/>
                         </ImgBox>
                         <ItemInfoBox>
                             <InfoBox>
-                                <h3>{product.title}</h3>
-                                <p>{product.brand}</p>
+                                <small>{product.brand}</small>
+                                <h1>{product.title}</h1>
+                                <StarRate star = {product.review_avg} />
+                                <div style={{"marginTop": "13px"}}>{product.wish_count} 명이 찜 했어요!</div>
+                                <hr></hr>
                                 <small className="category">{ product.category0 }</small>
                                 <br/>
                                 <small className="category">{ product.category1 }</small>
-                                <StarRate star={ product.review_avg } id={ item_id }/>
+
+
+                                
                                 <PriceBox>
                                     <span>
-                                        <small>판매가  </small>
                                         {[product.selling_price].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                                         <small>원</small>
                                     </span>
                                 </PriceBox>
-
                                 <DeliveryBox>
                                     <span>
                                         <small> + 배송비 </small>
@@ -86,22 +80,24 @@ function Detail() {
                                         <small>원</small>
                                     </span>
                                 </DeliveryBox>
-
                                 <TotalPrice>
+                                    <span>
                                     <span>배송비 포함 <strong>{(product.selling_price + product.delivery_fee).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</strong>원</span>
+                                    </span>
                                 </TotalPrice>
                                 <ButtonBox>
-                                    <FontAwesomeIcon icon={["far", "heart"]} id={ `like${item_id}`} onClick={ handleClick } className={"like"}/>
+                                    <CartBtn>
+                                        <FontAwesomeIcon icon={["far", "heart"]} id={ `like${item_id}`} onClick={ handleClick } className={"like"}/>
+                                    </CartBtn>
                                     <BuyBtn onClick={() => {window.open('https://ohou.se/productions/' + item_id)}}>오늘의집에서 보기</BuyBtn>
                                 </ButtonBox>
-
                             </InfoBox>
                         </ItemInfoBox>
                     </ItemBox>
                     <br/>
                     <h3>유사한 물품</h3>
                     <br/>
-                    <ItemSwiper products={ similar } category='3'/>
+                    <ItemSwiper products={ similar } field='4'/>
                 </Container>
             )}
         </>
@@ -122,11 +118,11 @@ const ItemBox = styled.div`
 `;
 
 const ImgBox = styled.div`
-    min-width: 609px;
+    min-width: 500px;
     cursor: default;
     & img {
-        width: 609px;
-        height: 407px;
+        width: 500px;
+        height: 500px;
         min-height: 230px;
         border: none;
         vertical-align: middle;
@@ -153,56 +149,24 @@ const InfoBox = styled.div`
     }
 `;
 const PriceBox = styled.div`
-    margin-top: 40px;
-    display: flex;
-    & span {
-        font-size: 24px;
-        line-height: 24px;
-        font-weight: bold;
-        width: 100%;
-        & small {
-            font-size: 14px;
-            margin-left: 2px;
-            font-weight: bold;
-        }
-    }
-`;
-const DeliveryBox = styled.div`
+marginTop: 60px;
 display: flex;
 text-align: right;
 & span {
-    font-size: 20px;
+    font-size: 24px;
     line-height: 24px;
     font-weight: bold;
     width: 100%;
     & small {
         font-size: 14px;
         margin-left: 2px;
+        font-weight: bold;
     }
 }
 `;
 
-const CountBox = styled.div`
-    display: flex;
-    width: 100%;
-    justify-content: flex-end;
-    align-items: center;
-
-    & button {
-        width: 28px;
-        height: 28px;
-        padding: 0;
-        margin: 0 10px;
-        border: 1px solid rgb(236, 236, 236);
-        cursor: pointer;
-        overflow: visible;
-        background: rgb(255, 255, 255);
-        outline: none;
-    }
-`;
 const TotalPrice = styled.div`
     padding: 16px 0;
-    margin-top: 150px;
     text-align: right;
     & span {
         font-size: 14px;
@@ -212,6 +176,25 @@ const TotalPrice = styled.div`
             margin-left: 7px;
         }
     }
+    & small {
+        font-size: 16px;
+        margin-left: 2px;
+        font-weight: bold;
+    }
+`;
+const DeliveryBox = styled.div`
+display: flex;
+text-align: right;
+& span {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: bold;
+    width: 100%;
+    & small {
+        font-size: 14px;
+        margin-left: 2px;
+    }
+}
 `;
 const ButtonBox = styled.div`
     display: flex;
diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.js
index 4fbecb5..ebaf630 100644
--- a/frontend/src/pages/Login.js
+++ b/frontend/src/pages/Login.js
@@ -25,7 +25,9 @@ function Login(){
             }),
         }).then((res) => {
             if(res.ok) {
+                console.log(res.statusText)
                 sessionStorage.setItem("loginEmail", email)
+                window.open(`#/products`, '_self')
             }
             else {
                 alert("아이디 혹은 비밀번호가 틀렸습니다.")
diff --git a/frontend/src/products/FilterMenuLeft.js b/frontend/src/products/FilterMenuLeft.js
index 664d368..c25de15 100644
--- a/frontend/src/products/FilterMenuLeft.js
+++ b/frontend/src/products/FilterMenuLeft.js
@@ -2,13 +2,10 @@ import { useState } from "react";
 
 function FilterMenuLeft({ getFilter }) {
   const [ minprice, setMinprice ] = useState(0);
-  const [ maxprice, setMaxprice ] = useState(0);
-  const [ category, setCategory ] = useState('가구');
-  const [ style, setStyle ] = useState('모던');
+  const [ maxprice, setMaxprice ] = useState(1000000);
+  const [ category, setCategory ] = useState([]);
   const categories = ['가구', '주방용품', '수납·정리', '생활용품', '패브릭', '가전·디지털', '공구·DIY', '데코·식물', '인테리어시공',
   '조명', '캠핑·레저', '생필품', '유아·아동', '반려동물', '식품', '렌탈'];
-  const styles = ['모던', '빈티지&레트로', '북유럽', '내추럴', '러블리&로맨틱', '미니멀&심플', '유니크&믹스매치', '한국&아시아',
-  '프렌치&프로방스', '클래식&앤틱', '인더스트리얼'];
 
   return (
     <ul className="list-group list-group-flush rounded">
@@ -36,24 +33,24 @@ function FilterMenuLeft({ getFilter }) {
             <label htmlFor="floatingInput">Max Price</label>
           </div>
           <h5 className="mt-1 mb-2">Category</h5>
-          <select onChange={(event) => setCategory(categories[event.target.options.selectedIndex])}>
             { categories.map((cat) => {
-              return (
-                <option key={ cat }>{ cat }</option>
-              )
+                return (
+                  <button value={ cat } className='category_deactivate' onClick={ (event) => {
+                    const ca = event.target.value;
+                    const click = event.target.className;
+                    console.log(click, category)
+                    if(click === 'category_activate') {
+                      setCategory(category.filter(c => c !== ca));
+                      event.target.className = 'category_deactivate';
+                    } else {
+                      setCategory([...category, ca]);
+                      event.target.className = 'category_activate';
+                    }
+                  } }>{ cat }</button>
+                )
             })}
-          </select>
           <br/>
-          <h5 className="mt-1 mb-2">Style</h5>
-          <select onChange={(event) => setStyle(styles[event.target.options.selectedIndex])}>
-            { styles.map((st) => {
-              return (
-                <option key={ st }>{ st }</option>
-              )
-            })}
-          </select>
-          <br/>
-          <button className="btn btn-dark apply" onClick={ () => getFilter(minprice, maxprice, category, style) }>Apply</button>
+          <button className="btn btn-dark apply" onClick={ () => getFilter(minprice, maxprice, category) }>Apply</button>
         </div>
       </li>
     </ul>
diff --git a/frontend/src/products/ItemSwiper.js b/frontend/src/products/ItemSwiper.js
index 823ae3f..5d268c0 100644
--- a/frontend/src/products/ItemSwiper.js
+++ b/frontend/src/products/ItemSwiper.js
@@ -5,11 +5,8 @@ import SwiperCore, { Navigation } from "swiper";
 import Product from "./Product";
 
 function ItemSwiper(props) {
-  const products = [];
+  const products = props.products;
   const field = props.field;
-  for(var k in props.products) {
-    products.push(props.products[k])
-  }
 
   return (
     <>
@@ -28,10 +25,10 @@ function ItemSwiper(props) {
         id={field}
       >
       {	
-        products.map((product) => {
+        products.map((product, index) => {
           return (
-            <SwiperSlide key={field + k}>
-              <Product product={ product } field={field + k}/>	
+            <SwiperSlide key={field + index}>
+              <Product product={ product } field={field + index}/>	
             </SwiperSlide>
           )
         })
diff --git a/frontend/src/products/Product.js b/frontend/src/products/Product.js
index 1349f6a..f91e4d6 100644
--- a/frontend/src/products/Product.js
+++ b/frontend/src/products/Product.js
@@ -19,12 +19,12 @@ function Product(props) {
   };
 
   const product = props.product;
-  const id = product[0];
-  const name = product[4];
-  const price = product[3];
-  const star = product[5];
-  const Image = product[1];
-  const brand = product[6];
+  const id = product.item_ids;
+  const name = product.titles;
+  const price = product.selling_prices;
+  const star = product.star_avgs;
+  const Image = product.img_urls;
+  const brand = product.brands;
   const field = props.field;
   
   return (
diff --git a/frontend/src/products/ProductList.js b/frontend/src/products/ProductList.js
index 262070b..5544783 100644
--- a/frontend/src/products/ProductList.js
+++ b/frontend/src/products/ProductList.js
@@ -14,20 +14,19 @@ function ProductList() {
 
   useEffect(() => {
     const controller = new AbortController()
-    axios.get("http://localhost:8000", {signal:controller.signal})      
+    axios.post("http://115.85.181.95:30002/recommend/personal?top_k=10", [201149], {signal:controller.signal})      
     .then( response => response.data)
     .then( data => {
-      console.log(data);
       setProducts(data);
     })
     .catch( error => console.log(error) );
-    axios.get(`http://localhost:8000`, {signal:controller.signal})      
+    axios.post(`http://115.85.181.95:30002/recommend/normal?k=10`, {signal:controller.signal})      
     .then( response => response.data)
     .then( data => {
       setTotals(data);
     })
     .catch( error => console.log(error) );
-    axios.get("http://localhost:8000", {signal:controller.signal})      
+    axios.get(`http://115.85.181.95:30002/recommend/similar/user?user_id=${11}&top_k=10`, {signal:controller.signal})      
     .then( response => response.data)
     .then( data => {
       setSimusers(data);
@@ -43,25 +42,13 @@ function ProductList() {
   applyButton.setAttribute('className', "btn btn-dark apply");
   applyButton.textContent = 'Apply';
 
-  function getFilter(minprice, maxprice, category, style) {
-    axios.post(`http://localhost:8000/filter?minp=${minprice}&maxp=${maxprice}&category=${category}`, [style])
-    .then( response => response.data )
-    .then( data => {
-      setProducts(data);
-    })
-    .catch( error => console.log(error) );
-    axios.post(`http://localhost:8000/filter?minp=${minprice}&maxp=${maxprice}&category=${category}`, [style])
+  function getFilter(minprice, maxprice, category) {
+    axios.post(`http://115.85.181.95:30002/recommend/normal?k=10&minp=${minprice}&maxp=${maxprice}`, category)
     .then( response => response.data )
     .then( data => {
       setTotals(data);
     })
     .catch( error => console.log(error) );
-    axios.post(`http://localhost:8000/filter?minp=${minprice}&maxp=${maxprice}&category=${category}`, [style])
-    .then( response => response.data )
-    .then( data => {
-      setSimusers(data);
-    })
-    .catch( error => console.log(error) );
   }
 
   return (
diff --git a/frontend/src/products/StarRate.js b/frontend/src/products/StarRate.js
index 25c5b2f..a9dea88 100644
--- a/frontend/src/products/StarRate.js
+++ b/frontend/src/products/StarRate.js
@@ -17,7 +17,7 @@ function StarRate(props) {
     };
     const ratesResArr = calcStarRates();
     const id = props.id;
-    
+
     return (
         <StarRateWrap>
             {STAR_IDX_ARR.map((item, idx) => {
@@ -32,7 +32,7 @@ function StarRate(props) {
                             d='M9,2l2.163,4.279L16,6.969,12.5,10.3l.826,4.7L9,12.779,4.674,15,5.5,10.3,2,6.969l4.837-.69Z'
                             transform='translate(-2 -2)'
                         />
-                        <use clipPath={`url(#${item}_${id}_StarClip)`} href={`#${item}_${id}_Star`} fill='#966fd6'
+                        <use clipPath={`url(#${item}_${id}_StarClip)`} href={`#${item}_${id}_Star`} fill='#ff6f61'
                         />
                     </svg>
                 </span>