diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..69947ef
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,10 @@
+import "@styles/App.scss";
+import Header from "@components/Header";
+
+export default function App() {
+	return (
+		<div id="app">
+			<Header />
+		</div>
+	);
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..f2c0e38
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,18 @@
+import "@styles/Header.scss";
+export default function Header() {
+	return (
+		<header className="header">
+			<div className="logo">brandname</div>
+			<div className="links">
+				<a href="">Link1</a>
+				<a href="">Link2</a>
+				<a href="">Link3</a>
+				<a href="">Link4</a>
+			</div>
+			<div className="control">
+				<div>Theme</div>
+				<div>Language</div>
+			</div>
+		</header>
+	);
+}
diff --git a/src/main.tsx b/src/main.tsx
index bbbf833..08e1636 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./pages/App.tsx";
+import App from "./App.tsx";
 import "@styles/index.scss";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
deleted file mode 100644
index 0ebd319..0000000
--- a/src/pages/App.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import "@styles/App.scss";
-
-function App() {
-	return <>Test</>;
-}
-
-export default App;
diff --git a/src/styles/App.scss b/src/styles/App.scss
index e69de29..b73be33 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -0,0 +1,4 @@
+#app {
+	display: flex;
+	flex-direction: column;
+}
diff --git a/src/styles/Header.scss b/src/styles/Header.scss
new file mode 100644
index 0000000..51b3d3a
--- /dev/null
+++ b/src/styles/Header.scss
@@ -0,0 +1,42 @@
+.header {
+	padding: 1rem 2rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 5rem;
+	flex-direction: row;
+
+	.logo {
+		flex: 0.5;
+	}
+
+	.links {
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-around;
+
+		a {
+			margin-left: 1rem;
+			text-decoration: none;
+			color: #323232;
+			font-weight: 600;
+			font-size: 1.2rem;
+			transition: all 0.1s ease-in-out;
+			border-bottom: 3px solid transparent;
+
+			&:hover {
+				color: #000000;
+				border-color: #000000;
+			}
+		}
+	}
+
+	.control {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		flex: 0.5;
+	}
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0c78bcf..91a1c7a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -13,3 +13,9 @@
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-text-size-adjust: 100%;
 }
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}