diff --git a/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.html b/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.html
index 4a86767124363b46957a5686a197f35c1dd14595..6adb7751ff8a28f953f24157439bba41409c391e 100644
--- a/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.html
+++ b/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.html
@@ -1,3 +1,27 @@
-<p>
- choose-user works!
-</p>
+<div class="user-profile-box">
+ <div class="d-flex flex-jc-space-between my-16">
+ <div class="user-profile-box__title">Choose Users</div>
+ <button type="button" class="sb-btn sb-btn-xs sb-btn-outline-primary">Delete</button>
+ </div>
+ ​
+ <div class="members-list">
+ <div class="members-list-item acitve">
+ <div class="oval">A</div>
+ <div class="member-name"><span>User Name 01</span></div>
+ <img src="./assets/images/tick-mark.svg" class="icon_active" />
+ </div>
+ <div class="members-list-item">
+ <div class="oval">B</div>
+ <div class="member-name"><span>User Name 02</span></div>
+ </div>
+ </div>
+ ​
+ <button type="submit" class="sb-btn sb-btn-sm sb-btn-outline-primary sb-right-icon-btn w-100 my-16 ">
+ <i class="chevron plus icon"></i> Add User
+ </button>
+ ​
+ <div class="user-profile-box__actions">
+ <button type="submit" class="sb-btn sb-btn-normal sb-btn-primary"> Switch User
+ </button>
+ </div>
+</div>
diff --git a/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.scss b/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..2e646f39fd46e44deabbf31fae84b69e2ecc931c 100644
--- a/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.scss
+++ b/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.scss
@@ -0,0 +1,167 @@
+@import "variables";
+@import 'mixins/mixins';
+
+.user-profile-box {
+ margin: 0 auto;
+ max-width: 640px;
+ width: 100%;
+ background: var(--white);
+ border-radius: 8px;
+ padding: 16px;
+
+ &__title {
+ font-weight: bold;
+ color: var(--primary-color);
+ font-size: calculateRem(18px);
+ }
+
+ &__actions {
+ border-top: 1px solid #ddd;
+ padding: 16px 0px 0px 0px;
+ display: flex;
+ flex-direction: row-reverse;
+ }
+}
+
+/* members css */
+.members-list {
+ width: 100%;
+ background-color: var(--white);
+ box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(0, 0, 0, 0.25);
+
+ .members-list-item {
+ display: flex;
+ align-items: center;
+ padding: calculateRem(8px);
+ border-bottom: calculateRem(0.5px) solid #97979787;
+ position: relative;
+ border: 1px solid transparent;
+ position: relative;
+
+ .oval {
+ height: calculateRem(36px);
+ width: calculateRem(36px);
+ justify-content: center;
+ align-items: center;
+ display: inline-flex;
+ border-radius: 50%;
+ border: calculateRem(6px) solid var(--white);
+ background-color: var(--white);
+ box-shadow: 0 0 calculateRem(6px) 0 rgba(0, 0, 0, 0.1);
+ }
+
+ .member-name {
+ color: $gray-800;
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: calculateRem(20px);
+ flex: 1;
+ padding: 0 calculateRem(16px);
+
+ span {
+ // display: flex;
+ // width: 90%;
+ }
+ }
+
+ .status {
+ border: calculateRem(0.5px) solid var(--secondary-100);
+ border-radius: 2px;
+ font-size: 10px;
+ color: var(--secondary-100);
+ background-color: var(--white);
+ padding: calculateRem(4px) calculateRem(8px);
+ margin: 0 calculateRem(8px)
+ }
+
+ .menu {
+ color: var(--gray-200);
+ width: calculateRem(30px);
+ height: calculateRem(30px);
+ font-size: calculateRem(24px);
+ text-align: center;
+ line-height: calculateRem(30px);
+ border-radius: 50%;
+ padding-left: calculateRem(6px);
+
+ &:hover {
+ background: var(--gray-0);
+ cursor: pointer;
+ }
+
+ position: relative;
+ display: inline-block;
+ }
+
+ .dropdown-content {
+ position: absolute;
+ border-radius: calculateRem(2px);
+ background-color: var(--white);
+ box-shadow: 0 calculateRem(3px) calculateRem(5px) calculateRem(4px) rgba(0, 0, 0, 0.05);
+ padding: calculateRem(16px);
+ z-index: 1;
+ text-align: left;
+ right: calculateRem(10px);
+ top: calculateRem(10px);
+
+ .list {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+
+ &:first-child {
+ margin-bottom: calculateRem(8px);
+
+ &:hover {
+ span {
+ color: var(--primary-color);
+ }
+ }
+ }
+
+ &:hover {
+ span {
+ color: var(--red-400);
+ }
+ }
+
+ span {
+ font-size: calculateRem(14px);
+ padding-left: calculateRem(8px);
+ }
+ }
+ }
+
+ .menu:hover .dropdown-content {
+ display: block;
+ }
+
+ .menu::after {
+ content: '\2807';
+ font-size: calculateRem(24px);
+ }
+
+ .icon_active {
+ visibility: hidden;
+ position: absolute;
+ top: 50%;
+ right: 16px;
+ width: 16px;
+ transform: translateY(-50%);
+ }
+
+ &:hover, &.active {
+ background: var(--primary-0);
+ border: 1px solid var(--primary-color);
+
+ .member-name {
+ color: var(--primary-color);
+ }
+
+ .icon_active {
+ visibility: visible;
+ }
+ }
+
+ }
+}
diff --git a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html
index df1586f02e88a9de1fb32f7586c6ebd8009ac5f8..9d4aae8abe22edc5eb2e13e9ee0246d7d060f023 100644
--- a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html
+++ b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html
@@ -1,3 +1,70 @@
-<p>
- create-user works!
-</p>
+<div class="user-profile-box">
+ <div class="d-flex flex-jc-space-between my-16">
+ <div class="user-profile-box__title">Create User</div>
+ <button type="button" class="sb-btn sb-btn-xs sb-btn-outline-primary">Delete</button>
+ </div>
+ ​
+ <form class="sb-form my-16">
+ <div class="sb-field">
+ <label class="font-weight-normal">Name<span>*</span></label>
+ <input class="sb-form-control" type="text" placeholder="Enter user name">
+ </div>
+ <div class="d-flex flex-jc-space-between">
+ <div class="sb-field my-8 w-50">
+ <label class="font-weight-normal">Board:</label>
+<!-- <sui-select class="selection" name="state" labelField="name" placeholder="Select State">
+ <sui-select-option *ngFor="let state of states" [value]="state"></sui-select-option>
+ </sui-select>-->
+ </div>
+
+ <div class="sb-field my-8 ml-16 w-50">
+ <label class="font-weight-normal">Medium:</label>
+ <div class="sb-field">
+<!-- <sui-multi-select class="selection" name="district" labelField="name" placeholder="Select district">
+ <sui-select-option *ngFor="let district of districts" [value]="district"></sui-select-option>
+ </sui-multi-select>-->
+ </div>
+ </div>
+ </div>
+ <div class="sb-field mb-16">
+ <label class="font-weight-normal">Class:</label>
+ <div class="sb-field">
+<!-- <sui-multi-select class="selection" name="district" labelField="name" placeholder="Select district">
+ <sui-select-option *ngFor="let district of districts" [value]="district"></sui-select-option>
+ </sui-multi-select>-->
+ </div>
+ </div>
+
+ <div class="fields-selection d-flex flex-jc-space-between w-100">
+ <div class="sb-field field-focus w-50">
+<!-- <select class="ui dropdown selection fields-dropdown" [(ngModel)]="selectState">
+ <option [ngValue]="option" *ngFor="let option of selectStateOption" [value]="option">{{option?.name}}
+ </option>
+ </select>-->
+ <label class="d-flex font-weight-normal">State</label>
+ </div>
+ <div class="sb-field field-focus onboard-content w-50 ml-16">
+<!-- <select class="ui dropdown selection fields-dropdown" name="district" labelField="name"
+ placeholder="Select district">
+ <option [ngValue]="district" *ngFor="let district of districts" [value]="district">{{district?.name}}
+ </option>
+ </select>-->
+ <label class="d-flex font-weight-normal">District</label>
+ </div>
+ </div>
+
+ </form>
+
+ ​
+ <div class="required sb-checkbox sb-checkbox-primary sb-field">
+ <input type="checkbox" role="checkbox" name="checkbox">
+ <label class="fsmall mx-8 font-weight-normal">I understand and accept the
+ <a class="text-underline fsmall" href="javascript:void(0)">DIKSHA Terms of Use.
+ </a>
+ </label></div>
+ ​
+ <div class="user-profile-box__actions">
+ <button type="submit" class="sb-btn sb-btn-normal sb-btn-primary"> Add User
+ </button>
+ </div>
+</div>
diff --git a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.scss b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..6bcf14d1d5b4016d366cc95b31dc8749490ffd5c 100644
--- a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.scss
+++ b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.scss
@@ -0,0 +1,96 @@
+@import "variables";
+@import 'mixins/mixins';
+
+.user-profile-box {
+ margin: 0 auto;
+ max-width: 640px;
+ width: 100%;
+ background: var(--white);
+ border-radius: 8px;
+ padding: 16px;
+
+ &__title {
+ font-weight: bold;
+ color: var(--primary-color);
+ font-size: calculateRem(18px);
+ }
+
+ &__actions {
+ border-top: 1px solid #ddd;
+ padding: 16px 0px 0px 0px;
+ display: flex;
+ flex-direction: row-reverse;
+ }
+}
+
+
+:host {
+ .fields-selection {
+ display: flex;
+ flex-direction: column;
+
+ @include respond-above(sm) {
+ flex-direction: row;
+ }
+
+ .sb-field .ui.selection.active.dropdown {
+ border-color: #96c8da;
+ }
+
+ .sb-field .ui.selection.active.dropdown .text {
+ color: #0076FE !important;
+ }
+
+ .sb-field {
+ margin-bottom: calculateRem(16px) 0px;
+ width: 100%;
+
+ label {
+ font-size: 14px;
+ }
+ }
+
+ .onboard-content {
+ @include respond-above(sm) {
+ margin-left: 2rem;
+ html[dir="rtl"] & {
+ margin-right: 2rem;
+ }
+ }
+ }
+
+ .textColorChange {
+ color: #0076FE;
+ }
+ }
+}
+
+.field-focus {
+ display: flex;
+ flex-direction: column-reverse;
+ align-items: flex-start;
+}
+
+.ui.selection.dropdown.fields-dropdown {
+ height: 2rem !important;
+
+ &:focus {
+ border: calculateRem(1px) solid #0076FE;
+ color: #0076FE !important;
+ }
+}
+
+.ui.selection.dropdown.fields-dropdown:focus ~ label {
+ border: 0px;
+ color: #0076FE;
+ font-weight: normal;
+}
+
+.ui.selection.dropdown.fields-dropdown option {
+ background: var(--white);
+ color: var(--black);
+}
+
+.sb-profile-btn {
+ border-radius: 40px;
+}
diff --git a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.ts b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.ts
index e1ecd4fbcbe801786ab1890f54e0ddfb87635bba..3b2df0af8c76255355eb70ae8959fc0395aec74f 100644
--- a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.ts
+++ b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.ts
@@ -6,7 +6,8 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./create-user.component.scss']
})
export class CreateUserComponent implements OnInit {
-
+ states: [];
+ districts: [];
constructor() { }
ngOnInit() {