diff --git a/src/navigation/NotFound.css b/src/navigation/NotFound.css
index 3ab7444..004b6fb 100644
--- a/src/navigation/NotFound.css
+++ b/src/navigation/NotFound.css
@@ -1,29 +1,29 @@
-.not-found{
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    margin-bottom: 10%;
+.not-found {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin-bottom: 10%;
+  background-image: url("../../assets/images/HomePageBackground.png");
+  background-size: cover;
 }
 
-
-.not-found h1{
-    margin-top: 10%;
-    font-size: 300px;
-    font-weight: 700;
-    color: #FF9900;
+.not-found h1 {
+  margin-top: 10%;
+  font-size: 300px;
+  font-weight: 700;
+  color: #ff9900;
 }
 
-
-.not-found h2{
-    font-size: 64px;
-    font-weight: 700;
-    color: #FF9900;
+.not-found h2 {
+  font-size: 64px;
+  font-weight: 700;
+  color: #ff9900;
 }
 
-.not-found div{
-    margin: 30px 0 30px 0;
-    font-size: 32px;
-    font-weight: 600;
-    color: #563400;
-}
\ No newline at end of file
+.not-found div {
+  margin: 30px 0 30px 0;
+  font-size: 32px;
+  font-weight: 600;
+  color: #563400;
+}
diff --git a/src/pages/DailyGoal/DailyGoal.css b/src/pages/DailyGoal/DailyGoal.css
index ab60d1d..1a28972 100644
--- a/src/pages/DailyGoal/DailyGoal.css
+++ b/src/pages/DailyGoal/DailyGoal.css
@@ -1,168 +1,163 @@
-.assignment-container{
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+.assignment-container {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-image: url("../../assets/images/HomePageBackground.png");
+  background-size: cover;
 }
 
-.assignment-section1 h1{
-    font-size: 35px;
-    font-weight: 700;
-    color: #FF9900;
-    margin-bottom: 30px;
+.assignment-section1 h1 {
+  font-size: 35px;
+  font-weight: 700;
+  color: #ff9900;
+  margin-bottom: 30px;
 }
 
-.assignment-section1 .p1{
-    font-size: 28px;
-    font-weight: 600;
-    line-height: 20px;
+.assignment-section1 .p1 {
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 20px;
 }
 
-.assignment-section1{
-    height: 150px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+.assignment-section1 {
+  height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.assignment-section2{
-    margin-top: 50px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.assignment-section2 {
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.assignment-section3{
-    height: 8rem;
-    display: flex;
-    justify-content: space-around;
-    flex-direction: column;
-    color: #FF9900;
+.assignment-section3 {
+  height: 8rem;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  color: #ff9900;
 }
 
-.outer-padding h1{
-    font-size: 25px;
-    font-weight: 700;
-    color: #FF9900;
-    margin-right: 100px;
+.outer-padding h1 {
+  font-size: 25px;
+  font-weight: 700;
+  color: #ff9900;
+  margin-right: 100px;
 }
 
-.outer-padding{
-    border-radius: 5px;
-    background: #FFF7EA;
-    width: 80%;
-    display: flex;
-    padding: 5px 20px 30px 20px;
-    margin-bottom: 10px;
+.outer-padding {
+  border-radius: 5px;
+  background: #fff7ea;
+  width: 80%;
+  display: flex;
+  padding: 5px 20px 30px 20px;
+  margin-bottom: 10px;
 }
 
-.assignment-btn{
-    color: grey;
-    gap: 5px;
-    display: flex;
-    align-items: center;
-    width: 80%;
-    padding-left: 30px;
-    margin-bottom: 30px;
+.assignment-btn {
+  color: grey;
+  gap: 5px;
+  display: flex;
+  align-items: center;
+  width: 80%;
+  padding-left: 30px;
+  margin-bottom: 30px;
 }
 
-hr{
-    border-color: #FFF7EA
+hr {
+  border-color: #fff7ea;
 }
 
-.h-5rem{
-    height: 5rem;
+.h-5rem {
+  height: 5rem;
 }
 
-.full-w{
-    width: 100%;
+.full-w {
+  width: 100%;
 }
 
-.align-left{
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+.align-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
-.center{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 /*force mui text box to be white*/
-.assignment-section2 .MuiTextField-root{
-    background: #FFF !Important;
+.assignment-section2 .MuiTextField-root {
+  background: #fff !important;
 }
 
-.attempt-page{
-    align-self: baseline;
+.attempt-page {
+  align-self: baseline;
 }
 
-.attempt-page button{
-    background: none;
-    border: none;
-    color: #FF9900;
-    font-size: 35px;
-    font-weight: 700;
-    display: flex;
+.attempt-page button {
+  background: none;
+  border: none;
+  color: #ff9900;
+  font-size: 35px;
+  font-weight: 700;
+  display: flex;
 }
 
-.attempt-page button:hover{
-    box-shadow: 0 10px 30px 0 #FF99004A;
-    cursor: pointer;
+.attempt-page button:hover {
+  box-shadow: 0 10px 30px 0 #ff99004a;
+  cursor: pointer;
 }
 
-.profile-container{
-    box-shadow: 0 10px 30px 0 #FF99004A;
-    text-align: center;
-    padding: 20px;
-    margin: 5% 25% 0 25%;
-    width: 50%;
+.profile-container {
+  box-shadow: 0 10px 30px 0 #ff99004a;
+  text-align: center;
+  padding: 20px;
+  margin: 5% 25% 0 25%;
+  width: 50%;
 }
 
-.profile-sub-container{
-    flex-direction: row;
-    justify-content: space-around;
-    column-count: 3;
+.profile-sub-container {
+  flex-direction: row;
+  justify-content: space-around;
+  column-count: 3;
 }
 
-.profile-title{
-    font-weight: 700;
-    color: #C3C3C3;
+.profile-title {
+  font-weight: 700;
+  color: #c3c3c3;
 }
 
-.profile-item{
-    font-weight: 700;
-    color: #563400;
+.profile-item {
+  font-weight: 700;
+  color: #563400;
 }
 
-.avatar{
-    margin-top: 1rem;
+.avatar {
+  margin-top: 1rem;
 }
 
-.avatar div:hover{
-    box-shadow: 0 10px 30px 0 #FF99004A;
-    cursor: pointer;
+.avatar div:hover {
+  box-shadow: 0 10px 30px 0 #ff99004a;
+  cursor: pointer;
 }
 
-.profile-data{
-    flex-direction: column;
-    align-items: flex-start;
-    margin-top: 1rem;
-    /*column-count: 2;*/
+.profile-data {
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 1rem;
+  /*column-count: 2;*/
 }
 
-.upload{
-    border: 3px solid #FFE5BE;
-    padding: 3px 25px 3px 25px;
-    border-radius: 16px;
+.upload {
+  border: 3px solid #ffe5be;
+  padding: 3px 25px 3px 25px;
+  border-radius: 16px;
 }
-
-
-
-
-
-
-
diff --git a/src/pages/Login/Login.css b/src/pages/Login/Login.css
index e5caa2c..94b2928 100644
--- a/src/pages/Login/Login.css
+++ b/src/pages/Login/Login.css
@@ -1,80 +1,80 @@
-.login-container{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 30px;
-    margin: 5px 10px 5px 10px;
+.login-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px;
+  margin: 5px 10px 5px 10px;
+  background-image: url("../../assets/images/HomePageBackground.png");
+  background-size: cover;
 }
 
-.login-container h3{
-    color: #FF9900;
-    font-weight: bold;
+.login-container h3 {
+  color: #ff9900;
+  font-weight: bold;
 }
 
 .colored-border {
-    border: 4px solid #FF99004A;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  border: 4px solid #ff99004a;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.colored-border h1{
-    margin-top: 10px;
-    color: #FF9900;
+.colored-border h1 {
+  margin-top: 10px;
+  color: #ff9900;
 }
 
-.login-form{
-    padding: 30px;
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    width: 450px;
-    height: auto;
-    margin-top: 10px;
-    gap: 20px;
+.login-form {
+  padding: 30px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  width: 450px;
+  height: auto;
+  margin-top: 10px;
+  gap: 20px;
 }
 
-.password-format{
-    padding-left: 30px;
+.password-format {
+  padding-left: 30px;
 }
 
-.ft-20{
-    font-size: 20px;
+.ft-20 {
+  font-size: 20px;
 }
 
-.gap-1{
-    gap: 1rem;
+.gap-1 {
+  gap: 1rem;
 }
 
-.gap-3{
-    gap: 3rem;
+.gap-3 {
+  gap: 3rem;
 }
 
-
-.good{
-    color: #1bc25b !important;
+.good {
+  color: #1bc25b !important;
 }
 
-.bad{
-    color: red !important;
-    font-weight: bold;
+.bad {
+  color: red !important;
+  font-weight: bold;
 }
 
-.react-code-input{
-    display: flex !important;
-    justify-content: space-between;
+.react-code-input {
+  display: flex !important;
+  justify-content: space-between;
 }
 
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 /*firefox*/
-input[type=number] {
-    -moz-appearance: textfield;
+input[type="number"] {
+  -moz-appearance: textfield;
 }
-
diff --git a/src/pages/Login/Profile.js b/src/pages/Login/Profile.js
index 3c0a09d..c978542 100644
--- a/src/pages/Login/Profile.js
+++ b/src/pages/Login/Profile.js
@@ -14,7 +14,11 @@ export function Profile() {
 
     return (
         <AppLayout>
-                <div className={"profile-container"}>
+                <div className={"profile-container"} style={{ 
+                backgroundImage: 'url("src/assets/images/HomePageBackground.png")', // Set your background image here
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+            }}>
                     <div className={"full-w align-center theme-text mb-1"}>
                         <h1>My account</h1>
                     </div>