diff --git a/src/components/App.css b/src/components/App.css
index dbedb8f..fc0cba7 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -3,11 +3,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 2px dashed blue; 
   border-radius: 10px;
-  margin-left: 15%;
-  margin-right: 15%;
+  padding-left: 15%;
+  padding-right: 15%;
   overflow: hidden;
+  background-color: var(--secondary-color-gray100) ;
 }
 
 .best-product-title, .on-sale-product-title {
diff --git a/src/components/BestProducts.css b/src/components/BestProducts.css
index 351d9a7..57281ab 100644
--- a/src/components/BestProducts.css
+++ b/src/components/BestProducts.css
@@ -30,7 +30,7 @@
 .best-product-info {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 20px;
     margin-top: 10px;
 }
 
@@ -50,8 +50,20 @@
     color: var(--secondary-color-gray500);
 }
 
-@media (max-width: 768px) {
+@media only screen and (max-width: 768px) {
+    .best-products-container {
+        grid-template-columns: repeat(1, 1fr);
+    } 
+}
+
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
     .best-products-container {
         grid-template-columns: repeat(2, 1fr);
     } 
+}
+
+@media only screen and (min-width: 1025px) {
+    .best-products-container {
+        grid-template-columns: repeat(4, 1fr);
+    } 
 }
\ No newline at end of file
diff --git a/src/components/BestProducts.js b/src/components/BestProducts.js
index 15add8a..582970a 100644
--- a/src/components/BestProducts.js
+++ b/src/components/BestProducts.js
@@ -37,7 +37,7 @@ export function BestProducts() {
             <img className="best-product-image"src={product.images} alt={product.name} />
             <div className="best-product-info">
               <h3>{product.name}</h3>
-              <p>{product.price}원</p>
+              <p>{product.price.toLocaleString()}원</p>
               <div className="best-product-favorite">
                 <button className="best-favorite-button">
                   <img src={empty_heart} alt="favorite"></img>
diff --git a/src/components/DropDown.css b/src/components/DropDown.css
index f384d34..d326ca9 100644
--- a/src/components/DropDown.css
+++ b/src/components/DropDown.css
@@ -6,10 +6,11 @@
 .dropdown-button {
     padding: 10px 15px;
     font-size: 16px;
-    background-color: #f0f0f0;
     border: 1px solid #ccc;
+    background-color: white;
     border-radius: 4px;
     cursor: pointer;
+    border-radius: 10px;
 }
 
 .dropdown-button:hover {
diff --git a/src/components/Footer.css b/src/components/Footer.css
index 237f7f2..67b88e4 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -54,6 +54,8 @@
 }
 
 .footer_sns_icons {
+    display: flex;
     margin-right: 200px;
     margin-top: -50px;
+    gap: 5px;
 }
\ No newline at end of file
diff --git a/src/components/NavBar.css b/src/components/NavBar.css
index ca9bcf8..81a48a6 100644
--- a/src/components/NavBar.css
+++ b/src/components/NavBar.css
@@ -28,7 +28,7 @@ nav {
     width: 100%;
     z-index: 1;
     padding-bottom: 7px;
-    border-bottom:#111827 2px solid;
+    border-bottom: 1px solid #E5E7EB;
 }
 
 .navbar-tap {
diff --git a/src/components/OnSaleProducts.css b/src/components/OnSaleProducts.css
index a17d60a..0e63f90 100644
--- a/src/components/OnSaleProducts.css
+++ b/src/components/OnSaleProducts.css
@@ -39,7 +39,7 @@
 .on-sale-product-info {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 20px;
   margin-top: 10px;
 }
 
@@ -59,8 +59,20 @@
   color: var(--secondary-color-gray500);
 }
 
-@media (max-width: 768px) {
-  .best-products-container {
-      grid-template-columns: repeat(2, 1fr);
-  } 
+@media only screen and (max-width: 768px) {
+    .on-sale-products-container {
+        grid-template-columns: repeat(2, 1fr);
+    } 
+}
+
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
+    .on-sale-products-container {
+        grid-template-columns: repeat(3, 1fr);
+    } 
+}
+
+@media only screen and (min-width: 1025px) {
+    .on-sale-products-container {
+        grid-template-columns: repeat(5, 1fr);
+    } 
 }
\ No newline at end of file
diff --git a/src/components/OnSaleProducts.js b/src/components/OnSaleProducts.js
index bf9fcf6..3638fd0 100644
--- a/src/components/OnSaleProducts.js
+++ b/src/components/OnSaleProducts.js
@@ -57,7 +57,7 @@ export function OnSaleProducts({ sort, page, keyword }) {
               <img className="on-sale-product-image" src={product.images || no_image_available} alt={product.name} />
               <div className="on-sale-product-info">
                 <h3>{product.name}</h3>
-                <p>{product.price}원</p>
+                <p>{product.price.toLocaleString()}원</p>
                 <div className="on-sale-product-favorite">
                   <button className="on-sale-favorite-button">
                     <img src={empty_heart} alt="favorite"></img>
diff --git a/src/components/Pagination.css b/src/components/Pagination.css
index 2a4ba8a..0086c0d 100644
--- a/src/components/Pagination.css
+++ b/src/components/Pagination.css
@@ -5,4 +5,23 @@
   padding: 0;
   margin-bottom: 100px;
   margin-top: 100px;
-}
\ No newline at end of file
+  gap: 10px;
+}
+
+.pagination button {
+  width: 42px;
+  height: 42px;
+  border-radius: 50px;
+  border-width: 0px;
+  background-color: white;
+  color: var(--secondary-color-gray600);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.pagination button:hover {
+  background-color: var(--primary-color-100);
+  color: white;
+}
+
diff --git a/src/components/SearchBar.css b/src/components/SearchBar.css
index eba2b88..b7a34e1 100644
--- a/src/components/SearchBar.css
+++ b/src/components/SearchBar.css
@@ -5,7 +5,8 @@
   font-size: 16px;
   border-radius: 10px;
   box-sizing: border-box;
-  background: #f5f5f5;
+  background: white;
+  border: 1px solid #ccc;
   border: none;
 }
 
diff --git a/src/index.css b/src/index.css
index ec2585e..c2f5d24 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,10 @@
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -5,9 +12,11 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-family: 'Pretendard-Regular', sans-serif;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+