diff --git a/frontend/react-app/src/components/Header.jsx b/frontend/react-app/src/components/Header.jsx
index ec1f1d23..c31818a7 100644
--- a/frontend/react-app/src/components/Header.jsx
+++ b/frontend/react-app/src/components/Header.jsx
@@ -2,8 +2,9 @@ import {useCookies} from 'react-cookie'
 function Header(){
     const [cookies] = useCookies(['userInfo'])
     return(
-            
-                <h1 className ="inHeader">
+           
+          <div>
+                <h1 className ="inner-header">
                         <ul className ='list'>
                             <li className ="logo list"><span><a href="/home">Whatever we Call this</a></span></li>
                             <li><span><a href="/home">Home</a></span></li>
@@ -12,6 +13,8 @@ function Header(){
                             {cookies.userInfo.role === 'admin' && (<li><span><a href="/admin-panel">Admin Controls</a></span></li>)}
                         </ul>
                 </h1>
+            </div>
+            
     );
 }
 export default Header
\ No newline at end of file
diff --git a/frontend/react-app/src/css/Header.css b/frontend/react-app/src/css/Header.css
index c10ca26b..2657becc 100644
--- a/frontend/react-app/src/css/Header.css
+++ b/frontend/react-app/src/css/Header.css
@@ -7,15 +7,13 @@ h1.inner-header{
     margin: 0;
     font-family: Calibri;
     width: 100%;
-    margin-left: 5%;
-    margin-right: 5%;
+    padding: 1% 5%;;
     height: auto;
     min-height: 10%;
     background-color: #3b3355;
     display: flex; 
     align-items: center; 
     justify-content: space-between;
-
 }
 
 li{
@@ -33,3 +31,4 @@ li.logo a{
     font-size: calc(30%+2vw);
     color: #fefcfd;
 }
+
diff --git a/frontend/react-app/src/css/MyTasks.css b/frontend/react-app/src/css/MyTasks.css
index 1fb7a6dd..c474f7a3 100644
--- a/frontend/react-app/src/css/MyTasks.css
+++ b/frontend/react-app/src/css/MyTasks.css
@@ -41,3 +41,7 @@ div.flexbox{
     cursor: pointer;
     border-radius: 10px;
   }
+
+  .pageContainer {
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/frontend/react-app/src/icons/taskboard_checks.png b/frontend/react-app/src/icons/taskboard_checks.png
new file mode 100644
index 00000000..4a585be9
Binary files /dev/null and b/frontend/react-app/src/icons/taskboard_checks.png differ
diff --git a/frontend/react-app/src/login.css b/frontend/react-app/src/login.css
index 62f7411a..6c3b884b 100644
--- a/frontend/react-app/src/login.css
+++ b/frontend/react-app/src/login.css
@@ -19,11 +19,6 @@
     color:#25274D;
 }
 
-#siteName h1 {
-    font-size: 2em;
-    text-align: left;
-}
-
 #siteName img {
     width: 200px;
     height: 200px;
@@ -90,3 +85,22 @@
     background-color: #25274D;
     cursor: pointer;
 }
+
+
+#logoBox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+#logoBox h1 {
+    font-weight: bold;
+    font-size: 3em;
+    /* background-color: red; */
+    gap: 0px;
+}
+
+#logoBox img {
+    margin: 0;
+    /* background-color: red; */
+}
\ No newline at end of file
diff --git a/frontend/react-app/src/pages/Home.js b/frontend/react-app/src/pages/Home.jsx
similarity index 99%
rename from frontend/react-app/src/pages/Home.js
rename to frontend/react-app/src/pages/Home.jsx
index d7b744d7..bf71984f 100644
--- a/frontend/react-app/src/pages/Home.js
+++ b/frontend/react-app/src/pages/Home.jsx
@@ -19,8 +19,6 @@ function setUpDataTasksToDo(obj){
             team: taskItem.team,
             dueDate: taskItem.dueDate
             
-
-
         }]
     
    }
diff --git a/frontend/react-app/src/pages/Login.jsx b/frontend/react-app/src/pages/Login.jsx
index fc4e9a1b..a694225b 100644
--- a/frontend/react-app/src/pages/Login.jsx
+++ b/frontend/react-app/src/pages/Login.jsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import LoginForm from '../components/LoginForm';
 import '../login.css';
+import logo from '../icons/taskboard_checks.png';
 function Login(){
     return (
         <div id="login">
             <div className="loginContainer">
 
                 <div id="siteName">
-                    <img src="https://www.shutterstock.com/image-vector/sample-logo-business-brand-identity-600nw-1948366864.jpg" alt="logo"/>
-                    <h1>Our site name</h1>
-                    <p1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nulla pharetra, ultrices mauris ut, pharetra massa. Morbi sodales in metus in porta. Morbi vel semper ligula, at dignissim eros. Aenean sollicitudin, diam et cursus elementum, elit dui viverra leo, et commodo tortor urna et dolor</p1>
+                    <div id="logoBox">
+                        <img src={logo} alt="logo"/>
+                        <h1>Taskly</h1>
+                    </div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nulla pharetra, ultrices mauris ut, pharetra massa. Morbi sodales in metus in porta. Morbi vel semper ligula, at dignissim eros. Aenean sollicitudin, diam et cursus elementum, elit dui viverra leo, et commodo tortor urna et dolor</p>
                 </div>
                 <div id="loginFormWrapper"> 
                     <LoginForm />
diff --git a/frontend/react-app/src/pages/MyTasks.jsx b/frontend/react-app/src/pages/MyTasks.jsx
index b928d72f..c019a05a 100644
--- a/frontend/react-app/src/pages/MyTasks.jsx
+++ b/frontend/react-app/src/pages/MyTasks.jsx
@@ -1,7 +1,8 @@
 import TaskList from "../components/TaskList";
 import Header from "../components/Header";
-import "../css/MyTasks.css"
-import fakeData from "../FakeData/fakeTaskData.json"
+import "../css/MyTasks.css";
+import "../css/Header.css";
+import fakeData from "../FakeData/fakeTaskData.json";
 import { Link } from 'react-router-dom';
 import { getAssignedTasks } from "../api/teamMemberApi";
 import { useCookies } from 'react-cookie';