diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/AddUser.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/AddUser.js
new file mode 100644
index 00000000000..9c02db791e5
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/AddUser.js
@@ -0,0 +1,215 @@
+import React from 'react';
+import {Button, Form, Select, Input, message, Modal, notification, Typography} from "antd";
+import axios from "axios";
+import {withConfigContext} from "../../context/ConfigContext";
+const { Option } = Select;
+const {Text} = Typography;
+
+class AddUser extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.config =  this.props.context;
+        this.state = {
+            isModalVisible: false,
+            roles : []
+        }
+    }
+
+    componentDidMount() {
+        this.getRole();
+    }
+
+    openAddModal = () => {
+        this.setState({
+            isModalVisible:true
+        });
+    };
+
+    onSubmitHandler = e => {
+        this.props.form.validateFields((err, values) => {
+            if (!err) {
+                this.onConfirmAddUser(values);
+            }
+        });
+    };
+
+    onConfirmAddUser = (value) =>{
+        const userData = {
+            username : value.userStoreDomain +"/"+value.userName,
+            firstname : value.firstName,
+            lastname : value.lastName,
+            emailAddress : value.email,
+            roles : value.userRoles
+        };
+        axios.post(
+            window.location.origin + this.config.serverConfig.invoker.uri +
+            this.config.serverConfig.invoker.deviceMgt +
+            "/users",
+            userData,
+            {headers: {'Content-Type' : 'application-json'}}
+        ).then(res => {
+            if (res.status === 201) {
+                this.props.fetchUsers();
+                this.setState({
+                    isModalVisible: false,
+                });
+                notification["success"]({
+                    message: "Done",
+                    duration: 4,
+                    description:
+                        "Successfully added the user.",
+                });
+            }
+        }).catch((error) => {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                //todo display a popop with error
+                message.error('You are not logged in');
+                window.location.href = window.location.origin + '/entgra/login';
+            } else {
+                notification["error"]({
+                    message: "There was a problem",
+                    duration: 0,
+                    description:
+                        "Error occurred while trying to add user.",
+                });
+            }
+        });
+    };
+
+    onCancelHandler = e => {
+        this.setState({
+            isModalVisible: false,
+        });
+    };
+
+    getRole = () => {
+        let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
+            this.config.serverConfig.invoker.deviceMgt + "/roles?user-store=PRIMARY&limit=100";
+
+        axios.get(apiURL).then(res => {
+            if (res.status === 200) {
+                const roles = [];
+                for(let i=0; i<res.data.data.roles.length ; i++){
+                    roles.push(<Option key={res.data.data.roles[i]}>{res.data.data.roles[i]}</Option>);
+                }
+                this.setState({
+                    roles : roles
+                })
+            }
+        }).catch((error) => {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                //todo display a popop with error
+
+                message.error('You are not logged in');
+                window.location.href = window.location.origin + '/entgra/login';
+            } else {
+                notification["error"]({
+                    message: "There was a problem",
+                    duration: 0,
+                    description:"Error occurred while trying to load roles.",
+                });
+            }
+        })
+    };
+
+    render() {
+        const { getFieldDecorator } = this.props.form;
+        return (
+            <div>
+                <div>
+                    <Button type="primary" icon="plus" size={"default"} onClick={this.openAddModal} style={{marginBottom : '10px'}}>
+                        Add User
+                    </Button>
+                </div>
+                <div>
+                    <Modal
+                        title="ADD NEW USER"
+                        width="40%"
+                        visible={this.state.isModalVisible}
+                        onOk={this.onSubmitHandler}
+                        onCancel={this.onCancelHandler}
+                        footer={[
+                            <Button key="cancel" onClick={this.onCancelHandler}>
+                                Cancel
+                            </Button>,
+                            <Button key="submit" type="primary" onClick={this.onSubmitHandler}>
+                                Submit
+                            </Button>,
+                        ]}>
+                        <div style={{alignItems:"center"}}>
+                            <p>Create new user on IoT Server.</p>
+                            <Form
+                                labelCol={{ span: 5 }}
+                                wrapperCol={{ span: 18 }}>
+                                <Form.Item label="User Store Domain" style={{display:"block"}}>
+                                    {getFieldDecorator('userStoreDomain', {
+                                        initialValue : 'PRIMARY'
+                                    })(
+                                        <Select>
+                                            <Option key="PRIMARY">PRIMARY</Option>
+                                        </Select>
+                                    )}
+                                </Form.Item>
+                                <Form.Item label="User Name" style={{display:"block"}}>
+                                    {getFieldDecorator('userName', {
+                                        rules: [
+                                            {
+                                                required: true,
+                                                message: 'This field is required. Username should be at least 3 characters long with no white spaces.',
+                                            },
+                                        ],
+                                    })(<Input/>)}
+                                </Form.Item>
+                                <Form.Item label="First Name" style={{display:"block"}}>
+                                    {getFieldDecorator('firstName', {
+                                        rules: [
+                                            {
+                                                required: true,
+                                                message: 'This field is required',
+                                            },
+                                        ],
+                                    })(<Input/>)}
+                                </Form.Item>
+                                <Form.Item label="Last Name" style={{display:"block"}}>
+                                    {getFieldDecorator('lastName', {
+                                        rules: [
+                                            {
+                                                required: true,
+                                                message: 'This field is required',
+                                            },
+                                        ],
+                                    })(<Input/>)}
+                                </Form.Item>
+                                <Form.Item label="Email Address" style={{display:"block"}}>
+                                    {getFieldDecorator('email', {
+                                        rules: [
+                                            {
+                                                type: 'email',
+                                                message: 'Invalid Email Address',
+                                            },
+                                            {
+                                                required: true,
+                                                message: 'This field is required',
+                                            },
+                                        ],
+                                    })(<Input/>)}
+                                </Form.Item>
+                                <Form.Item label="User Roles" style={{display:"block"}}>
+                                    {getFieldDecorator('userRoles', {
+                                    })(<Select
+                                            mode="multiple"
+                                            style={{ width: '100%' }}>
+                                        {this.state.roles}
+                                    </Select>)}
+                                </Form.Item>
+                            </Form>
+                        </div>
+                    </Modal>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default withConfigContext(Form.create({name: 'add-user'})(AddUser))
\ No newline at end of file
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js
index 6684329e674..6010b683fe4 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js
@@ -24,6 +24,7 @@ import TimeAgo from 'javascript-time-ago'
 import en from 'javascript-time-ago/locale/en'
 import {withConfigContext} from "../../context/ConfigContext";
 import UsersDevices from "./UsersDevices";
+import AddUser from "./AddUser";
 
 const {Text} = Typography;
 
@@ -214,6 +215,9 @@ class UsersTable extends React.Component {
         ];
         return (
             <div>
+                <div style={{background: '#f0f2f5'}}>
+                    <AddUser fetchUsers={this.fetchUsers}/>
+                </div>
                 <div>
                     <Table
                         columns={columns}