diff --git a/src/app/app-provider-admin/provider-admin/configurations/update-village/update-village.component.css b/src/app/app-provider-admin/provider-admin/configurations/update-village/update-village.component.css
index 321f8be5..3799b710 100644
--- a/src/app/app-provider-admin/provider-admin/configurations/update-village/update-village.component.css
+++ b/src/app/app-provider-admin/provider-admin/configurations/update-village/update-village.component.css
@@ -1,3 +1,8 @@
+/* Keep the Update button and result clear of the fixed 30px app footer */
+.update-village-page {
+  padding-bottom: 70px;
+}
+
 .screen-note {
   font-size: 12px;
   color: rgba(0, 0, 0, 0.6);
@@ -14,10 +19,44 @@
   color: #ef6c00;
 }
 
+.mapping-table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Scroll horizontally on narrow screens instead of squashing the 9 columns */
 .mapping-table {
   width: 100%;
+  min-width: 900px;
+}
+
+.mapping-table th.mat-mdc-header-cell {
+  white-space: nowrap;
+}
+
+.mapping-table th.mat-mdc-header-cell,
+.mapping-table td.mat-mdc-cell {
+  padding: 8px 12px;
+}
+
+.mapping-table td.mat-mdc-cell {
+  word-break: break-word;
 }
 
 .selected-row {
   background-color: rgba(76, 175, 80, 0.12);
 }
+
+@media (max-width: 575.98px) {
+  h4 {
+    font-size: 18px;
+  }
+
+  h5 {
+    font-size: 15px;
+  }
+
+  .update-button {
+    width: 100%;
+  }
+}
diff --git a/src/app/app-provider-admin/provider-admin/configurations/update-village/update-village.component.html b/src/app/app-provider-admin/provider-admin/configurations/update-village/update-village.component.html
index 7ab67fc5..b097e77c 100644
--- a/src/app/app-provider-admin/provider-admin/configurations/update-village/update-village.component.html
+++ b/src/app/app-provider-admin/provider-admin/configurations/update-village/update-village.component.html
@@ -1,6 +1,6 @@
-<div class="container-fluid">
+<div class="container-fluid update-village-page">
   <div class="row">
-    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+    <div class="col-12">
       <h4>Update Village</h4>
       <p class="screen-note">
         Select a user, pick the work location mapping and the village to
@@ -9,7 +9,7 @@ <h4>Update Village</h4>
       </p>
     </div>
 
-    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
+    <div class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
       <mat-form-field [style.width]="'100%'">
         <mat-label>Select User</mat-label>
         <mat-select
@@ -28,28 +28,28 @@ <h4>Update Village</h4>
 
   <ng-container *ngIf="user">
     <div class="row">
-      <div class="col-xs-12 col-sm-12">
+      <div class="col-12">
         <h5>User Details</h5>
       </div>
-      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
         <mat-form-field [style.width]="'100%'">
           <mat-label>User ID</mat-label>
           <input matInput [value]="user.userID" disabled />
         </mat-form-field>
       </div>
-      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
         <mat-form-field [style.width]="'100%'">
           <mat-label>Username</mat-label>
           <input matInput [value]="user.userName" disabled />
         </mat-form-field>
       </div>
-      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
         <mat-form-field [style.width]="'100%'">
           <mat-label>Name</mat-label>
           <input matInput [value]="displayName" disabled />
         </mat-form-field>
       </div>
-      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
         <mat-form-field [style.width]="'100%'">
           <mat-label>Employee ID</mat-label>
           <input
@@ -62,7 +62,7 @@ <h5>User Details</h5>
     </div>
 
     <div class="row m-t-10">
-      <div class="col-xs-12 col-sm-12">
+      <div class="col-12">
         <h5>Current Village Mappings</h5>
         <p class="screen-note" *ngIf="!mappingsLoaded">Loading mappings...</p>
         <p
@@ -74,7 +74,7 @@ <h5>Current Village Mappings</h5>
       </div>
 
       <div
-        class="col-xs-12 col-sm-12 table-responsive"
+        class="col-12 table-responsive mapping-table-wrapper"
         *ngIf="mappingsWithVillages.length > 0"
       >
         <table
@@ -167,10 +167,10 @@ <h5>Current Village Mappings</h5>
 
   <ng-container *ngIf="selectedMapping">
     <div class="row m-t-20">
-      <div class="col-xs-12 col-sm-12">
+      <div class="col-12">
         <h5>Village to Replace</h5>
       </div>
-      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
         <mat-form-field [style.width]="'100%'">
           <mat-label>Old Village</mat-label>
           <mat-select
@@ -191,10 +191,10 @@ <h5>Village to Replace</h5>
     </div>
 
     <div class="row">
-      <div class="col-xs-12 col-sm-12">
+      <div class="col-12">
         <h5>New Village</h5>
       </div>
-      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
         <mat-form-field [style.width]="'100%'">
           <mat-label>State</mat-label>
           <mat-select
@@ -209,7 +209,7 @@ <h5>New Village</h5>
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
         <mat-form-field [style.width]="'100%'">
           <mat-label>District</mat-label>
           <mat-select
@@ -225,7 +225,7 @@ <h5>New Village</h5>
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
         <mat-form-field [style.width]="'100%'">
           <mat-label>Block</mat-label>
           <mat-select
@@ -242,7 +242,7 @@ <h5>New Village</h5>
         </mat-form-field>
       </div>
       <div
-        class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10"
+        class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10"
         *ngIf="hasFacilities"
       >
         <mat-form-field [style.width]="'100%'">
@@ -259,8 +259,8 @@ <h5>New Village</h5>
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
-        <mat-form-field [style.width]="'100%'">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 m-t-10">
+        <mat-form-field [style.width]="'100%'" subscriptSizing="dynamic">
           <mat-label>Village</mat-label>
           <mat-select
             [(ngModel)]="newVillage"
@@ -303,16 +303,16 @@ <h5>New Village</h5>
   </ng-container>
 
   <div class="row" *ngIf="validationMessage && selectedMapping">
-    <div class="col-xs-12 col-sm-12">
+    <div class="col-12">
       <p class="validation-note">{{ validationMessage }}</p>
     </div>
   </div>
 
   <div class="row m-t-10" *ngIf="user">
-    <div class="col-xs-12 col-sm-12">
+    <div class="col-12">
       <button
         mat-raised-button
-        class="mat_green"
+        class="mat_green update-button"
         [disabled]="!canSubmit"
         (click)="confirmAndUpdate()"
       >
@@ -322,7 +322,7 @@ <h5>New Village</h5>
   </div>
 
   <div class="row m-t-20" *ngIf="updateResult">
-    <div class="col-xs-12 col-sm-12">
+    <div class="col-12">
       <h5>Update complete</h5>
       <p class="screen-note">
         Mapping {{ updateResult.uSRMappingID }}: