diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 6adcfe1..389e569 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -9,10 +9,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="1037c537-7e44-4e38-b957-179e7a33b0cd" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/pages/ContainerCamera.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.eslintrc.json" beforeDir="false" afterPath="$PROJECT_DIR$/.eslintrc.json" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/pages/SearchDetail.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/header/Header.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/components/header/Header.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/ChangePwd.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/pages/ChangePwd.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -66,27 +67,27 @@
     <option name="showLibraryContents" value="true" />
     <option name="showScratchesAndConsoles" value="false" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "Node.js.eslint.config.mjs.executor": "Run",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "dart.analysis.tool.window.visible": "false",
-    "git-widget-placeholder": "feature/#3",
-    "last_opened_file_path": "C:/Users/Master/yiu-alsl-adizzi-app-react",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.standard": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.standard": "",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\Master\\yiu-alsl-adizzi-app-react\\node_modules\\prettier",
-    "run.code.analysis.last.selected.profile": "pProject Default",
-    "settings.editor.selected.configurable": "vcs.Git",
-    "ts.external.directory.path": "C:\\Users\\Master\\yiu-alsl-adizzi-app-react\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;Node.js.eslint.config.mjs.executor&quot;: &quot;Run&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;dart.analysis.tool.window.visible&quot;: &quot;false&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;feature/#4&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Master/yiu-alsl-adizzi-app-react&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.standard&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.standard&quot;: &quot;&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Master\\yiu-alsl-adizzi-app-react\\node_modules\\prettier&quot;,
+    &quot;run.code.analysis.last.selected.profile&quot;: &quot;pProject Default&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;vcs.Git&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Master\\yiu-alsl-adizzi-app-react\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="C:\Users\Master\yiu-alsl-adizzi-app-react\public\images" />
@@ -139,6 +140,9 @@
       <workItem from="1731157049067" duration="63000" />
       <workItem from="1731157122963" duration="4406000" />
       <workItem from="1731211160316" duration="8054000" />
+      <workItem from="1731251533665" duration="1940000" />
+      <workItem from="1731295866173" duration="723000" />
+      <workItem from="1731296741153" duration="2772000" />
     </task>
     <servers />
   </component>
@@ -156,6 +160,11 @@
         <entry key="Branch">
           <value>
             <list>
+              <RecentGroup>
+                <option name="FILTER_VALUES">
+                  <option value="feature/#4" />
+                </option>
+              </RecentGroup>
               <RecentGroup>
                 <option name="FILTER_VALUES">
                   <option value="feature/#3" />
@@ -191,7 +200,7 @@
                   <entry key="branch">
                     <value>
                       <list>
-                        <option value="feature/#3" />
+                        <option value="feature/#4" />
                       </list>
                     </value>
                   </entry>
diff --git a/app/page.tsx b/app/page.tsx
index 616b85f..4f03561 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import ContainerCamera from '@/pages/ContainerCamera';
+import SearchDetail from '@/pages/SearchDetail';
 
 export default function Home() {
   return (
     <main>
-      <ContainerCamera />
+      <SearchDetail />
     </main>
   );
 }
diff --git a/components/header/Header.tsx b/components/header/Header.tsx
index 07e9c98..7ac344f 100644
--- a/components/header/Header.tsx
+++ b/components/header/Header.tsx
@@ -1,8 +1,10 @@
 import styled from 'styled-components';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
 type HeaderProps = {
   label: string;
 };
+
 function Header({ label }: HeaderProps) {
   return (
     <HeaderContainer>
diff --git a/pages/ChangePwd.tsx b/pages/ChangePwd.tsx
index 64f2f5c..f36b3ff 100644
--- a/pages/ChangePwd.tsx
+++ b/pages/ChangePwd.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import Header from '@/components/header';
 import LInput from '@/components/input/LInput';
 import LButton from '@/components/button/largeButton';
+import Header from '@/components/header/Header';
 
 function ChangePwd() {
   return (
diff --git a/pages/SearchDetail.tsx b/pages/SearchDetail.tsx
new file mode 100644
index 0000000..b049400
--- /dev/null
+++ b/pages/SearchDetail.tsx
@@ -0,0 +1,95 @@
+import styled from 'styled-components';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import SearchIcon from '@mui/icons-material/Search';
+import RestoreIcon from '@mui/icons-material/Restore';
+import ClearIcon from '@mui/icons-material/Clear';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+
+function SearchDetail() {
+  return (
+    <>
+      <SearchContainer>
+        <ArrowBackIcon />
+        <SearchText>검색어</SearchText>
+        <SearchIcon />
+      </SearchContainer>
+      <DeleteRecentContainer>
+        <RecentText>최근 검색어</RecentText>
+        <DeleteText>전체 삭제</DeleteText>
+      </DeleteRecentContainer>
+      <SearchList>
+        {searchData.map((search) => (
+          <ListItem key={search.text}>
+            <RestoreIcon />
+            <SearchListItemText primary={search.text} />
+            <ClearIcon />
+          </ListItem>
+        ))}
+      </SearchList>
+    </>
+  );
+}
+
+const searchData = [
+  {
+    text: '용용인형',
+  },
+  {
+    text: '쉽게 배우는 파이썬',
+  },
+  {
+    text: '미분적분학',
+  },
+  {
+    text: 'lg 그램 2023',
+  },
+  {
+    text: '태권도 도복',
+  },
+];
+
+const SearchText = styled.div`
+  margin-left: 10px;
+  font-size: 16px;
+  font-weight: bold;
+  flex: 1;
+`;
+
+const SearchContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 50px;
+  padding: 0 10px;
+  border-bottom: 1px solid #5dda6f;
+  width: 100%;
+`;
+
+const DeleteRecentContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 5% 5%;
+  align-items: center;
+`;
+
+const RecentText = styled.div`
+  font-size: 14px;
+  font-weight: bold;
+`;
+
+const DeleteText = styled.div`
+  font-size: 14px;
+  font-weight: bold;
+`;
+
+const SearchList = styled.div`
+  width: 100%;
+`;
+
+const SearchListItemText = styled(ListItemText)`
+  color: black;
+  margin-left: 5%;
+`;
+
+export default SearchDetail;