diff --git a/samples/demo-client/src/main/resources/templates/device-activate.html b/samples/demo-client/src/main/resources/templates/device-activate.html
index f248d3d3..c704193e 100644
--- a/samples/demo-client/src/main/resources/templates/device-activate.html
+++ b/samples/demo-client/src/main/resources/templates/device-activate.html
@@ -9,7 +9,7 @@
 <body>
 <div th:replace="~{page-templates :: navbar}"></div>
 <div class="container">
-    <div class="row">
+    <div class="row py-5">
         <div class="col-md-5">
             <h2>Activation Required</h2>
             <p>You must activate this device.</p>
diff --git a/samples/demo-client/src/main/resources/templates/device-authorize.html b/samples/demo-client/src/main/resources/templates/device-authorize.html
index 95c3223b..41ef5637 100644
--- a/samples/demo-client/src/main/resources/templates/device-authorize.html
+++ b/samples/demo-client/src/main/resources/templates/device-authorize.html
@@ -9,11 +9,11 @@
 <body>
 <div th:replace="~{page-templates :: navbar}"></div>
 <div class="container">
-    <div class="row">
+    <div class="row py-5">
         <div class="col-md-5">
             <h2>Device Activation</h2>
             <p>Please visit <a th:href="${verificationUri}" th:text="${verificationUri?.replaceFirst('https?://', '')}"></a> on another device to continue.</p>
-            <p style="margin-top: 70px">Activation Code</p>
+            <p class="mt-5">Activation Code</p>
             <div class="card text-bg-light">
                 <span class="card-body" style="font-size: 2em; letter-spacing: 2rem" th:text="${userCode}"></span>
                 <form id="authorize-form" th:action="@{/device_authorize}" method="post">
diff --git a/samples/demo-client/src/main/resources/templates/logged-out.html b/samples/demo-client/src/main/resources/templates/logged-out.html
index 585499d4..67a38ac4 100644
--- a/samples/demo-client/src/main/resources/templates/logged-out.html
+++ b/samples/demo-client/src/main/resources/templates/logged-out.html
@@ -9,7 +9,7 @@
 <body>
 <div th:replace="~{page-templates :: navbar}"></div>
 <div class="container">
-    <div class="row justify-content-center">
+    <div class="row py-5 justify-content-center">
         <div class="col">
             <h2>You are now logged out.</h2>
         </div>
diff --git a/samples/demo-client/src/main/resources/templates/page-templates.html b/samples/demo-client/src/main/resources/templates/page-templates.html
index 4e83d929..6d9e17be 100644
--- a/samples/demo-client/src/main/resources/templates/page-templates.html
+++ b/samples/demo-client/src/main/resources/templates/page-templates.html
@@ -36,13 +36,13 @@
     </div>
 </nav>
 <div class="container">
-    <div th:fragment="error-message" th:if="${error}" class="row justify-content-center alert alert-danger alert-dismissible fade show" role="alert">
-        <div class="col">
+    <div th:fragment="error-message" th:if="${error}" class="row py-5 justify-content-center">
+        <div class="col alert alert-danger alert-dismissible fade show" role="alert">
             <strong th:text="${error}"></strong>
             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
     </div>
-    <div th:fragment="message-list" th:if="${messages}" class="row justify-content-start">
+    <div th:fragment="message-list" th:if="${messages}" class="row py-5 justify-content-start">
         <div class="col">
             <table class="table table-striped caption-top">
                 <caption>Messages</caption>
