diff --git a/package.json b/package.json
index fff652b2..fb3388e8 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ant-design/pro-layout": "^4.10.13",
     "@lingui/react": "^2.9.1",
+    "@steveeeie/react-page-transition": "^1.1.2",
     "ant-design-pro": "^2.3.2",
     "antd": "^3.26.9",
     "autoprefixer": "9.7.4",
diff --git a/src/pages/login/components/YulioID.js b/src/pages/login/components/YulioID.js
index abdba1b6..195a1ce5 100644
--- a/src/pages/login/components/YulioID.js
+++ b/src/pages/login/components/YulioID.js
@@ -86,12 +86,10 @@ class YulioID extends Component {
           visible={visible}
           className={styles.loginWrapper}
         >
+          <div className={styles.preheader}><h6><img src={"http://api.ragestudio.net/id.svg"} /> YulioID&trade;</h6>
+          <h1>Login</h1></div>
           <main className={styles.mainlp}>
-            <section className={styles.forms}>
-              <div className={styles.logHeader}>
-                <h6><img src={"http://api.ragestudio.net/id.svg"} /> YulioID&trade;</h6>
-                <h1>Login</h1>
-              </div>
+      
               
 
               {/* <RenderInclude data={include} /> */}
@@ -106,7 +104,6 @@ class YulioID extends Component {
                           <h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }} > {StateMessage} </h6>
                           {StateException ? <div className={styles.retryBTN}><Button style={{ width: '270px' }} type='dashed' onClick={this.handleRetry}>Retry</Button></div> : null}
                         </div>
-                        
                       </div>
                     </div>
                   </div>
@@ -177,7 +174,7 @@ class YulioID extends Component {
                   </div>
                 )}
               </form>
-            </section>
+            
           </main>
         </Drawer>
       </div>
diff --git a/src/pages/login/components/index.less b/src/pages/login/components/index.less
index 3bed52e9..9f133481 100644
--- a/src/pages/login/components/index.less
+++ b/src/pages/login/components/index.less
@@ -2,14 +2,24 @@
   
   .loginWrapper{
 	:global{
+	  .ant-drawer-right.ant-drawer-open.no-mask {
+	  	right: 1px;
+	  	-ms-transform: translateX(1px);
+	  	transform: translateX(1px);
+	  	width: 100%;
+	  }
 	  .ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper{
+		width: 100%;
 		border-radius:  20px 0 0 20px;
 	  }
+	  .ant-drawer-body{
+		height: 100%;
+	  }
 	  .ant-drawer {
-		  box-shadow: none;
-		  border-radius:  20px 0 0 20px;
-		  max-width: 490px;
-		  min-width: 34%;
+		box-shadow: none;
+		border-radius: 20px 0 0 20px;
+		max-width: 512px;
+		width: 100%;
 	  }
 	  .ant-drawer-content{
 		  background: #ffffff9f;
@@ -31,8 +41,13 @@
   	margin: 13px;
   }
   .mainlp {
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+	width: 100%;
 	word-break: keep-all;
-	margin: 3em 20px 0 20px;
+	
 	color: @foregroundColor;
 	text-align: left;
   }
@@ -315,11 +330,13 @@
 
   
   .formlogin {
+	width: 95%;
+	height: auto;
 	border-radius: 10px;
 	padding: 30px;
 	box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);
 	background: #ffffff44;
-	margin-top: 30px;
+	margin: 20px 10px 20px 10px;
 	position: relative;
 	overflow: hidden;
 	vertical-align: middle;
@@ -339,17 +356,16 @@
   }
   
 
- 
-  
-
-  .logHeader{
-
+ .preheader{
+	position: relative;
+	top: 0;
 	h1{
-		font: 700 48px/1.2 "Nunito", sans-serif;
+		font: 700 48px "Nunito", sans-serif;
 		text-align: center;
 		margin-bottom: 10px;
 	}
 	h6{
+		padding: 3em 0 0 0;
 		line-height: 1px;
 		display: flex;
 		font: 500 16px/1 "Poppins", sans-serif;
@@ -359,10 +375,31 @@
 			height: 17px;
 		}
 	}
-}
-
+ }
+  
 .moreActions{
 	display: flex;
+	margin: auto;
+	align-content: center;
+	position: relative;
+	width: 100%;
+	:global{
+		.ant-btn{
+			margin: auto;
+		}
+	}
 }
   
- 
\ No newline at end of file
+@media (max-width: 472px) {
+	.moreActions{
+		display: grid;
+		align-content: center;
+		position: relative;
+		width: 100%;
+		:global{
+			.ant-btn{
+				margin: 5px;
+			}
+		}
+	}
+  }
\ No newline at end of file
diff --git a/src/pages/login/index.less b/src/pages/login/index.less
index eae72a4b..f15718ae 100644
--- a/src/pages/login/index.less
+++ b/src/pages/login/index.less
@@ -9,16 +9,16 @@
 	left: 0;
 }
 .version{
-	display: inline;
+	display: flex;
 	z-index: 2;
 	font-family: "Poppins", sans-serif;
 	font-size: 11px;
 	bottom: 0;
 	position: absolute;
-	float: left;
-	margin: 0 0 5px 3%;
+	padding: 0 0 5px 3%;
 	color:  #F9F9F9;
 	h2{
+		margin: 0 14px 0 0;
 		color:  #F9F9F9;
 	}
 }
diff --git a/src/themes/light_ng/index.less b/src/themes/light_ng/index.less
index 1adaa9ca..32f2a409 100644
--- a/src/themes/light_ng/index.less
+++ b/src/themes/light_ng/index.less
@@ -60,4 +60,4 @@
 @grayColor: #999;
 @lightGrayColor: #ddd;
 @borderRadius: 6px;
-@boxShadow: 0 2px 5px rgba(#333, 0.2);
\ No newline at end of file
+@boxShadow: 0 2px 5px rgba(#333, 0.2);