diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 077f396..73151d9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,8 +19,8 @@
         "node-emoji": "^2.1.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.22.1",
         "react-kakao-maps-sdk": "^1.1.26",
+        "react-router-dom": "^6.22.1",
         "react-scripts": "^5.0.1",
         "sort-by": "^1.2.0",
         "webpack": "^5.90.1",
diff --git a/frontend/package.json b/frontend/package.json
index 0cbe57c..a39327c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,8 +22,9 @@
     "node-emoji": "^2.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.1",
+    "react-router-dom": "^6.21.3",
     "react-kakao-maps-sdk": "^1.1.26",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "^5.0.1",
     "sort-by": "^1.2.0",
     "webpack": "^5.90.1",
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 52843b1..f115bed 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -16,99 +16,6 @@ main {
   height: 100vh;
 }
 
-
-Resources fieldset {
-  width: 98%;
-  height: 300px;
-}
-header {
-  width: 100%;
-  height: 109px;
-  background-color: #224932;
-  border-bottom: 5px solid black;
-}
-
-/* 로고 */
-#logo {
-  float: left;
-  width: 50px;
-  height: 65px;
-  padding: 20px;
-  color: white;
-}
-
-/* 배너 이름 */
-#siteName {
-  color: white;
-  font-family: 'EHWA';
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 30px;
-  letter-spacing: 0em;
-  text-align: center;
-  padding-top: 40px;
-}
-
-/* button {
-    padding: 10px;
-    cursor: pointer;
-    background: #D9D9D9;
-  
-  }
-  
-  #loginPopup {
-    display: none;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: 20px;
-    z-index: 1000;
-    background: white;
-    border: 1px solid black;
-  } */
-
-/* 사이드 영역 */
-
-aside {
-  width: 30%;
-  max-width: 350px;
-  border-right: 5px solid black;
-  padding: 20px;
-  overflow-y: auto;
-  flex-shrink: 0;
-  max-height: 800px;
-}
-
-#side {
-  width: 98%;
-  padding: 0;
-  margin: 0 auto;
-}
-
-/* 카페 검색 */
-form {
-  height: auto;
-}
-
-#cafe-search {
-  width: 98%;
-  height: 50px;
-  padding: 8px;
-  border-radius: 10px;
-  background: #fafafaed;
-}
-
-/* 해시태그 */
-#hashtags {
-  background: #d9d9d9;
-  width: 98%;
-  height: 50px;
-  border-radius: 10px;
-  margin-top: 10px;
-  font-size: 15px;
-}
-
 /* 카페 리스트 */
 .cafeList {
   margin-left: 0;
@@ -206,18 +113,6 @@ li {
   border: 2px solid #333;
 }
 
-/* -------------- */
-/* 지도 영역 */
-
-section {
-  flex: 1;
-}
-
-/* Resources fieldset {
-  width: 98%;
-  height: 300px;
-} */
-
 /* 추가된 스타일 */
 #loginPopup {
   display: none;
diff --git a/frontend/src/cardInfo/CardInfo.jsx b/frontend/src/cardInfo/CardInfo.jsx
index ce31f7c..6d5bdf7 100644
--- a/frontend/src/cardInfo/CardInfo.jsx
+++ b/frontend/src/cardInfo/CardInfo.jsx
@@ -16,30 +16,23 @@ export function CardInfo() {
         <div className="hash">#포토존</div> 
       </div>
       <div id="operating-hours">평일 12:0~22:00 / 주말 11:00~22:00</div>
+      
       <div className="review-box">
-       {/* <img id= "cof_icon" alt = "cof" src = "./assets/cofimg.png" />
-       */}
-       <div id = "review-name" >평점</div> 
-       
-       <div className="review-wrap">
-        <div className="review">
-          <h3>리뷰</h3>
-          <h4>멀티탭이 많아요</h4>
-        </div>
-
-        {/* <div className="review">
+        {/* <img id= "cof_icon" alt = "cof" src = "./assets/cofimg.png" />
+         */}
+        <div id="review-name">평점</div>
+        <div className="review-wrap">
+          <div className="review">
+            <h3>리뷰</h3>
+            <h4>멀티탭이 많아요</h4>
+          </div>
+          {/* <div className="review">
           <h3>리뷰</h3>
           <h4>멀티탭이 많아요</h4>
         </div> */}
-
-       </div>
-
-
-
+        </div>
       </div>
-
-      <div id="menu">대표메뉴 </div>
-
+      <div id="menu">대표메뉴</div>
       <div className="menulist-wrap">
         <img id="menulist" alt="menu" src="./assets/americano.png" />
         <img id="menulist" alt="menu" src="./assets/americano.png" />
diff --git a/frontend/src/cardInfo/cardInfo.css b/frontend/src/cardInfo/cardInfo.css
index e1e8837..91db7a4 100644
--- a/frontend/src/cardInfo/cardInfo.css
+++ b/frontend/src/cardInfo/cardInfo.css
@@ -1,116 +1,110 @@
-
 .cafeinfo-box {
-    background-color: #fff;
-    margin: 5px;
-    height: 1050px;
-    padding: 20px;
-    border: 2px solid #333;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .review-box{
-    background-color: #7AC66D;
-    width: 230px;
-    height: 200px;
-    padding: 20px;
-    border: 2px solid #333;
-    border-radius: 10px;
-    
-  }
-  #review-name{
-    position: relative;
-    font-size: 23px; 
-    top:0px;
-    left: -70px;
-    height: 30px;
-    font-weight: bold;
-    
-  }
-  .review-wrap{
-    display:flex;
-    flex-wrap:wrap;
-    justify-content: center;
-  }
-  .review{
-    position: relative;
-    border: 2px solid #000000;
-    background-color: #ffffff;
-    font-size: 15px;
-    color: #000000;
-    padding: 8px;
-    top:0px;
-    margin: 5px;
-    width: 200px;
-    height: 20px;
-    border-radius: 10px;
-    font-weight: lighter;
-  }
-  h3{
-    position:relative;
-    font-weight:lighter;
-    font-size: 18px;
-    width: 50px;
-    height: 20px;
-    left: 0px;
-  }
-  h4{
-    position:relative;
-    font-weight: lighter;
-    font-size:15px;
-    width: 200px;
-    height: 20px;
-    left: 20px;
-    top: -16px;
-  }
-  .hash-warp {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  .hash {
-    border: 2px solid #276830;
-    background-color: #419764;
-    font-size: 15px;
-    color: #fff;
-    padding: 8px;
-    position: relative;
-    top: -20px;
-    margin: 5px;
-    width: 90px;
-    height: 18px;
-    border-radius: 10px;
-    font-weight: lighter;
-  }
-  #cafeinfoimg {
-    position: relative;
-    left: 0px;
-    top:  -20px;
-    width: 270px;
-    height: 270px;
-    border-radius: 30px;
-    border: 2px solid #333;
-  }
-  #back_icon{
-    position:relative;
-    left:0px;
-    top:0px;
-    width:30px;
-    height:30px;
-
-  }
-  #cof-icon{
-
-    position:relative;
-    width:10px;
-    height:10px;
-    left:0px;
-    top:10px;
-    
-  }
+  background-color: #fff;
+  margin: 5px;
+  height: 1050px;
+  padding: 20px;
+  border: 2px solid #333;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.review-box {
+  background-color: #7ac66d;
+  width: 230px;
+  height: 200px;
+  padding: 20px;
+  border: 2px solid #333;
+  border-radius: 10px;
+}
+#review-name {
+  position: relative;
+  font-size: 23px;
+  top: 0px;
+  left: -70px;
+  height: 30px;
+  font-weight: bold;
+}
+.review-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.review {
+  position: relative;
+  border: 2px solid #000000;
+  background-color: #ffffff;
+  font-size: 15px;
+  color: #000000;
+  padding: 8px;
+  top: 0px;
+  margin: 5px;
+  width: 200px;
+  height: 20px;
+  border-radius: 10px;
+  font-weight: lighter;
+}
+h3 {
+  position: relative;
+  font-weight: lighter;
+  font-size: 18px;
+  width: 50px;
+  height: 20px;
+  left: 0px;
+}
+h4 {
+  position: relative;
+  font-weight: lighter;
+  font-size: 15px;
+  width: 200px;
+  height: 20px;
+  left: 20px;
+  top: -16px;
+}
+.hash-warp {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.hash {
+  border: 2px solid #276830;
+  background-color: #419764;
+  font-size: 15px;
+  color: #fff;
+  padding: 8px;
+  position: relative;
+  top: -20px;
+  margin: 5px;
+  width: 90px;
+  height: 18px;
+  border-radius: 10px;
+  font-weight: lighter;
+}
+#cafeinfoimg {
+  position: relative;
+  left: 0px;
+  top: -20px;
+  width: 270px;
+  height: 270px;
+  border-radius: 30px;
+  border: 2px solid #333;
+}
+#back_icon {
+  position: relative;
+  left: 0px;
+  top: 0px;
+  width: 30px;
+  height: 30px;
+}
+#cof-icon {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  left: 0px;
+  top: 10px;
+}
 
 #cafe-name {
   font-size: 24px;
@@ -123,24 +117,23 @@
 }
 
 #operating-hours,
-#operating-state{
+#operating-state {
   position: relative;
   border: 2px solid #276830;
   background-color: #d8e2dc;
   top: -10px;
-  height:30px;
+  height: 30px;
   margin: 5px;
   left: 0px;
   font-size: 17px;
   color: #333;
 }
-#menu{
+#menu {
+  position: relative;
+  top: 20px;
 
-  position:relative;
-  top:20px;
-  
   font-size: 17px;
-  color:#333;
+  color: #333;
 }
 .menulist-warp {
   display: flex;
@@ -148,18 +141,15 @@
   justify-content: center;
 }
 
-#menulist{
-
+#menulist {
   position: relative;
   left: 0px;
-  top:  0px;
+  top: 0px;
   width: 100px;
   height: 100px;
-  
+
   padding: 10px;
-  margin:5px;
+  margin: 5px;
   border-radius: 30px;
   border: 1px solid #333;
-
-}
-  
\ No newline at end of file
+ }
\ No newline at end of file