diff --git a/src/app/components/client/client.component.html b/src/app/components/client/client.component.html
index c467279..c0dabf7 100644
--- a/src/app/components/client/client.component.html
+++ b/src/app/components/client/client.component.html
@@ -5,8 +5,7 @@
 >
   <div class="input-group" *ngIf="!showNewClient">
     <div
-      class="px-2 d-flex justify-content-center align-items-center"
-      style="height: 56px"
+      class="px-2 d-flex justify-content-center align-items-center custom-search-icon-wrapper"
     >
       <img
         class="mx-1"
@@ -31,16 +30,16 @@
     </button>
   </div>
   <div class="input-group" *ngIf="showNewClient">
-    <span class="input-group-text">Please enter a new Client ID</span>
-    <input class="form-control" type="text" #newClientId />
+    <span class="input-group-text rounded-left-side">Please enter a new Client ID</span>
+    <input class="form-control" placeholder="Enter client ID" type="text" #newClientId />
     <button
-      class="btn btn-primary"
+      class="btn btn-outline-primary border-0"
       type="button"
       (click)="addClient(newClientId.value)"
     >
       <span class="fa fa-plus-square text-primary"></span> Add Client
     </button>
-    <button class="btn btn-primary" (click)="showNewClient = false">
+    <button class="btn btn-outline-primary border-0 mr-10px" (click)="showNewClient = false">
       <span class="fa fa-close"></span> Back
     </button>
   </div>
diff --git a/src/app/components/user/user.component.html b/src/app/components/user/user.component.html
index 3fdd2bf..19a5a57 100644
--- a/src/app/components/user/user.component.html
+++ b/src/app/components/user/user.component.html
@@ -3,24 +3,24 @@
  
   <!-- <span class="fa fa-user-circle fa-2x"></span> -->
   <div class="input-group" *ngIf = "!showNewUser">
-    <div class="px-2 d-flex justify-content-center align-items-center" style="height: 56px">
+    <div class="px-2 d-flex justify-content-center align-items-center custom-search-icon-wrapper">
       <img class="mx-1" src="assets/img/search-icon.svg" width="14px" height="14px" />
     </div>
 
-    <input class="form-control" type="search" [(ngModel)]="searchTerm" name="searchTerm"
+    <input class="form-control " type="search" [(ngModel)]="searchTerm" name="searchTerm"
       placeholder="Search users">
-    <button class="btn btn-outline-primary border-0"  (click)="showNewUser = true">
+    <button class="btn btn-outline-primary border-0 mr-10px"  (click)="showNewUser = true">
       <i class="fa fa-plus-square text-primary"></i>
       Add User
     </button>
   </div>
   <div class="input-group" *ngIf = "showNewUser">
-    <span class="input-group-text">Please enter a new Username</span>
-    <input class="form-control" type="text" #newUsername>
-    <button class="btn btn-primary " type="button" (click)="addUser(newUsername.value)">
+    <span class="input-group-text rounded-left-side">Please enter a new Username</span>
+    <input class="form-control" placeholder="Enter username" type="text" #newUsername>
+    <button class="btn btn-outline-primary border-0 " type="button" (click)="addUser(newUsername.value)">
       <span class="fa fa-plus-square text-primary"></span> Add User
     </button>
-    <button class="btn btn-primary" (click)="showNewUser = false">
+    <button class="btn btn-outline-primary border-0 mr-10px" (click)="showNewUser = false">
       <span class="fa fa-close"></span> Back
     </button>
   </div>
diff --git a/src/styles.css b/src/styles.css
index 2b53887..0f219b3 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -22,6 +22,10 @@ body { margin: 0; font-family: Inter , "Helvetica Neue", sans-serif !important;
   background-color: unset !important;
 }
 
+.btn.btn-outline-primary:focus {
+  box-shadow: none !important;
+}
+
 .btn.btn-primary {
   background-image: none;
   background-color: #05286C;
@@ -184,8 +188,6 @@ div.card-avatar-character {
   border-radius: 10px;
   width: 45%;
   background-color: #fff;
-  padding-left: 10px;
-  padding-right: 10px;
 }
 
 .custom-form-inline .form-control {
@@ -201,4 +203,17 @@ div.card-avatar-character {
 
 input:focus {
   box-shadow: none !important;
-} 
\ No newline at end of file
+} 
+
+.custom-search-icon-wrapper {
+  height: 56px;
+  margin-left: 10px;
+}
+
+.mr-10px {
+  margin-right: 10px;
+}
+.rounded-left-side {
+  border-radius: 10px 0 0px 10px !important;
+  border: none !important;
+}
\ No newline at end of file