diff --git a/package.json b/package.json
index c0fb5d1..af1057a 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "mini-css-extract-plugin": "^2.7.2",
     "npm": "^9.3.1",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
   }
 }
diff --git a/src/App.js b/src/App.js
index 57c5e91..e0e65f5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,13 @@
+import header from './Components/Header/Header.js'
+
 export default class {
 
 	render(){
-		return 'Application'
+		let headerComponent = header('Rock Scissor Paper')
+		return (`
+			${headerComponent}
+			Application
+		`)
 	}
 
 }
diff --git a/src/Components/Header/Header.css b/src/Components/Header/Header.css
new file mode 100644
index 0000000..3bbaba8
--- /dev/null
+++ b/src/Components/Header/Header.css
@@ -0,0 +1,5 @@
+header{
+	text-align: center;
+	border-bottom: 1px solid #eee;
+	margin-bottom: 1em;
+}
diff --git a/src/Components/Header/Header.js b/src/Components/Header/Header.js
new file mode 100644
index 0000000..f385efc
--- /dev/null
+++ b/src/Components/Header/Header.js
@@ -0,0 +1,8 @@
+import header from './Header.css'
+export default (props) => {
+	return `
+		<header>
+			<h1>Rock Paper Scissor</h1>
+		</header>
+	`;	
+}
diff --git a/webpack.config.js b/webpack.config.js
index 3e10e40..9f1c2d5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -32,7 +32,7 @@ module.exports = {
 	plugins: [
 		new HtmlWebpackPlugin({
 			template: './src/index.html',
-			title: 'Rock Paper Scissor'
+			title: 'Rock Paper Scissor',
 		}),
 		new MiniCssExtractPlugin(),
 	]