diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts
index ef1d5042..7e440353 100644
--- a/src/components/Common/index.ts
+++ b/src/components/Common/index.ts
@@ -25,3 +25,4 @@ export { default as PageHeader } from './PageHeader/PageHeader';
 export { default as Badge } from './Badge/Badge';
 export { default as WriteButton } from './WriteButton/WriteButton';
 export { default as Text } from './Text/Text';
+export { default as TopBar } from './TopBar/TopBar';
diff --git a/src/pages/ProductSearchListPage/ProductSearchListPage.tsx b/src/pages/ProductSearchListPage/ProductSearchListPage.tsx
index 828710b0..fa9f1b8b 100644
--- a/src/pages/ProductSearchListPage/ProductSearchListPage.tsx
+++ b/src/pages/ProductSearchListPage/ProductSearchListPage.tsx
@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import { container } from './productSearchListPage.css';
 
-import { PageHeader } from '@/components/Common';
+import { TopBar } from '@/components/Common';
 import { ProductOverviewList } from '@/components/Product';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteProductSearchResultsQuery } from '@/hooks/queries/search';
@@ -24,7 +24,11 @@ export const ProductSearchListPage = () => {
 
   return (
     <>
-      <PageHeader title={`'${searchQuery}'이/가 포함된 상품`} hasBackLink />
+      <TopBar>
+        <TopBar.BackLink />
+        <TopBar.Title title={`'${searchQuery}'이/가 포함된 상품`} />
+        <TopBar.Spacer />
+      </TopBar>
       <div className={container}>
         <ProductOverviewList products={products} hasBorder />
       </div>
diff --git a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx
index eee7a8c5..a5933f05 100644
--- a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx
+++ b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx
@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import { listWrapper } from './recipeSearchListPage.css';
 
-import { PageHeader } from '@/components/Common';
+import { TopBar } from '@/components/Common';
 import { DefaultRecipeItem } from '@/components/Recipe';
 import SearchNotFound from '@/components/Search/SearchNotFound/SearchNotFound';
 import { useIntersectionObserver } from '@/hooks/common';
@@ -25,7 +25,11 @@ export const RecipeSearchListPage = () => {
 
   return (
     <>
-      <PageHeader title={`'${searchQuery}'이/가 포함된 꿀조합`} hasBackLink />
+      <TopBar>
+        <TopBar.Title title={`'${searchQuery}'이/가 포함된 꿀조합`} />
+        <TopBar.BackLink />
+        <TopBar.Spacer />
+      </TopBar>
       <ul className={listWrapper}>
         {recipes.map((recipe) => (
           <li key={recipe.id}>