diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx
new file mode 100644
index 000000000..41a54e23f
--- /dev/null
+++ b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx
@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router-dom';
+
+import { ICON_NAME } from '@constants/iconName';
+
+import Icon from '@components/common/Icon';
+import * as S from './style';
+
+const ProductDetailHeader = () => {
+  const navigate = useNavigate();
+  return (
+    <S.Header>
+      <button onClick={() => navigate(-1)}>
+        <Icon name={ICON_NAME.CHEVRON_LEFT} />
+      </button>
+      <Icon name={ICON_NAME.ELLIPSIS} />
+    </S.Header>
+  );
+};
+
+export default ProductDetailHeader;
diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/style.ts b/fe/src/components/ProductDetail/ProductDetailHeader/style.ts
new file mode 100644
index 000000000..6f094d1c1
--- /dev/null
+++ b/fe/src/components/ProductDetail/ProductDetailHeader/style.ts
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+const Header = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+
+  width: 100%;
+  height: 44px;
+  padding: 16px;
+`;
+
+export { Header };
diff --git a/fe/src/components/ProductDetail/ProductDetailMain/index.tsx b/fe/src/components/ProductDetail/ProductDetailMain/index.tsx
index d1677c667..f2862f7ab 100644
--- a/fe/src/components/ProductDetail/ProductDetailMain/index.tsx
+++ b/fe/src/components/ProductDetail/ProductDetailMain/index.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { ICON_NAME } from '@constants/index';
 import { getTextWithTimeStamp } from '@utils/index';
@@ -35,17 +34,8 @@ const ProductDetailMain = ({
 }: ProductDetailMainProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const navigate = useNavigate();
-
   return (
     <>
-      <S.Header>
-        <button onClick={() => navigate(-1)}>
-          <Icon name={ICON_NAME.CHEVRON_LEFT} />
-        </button>
-        <Icon name={ICON_NAME.ELLIPSIS} />
-      </S.Header>
-
       <S.Product>
         <S.ProductImgListLayout>
           <S.ProductImgList>
diff --git a/fe/src/components/ProductDetail/ProductDetailMain/style.ts b/fe/src/components/ProductDetail/ProductDetailMain/style.ts
index 5b465c6c4..4f4ee165f 100644
--- a/fe/src/components/ProductDetail/ProductDetailMain/style.ts
+++ b/fe/src/components/ProductDetail/ProductDetailMain/style.ts
@@ -2,16 +2,6 @@ import styled, { css } from 'styled-components';
 
 import Button from '@components/common/Button';
 
-const Header = styled.header`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: fixed;
-
-  width: 100%;
-  height: 44px;
-  padding: 16px;
-`;
 const Product = styled.section`
   overflow-y: scroll;
 
@@ -186,7 +176,6 @@ const ChattingDetailButton = styled(Button)`
 `;
 
 export {
-  Header,
   Product,
   ProductInfo,
   ProductImgListLayout,
diff --git a/fe/src/pages/ProductDetail/index.tsx b/fe/src/pages/ProductDetail/index.tsx
index 8c49309d8..5cb361e84 100644
--- a/fe/src/pages/ProductDetail/index.tsx
+++ b/fe/src/pages/ProductDetail/index.tsx
@@ -5,6 +5,7 @@ import { REQUEST_URL } from '@constants/index';
 
 import useFetch, { REQUEST_METHOD } from '@hooks/useFetch';
 
+import ProductDetailHeader from '@components/ProductDetail/ProductDetailHeader';
 import ProductDetailMain from '@components/ProductDetail/ProductDetailMain';
 import ProductDetailToolBar from '@components/ProductDetail/ProductDetailToolBar';
 
@@ -107,6 +108,7 @@ const ProductDetail = () => {
       {responseState === 'LOADING' && <div>loading</div>}
       {responseState === 'SUCCESS' && postData && (
         <>
+          <ProductDetailHeader />
           <ProductDetailMain {...postData} interestCount={interestCount} />
           <ProductDetailToolBar
             isInterested={isInterested}