diff --git a/src/assets/images/Home_Page.svg b/src/assets/images/Home_Page.svg
new file mode 100644
index 0000000..32bc8c3
--- /dev/null
+++ b/src/assets/images/Home_Page.svg
@@ -0,0 +1,32 @@
+<svg width="393" height="2322" viewBox="0 0 393 2322" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="393" height="2322" fill="white"/>
+<rect x="55.1787" y="374.883" width="30.4058" height="30.4058" rx="3" transform="rotate(-62.1447 55.1787 374.883)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="326" y="1071.88" width="30.4058" height="30.4058" rx="3" transform="rotate(-62.1447 326 1071.88)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="28" y="1314.88" width="30.4058" height="30.4058" rx="3" transform="rotate(-62.1447 28 1314.88)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="341" y="1610.88" width="30.4058" height="30.4058" rx="3" transform="rotate(-62.1447 341 1610.88)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="55.0791" y="2084.53" width="30.4058" height="30.4058" rx="3" transform="rotate(-171.59 55.0791 2084.53)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="380.079" y="2049.53" width="30.4058" height="30.4058" rx="3" transform="rotate(-171.59 380.079 2049.53)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="50.8281" y="143.797" width="35.0688" height="35.0688" rx="3" transform="rotate(-145.289 50.8281 143.797)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="13" y="218.396" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 13 218.396)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="101" y="425.396" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 101 425.396)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="358" y="1131.4" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 358 1131.4)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="340" y="1544.04" width="20.4921" height="20.4921" rx="3" transform="rotate(-43.2375 340 1544.04)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="76" y="1596.04" width="20.4921" height="20.4921" rx="3" transform="rotate(-43.2375 76 1596.04)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="86" y="2050.04" width="20.4921" height="20.4921" rx="3" transform="rotate(-43.2375 86 2050.04)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="302" y="2070.04" width="20.4921" height="20.4921" rx="3" transform="rotate(-43.2375 302 2070.04)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="86" y="1099.4" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 86 1099.4)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="100" y="1288.4" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 100 1288.4)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="271" y="1572.4" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 271 1572.4)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="23" y="1559.4" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 23 1559.4)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="28.8418" y="1613.35" width="14.1782" height="14.1782" rx="3" transform="rotate(-43.2375 28.8418 1613.35)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="13" y="2013.95" width="15.9851" height="15.9851" rx="3" transform="rotate(-43.2375 13 2013.95)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="344" y="411.396" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 344 411.396)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="19" y="414.396" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 19 414.396)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="270" y="1086.4" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 270 1086.4)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="353" y="1322.4" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 353 1322.4)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="27" y="1066.4" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 27 1066.4)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="354" y="199.396" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 354 199.396)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="330" y="131.396" width="19.5557" height="19.5557" rx="3" transform="rotate(-43.2375 330 131.396)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="95.3076" y="116" width="19.5557" height="19.5557" rx="3" transform="rotate(6.77724 95.3076 116)" fill="#FF9900" fill-opacity="0.15"/>
+<rect x="338.905" y="345.023" width="22.0537" height="22.0537" rx="3" transform="rotate(-129.088 338.905 345.023)" fill="#FF9900" fill-opacity="0.15"/>
+</svg>
diff --git a/src/components/AppLayout/AppHeader.css b/src/components/AppLayout/AppHeader.css
index e694345..805316d 100644
--- a/src/components/AppLayout/AppHeader.css
+++ b/src/components/AppLayout/AppHeader.css
@@ -109,7 +109,8 @@
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
   gap: 2rem !important;
   align-self: baseline;
-  z-index: 2; /* Higher z-index value */
+  z-index: 2;
+  /* Higher z-index value */
 }
 
 .dropDownProfile:hover {
@@ -130,8 +131,7 @@
   gap: 1rem;
 }
 
-.dropDownProfile li:hover {
-}
+.dropDownProfile li:hover {}
 
 .hideDropDown {
   display: none !important;
@@ -150,5 +150,8 @@
 
   .nav {
     gap: 0.8vh;
+    
   }
-}
+
+  
+}
\ No newline at end of file
diff --git a/src/pages/Login/Login.css b/src/pages/Login/Login.css
index f72e301..fe190a9 100644
--- a/src/pages/Login/Login.css
+++ b/src/pages/Login/Login.css
@@ -17,6 +17,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
 }
 
 .colored-border h1 {
@@ -95,16 +96,26 @@ input[type="number"] {
 }
 
 @media screen and (max-width: 768px) {
+
+  .login-container {
+    max-width: 100%;
+    padding: 12% 2px 12% 2px;
+    background-image: url("../../assets/images/Home_Page.svg");
+    background-size: cover;
+  }
+
   .login-form {
-    padding: 48px;
-    max-width: 21em;
+    padding: 20x;
+    max-width: 100%;
   }
+
   .colored-border {
     border: 4px soild #ff99004a;
     padding: 2px;
     display: flex;
     flex-direction: column;
     align-items: center;
+    max-width: 95%;
   }
 
   .flex.pl-65 {
@@ -114,8 +125,10 @@ input[type="number"] {
   .mr-5 {
     color: #563400;
   }
-  .login-button{
-    padding: 1.0em 3.7em 1.0em 3.7em!important;
-    font-size: 1rem!important;
+
+  .login-button {
+    padding: 1.0em 3.7em 1.0em 3.7em !important;
+    font-size: 1rem !important;
   }
-}
+
+}
\ No newline at end of file