diff --git a/src/components/features/Inputs/Search/Search.css.ts b/src/components/features/Inputs/Search/Search.css.ts
index 99b1cf1..d49c8a1 100644
--- a/src/components/features/Inputs/Search/Search.css.ts
+++ b/src/components/features/Inputs/Search/Search.css.ts
@@ -7,8 +7,8 @@ export const wrapper = style({
   flexDirection: 'row',
   backgroundColor: '#fff',
 
-  width: '30dvw',
-  height: '7dvh',
+  width: '27rem',
+  height: '3rem',
   padding: '10px 20px',
   borderRadius: '50px',
 
@@ -24,8 +24,6 @@ export const tagWrapper = style({
   display: 'flex',
   flexDirection: 'row',
 
-  backgroundColor: 'red',
-
   marginRight: 'auto',
 });
 
@@ -37,7 +35,6 @@ export const tagBox = style({
   fontSize: '12px',
 
   marginRight: '10px',
-  marginBottom: '10px',
 });
 
 export const OutExpandedWrapper = style({
@@ -69,8 +66,8 @@ export const expandedWrapper = style({
   display: 'flex',
   flexDirection: 'column',
 
-  width: '30dvw',
-  height: '50dvh',
+  width: '37rem',
+  height: '22rem',
 
   backgroundColor: '#fff',
 
@@ -106,11 +103,19 @@ export const expandedTagWrapper = style({
 export const relatedTagWrapper = style({
   display: 'flex',
   flexDirection: 'column',
+
+  margin: '0',
+  padding: '0',
 });
 
 export const relatedTagBox = style({
   display: 'flex',
   flexDirection: 'row',
+  alignItems: 'center',
+
+  width: '100%',
+
+  gap: '10px',
 });
 
 export const relatedTagText = style({
diff --git a/src/components/features/Inputs/Search/Search.tsx b/src/components/features/Inputs/Search/Search.tsx
index d5b3cbf..9271d79 100644
--- a/src/components/features/Inputs/Search/Search.tsx
+++ b/src/components/features/Inputs/Search/Search.tsx
@@ -2,10 +2,11 @@
 
 import { useState } from 'react';
 import Image from 'next/image';
+import Tag from '@/components/atoms/Icons/Tag/Tag';
 import * as styles from './Search.css';
 
 export default function Search() {
-  const [isExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(false);
   const [tagList, setTagList] = useState<string[]>([]);
   const [inputValue, setInputValue] = useState(''); // 입력값을 저장할 state 추가
 
@@ -16,6 +17,10 @@ export default function Search() {
     }
   };
 
+  const onClickExpanded = () => {
+    setIsExpanded((prev) => !prev);
+  };
+
   return (
     <div className={styles.wrapper}>
       {isExpanded ? (
@@ -40,21 +45,37 @@ export default function Search() {
 
             <ul className={styles.relatedTagWrapper}>
               <li className={styles.relatedTagBox}>
+                <Tag />
                 <p className={styles.relatedTagText}>관련 태그</p>
               </li>
               <li className={styles.relatedTagBox}>
+                <Tag />
                 <p className={styles.relatedTagText}>관련 태그</p>
               </li>
             </ul>
           </div>
 
-          <div className={styles.OutExpandedWrapper} />
+          <div
+            className={styles.OutExpandedWrapper}
+            onClick={onClickExpanded}
+            role="button"
+            tabIndex={0}
+            aria-label="검색 축속 화면 버튼"
+            onKeyDown={handleKeyDown}
+          />
         </>
       ) : (
         <>
-          <div className={styles.tagWrapper}>
-            {new Array(3).fill('React').map((el) => (
-              <div key="test" className={styles.tagBox}>
+          <div
+            className={styles.tagWrapper}
+            onClick={onClickExpanded}
+            role="button"
+            tabIndex={0}
+            aria-label="검색 확장 버튼"
+            onKeyDown={handleKeyDown}
+          >
+            {new Array(3).fill('React').map((el, index) => (
+              <div className={styles.tagBox} key={`${index + el}`}>
                 {el}
               </div>
             ))}