diff --git a/src/app/components/home/login-page/login-page.component.html b/src/app/components/home/login-page/login-page.component.html
index 0a2a466d31d74277613b67f1ed1101003b49510e..817fce61284a4e1641b6a421ea04e150e38dd6b3 100644
--- a/src/app/components/home/login-page/login-page.component.html
+++ b/src/app/components/home/login-page/login-page.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
   <div fxLayout="row" fxLayoutAlign="center">
-    <mat-card>
+    <mat-card class="outer">
       <mat-card-header fxlayoutalign="center">
         <mat-card-title fxlayoutalign="center">
           <h1 class="main-heading">
diff --git a/src/app/components/home/login-page/login-page.component.scss b/src/app/components/home/login-page/login-page.component.scss
index 338ea901ed7ab3ceb275684376bd7d3db568e916..be02c393c844b3042166be0c2f250a8fed628f93 100644
--- a/src/app/components/home/login-page/login-page.component.scss
+++ b/src/app/components/home/login-page/login-page.component.scss
@@ -8,6 +8,10 @@
   min-width: 323px;
 }
 
+.outer {
+  background-color: #bbdefb;
+}
+
 .main-heading {
   text-align: center;
 }