diff --git a/src/app/users/project-role/ProjectRoleComponent.html b/src/app/users/project-role/ProjectRoleComponent.html
index c85b768..31f71e4 100644
--- a/src/app/users/project-role/ProjectRoleComponent.html
+++ b/src/app/users/project-role/ProjectRoleComponent.html
@@ -33,33 +33,39 @@
             [ngClass]="{'text-danger': projectRoleForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' |
             translate}}</label>
         <div *ngFor="let params of getControls(); let i = index;" [formGroupName]="i">
-            <div class="form-group row">
-                <label class="col-sm-2 col-form-label" for="project_{{i}}">{{'PROJECT' | translate}}*</label>
-                <div class="col-sm-3">
-                    <ng-select placeholder="{{'SELECT' | translate}}" [items]="projects" bindLabel="name"
-                        bindValue="name" formControlName="project_name" id="project_{{i}}"
-                        [ngClass]="{ 'is-invalid': submitted && params.controls.project_name.errors }"></ng-select>
-                </div>
-                <label class="col-sm-2 col-form-label" for="roles_{{i}}">{{'ROLES' | translate}}*</label>
-                <div class="col-sm-4">
-                    <ng-select placeholder="{{'SELECT' | translate}}" [items]="roles" bindLabel="name" bindValue="name"
-                        formControlName="role_name" id="roles_{{i}}"
-                        [ngClass]="{ 'is-invalid': submitted && params.controls.role_name.errors }"></ng-select>
-                </div>
-                <div class="col-sm-1"
-                    *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name === '' : true">
-                    <button class="button-xs" type="button" class="close mt-2" (click)="removeMapping(i)"
-                        placement="right" ngbTooltip="{{ 'CANCEL' | translate }}">
-                        <i class="fas fa-minus-circle text-danger"></i>
-                    </button>
-                </div>
-                <div class="col-sm-1"
-                    *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name !== '' : false">
-                    <button class="button-xs" type="button" class="close mt-2"
-                        (click)="deleteProjectAndRoleMapping(userDetails.project_role_mappings[i])" placement="right"
-                        ngbTooltip="{{ 'DELETE' | translate }}">
-                        <i class="fas fa-trash-alt text-danger"></i>
-                    </button>
+            <div class="card bg-light">
+                <div class="card-body">
+                    <div class="form-group row">
+                        <label class="col-sm-3 col-md-3 col-form-label" for="project_{{i}}">{{'PROJECT' | translate}}*</label>
+                        <div class="col-sm-8 col-md-8">
+                            <ng-select placeholder="{{'SELECT' | translate}}" [items]="projects" bindLabel="name"
+                                bindValue="name" formControlName="project_name" id="project_{{i}}"
+                                [ngClass]="{ 'is-invalid': submitted && params.controls.project_name.errors }">
+                            </ng-select>
+                        </div>
+                        <label class="col-sm-3 col-md-3 col-form-label" for="roles_{{i}}">{{'ROLES' |
+                            translate}}*</label>
+                        <div class="col-sm-8 col-md-8">
+                            <ng-select placeholder="{{'SELECT' | translate}}" [items]="roles" bindLabel="name"
+                                bindValue="name" formControlName="role_name" id="roles_{{i}}"
+                                [ngClass]="{ 'is-invalid': submitted && params.controls.role_name.errors }"></ng-select>
+                        </div>
+                        <div class="col-sm-1"
+                            *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name === '' : true">
+                            <button class="button-xs" type="button" class="close" (click)="removeMapping(i)"
+                                placement="right" ngbTooltip="{{ 'CANCEL' | translate }}">
+                                <i class="fas fa-minus-circle text-danger"></i>
+                            </button>
+                        </div>
+                        <div class="col-sm-1"
+                            *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name !== '' : false">
+                            <button class="button-xs" type="button" class="close"
+                                (click)="deleteProjectAndRoleMapping(userDetails.project_role_mappings[i])" placement="right" 
+                                ngbTooltip="{{ 'DELETE' | translate }}">
+                                <i class="fas fa-trash-alt text-danger"></i>
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/app/users/project-role/ProjectRoleComponent.scss b/src/app/users/project-role/ProjectRoleComponent.scss
index 031e56e..c80a776 100644
--- a/src/app/users/project-role/ProjectRoleComponent.scss
+++ b/src/app/users/project-role/ProjectRoleComponent.scss
@@ -14,4 +14,24 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+.card{
+  border-radius: 15px;
+  width: auto;
+  height: auto;
+  margin-bottom: 5px;
+}
+
+.card-body{
+  flex: 1 1 auto;
+  min-height: 1px;
+  padding: 5px;
+}
+
+.form-group{
+  margin-bottom: 1px;
+}
+
+.col-sm-1{
+ bottom: 10px;
+}
\ No newline at end of file