diff --git a/src/App.scss b/src/App.scss
index c1e1e98..9211e61 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -45,4 +45,10 @@ a {
   color: $text-color;
   width: 100vw;
   height: 100vh;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index e4ca821..2a6fbf9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,7 @@ import Footer from './Footer/Footer';
 function App() {
   const [username, setUsername] = useState("");
   return (
-    <div className="App">
+    <div className="app">
       <Router>
         <Header/>
         <Routes>
diff --git a/src/Header/Header.scss b/src/Header/Header.scss
new file mode 100644
index 0000000..33bc7da
--- /dev/null
+++ b/src/Header/Header.scss
@@ -0,0 +1,19 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    background-color: #2D3047;
+}
+
+@media only screen and (min-width: 480px) {
+    img {
+        width: 70vw;
+        align-self: center;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    img {
+        width: 40vw;
+        align-self: center;
+    }
+}
\ No newline at end of file
diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
index 0558966..f745c21 100644
--- a/src/Header/Header.tsx
+++ b/src/Header/Header.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import Hamburger from '../Hamburgerbutton/Hamburgerbutton';
+import './Header.scss'
 
 const logo = require('../ImageAssets/marsiokartlogo.jpg')
 
 const Header: React.FC = () => {
 
   return (
-    <div className="App">
+    <div className="header">
       <Hamburger/>
       <img src={logo} alt="Marsio Kart Logo" />
     </div>
diff --git a/src/Home/Home.scss b/src/Home/Home.scss
new file mode 100644
index 0000000..190044f
--- /dev/null
+++ b/src/Home/Home.scss
@@ -0,0 +1,5 @@
+.home-content {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
\ No newline at end of file
diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index 14640c6..418e34d 100644
--- a/src/Home/Home.tsx
+++ b/src/Home/Home.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
+import './Home.scss'
 
 interface getUserProp{
     username:string;