diff --git a/package-lock.json b/package-lock.json
index 37097a9..8da3987 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3192,12 +3192,12 @@
       "dev": true
     },
     "core-js-compat": {
-      "version": "3.16.2",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.16.2.tgz",
-      "integrity": "sha512-4lUshXtBXsdmp8cDWh6KKiHUg40AjiuPD3bOWkNVsr1xkAhpUqCjaZ8lB1bKx9Gb5fXcbRbFJ4f4qpRIRTuJqQ==",
+      "version": "3.16.3",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.16.3.tgz",
+      "integrity": "sha512-A/OtSfSJQKLAFRVd4V0m6Sep9lPdjD8bpN8v3tCCGwE0Tmh0hOiVDm9tw6mXmWOKOSZIyr3EkywPo84cJjGvIQ==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.16.7",
+        "browserslist": "^4.16.8",
         "semver": "7.0.0"
       },
       "dependencies": {
@@ -6974,9 +6974,9 @@
       }
     },
     "needle": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/needle/-/needle-2.8.0.tgz",
-      "integrity": "sha512-ZTq6WYkN/3782H1393me3utVYdq2XyqNUFBsprEE3VMAT0+hP/cItpnITpqsY6ep2yeFE4Tqtqwc74VqUlUYtw==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.0.tgz",
+      "integrity": "sha512-UBLC4P8w9to3rAhWOQYXIXzTUio9yVnDzIeKxfGbF+Hngy+2bXTqqFK+6nF42EAQKfJdezXK6vzMsefUa1Y3ag==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -10326,9 +10326,9 @@
       }
     },
     "sockjs-client": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.1.tgz",
-      "integrity": "sha512-VnVAb663fosipI/m6pqRXakEOw7nvd7TUgdr3PlR/8V2I95QIdwT8L4nMxhyU8SmDBHYXU1TOElaKOmKLfYzeQ==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.2.tgz",
+      "integrity": "sha512-ZzRxPBISQE7RpzlH4tKJMQbHM9pabHluk0WBaxAQ+wm/UieeBVBou0p4wVnSQGN9QmpAZygQ0cDIypWuqOFmFQ==",
       "dev": true,
       "requires": {
         "debug": "^3.2.6",
@@ -10336,7 +10336,7 @@
         "faye-websocket": "^0.11.3",
         "inherits": "^2.0.4",
         "json3": "^3.3.3",
-        "url-parse": "^1.5.1"
+        "url-parse": "^1.5.3"
       },
       "dependencies": {
         "debug": {
diff --git a/package.json b/package.json
index 64edb14..a702142 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.2",
+    "@angular-devkit/build-angular": "^12.2.2",
     "@angular/cli": "~12.2.2",
     "@angular/compiler-cli": "~12.2.0",
     "@types/jasmine": "~3.8.0",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3fa2be5..d413351 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -21,7 +21,7 @@ export class AppComponent implements OnInit, AfterViewInit{
   }
 
   ngAfterViewInit(){
-    this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = "#C0CFEA";
+    this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = "#7ea381";
   }
 
   // public getEmployees(): void {
diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css
index 501eff4..563273d 100644
--- a/src/app/components/login/login.component.css
+++ b/src/app/components/login/login.component.css
@@ -3,18 +3,40 @@
     src: url(http://fonts.cdnfonts.com/css/liberation-sans) format("truetype");
   }
 
+html {
+    max-height: fit-content;
+}
+
+body {
+    height: 70vh;
+    margin-top: 3%;
+    margin-bottom: 3%; 
+    margin-left: -1%;
+    margin-right: -1%;
+    padding-top: 3%;
+    padding-bottom: 3%;
+    background-image: url(https://c.stocksy.com/a/QDR400/z9/1057932.jpg);
+    background-size: cover;
+}
+
 .loginForm {
+    color: rgb(250, 253, 237);
     text-align: center;
     margin-top:5%
 }
 
 h1 {
     text-align: center;
-    margin-top:20%;
+    margin-top: 8%;
+    color: rgb(250, 253, 237);
+    font-size: 600%;
     font-family: 'Liberation Sans', sans-serif;
+    text-shadow: 0px 0px 20px black;
 }
 
 label{
+    color: rgb(250, 253, 237);
+    text-shadow: 0px 0px 20px black;
     position: relative;
     right: 2%;
 }
\ No newline at end of file
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index cda5cda..f891f8a 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,4 +1,5 @@
-<h1>Food Blog</h1>
+<body>
+  <h1>Food Blog</h1>
 <div class="loginForm">
     <form >
       <label for="uname">Username</label><br>
@@ -8,3 +9,5 @@ <h1>Food Blog</h1>
       <input type="submit" value="Login">
     </form>
     </div>
+</body>
+