diff --git a/erpnext/www/book-appointment/index.css b/erpnext/www/book-appointment/index.css
index 0959d5c4cd..6c49fde739 100644
--- a/erpnext/www/book-appointment/index.css
+++ b/erpnext/www/book-appointment/index.css
@@ -9,6 +9,14 @@
     padding: 0.5em 1em;
 }
 
+@media (max-width: 768px) {
+    #submit-button-area {
+        display: grid;
+        grid-template-areas: 
+        "submit"
+        "back";
+    }
+}
 #customer-form{
     border-color: black;
 }
diff --git a/erpnext/www/book-appointment/index.html b/erpnext/www/book-appointment/index.html
index 9e470dafea..8ddfc2928b 100644
--- a/erpnext/www/book-appointment/index.html
+++ b/erpnext/www/book-appointment/index.html
@@ -54,9 +54,9 @@
             <textarea class="form-control mt-3" name="customer_notes" id="customer_notes" cols="30" rows="10"
                 placeholder="Notes"></textarea>
             </form>
-            <div class="row mt-3 ">
-                <div class="col-md"><button class="btn btn-dark form-control" onclick="initialise_select_date()">Go back</button></div>
-                <div class="col-md"><button class="btn btn-primary form-control " onclick="submit()" id="submit-button">Submit</button></div>
+            <div class="row mt-3 " id="submit-button-area">
+                <div class="col-md mt-3" style="grid-area: back;"><button class="btn btn-dark form-control" onclick="initialise_select_date()">Go back</button></div>
+                <div class="col-md mt-3" style="grid-area: submit;"><button class="btn btn-primary form-control " onclick="submit()" id="submit-button">Submit</button></div>
             </div>
         </div>
     </div>