diff --git a/client/src/components/EntireList/EntireList.tsx b/client/src/components/EntireList/EntireList.tsx
index 9279ffa2..9e8ac5c7 100644
--- a/client/src/components/EntireList/EntireList.tsx
+++ b/client/src/components/EntireList/EntireList.tsx
@@ -28,10 +28,14 @@ const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListTy
 
   return (
     <WatchListContainer>
-      <Header currentListType={currentListType} onChangeListType={onChangeListType} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
-      <Divider1 />
-      {isLogin == 0 ? (<HoldingsAmount>"로그인이 필요한 서비스 입니다."</HoldingsAmount>) : (<HoldingsAmount>현금 보유량: {holdingsAmount}원</HoldingsAmount>)}
-      <Divider2 />
+      <Header1Container>
+        <Header currentListType={currentListType} onChangeListType={onChangeListType} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
+      </Header1Container>
+      <Divider />
+      <Header2Container>
+        {isLogin == 0 ? (<HoldingsAmount>로그인이 필요한 서비스 입니다.</HoldingsAmount>) : (<HoldingsAmount>현금 보유량: {holdingsAmount}원</HoldingsAmount>)}
+      </Header2Container>
+      <Divider />
       <StockList>
         {isLoading ? <div>Loading...</div> : isError ? <div>Error fetching data</div> : companiesList.map((company) => <StockItem key={company.companyId} company={company} setShowChangePrice={setShowChangePrice} showChangePrice={showChangePrice} />)}
       </StockList>
@@ -55,11 +59,21 @@ const WatchListContainer = styled.div`
   align-items: flex-start;
 `;
 
-const Divider1 = styled.div`
-  margin: 0px;
-  padding: 0px;
+const Header1Container =styled.div`
+  height: 48px;
+  display: flex;
+
+`;
+
+const Header2Container =styled.div`
+  height: 43.5px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+`;
+
+const Divider = styled.div`
   width: 100%;
-  height: 10px;
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #2f4f4f;
@@ -68,21 +82,10 @@ const Divider1 = styled.div`
 const HoldingsAmount = styled.div`
   font-size: 16px;
   font-weight: bold;
-  margin: 8px 12px;
-  text-align: center;
+  margin-left: 20px;
   color: darkslategray; // 현금 보유량을 파란색으로 표시
 `;
 
-const Divider2 = styled.div`
-  margin: 0px;
-  padding: 0px;
-  width: 100%;
-  height: 4.5px;
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid #2f4f4f;
-`;
-
 const StockList = styled.div`
   height: 100%;
   width: 100%;
diff --git a/client/src/components/EntireList/Header.tsx b/client/src/components/EntireList/Header.tsx
index 50ea82a7..20c02df3 100644
--- a/client/src/components/EntireList/Header.tsx
+++ b/client/src/components/EntireList/Header.tsx
@@ -17,7 +17,7 @@ const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMe
       <HeaderText>{currentListType}</HeaderText>
       {isMenuOpen && (
         <SlideMenu>
-          <MenuItem onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem>
+          <MenuItem1 onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem1>
           <MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
           <MenuItem onClick={() => { onChangeListType(HOLDING_LIST); setMenuOpen(false); }}>{HOLDING_LIST}</MenuItem>
         </SlideMenu>
@@ -41,16 +41,18 @@ const HeaderWrapper = styled.div`
 `;
 
 const Icon = styled.img`
-  margin-top: 9.5px;
-  margin-left: 10px;
+  margin: 0px 10px 0px 10px;
   width: 24px;
   height: 24px;
   cursor: pointer;
-  margin-right: 10px;
+
+  &:hover {
+    background-color: #f2f2f2; 
+  }
 `;
 
 const HeaderText = styled.span`
-  margin-top: 9.5px;
+  margin-top: 2px;
   font-size: 18px;
 `;
 
@@ -58,19 +60,31 @@ const SlideMenu = styled.div`
   position: absolute;
   top: 100%;
   left: 0;
-  width: 248px;
+  width: 247px;
   background-color: #f7f7f7;
-  border: 1px solid #e0e0e0; /* 밑에 가로줄 추가 */
+  border-top: 1px solid black; 
+  border-right: 1px solid black; 
+  border-left: 1px solid black; 
   display: flex;
   flex-direction: column;
 `;
 
 const MenuItem = styled.button`
-  padding: 8px 16px;
+  height: 40px;
+  padding: 8px 44px;
   border: none;
-  background-color: transparent;
+  background-color: white;
   cursor: pointer;
   text-align: left;
+  border-bottom:1px solid black;
+  font-size: 17px;
+
+  &:hover {
+    background-color: #f2f2f2; 
+  }
+`;
+const MenuItem1 = styled(MenuItem)`
+  border-left: 4px solid darkslategray; 
 `;
 
 export default Header;
diff --git a/client/src/components/EntireList/StockItem.tsx b/client/src/components/EntireList/StockItem.tsx
index f06bb014..5462a851 100644
--- a/client/src/components/EntireList/StockItem.tsx
+++ b/client/src/components/EntireList/StockItem.tsx
@@ -1,26 +1,31 @@
-import React from 'react';
+import React, { useState }  from 'react';
 import styled from 'styled-components';
 import logo from '../../asset/images/StockHolmImage.png';
 
-const StockItem: React.FC<StockItemProps> = ({ company, setShowChangePrice, showChangePrice }) => {
+const StockItem: React.FC<StockItemProps> = ({ company }) => {
   const isPositiveChange = parseFloat(company.stockChangeRate) > 0;
-  const priceColor = isPositiveChange ? 'red' : 'blue';
+  const priceColor1 = isPositiveChange ? "#ed2926" : "#2679ed";
+  const priceColor2 = isPositiveChange ? "#f87369" : "#5a99f8";
+
+
+  const [showChangePrice, setShowChangePrice] = useState(false); // 상태를 여기로 이동
 
   return (
-    <StockItemWrapper>
+    <StockItemWrapper
+      onMouseEnter={() => setShowChangePrice(true)}  // StockItemWrapper에 이벤트 리스너 적용
+      onMouseLeave={() => setShowChangePrice(false)}
+    >
       <Logo src={logo} alt="stock logo" />
       <StockInfo>
         <StockName>{company.korName}</StockName>
         <StockCode>{company.code}</StockCode>
       </StockInfo>
       <StockPriceSection>
-        <StockPrice change={priceColor}>{company.stockPrice}</StockPrice>
+        <StockPrice change={priceColor1}>{company.stockPrice}</StockPrice>
         <StockChange
-          change={priceColor}
-          onMouseEnter={() => setShowChangePrice(true)}
-          onMouseLeave={() => setShowChangePrice(false)}
+          change={priceColor2}
         >
-          {showChangePrice ? `${company.stockChangeAmount}%` : `${company.stockChangeRate}%`}
+          {showChangePrice ? `${company.stockChangeAmount}` : `${company.stockChangeRate}%`}
         </StockChange>
       </StockPriceSection>
     </StockItemWrapper>
@@ -58,7 +63,7 @@ const Logo = styled.img`
   border-radius: 50%;
   width: 40px;
   height: 40px;
-  margin-right: 12px;
+  margin-right: 10px;
 `;
 
 const StockInfo = styled.div`
@@ -69,18 +74,21 @@ const StockInfo = styled.div`
 `;
 
 const StockName = styled.span`
-  font-weight: bold;
+  font-weight: 500;
 `;
 
 const StockCode = styled.span`
   color: gray;
+  font-weight: 400;
+  font-size: 14px;
 `;
 
 const StockPriceSection = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: flex-end;
   margin-left: auto; /* 자동으로 왼쪽 여백 추가 */
+  margin-right:10px;
 `;
 
 const StockPrice = styled.span<{ change: string }>`
@@ -90,6 +98,8 @@ const StockPrice = styled.span<{ change: string }>`
 const StockChange = styled.span<{ change: string }>`
   color: ${(props) => props.change};
   cursor: pointer;
+  font-size:14px;
+
 `;
 
 export default StockItem;
diff --git a/client/src/components/HoldingList/Header.tsx b/client/src/components/HoldingList/Header.tsx
index 664d63b9..5dab7850 100644
--- a/client/src/components/HoldingList/Header.tsx
+++ b/client/src/components/HoldingList/Header.tsx
@@ -19,13 +19,16 @@ const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMe
         <SlideMenu>
           <MenuItem onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem>
           <MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
-          <MenuItem onClick={() => { onChangeListType(HOLDING_LIST); setMenuOpen(false); }}>{HOLDING_LIST}</MenuItem>
+          <MenuItem1 onClick={() => { onChangeListType(HOLDING_LIST); setMenuOpen(false); }}>{HOLDING_LIST}</MenuItem1>
         </SlideMenu>
       )}
     </HeaderWrapper>
   );
 };
 
+export default Header;
+
+
 type HeaderProps = {
   currentListType: string;
   onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
@@ -41,16 +44,15 @@ const HeaderWrapper = styled.div`
 `;
 
 const Icon = styled.img`
-  margin-top: 9.5px;
   width: 24px;
   height: 24px;
   cursor: pointer;
   margin-right: 10px;
-  margin-left:10px;
+  margin-left: 10px;
 `;
 
 const HeaderText = styled.span`
-  margin-top: 9.5px;
+  margin-top: 2px;
   font-size: 18px;
 `;
 
@@ -58,19 +60,30 @@ const SlideMenu = styled.div`
   position: absolute;
   top: 100%;
   left: 0;
-  width: 248px;
+  width: 247px;
   background-color: #f7f7f7;
-  border: 1px solid #e0e0e0; /* 밑에 가로줄 추가 */
+  border-top: 1px solid black; 
+  border-right: 1px solid black; 
+  border-left: 1px solid black; 
   display: flex;
   flex-direction: column;
 `;
 
 const MenuItem = styled.button`
-  padding: 8px 16px;
+  height: 40px;
+  padding: 8px 44px;
   border: none;
-  background-color: transparent;
+  background-color: white;
   cursor: pointer;
   text-align: left;
+  border-bottom:1px solid black;
+  font-size: 17px;
+
+  &:hover {
+    background-color: #f2f2f2; 
+  }
+`;
+const MenuItem1 = styled(MenuItem)`
+  border-left: 4px solid darkslategray; 
 `;
 
-export default Header;
diff --git a/client/src/components/HoldingList/HoldingList.tsx b/client/src/components/HoldingList/HoldingList.tsx
index f0610297..c422e67a 100644
--- a/client/src/components/HoldingList/HoldingList.tsx
+++ b/client/src/components/HoldingList/HoldingList.tsx
@@ -22,15 +22,21 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
 
   return (
     <WatchListContainer>
-      <Header
-        currentListType={currentListType}
-        onChangeListType={onChangeListType}
-        isMenuOpen={isMenuOpen}
-        setMenuOpen={setMenuOpen}
-      />
-      <Divider1 />
-      <EvaluationProfit>평가 수익금: {totalEvaluationProfit.toLocaleString()}원</EvaluationProfit>
-      <Divider2 />
+      <Header1Container>
+        <Header
+          currentListType={currentListType}
+          onChangeListType={onChangeListType}
+          isMenuOpen={isMenuOpen}
+          setMenuOpen={setMenuOpen}
+        />
+      </Header1Container>
+      <Divider />
+      <Header2Container>
+      <EvaluationProfit profit={totalEvaluationProfit}>
+         평가 수익금: {totalEvaluationProfit.toLocaleString()}원
+      </EvaluationProfit>
+      </Header2Container>
+      <Divider />
       <StockList>
         {isLoading || isCompanyDataLoading ? (
           <div>Loading...</div>
@@ -71,33 +77,35 @@ const WatchListContainer = styled.div`
   align-items: flex-start;
 `;
 
-const Divider1 = styled.div`
-  margin: 0px;
-  padding: 0px;
-  width: 100%;
-  height: 10px;
+const Header1Container =styled.div`
+  height: 48px;
   display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid #2f4f4f;
 `;
-const EvaluationProfit = styled.div`
-  font-size: 16px;
-  font-weight: bold;
-  margin: 8px 12px;
-  text-align: center;
-  color: red;
+
+const Header2Container =styled.div`
+  height: 43.5px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
 `;
 
-const Divider2 = styled.div`
-  margin: 0px;
-  padding: 0px;
+const Divider = styled.div`
   width: 100%;
-  height: 4.5px;
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #2f4f4f;
 `;
-
+const EvaluationProfit = styled.div<{ profit: number }>`
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 20px;
+  text-align: center;
+  color: ${props => 
+    props.profit === 0 ? '#000' :
+    props.profit > 0 ? '#e22926' :
+    '#2679ed'
+  };
+`;
 
 const StockList = styled.div`
   height: 100%;
diff --git a/client/src/components/HoldingList/StockItem.tsx b/client/src/components/HoldingList/StockItem.tsx
index 6555fe17..6f69733e 100644
--- a/client/src/components/HoldingList/StockItem.tsx
+++ b/client/src/components/HoldingList/StockItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React,{ useState } from 'react';
 import styled from 'styled-components';
 import logo from '../../asset/images/StockHolmImage.png';
 
@@ -28,7 +28,8 @@ export type StockItemProps = {
 
 
 
-const StockItem: React.FC<StockItemProps> = ({ companyData, stockData, setShowChangePrice, showChangePrice }) => {
+const StockItem: React.FC<StockItemProps> = ({ companyData, stockData }) => {
+  const [showChangePrice, setShowChangePrice] = useState(false);  // local state
   const {  stockCount, reserveSellStockCount, totalPrice, percentage, stockReturn } = stockData;
   const totalStocksHeld = stockCount + reserveSellStockCount;
   const company = companyData ? companyData : undefined;
@@ -41,13 +42,15 @@ const StockItem: React.FC<StockItemProps> = ({ companyData, stockData, setShowCh
     stockChangeRate = '' 
   } = company || {};
   
-    // Format percentage to two decimal places
-    const formattedPercentage = parseFloat(percentage.toFixed(2));
+  // Format percentage to two decimal places
+  const formattedPercentage = parseFloat(percentage.toFixed(2));
 
 
   return (
     <>
-      <ItemContainer>
+      <ItemContainer         onMouseEnter={() => setShowChangePrice(true)}  // Mouse event handlers
+        onMouseLeave={() => setShowChangePrice(false)}>
+        
         <Logo src={logo} alt="stock logo" />
         <StockInfo>
           <StockName>{korName}</StockName>
@@ -165,8 +168,8 @@ const DetailData = styled.span`
 `;
 
 const getColorByValue = (value: string) => {
-  if (value.startsWith('')) return 'red';
-  if (value.startsWith('-')) return 'blue';
+  if (value.startsWith('')) return '#ed2926';
+  if (value.startsWith('-')) return '#2679ed';
   return 'black';
 };
 
diff --git a/client/src/components/watchlist/Header.tsx b/client/src/components/watchlist/Header.tsx
index 664d63b9..424449fe 100644
--- a/client/src/components/watchlist/Header.tsx
+++ b/client/src/components/watchlist/Header.tsx
@@ -18,7 +18,7 @@ const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMe
       {isMenuOpen && (
         <SlideMenu>
           <MenuItem onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem>
-          <MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
+          <MenuItem1 onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem1>
           <MenuItem onClick={() => { onChangeListType(HOLDING_LIST); setMenuOpen(false); }}>{HOLDING_LIST}</MenuItem>
         </SlideMenu>
       )}
@@ -26,6 +26,8 @@ const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMe
   );
 };
 
+export default Header;
+
 type HeaderProps = {
   currentListType: string;
   onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
@@ -33,7 +35,6 @@ type HeaderProps = {
   setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -41,36 +42,45 @@ const HeaderWrapper = styled.div`
 `;
 
 const Icon = styled.img`
-  margin-top: 9.5px;
+  margin: 0px 10px 0px 10px;
   width: 24px;
   height: 24px;
   cursor: pointer;
-  margin-right: 10px;
-  margin-left:10px;
 `;
 
 const HeaderText = styled.span`
-  margin-top: 9.5px;
+  margin-top: 2px;
   font-size: 18px;
 `;
-
 const SlideMenu = styled.div`
   position: absolute;
   top: 100%;
   left: 0;
-  width: 248px;
+  width: 247px;
   background-color: #f7f7f7;
-  border: 1px solid #e0e0e0; /* 밑에 가로줄 추가 */
+  border-top: 1px solid black; 
+  border-right: 1px solid black; 
+  border-left: 1px solid black; 
   display: flex;
   flex-direction: column;
 `;
 
 const MenuItem = styled.button`
-  padding: 8px 16px;
+  height: 40px;
+  padding: 8px 44px;
   border: none;
-  background-color: transparent;
+  background-color: white;
   cursor: pointer;
   text-align: left;
+  border-bottom:1px solid black;
+  font-size: 17px;
+
+  &:hover {
+    background-color: #f2f2f2; 
+  }
+`;
+const MenuItem1 = styled(MenuItem)`
+  border-left: 4px solid darkslategray; 
 `;
 
-export default Header;
+
diff --git a/client/src/components/watchlist/StockItem.tsx b/client/src/components/watchlist/StockItem.tsx
index f06bb014..a6fda6ac 100644
--- a/client/src/components/watchlist/StockItem.tsx
+++ b/client/src/components/watchlist/StockItem.tsx
@@ -1,26 +1,27 @@
-import React from 'react';
+import React,{ useState } from 'react';
 import styled from 'styled-components';
 import logo from '../../asset/images/StockHolmImage.png';
 
-const StockItem: React.FC<StockItemProps> = ({ company, setShowChangePrice, showChangePrice }) => {
+const StockItem: React.FC<StockItemProps> = ({ company }) => {
+  const [showChangePrice, setShowChangePrice] = useState(false);  
   const isPositiveChange = parseFloat(company.stockChangeRate) > 0;
-  const priceColor = isPositiveChange ? 'red' : 'blue';
+  const priceColor1 = isPositiveChange ? "#ed2926" : "#2679ed";
+  const priceColor2 = isPositiveChange ? "#f87369" : "#5a99f8";
 
   return (
-    <StockItemWrapper>
+    <StockItemWrapper 
+      onMouseEnter={() => setShowChangePrice(true)}
+      onMouseLeave={() => setShowChangePrice(false)}
+    >
       <Logo src={logo} alt="stock logo" />
       <StockInfo>
         <StockName>{company.korName}</StockName>
         <StockCode>{company.code}</StockCode>
       </StockInfo>
       <StockPriceSection>
-        <StockPrice change={priceColor}>{company.stockPrice}</StockPrice>
-        <StockChange
-          change={priceColor}
-          onMouseEnter={() => setShowChangePrice(true)}
-          onMouseLeave={() => setShowChangePrice(false)}
-        >
-          {showChangePrice ? `${company.stockChangeAmount}%` : `${company.stockChangeRate}%`}
+        <StockPrice change={priceColor1}>{company.stockPrice}</StockPrice>
+        <StockChange change={priceColor2}>
+          {showChangePrice ? `${company.stockChangeAmount}` : `${company.stockChangeRate}%`}
         </StockChange>
       </StockPriceSection>
     </StockItemWrapper>
@@ -38,8 +39,6 @@ type NewCompanyData = {
 
 type StockItemProps = {
   company: NewCompanyData;
-  setShowChangePrice: React.Dispatch<React.SetStateAction<boolean>>;
-  showChangePrice: boolean;
 };
 
 const StockItemWrapper = styled.div`
@@ -69,18 +68,21 @@ const StockInfo = styled.div`
 `;
 
 const StockName = styled.span`
-  font-weight: bold;
+  font-weight: 500;
 `;
 
 const StockCode = styled.span`
   color: gray;
+  font-weight: 400;
+  font-size: 14px;
 `;
 
 const StockPriceSection = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: flex-end;
   margin-left: auto; /* 자동으로 왼쪽 여백 추가 */
+  margin-right: 10px;
 `;
 
 const StockPrice = styled.span<{ change: string }>`
@@ -90,6 +92,7 @@ const StockPrice = styled.span<{ change: string }>`
 const StockChange = styled.span<{ change: string }>`
   color: ${(props) => props.change};
   cursor: pointer;
+  font-size:14px;
 `;
 
 export default StockItem;
diff --git a/client/src/components/watchlist/StockSearchComponent.tsx b/client/src/components/watchlist/StockSearchComponent.tsx
index 114cdd3d..c202b65d 100644
--- a/client/src/components/watchlist/StockSearchComponent.tsx
+++ b/client/src/components/watchlist/StockSearchComponent.tsx
@@ -79,8 +79,9 @@ const StyledSearchInput = styled.input.attrs({
   width: 100%;
   padding: 0.5rem;
   border: 1px solid #ccc;
-  border-radius: 4px;
+  border-radius: 5px;
   flex: 1;
+  margin-left:8px;
 `;
 
 const StyledSearchButton = styled.button`
diff --git a/client/src/components/watchlist/WatchList.tsx b/client/src/components/watchlist/WatchList.tsx
index a0cbeaae..dca41a43 100644
--- a/client/src/components/watchlist/WatchList.tsx
+++ b/client/src/components/watchlist/WatchList.tsx
@@ -9,7 +9,6 @@ import { RootState } from '../../store/config.ts';  // Redux store의 RootState
 
 const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType }) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
-  const [showChangePrice, setShowChangePrice] = useState(false);
 
   const loginStatus = useSelector((state: RootState) => state.login);
 
@@ -42,35 +41,34 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
 
   return (
     <WatchListContainer>
-      <Header
-        currentListType={currentListType}
-        onChangeListType={onChangeListType}
-        isMenuOpen={isMenuOpen}
-        setMenuOpen={setMenuOpen}
-      />
-      <Divider1 />
-      <StockSearchComponent />
-      <Divider2 />
-      <StockList>
-  {isLoading ? (
-    <div>Loading...</div>
-  ) : isError ? (
-    <div>Error fetching data</div>
-  ) : loginStatus === 1 ? (
-    companiesList
-      .filter(company => searchedCompanyIds.includes(company.companyId))
-      .map((company) => (
-        <StockItem
-          key={company.companyId}
-          company={company}
-          setShowChangePrice={setShowChangePrice}
-          showChangePrice={showChangePrice}
+      <Header1Container>
+        <Header
+          currentListType={currentListType}
+          onChangeListType={onChangeListType}
+          isMenuOpen={isMenuOpen}
+          setMenuOpen={setMenuOpen}
         />
-      ))
-  ) : (
-    <div>로그인이 필요합니다.</div>
-  )}
-</StockList>
+      </Header1Container>
+      <Divider />
+      <Header2Container>
+        <StockSearchComponent />
+      </Header2Container>
+      <Divider />
+      <StockList>
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : isError ? (
+          <div>Error fetching data</div>
+        ) : loginStatus === 1 ? (
+        companiesList
+        .filter(company => searchedCompanyIds.includes(company.companyId))
+        .map((company) => (
+            <StockItem key={company.companyId} company={company} />
+          ))
+        ) : (
+        <div>로그인이 필요합니다.</div>
+  )   }
+    </StockList>
 
     </WatchListContainer>
   );
@@ -90,21 +88,18 @@ const WatchListContainer = styled.div`
   align-items: flex-start;
 `;
 
-const Divider1 = styled.div`
-  margin:0px;
-  padding:0px;
-  width: 100%;
-  height: 10px;
+const Header1Container =styled.div`
+  height: 48px;
+  display: flex;
+`;
+
+const Header2Container =styled.div`
+  height: 43.5px;
   display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid #2f4f4f;
 `;
 
-const Divider2 = styled.div`
-  margin:0px;
-  padding:0px;
+const Divider = styled.div`
   width: 100%;
-  height: 4.5px;
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #2f4f4f;