diff --git a/client/src/asset/images/Alarm.png b/client/src/asset/images/Alarm.png
new file mode 100644
index 00000000..ee701904
Binary files /dev/null and b/client/src/asset/images/Alarm.png differ
diff --git a/client/src/asset/images/ProfileSample.png b/client/src/asset/images/ProfileSample.png
new file mode 100644
index 00000000..782bf061
Binary files /dev/null and b/client/src/asset/images/ProfileSample.png differ
diff --git a/client/src/components/Headers/LoginHeader.tsx b/client/src/components/Headers/LoginHeader.tsx
new file mode 100644
index 00000000..af416b2e
--- /dev/null
+++ b/client/src/components/Headers/LoginHeader.tsx
@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
+import SampleProfile from "../../asset/images/ProfileSample.png"; 
+import AlarmImage from "../../asset/images/alarm.png"; 
+
+const LoginHeader: React.FC = () => {
+  const [searchValue, setSearchValue] = useState<string>('');
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value);
+  };
+
+  const logoutText = "로그아웃";
+
+  const handleLogoClick = () => {
+    console.log("Logo clicked");
+  };
+
+  return (
+    <HeaderContainer>
+      <LogoButton onClick={handleLogoClick}>
+        <LogoImage src={StockHolmLogo} />
+      </LogoButton>
+      <SearchBar value={searchValue} onChange={handleSearchChange} />
+      <UserActions>
+        <NotificationButton> 
+          <img src={AlarmImage} alt="Notification" /> 
+        </NotificationButton>
+        <ProfileButton>
+          <ProfileImage src={SampleProfile} />
+        </ProfileButton>
+        <LogoutButton>{logoutText}</LogoutButton>
+      </UserActions>
+    </HeaderContainer>
+  );
+};
+
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem ;
+  background-color: #fff;
+  border-bottom: 1px solid #2F4F4F; 
+  width: 100%;
+  height: 51px;
+`;
+
+const LogoButton = styled.button`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  
+  &:focus {
+    outline: none;
+  }
+`;
+
+const LogoImage = styled.img`
+  height: 40px;
+  width: auto;
+`;
+
+const SearchBar = styled.input.attrs({
+  type: 'text',
+  placeholder: '검색...'
+})`
+  width: 50%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const UserActions = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const NotificationButton = styled.button`
+  margin-right: 1rem; 
+  background-color: #fff;
+  border: none;
+  cursor: pointer;
+
+  img {   
+    height: 40px;
+    width: auto;
+  }
+`;
+
+const ProfileButton = styled.button`
+  margin-right: 1rem;
+  background-color: transparent; // You can adjust this color if needed
+  border: none;
+  cursor: pointer;
+  padding: 0;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const ProfileImage = styled.img`
+  height: 40px;
+  width: auto;
+`;
+
+
+const LogoutButton = styled.button`
+  background-color: #fff;
+  color: #2F4F4F; 
+  border: 1px solid #2F4F4F; 
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #f2f2f2; 
+  }
+`;
+
+
+
+export default LoginHeader;
diff --git a/client/src/components/header.tsx b/client/src/components/Headers/LogoutHeader.tsx
similarity index 74%
rename from client/src/components/header.tsx
rename to client/src/components/Headers/LogoutHeader.tsx
index 68f1b8c1..04418fba 100644
--- a/client/src/components/header.tsx
+++ b/client/src/components/Headers/LogoutHeader.tsx
@@ -1,9 +1,9 @@
 
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import StockHolmLogo from "../asset/images/StockHolmLogo.png"
+import StockHolmLogo from "../../asset/images/StockHolmLogo.png"
 
-const Header: React.FC = () => {
+const LogoutHeader: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>('');
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -12,17 +12,21 @@ const Header: React.FC = () => {
 
   const loginText = "로그인";
 
+  const handleLogoClick = () => {
+    console.log("Logo clicked");
+  };
+
   return (
     <HeaderContainer>
-      <LogoImage src={StockHolmLogo} />
+      <LogoButton onClick={handleLogoClick}>
+        <LogoImage src={StockHolmLogo} />
+      </LogoButton>
       <SearchBar value={searchValue} onChange={handleSearchChange} />
       <LoginButton>{loginText}</LoginButton>
     </HeaderContainer>
   );
 };
 
-
-
 const HeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -35,6 +39,17 @@ const HeaderContainer = styled.div`
   
 `;
 
+const LogoButton = styled.button`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  
+  &:focus {
+    outline: none;
+  }
+`;
+
 const LogoImage = styled.img`
   height: 40px;
   width: auto;
@@ -64,4 +79,4 @@ const LoginButton = styled.button`
   }
 `;
 
-export default Header;
+export default LogoutHeader;
diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
index 43b64fc5..cc799abc 100644
--- a/client/src/page/MainPage.tsx
+++ b/client/src/page/MainPage.tsx
@@ -1,10 +1,12 @@
 import { styled } from "styled-components";
-import Header from "../components/header"
+import LogoutHeader from "../components/Headers/LogoutHeader"
+import LoginHeader from "../components/Headers/LoginHeader"
 
 const MainPage = () => {
   return (
     <Container>
-      <Header />
+      <LoginHeader />
+      <LogoutHeader />
       <Main>
         <LeftSection></LeftSection>
         <CentralSection></CentralSection>