diff --git a/components/Button.tsx b/components/Button.tsx
index c036039..b4838ff 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -26,13 +26,10 @@ const Button = ({
   return (
     <button
       style={{
-        width,
-        height,
         borderRadius: radius,
         background: backgroundStyle,
-        fontSize: size,
       }}
-      className="flex justify-center items-center text-white font-[600] whitespace-nowrap hover:opacity-90"
+      className={`flex justify-center ${width} ${height} ${size} items-center text-white font-[600] whitespace-nowrap hover:opacity-90`}
       {...props}
     >
       {children}
diff --git a/components/HeaderMenu.tsx b/components/HeaderMenu.tsx
new file mode 100644
index 0000000..728f98c
--- /dev/null
+++ b/components/HeaderMenu.tsx
@@ -0,0 +1,33 @@
+import Image from "next/image";
+import Profile from "@/public/icons/profile.png"
+import Star from "@/public/icons/star.png"
+import Link from "next/link";
+import Button from "./Button";
+import { useRouter } from "next/router";
+
+const HeaderMenu = () => {
+    const isLoggedIn = false;
+    const router = useRouter()
+
+    return (
+    <>
+      {!isLoggedIn ? (
+          <Button onClick={()=>{router.push('/login')}} width="w-[80px] md:w-[128px]" height="h-[37px] md:h-[53px]" size="text-[14px] md:text-[18px]" type="button">로그인</Button>
+      ) : (
+        <div className="flex items-center gap-[24px]">
+          <Link href={'/favorite'} className="flex items-center gap-[6px] bg-gray200 border border-purple100 rounded-[4px] py-[10px] px-[12px] text-[12px] leading-[14.32px] md:text-[14px] md:leading-[16.71px] font-normal">
+            <Image src={Star} width={14} height={17} alt="" className="align-top"/>즐겨찾기
+          </Link>
+          <div className="flex items-center gap-[6px] text-[14px] leading-[16.71px] font-normal">
+            <Image src={Profile} width={28} height={28} alt="프로필" />
+            {/* 임시 유저 네임 */}
+            <span className="hidden md:block">전상민</span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default HeaderMenu;
+
diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx
new file mode 100644
index 0000000..f6698c3
--- /dev/null
+++ b/components/Layout/Header.tsx
@@ -0,0 +1,22 @@
+import Logo from "@/public/icons/logo.svg";
+import Image from "next/image";
+import Link from "next/link";
+import HeaderMenu from "../HeaderMenu";
+
+const Header = () => {
+    
+  return (
+    <div>
+      <div className="bg-gray100 py-[13px] px-[32px] md:py-[33px] md:px-[200px]">
+        <div className="flex justify-between items-center max-w-[1520px]">
+          <Link href={"/"} className="w-[88.67px] h-[16px] md:w-[133px] md:h-[24px]">
+              <Image src={Logo} width={133} height={24} alt="로고" />
+          </Link>
+        <HeaderMenu />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index a7a790f..689d600 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,12 @@
+import Header from "@/components/Layout/Header";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Header />
+      <Component {...pageProps} />
+    </>
+  );
 }
diff --git a/public/icons/profile.png b/public/icons/profile.png
new file mode 100644
index 0000000..65f0a54
Binary files /dev/null and b/public/icons/profile.png differ
diff --git a/public/icons/star.png b/public/icons/star.png
new file mode 100644
index 0000000..0b6a10d
Binary files /dev/null and b/public/icons/star.png differ