diff --git a/src/assets/meals.jpg b/src/assets/meals.jpg
new file mode 100644
index 0000000..e81347a
Binary files /dev/null and b/src/assets/meals.jpg differ
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
new file mode 100644
index 0000000..0dd9e12
--- /dev/null
+++ b/src/components/Layout/Header.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import mealsImage from '../../assets/meals.jpg';
+import classes from './Header.module.css';
+
+const Header = () => {
+
+    return <>
+        <header className={classes.header}>
+            <h1>ReactMeals</h1>
+            <button>Cart</button>
+        </header>
+        <div className={classes['main-image']}>
+            <img src={mealsImage} alt="A table full of delicious food!" />
+        </div>
+    </>
+};
+
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/Layout/Header.module.css b/src/components/Layout/Header.module.css
new file mode 100644
index 0000000..5dedcb1
--- /dev/null
+++ b/src/components/Layout/Header.module.css
@@ -0,0 +1,29 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 5rem;
+  background-color: #8a2b06;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  z-index: 10;
+}
+
+.main-image {
+  width: 100%;
+  height: 25rem;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.main-image img {
+  width: 110%;
+  height: 100%;
+  object-fit: cover;
+  transform: rotateZ(-5deg) translateY(-4rem) translateX(-1rem);
+}
\ No newline at end of file