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/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}>