diff --git a/src/assets/img/btn_main_top_left.svg b/src/assets/img/btn_main_top_left.svg
new file mode 100644
index 0000000..2f7a3dd
--- /dev/null
+++ b/src/assets/img/btn_main_top_left.svg
@@ -0,0 +1,14 @@
+
+
+
diff --git a/src/assets/img/btn_main_top_right.png b/src/assets/img/btn_main_top_right.png
deleted file mode 100644
index d21d608..0000000
Binary files a/src/assets/img/btn_main_top_right.png and /dev/null differ
diff --git a/src/assets/img/btn_main_top_right.svg b/src/assets/img/btn_main_top_right.svg
new file mode 100644
index 0000000..da2e7a9
--- /dev/null
+++ b/src/assets/img/btn_main_top_right.svg
@@ -0,0 +1,14 @@
+
+
+
diff --git a/src/assets/img/input_dropdown.png b/src/assets/img/input_dropdown.png
new file mode 100644
index 0000000..9032549
Binary files /dev/null and b/src/assets/img/input_dropdown.png differ
diff --git a/src/assets/img/red_edge.png b/src/assets/img/red_edge.png
new file mode 100644
index 0000000..bee4c48
Binary files /dev/null and b/src/assets/img/red_edge.png differ
diff --git a/src/assets/img/top_menu_down.png b/src/assets/img/top_menu_down.png
new file mode 100644
index 0000000..60432f9
Binary files /dev/null and b/src/assets/img/top_menu_down.png differ
diff --git a/src/components/Header.tsx/TImer.tsx b/src/components/Header.tsx/TImer.tsx
new file mode 100644
index 0000000..03137fb
--- /dev/null
+++ b/src/components/Header.tsx/TImer.tsx
@@ -0,0 +1,53 @@
+import {useEffect, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import styled from 'styled-components';
+
+interface TimerProps {
+ name: string;
+}
+
+function Timer({name}: TimerProps) {
+ const navigate = useNavigate();
+ const [time, setTime] = useState(1800);
+
+ const formatTime = (time: number) => {
+ return time.toString().padStart(2, '0');
+ };
+
+ const resetTime = () => {
+ setTime(1800);
+ };
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setTime(prev => prev - 1);
+ }, 1000);
+
+ if (time === 0) {
+ navigate('/login');
+ }
+
+ return () => clearInterval(timer);
+ }, [time]);
+
+ return (
+
+ {name}
+
+ 님 [00:{formatTime(Math.floor(time / 60))}:{formatTime(time % 60)}]
+
+
+ );
+}
+
+const TimerWrap = styled.button`
+ ${props => props.theme.texts.tableTitle};
+ font-size: 1.3rem;
+
+ > span {
+ color: ${props => props.theme.colors.neutral4};
+ font-weight: 400;
+ }
+`;
+
+export default Timer;
diff --git a/src/components/Header.tsx/TopMenu.tsx b/src/components/Header.tsx/TopMenu.tsx
new file mode 100644
index 0000000..53f34c9
--- /dev/null
+++ b/src/components/Header.tsx/TopMenu.tsx
@@ -0,0 +1,107 @@
+import styled from 'styled-components';
+import {useNavigate} from 'react-router-dom';
+import Left from '@assets/img/btn_main_top_left.svg?react';
+import Right from '@assets/img/btn_main_top_right.svg?react';
+import logout from '@assets/img/logout.png';
+import down from '@assets/img/top_menu_down.png';
+import notice from '@assets/img/notice.png';
+import setting from '@assets/img/setitng.png';
+import menu from '@assets/img/menu.png';
+import Timer from './TImer';
+
+function TopMenu() {
+ const navigate = useNavigate();
+ const name = '세종대';
+
+ const handleLogout = () => {
+ navigate('/login');
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ PC
+ 
+
+
+ KOR
+
+
+
+ 
+ 
+ 
+
+
+ );
+}
+
+const TopMenuContainer = styled.div`
+ display: flex;
+ align-items: center;
+ column-gap: 1rem;
+`;
+
+const ArrowWrap = styled.div`
+ display: flex;
+ align-items: center;
+ column-gap: 1.2rem;
+ margin-right: 1.5rem;
+`;
+
+const StyledLeft = styled(Left)`
+ fill: ${props => props.theme.colors.neutral4};
+ &:hover {
+ fill: ${props => props.theme.colors.primary};
+ }
+`;
+
+const StyledRight = styled(Right)`
+ fill: ${props => props.theme.colors.neutral4};
+ &:hover {
+ fill: ${props => props.theme.colors.primary};
+ }
+`;
+
+const LogoutBtn = styled.button`
+ background-image: url(${logout});
+ width: 1.4rem;
+ height: 1.4rem;
+
+ &:hover {
+ filter: brightness(20%);
+ }
+`;
+
+const DropdownWrap = styled.div`
+ ${props => props.theme.texts.tableTitle};
+ font-size: 1.3rem;
+ display: flex;
+ align-items: center;
+ column-gap: 1.5rem;
+
+ > img {
+ &:hover {
+ filter: brightness(20%);
+ }
+ }
+`;
+
+const GroupWrap = styled.div`
+ display: flex;
+ column-gap: 1rem;
+
+ > img {
+ &:hover {
+ filter: brightness(20%);
+ }
+ }
+`;
+
+export default TopMenu;
diff --git a/src/components/Header.tsx/TopNav.tsx b/src/components/Header.tsx/TopNav.tsx
new file mode 100644
index 0000000..66293f8
--- /dev/null
+++ b/src/components/Header.tsx/TopNav.tsx
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+function TopNav() {
+ return (
+
+ 학부생학사정보
+ 학생서비스
+
+ );
+}
+
+const TopNavContatiner = styled.div`
+ display: flex;
+ flex-shrink: 0;
+`;
+
+const TopNavWrap = styled.button`
+ ${props => props.theme.texts.title};
+ font-size: 1.6rem;
+ margin-right: 4rem;
+
+ &:focus {
+ color: ${props => props.theme.colors.primary};
+ }
+`;
+
+export default TopNav;
diff --git a/src/components/Header.tsx/index.tsx b/src/components/Header.tsx/index.tsx
new file mode 100644
index 0000000..1e99463
--- /dev/null
+++ b/src/components/Header.tsx/index.tsx
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import logo from '@assets/img/main_logo.png';
+import TopNav from './TopNav';
+import TopMenu from './TopMenu';
+
+function Header() {
+ return (
+
+
+
+