diff --git a/src/components/Common/TopBar/TopBar.tsx b/src/components/Common/TopBar/TopBar.tsx
index 7f997124..32e19d06 100644
--- a/src/components/Common/TopBar/TopBar.tsx
+++ b/src/components/Common/TopBar/TopBar.tsx
@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-import { Link } from 'react-router-dom';
+import type { ComponentPropsWithoutRef, MouseEventHandler } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 
 import { LeftNavigationWrapper, container, headerTitle, leftTitle, register } from './topBar.css';
 import SvgIcon from '../Svg/SvgIcon';
@@ -31,8 +31,21 @@ const Logo = () => {
 };
 
 const BackLink = ({ state }: TopBarProps) => {
+  const navigate = useNavigate();
+
+  const handleBack: MouseEventHandler<HTMLAnchorElement> = (event) => {
+    event.preventDefault();
+
+    if (state) {
+      navigate('..', { state, relative: 'path' });
+      return;
+    }
+
+    navigate(-1);
+  };
+
   return (
-    <Link to=".." relative="path" state={state}>
+    <Link to="#" onClick={handleBack}>
       <SvgIcon variant="arrowLeft" stroke={vars.colors.gray5} width={20} height={20} />
     </Link>
   );
diff --git a/src/components/Product/ProductItem/ProductItem.tsx b/src/components/Product/ProductItem/ProductItem.tsx
index 6e6e7def..25baea67 100644
--- a/src/components/Product/ProductItem/ProductItem.tsx
+++ b/src/components/Product/ProductItem/ProductItem.tsx
@@ -1,18 +1,10 @@
 import { Skeleton } from '@fun-eat/design-system';
 import { memo, useState } from 'react';
 
-import {
-  container,
-  imageWrapper,
-  preview,
-  previewWrapper,
-  productImage,
-  productName,
-  productPrice,
-  summaryWrapper,
-} from './productItem.css';
+import { container, imageWrapper, previewWrapper, productImage, summaryWrapper } from './productItem.css';
 
-import { SvgIcon } from '@/components/Common';
+import { SvgIcon, Text } from '@/components/Common';
+import { ellipsis } from '@/styles/common.css';
 import { vars } from '@/styles/theme.css';
 import type { Product } from '@/types/product';
 
@@ -42,22 +34,27 @@ const ProductItem = ({ product }: ProductItemProps) => {
         )}
       </div>
       <div style={{ height: '8px' }} />
-      <p className={productName}>{name}</p>
+      <Text className={ellipsis} size="caption3" weight="semiBold" color="sub">
+        {name}
+      </Text>
       <div style={{ height: '2px' }} />
-      <p className={productPrice}>{price.toLocaleString('ko-KR')}원</p>
+      {/* 추후 bold로 변경 */}
+      <Text size="caption2" weight="semiBold" color="sub">
+        {price.toLocaleString('ko-KR')}원
+      </Text>
       <div style={{ height: '8px' }} />
       <div className={summaryWrapper}>
         <div className={previewWrapper}>
           <SvgIcon variant="star2" width={11} height={11} fill={vars.colors.gray2} />
-          <span className={preview} aria-label={`${averageRating}점`}>
+          <Text as="span" size="caption3" color="disabled" aria-label={`${averageRating}점`}>
             {averageRating.toFixed(1)}
-          </span>
+          </Text>
         </div>
         <div className={previewWrapper}>
           <SvgIcon variant="review2" width={11} height={11} />
-          <span className={preview} aria-label={`리뷰 ${reviewCount}개`}>
+          <Text as="span" size="caption3" color="disabled" aria-label={`리뷰 ${reviewCount}개`}>
             {reviewCount}
-          </span>
+          </Text>
         </div>
       </div>
     </div>
diff --git a/src/components/Product/ProductItem/productItem.css.ts b/src/components/Product/ProductItem/productItem.css.ts
index 891e86e6..17701c41 100644
--- a/src/components/Product/ProductItem/productItem.css.ts
+++ b/src/components/Product/ProductItem/productItem.css.ts
@@ -17,19 +17,6 @@ export const productImage = style({
   aspectRatio: '1 / 1',
 });
 
-export const productName = style({
-  fontWeight: 600,
-  lineHeight: 1.4,
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
-export const productPrice = style({
-  fontWeight: 500,
-  lineHeight: 1.4,
-});
-
 export const summaryWrapper = style({
   display: 'flex',
   gap: 12,
diff --git a/src/components/Product/ProductList/productList.css.ts b/src/components/Product/ProductList/productList.css.ts
index 7d17c4f7..3b85ccd8 100644
--- a/src/components/Product/ProductList/productList.css.ts
+++ b/src/components/Product/ProductList/productList.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateColumns: 'minmax(0, 1fr) 1fr',
   gridAutoRows: 'auto',
   columnGap: 10,
   rowGap: 20,
diff --git a/src/components/Product/ProductPreviewList/ProductPreviewList.tsx b/src/components/Product/ProductPreviewList/ProductPreviewList.tsx
index e49c5bb7..d86a3959 100644
--- a/src/components/Product/ProductPreviewList/ProductPreviewList.tsx
+++ b/src/components/Product/ProductPreviewList/ProductPreviewList.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 
-import { container } from './productPreviewList.css';
+import { container, productItemWrapper } from './productPreviewList.css';
 import ProductItem from '../ProductItem/ProductItem';
 
 import { PATH } from '@/constants/path';
@@ -23,7 +23,7 @@ const ProductPreviewList = ({ categoryId }: ProductPreviewListProps) => {
   return (
     <ul className={container}>
       {productToDisplay.map((product) => (
-        <li key={product.id}>
+        <li key={product.id} className={productItemWrapper}>
           <Link to={`${PATH.PRODUCT_LIST}/detail/${product.id}`}>
             <ProductItem product={product} />
           </Link>
diff --git a/src/components/Product/ProductPreviewList/productPreviewList.css.ts b/src/components/Product/ProductPreviewList/productPreviewList.css.ts
index 5880a330..db05341f 100644
--- a/src/components/Product/ProductPreviewList/productPreviewList.css.ts
+++ b/src/components/Product/ProductPreviewList/productPreviewList.css.ts
@@ -6,3 +6,7 @@ export const container = style({
   padding: '0 20px',
   overflowX: 'auto',
 });
+
+export const productItemWrapper = style({
+  minWidth: 163,
+});
diff --git a/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts b/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts
index 7d17c4f7..3b85ccd8 100644
--- a/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts
+++ b/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateColumns: 'minmax(0, 1fr) 1fr',
   gridAutoRows: 'auto',
   columnGap: 10,
   rowGap: 20,
diff --git a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx
index 5dabd807..e6c398b2 100644
--- a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx
+++ b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx
@@ -4,6 +4,7 @@ import { reviewImage, tagList, tag, tagName, reviewContent } from './reviewRanki
 
 import { Text } from '@/components/Common';
 import { REVIEW_CARD_DEFAULT_IMAGE_URL } from '@/constants/image';
+import { ellipsis } from '@/styles/common.css';
 import type { ReviewRanking } from '@/types/ranking';
 import displaySlice from '@/utils/displaySlice';
 
@@ -23,7 +24,7 @@ const ReviewRankingItem = ({ productName, content, tags, image }: ReviewRankingI
     <div>
       <img src={image ?? REVIEW_CARD_DEFAULT_IMAGE_URL} className={reviewImage} alt={productName} />
       <div style={{ height: '8px' }} />
-      <Text color="sub" size="caption2" weight="semiBold">
+      <Text className={ellipsis} color="sub" size="caption2" weight="semiBold">
         {productName}
       </Text>
       <div style={{ height: '4px' }} />
diff --git a/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts b/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts
index 72d65c24..212fff57 100644
--- a/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts
+++ b/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts
@@ -4,7 +4,6 @@ import { style } from '@vanilla-extract/css';
 export const reviewImage = style({
   width: '100%',
   height: 'auto',
-  minWidth: 164,
   borderRadius: '6px',
   objectFit: 'cover',
   aspectRatio: '164 / 90',
diff --git a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
index 600f49a5..a76f1666 100644
--- a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
+++ b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 
-import { container } from './reviewRankingList.css';
+import { container, reviewItemWrapper } from './reviewRankingList.css';
 import ReviewRankingItem from '../ReviewRankingItem/ReviewRankingItem';
 
 import { PATH } from '@/constants/path';
@@ -20,7 +20,7 @@ const ReviewRankingList = () => {
   return (
     <ul className={container}>
       {reviews.map(({ reviewId, productName, content, tags, image }) => (
-        <li key={reviewId}>
+        <li key={reviewId} className={reviewItemWrapper}>
           <Link to={`${PATH.REVIEW}/${reviewId}`} onClick={handleReviewRankingLinkClick}>
             <ReviewRankingItem productName={productName} content={content} tags={tags} image={image} />
           </Link>
diff --git a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
index 68a282a0..e3273a09 100644
--- a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
+++ b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
@@ -4,4 +4,9 @@ export const container = style({
   display: 'flex',
   gap: 10,
   padding: '0 20px',
+  overflowX: 'auto',
+});
+
+export const reviewItemWrapper = style({
+  minWidth: 164,
 });
diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx
index 7dce2e8d..53965106 100644
--- a/src/components/Recipe/RecipeItem/RecipeItem.tsx
+++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx
@@ -4,7 +4,6 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import {
-  ellipsis,
   favoriteButtonWrapper,
   imageWrapper,
   productButtonWrapper,
@@ -29,6 +28,7 @@ import {
 import { PATH } from '@/constants/path';
 import RecipeItemProvider from '@/contexts/RecipeItemContext';
 import { useRecipeItemValueContext } from '@/hooks/context';
+import { ellipsis } from '@/styles/common.css';
 import type { Recipe } from '@/types/recipe';
 import { getRelativeDate } from '@/utils/date';
 import displaySlice from '@/utils/displaySlice';
diff --git a/src/components/Recipe/RecipeItem/recipeItem.css.ts b/src/components/Recipe/RecipeItem/recipeItem.css.ts
index 14ab9768..c4147208 100644
--- a/src/components/Recipe/RecipeItem/recipeItem.css.ts
+++ b/src/components/Recipe/RecipeItem/recipeItem.css.ts
@@ -65,9 +65,3 @@ export const recipeProductsCount = style({
   transform: 'translate( -50%, -50% )',
   color: vars.colors.white,
 });
-
-export const ellipsis = style({
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
diff --git a/src/components/Recipe/RecipeList/recipeList.css.ts b/src/components/Recipe/RecipeList/recipeList.css.ts
index 5de3d059..f98b8706 100644
--- a/src/components/Recipe/RecipeList/recipeList.css.ts
+++ b/src/components/Recipe/RecipeList/recipeList.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateColumns: 'minmax(0, 1fr) 1fr',
   gridAutoRows: 'auto',
   columnGap: 10,
   rowGap: 20,
diff --git a/src/mocks/data/products.json b/src/mocks/data/products.json
index a16b179e..b0a896a0 100644
--- a/src/mocks/data/products.json
+++ b/src/mocks/data/products.json
@@ -3,7 +3,7 @@
   "products": [
     {
       "id": 1,
-      "name": "꼬북칩",
+      "name": "꼬북칩 꼬북칩 꼬북칩 꼬북칩 꼬북칩 꼬북칩 꼬북칩 ",
       "price": 1500,
       "image": "https://arqachylpmku8348141.cdn.ntruss.com/app/product/mst_product/8801056232979_L.jpg",
       "averageRating": 4.5,
diff --git a/src/mocks/data/recipes.json b/src/mocks/data/recipes.json
index 1d27d242..99daa2b9 100644
--- a/src/mocks/data/recipes.json
+++ b/src/mocks/data/recipes.json
@@ -19,7 +19,7 @@
       "createdAt": "2023-08-05T10:10:10",
       "favoriteCount": 154,
       "favorite": true,
-      "content": "곰탕과 짜장면을 같이 먹을 수 있어요!",
+      "content": "곰탕과 짜장면을 같이 먹을 수 있어요! 곰탕과 짜장면을 같이 먹을 수 있어요! 곰탕과 짜장면을 같이 먹을 수 있어요! 곰탕과 짜장면을 같이 먹을 수 있어요!",
       "products": [
         {
           "id": 1,
@@ -204,7 +204,7 @@
     {
       "id": 5,
       "image": null,
-      "title": "초특급불닭콘치즈",
+      "title": "초특급불닭콘치즈 초특급불닭콘치즈 초특급불닭콘치즈 초특급불닭콘치즈 초특급불닭콘치즈",
       "author": {
         "nickname": "5번 글",
         "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/84a20dae-4770-4497-ae25-2dd552261aab"
diff --git a/src/mocks/data/reviewRankingList.json b/src/mocks/data/reviewRankingList.json
index 099c19aa..d2c7ef7f 100644
--- a/src/mocks/data/reviewRankingList.json
+++ b/src/mocks/data/reviewRankingList.json
@@ -3,7 +3,7 @@
     {
       "reviewId": 1,
       "productId": 1,
-      "productName": "구운감자슬림명란마요",
+      "productName": "구운감자슬림명란마요 구운감자슬림명란마요 구운감자슬림명란마요 구운감자슬림명란마요",
       "content": "할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다",
       "image": null,
       "categoryType": "food",
diff --git a/src/pages/ProductDetailPage/ProductDetailPage.tsx b/src/pages/ProductDetailPage/ProductDetailPage.tsx
index 04fd5d1b..3bcfd939 100644
--- a/src/pages/ProductDetailPage/ProductDetailPage.tsx
+++ b/src/pages/ProductDetailPage/ProductDetailPage.tsx
@@ -8,12 +8,12 @@ import NotFoundPage from '../NotFoundPage';
 
 import {
   SortButton,
-  PageHeader,
   SectionHeader,
   ErrorBoundary,
   ErrorComponent,
   Loading,
   SelectOptionList,
+  TopBar,
 } from '@/components/Common';
 import { ProductDetailItem, ProductRecipeList } from '@/components/Product';
 import { ReviewList } from '@/components/Review';
@@ -55,7 +55,12 @@ export const ProductDetailPage = () => {
 
   return (
     <>
-      <PageHeader title="상세" hasBackLink />
+      <TopBar>
+        <TopBar.BackLink />
+        <TopBar.Title title="상세" />
+        <TopBar.Spacer />
+      </TopBar>
+
       <main className={main}>
         <ProductDetailItem productDetail={productDetail} />
 
diff --git a/src/pages/ProductListPage/ProductListPage.tsx b/src/pages/ProductListPage/ProductListPage.tsx
index 5221ef9a..b263275e 100644
--- a/src/pages/ProductListPage/ProductListPage.tsx
+++ b/src/pages/ProductListPage/ProductListPage.tsx
@@ -7,7 +7,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import { categoryButton, listSection, main, selectButton, selectSection, sortButton } from './productListPage.css';
 import NotFoundPage from '../NotFoundPage';
 
-import { ErrorBoundary, ErrorComponent, Loading, PageHeader, SelectOptionList, SvgIcon } from '@/components/Common';
+import { ErrorBoundary, ErrorComponent, Loading, SelectOptionList, SvgIcon, TopBar } from '@/components/Common';
 import { ProductList } from '@/components/Product';
 import { CATEGORY_TYPE, PAGE_TITLE, PRODUCT_SORT_OPTIONS } from '@/constants';
 import { useSelect } from '@/hooks/common';
@@ -46,7 +46,11 @@ export const ProductListPage = () => {
 
   return (
     <>
-      <PageHeader title={pageTitle} hasBackLink hasSearchLink state={category} />
+      <TopBar>
+        <TopBar.BackLink state={category} />
+        <TopBar.Title title={pageTitle} />
+        <TopBar.SearchLink />
+      </TopBar>
 
       <main className={main}>
         <section className={selectSection}>
diff --git a/src/styles/common.css.ts b/src/styles/common.css.ts
new file mode 100644
index 00000000..8d852417
--- /dev/null
+++ b/src/styles/common.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const ellipsis = style({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});