diff --git a/jnpf-java-boot/jnpf-web/src/views/login/index.scss b/jnpf-java-boot/jnpf-web/src/views/login/index.scss
index 97893f1..5027149 100644
--- a/jnpf-java-boot/jnpf-web/src/views/login/index.scss
+++ b/jnpf-java-boot/jnpf-web/src/views/login/index.scss
@@ -30,7 +30,8 @@
   .login-left {
     flex: 1;
     height: 100%;
-    background: #fff;
+    background: linear-gradient(to right, rgb(144, 190, 247), rgb(255, 255, 255));
+    // background: #fff;
     position: relative;
     display: flex;
     align-items: center;
diff --git a/jnpf-java-boot/jnpf-web/src/views/login/index.vue b/jnpf-java-boot/jnpf-web/src/views/login/index.vue
index 52a7c5d..1e81751 100644
--- a/jnpf-java-boot/jnpf-web/src/views/login/index.vue
+++ b/jnpf-java-boot/jnpf-web/src/views/login/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="login-container">
-    <div class="image-container">
+    <div class="login-left">
       <img class="login-banners" alt="Woman Image" src="@/assets/images/woman.png">
     </div>
     <div class="login-content">
@@ -407,25 +407,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// .login-banners {
-//   width: 100%;
-//   height: 100%;
-// };
-.login-logos{
-  width: 100%;
-}
-.image-container {
-  position: relative;
-  width:100%;
-  height: 100%;
-  background: linear-gradient(to right, rgb(135, 114, 238), rgb(255, 255, 255));
-  overflow: hidden;
-}
 .login-banners {
-  position: relative;
   width: 100%;
-  height: 100%;
-  overflow: hidden;
+  // height: 100%;
+};
+.login-logos{
+  width: 100%;
+
 }
 @import './index.scss';
 </style>