diff --git a/public/images/buttons/dark.png b/public/images/buttons/dark.png
new file mode 100644
index 0000000..ac58019
Binary files /dev/null and b/public/images/buttons/dark.png differ
diff --git a/public/images/logos/logo.png b/public/images/logos/logo.png
new file mode 100644
index 0000000..c888548
Binary files /dev/null and b/public/images/logos/logo.png differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
old mode 100644
new mode 100755
index d1487e8..4cbe6df
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,10 @@
-export default function Home() {
+import Header from '@/components/Layouts/Header/Header';
+import * as styles from '@/styles/rootStyles.css';
+
+export default function RootPage() {
   return (
-    <main>
-      <div />
-    </main>
+    <div className={styles.wrapper}>
+      <Header />
+    </div>
   );
 }
diff --git a/src/components/Layouts/Header/Header.tsx b/src/components/Layouts/Header/Header.tsx
new file mode 100755
index 0000000..b0302e6
--- /dev/null
+++ b/src/components/Layouts/Header/Header.tsx
@@ -0,0 +1,16 @@
+import Image from 'next/image';
+import * as styles from './header.css';
+
+export default function Header() {
+  return (
+    <header className={styles.wrapper}>
+      <a className={styles.left} href="/" aria-label="Home">
+        <Image src="/images/logos/logo.png" alt="Logo" width={54} height={54} />
+        <h1 className={styles.title}>TechBlogHub</h1>
+      </a>
+      <nav className={styles.right} aria-label="User controls">
+        <Image src="/images/buttons/dark.png" alt="theme" width={32} height={32} />
+      </nav>
+    </header>
+  );
+}
diff --git a/src/components/Layouts/Header/header.css.ts b/src/components/Layouts/Header/header.css.ts
new file mode 100755
index 0000000..3765dbd
--- /dev/null
+++ b/src/components/Layouts/Header/header.css.ts
@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+
+  width: '100dvw',
+  height: '80px',
+  maxWidth: '1200px',
+});
+
+export const title = style({
+  fontSize: '35px',
+});
+
+export const left = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+});
+
+export const right = style({
+  display: 'flex',
+  flexDirection: 'row',
+});
diff --git a/src/styles/globalStyles.css.ts b/src/styles/globalStyles.css.ts
old mode 100644
new mode 100755
index 0c8e87e..d25b92e
--- a/src/styles/globalStyles.css.ts
+++ b/src/styles/globalStyles.css.ts
@@ -2,15 +2,14 @@ import { createGlobalTheme, globalStyle } from '@vanilla-extract/css';
 
 export const vars = createGlobalTheme(':root', {
   color: {
-    primary: 'blue',
-    secondary: 'pink',
+    primary: '#ffff',
   },
 });
 
 globalStyle('html, body', {
   margin: 0,
   padding: 0,
-  backgroundColor: vars.color.secondary,
+  backgroundColor: '#000',
   color: 'white',
   height: '100%',
 });
@@ -18,3 +17,8 @@ globalStyle('html, body', {
 globalStyle('*', {
   boxSizing: 'border-box',
 });
+
+globalStyle('a', {
+  textDecoration: 'none',
+  color: '#fff',
+});
diff --git a/src/styles/rootStyles.css.ts b/src/styles/rootStyles.css.ts
new file mode 100644
index 0000000..616bc3b
--- /dev/null
+++ b/src/styles/rootStyles.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+});