diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.png b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.png
deleted file mode 100644
index 2cf18f9cfdd..00000000000
Binary files a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.png and /dev/null differ
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.svg b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.svg
new file mode 100644
index 00000000000..05742db887f
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/images/logo.svg
@@ -0,0 +1,798 @@
+
+
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
index 717d6fd7c3b..495a057468b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
@@ -1,9 +1,8 @@
import React from "react";
import "antd/dist/antd.css";
-import "./index.css";
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Dashboard from "./pages/dashboard"
-import Login from "./pages/login"
+import Login from "./pages/Login"
class App extends React.Component {
render() {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js
new file mode 100644
index 00000000000..f4faa2a3489
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js
@@ -0,0 +1,83 @@
+import React from "react";
+import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox,} from 'antd';
+import styles from './Login.less';
+const {Title} = Typography;
+
+class Login extends React.Component {
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+ Login
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+class NormalLoginForm extends React.Component {
+ handleSubmit = (e) => {
+ e.preventDefault();
+ this.props.form.validateFields((err, values) => {
+ if (!err) {
+ console.log('Received values of form: ', values);
+ }
+ });
+ }
+
+ render() {
+ const { getFieldDecorator } = this.props.form;
+ return (
+
+ {getFieldDecorator('userName', {
+ rules: [{ required: true, message: 'Please input your username!' }],
+ })(
+ } placeholder="Username" />
+ )}
+
+
+ {getFieldDecorator('password', {
+ rules: [{ required: true, message: 'Please input your Password!' }],
+ })(
+ } type="password" placeholder="Password" />
+ )}
+
+
+ {getFieldDecorator('remember', {
+ valuePropName: 'checked',
+ initialValue: true,
+ })(
+ Remember me
+ )}
+ Forgot password
+
+ Or register now!
+
+
+ );
+ }
+}
+
+const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
+
+export default Login;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less
new file mode 100644
index 00000000000..f04eeb84c86
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less
@@ -0,0 +1,34 @@
+@nice-blue: #5B83AD;
+@light-blue: @nice-blue + #111;
+
+.header {
+ color: @nice-blue;
+}
+
+.main{
+ background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+ background-repeat: no-repeat;
+ background-position: center 110px;
+ background-size: 100%;
+
+ .header {
+ color: @nice-blue;
+ }
+
+
+}
+
+.content{
+ padding-top: 128px;
+}
+
+.logo{
+ height: 44px;
+ margin: auto;
+ width: 100%;
+
+}
+
+input{
+ min-height: 0;
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js
index cc31b7f9ad5..ac86a24b68d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js
@@ -9,7 +9,7 @@ class Dashboard extends React.Component {
Currentdddddd antd version: {version}
Please fork this codesandbox to reproduce your issue.
请 fork 这个链接来重现你碰到的问题。
- login
+ login
);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/login.js
deleted file mode 100644
index 3694ec01078..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/login.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import { version, Button } from 'antd';
-
-class Login extends React.Component {
- render() {
- return (
-
-
Current antd version: {version}
-
Please fork this codesandbox to reproduce your issue.
-
请 fork 这个链接来重现你碰到的问题。
-
-
- );
- }
-}
-
-export default Login;