From db9ae03f18a520af73ec07f32cbfc28cdd9dfc71 Mon Sep 17 00:00:00 2001
From: Longze Chen <cslzchen@gmail.com>
Date: Tue, 16 Sep 2025 10:12:00 -0400
Subject: [PATCH 1/6] Remove branded login from a few pages

* OSF login
* 2FA login
* Institution login
* Unsupported institution login
* Terms of Service page
---
 .../templates/casInstitutionLoginView.html       | 16 ----------------
 .../casUnsupportedInstitutionLoginView.html      | 16 ----------------
 .../resources/templates/fragments/loginform.html |  6 ------
 .../templates/fragments/tosloginform.html        |  6 ------
 .../templates/fragments/totploginform.html       |  6 ------
 5 files changed, 50 deletions(-)

diff --git a/src/main/resources/templates/casInstitutionLoginView.html b/src/main/resources/templates/casInstitutionLoginView.html
index 51f47568..2809a98c 100644
--- a/src/main/resources/templates/casInstitutionLoginView.html
+++ b/src/main/resources/templates/casInstitutionLoginView.html
@@ -14,22 +14,6 @@
             <div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
                 <section class="login-section login-form login-instn-card">
 
-                    <section class="mb-4 service-ui text-center">
-                        <table class="osf-shield-with-name">
-                            <tbody>
-                            <tr>
-                                <td>
-                                    <img class="service-ui-logo" src="/images/osf-logo.png" alt="OSF logo">
-                                </td>
-                                <td>
-                                    <span class="service-ui-name hidden-narrow">OSF </span>
-                                    <span class="service-ui-name">INSTITUTIONS</span>
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </section>
-
                     <section class="card-message">
                         <h1 th:utext="#{screen.institutionlogin.heading}"></h1>
                         <p th:unless=${osfCasLoginContext.institutionId} th:utext="#{screen.institutionlogin.message.select}"></p>
diff --git a/src/main/resources/templates/casUnsupportedInstitutionLoginView.html b/src/main/resources/templates/casUnsupportedInstitutionLoginView.html
index 000265c3..fcabab7e 100644
--- a/src/main/resources/templates/casUnsupportedInstitutionLoginView.html
+++ b/src/main/resources/templates/casUnsupportedInstitutionLoginView.html
@@ -14,22 +14,6 @@
         <div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
             <section class="login-section login-form login-instn-card">
 
-                <section class="mb-4 service-ui text-center">
-                    <table class="osf-shield-with-name">
-                        <tbody>
-                        <tr>
-                            <td>
-                                <img class="service-ui-logo" src="/images/osf-logo.png" alt="OSF logo">
-                            </td>
-                            <td>
-                                <span class="service-ui-name hidden-narrow">OSF </span>
-                                <span class="service-ui-name">INSTITUTIONS</span>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </section>
-
                 <section class="card-message">
                     <h1 th:utext="#{screen.unsupp-instn.heading}"></h1>
                     <p th:utext="#{screen.unsupp-instn.message(${osfUrl.institutionsHome})}"></p>
diff --git a/src/main/resources/templates/fragments/loginform.html b/src/main/resources/templates/fragments/loginform.html
index 4c470fa4..43ef50f2 100644
--- a/src/main/resources/templates/fragments/loginform.html
+++ b/src/main/resources/templates/fragments/loginform.html
@@ -16,12 +16,6 @@
         <!-- Login form template begins here -->
         <div th:fragment="loginform" class="d-flex flex-column justify-content-between m-auto">
 
-            <section th:if="${delegatedAuthenticationProviderPrimary == null}">
-                <div class="service-ui" th:replace="fragments/serviceui :: serviceUI">
-                    <a href="fragments/serviceui.html"></a>
-                </div>
-            </section>
-
             <section class="text-without-mdi text-center text-bold text-large margin-large-vertical">
                 <span th:utext="#{screen.welcome.tips}"></span>
             </section>
diff --git a/src/main/resources/templates/fragments/tosloginform.html b/src/main/resources/templates/fragments/tosloginform.html
index de5efc56..2bc0aff4 100644
--- a/src/main/resources/templates/fragments/tosloginform.html
+++ b/src/main/resources/templates/fragments/tosloginform.html
@@ -16,12 +16,6 @@
         <!-- Terms of service consent check login form template begins here -->
         <div th:fragment="tosloginform" class="d-flex flex-column justify-content-between m-auto">
 
-            <section>
-                <div class="service-ui" th:replace="fragments/osfbannerui :: osfBannerUI">
-                    <a href="fragments/osfbannerui.html"></a>
-                </div>
-            </section>
-
             <section class="text-without-mdi text-center text-bold text-large margin-large-vertical">
                 <span th:utext="#{screen.tosconsent.tips}"></span>
             </section>
diff --git a/src/main/resources/templates/fragments/totploginform.html b/src/main/resources/templates/fragments/totploginform.html
index 09971c20..80865261 100644
--- a/src/main/resources/templates/fragments/totploginform.html
+++ b/src/main/resources/templates/fragments/totploginform.html
@@ -16,12 +16,6 @@
         <!-- Two-factor authentication login form template begins here -->
         <div th:fragment="totploginform" class="d-flex flex-column justify-content-between m-auto">
 
-            <section>
-                <div class="service-ui" th:replace="fragments/osfbannerui :: osfBannerUI">
-                    <a href="fragments/osfbannerui.html"></a>
-                </div>
-            </section>
-
             <section class="text-without-mdi text-center text-bold text-large margin-large-vertical">
                 <span th:utext="#{screen.twofactor.tips.top}"></span>
             </section>

From 17dbe19dc44dd6f82f4e8650178bd7480b37d6a6 Mon Sep 17 00:00:00 2001
From: Longze Chen <cslzchen@gmail.com>
Date: Tue, 16 Sep 2025 10:15:14 -0400
Subject: [PATCH 2/6] Fix 405 language

---
 src/main/resources/messages.properties | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/resources/messages.properties b/src/main/resources/messages.properties
index 697591fa..20db88ff 100644
--- a/src/main/resources/messages.properties
+++ b/src/main/resources/messages.properties
@@ -168,7 +168,7 @@ screen.error.page.title.pagenotfound=Error - Page Not Found
 screen.error.page.title.requestunsupported=Error - Unsupported Request
 screen.error.page.accessdenied=Access Denied
 screen.error.page.permissiondenied=You do not have permission to view this page.
-screen.error.page.requestunsupported=The request type or syntax is not supported.
+screen.error.page.requestunsupported=Request Not Supported
 # screen.error.page.loginagain=Login Again
 screen.error.page.notfound=Page Not Found
 screen.error.page.doesnotexist=The page you are attempting to access does not exist at the moment.

From c7582a36e31a889e1b915b9f895392229e279f52 Mon Sep 17 00:00:00 2001
From: Longze Chen <cslzchen@gmail.com>
Date: Tue, 16 Sep 2025 10:24:43 -0400
Subject: [PATCH 3/6] Remove osfbannerui and serviceui and their CSS

---
 src/main/resources/static/css/cas.css         | 105 +-----------------
 .../templates/fragments/osfbannerui.html      |  21 ----
 .../templates/fragments/serviceui.html        |  42 -------
 3 files changed, 2 insertions(+), 166 deletions(-)
 delete mode 100644 src/main/resources/templates/fragments/osfbannerui.html
 delete mode 100644 src/main/resources/templates/fragments/serviceui.html

diff --git a/src/main/resources/static/css/cas.css b/src/main/resources/static/css/cas.css
index 82b14def..66d9f5da 100644
--- a/src/main/resources/static/css/cas.css
+++ b/src/main/resources/static/css/cas.css
@@ -864,8 +864,7 @@ body {
     color: #F7F7F7;
 }
 
-.mdc-top-app-bar__row .hidden-narrow,
-.service-ui .osf-shield-with-name .hidden-narrow {
+.mdc-top-app-bar__row .hidden-narrow {
     font-weight: normal;
 }
 
@@ -884,49 +883,6 @@ body {
     text-align: center;
 }
 
-#serviceui {
-    background-color: transparent;
-}
-
-.service-ui {
-    margin-top: 1rem!important;
-    margin-bottom: 1rem!important;
-}
-
-.service-ui .service-ui-logo {
-    max-height: 56px;
-    max-width: 360px;
-}
-
-.service-ui .service-ui-logo-branded {
-    max-height: 48px;
-    max-width: 360px;
-}
-
-.service-ui .osf-shield-with-name {
-    margin: 0 auto;
-    padding-bottom: 1rem;
-}
-
-.osf-shield-with-name .service-ui-logo {
-    padding-right: 0.5rem;
-}
-
-.osf-shield-with-name .service-ui-logo-branded {
-    padding-right: 1rem;
-}
-
-.osf-shield-with-name .service-ui-name {
-    font-size: 2.25rem;
-    font-weight: bold;
-}
-
-.osf-shield-with-name .service-ui-name-branded {
-    font-size: 2rem;
-    font-weight: normal;
-    overflow-wrap: anywhere;
-}
-
 .text-with-mdi,
 .text-without-mdi {
     font-size: 1rem;
@@ -1131,11 +1087,6 @@ body {
     .mdc-top-app-bar__row .mdc-button {
     }
 
-    .service-ui {
-        margin-top: 1rem!important;
-        margin-bottom: 1rem!important;
-    }
-
     .cas-footer-osf {
         font-size: 1.125rem!important;
         padding-bottom: 1.125rem!important;
@@ -1162,11 +1113,6 @@ body {
         padding-top: 48px;
     }
 
-    .service-ui {
-        margin-top: 0.875rem!important;
-        margin-bottom: 0.875rem!important;
-    }
-
     .cas-footer-osf {
         font-size: 1rem!important;
         padding-bottom: 1rem!important;
@@ -1193,11 +1139,6 @@ body {
         padding-top: 36px;
     }
 
-    .service-ui {
-        margin-top: 0.75rem!important;
-        margin-bottom: 0.75rem!important;
-    }
-
     .cas-footer-osf {
         font-size: 0.875rem!important;
         padding-bottom: 0.875rem!important;
@@ -1224,11 +1165,6 @@ body {
         padding-top: 24px;
     }
 
-    .service-ui {
-        margin-top: 0.5rem!important;
-        margin-bottom: 0.5rem!important;
-    }
-
     .cas-footer-osf {
         font-size: 0.625rem!important;
         padding-bottom: 0.625rem!important;
@@ -1244,16 +1180,11 @@ body {
     .w-card-wide {
         width: 75%;
     }
-
-    .service-ui .service-ui-logo {
-        max-width: 320px;
-    }
 }
 
 @media all and (max-width: 699.99px) {
 
-    .mdc-top-app-bar__row .hidden-narrow,
-    .service-ui-name .osf-shield-with-name .hidden-narrow {
+    .mdc-top-app-bar__row .hidden-narrow {
         display: None;
     }
 
@@ -1263,22 +1194,6 @@ body {
     .w-card-wide {
         width: 100%;
     }
-
-    .service-ui .service-ui-logo {
-        max-width: 280px;
-    }
-
-    .osf-shield-with-name .service-ui-logo {
-        max-height: 48px;
-    }
-
-    .osf-shield-with-name .service-ui-name {
-        font-size: 2rem;
-    }
-
-    .osf-shield-with-name .service-ui-name-branded {
-        font-size: 1.75rem;
-    }
 }
 
 @media all and (max-width: 511.99px) {
@@ -1311,22 +1226,6 @@ body {
 
 @media all and (max-width: 399.99px) {
 
-    .service-ui .service-ui-logo {
-        max-width: 240px;
-    }
-
-    .osf-shield-with-name .service-ui-logo {
-        max-height: 36px;
-    }
-
-    .osf-shield-with-name .service-ui-name {
-        font-size: 1.75rem;
-    }
-
-    .osf-shield-with-name .service-ui-name-branded {
-        font-size: 1.5rem;
-    }
-
     .login-section .mdi-before-text,
     .login-error-card .mdi-before-text {
         display: none;
diff --git a/src/main/resources/templates/fragments/osfbannerui.html b/src/main/resources/templates/fragments/osfbannerui.html
deleted file mode 100644
index 173e81c0..00000000
--- a/src/main/resources/templates/fragments/osfbannerui.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-
-    <title></title>
-    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
-</head>
-
-<body>
-    <main class="container mt-3 mb-3">
-        <div th:fragment="osfBannerUI" id="osfbannerui" class="mb-4 service-ui text-center">
-            <img id="servicelogo" class="service-ui-logo" src="/images/osf-banner.png" alt="OSF banner"/>
-        </div>
-    </main>
-</body>
-
-</html>
diff --git a/src/main/resources/templates/fragments/serviceui.html b/src/main/resources/templates/fragments/serviceui.html
deleted file mode 100644
index 6aca64fc..00000000
--- a/src/main/resources/templates/fragments/serviceui.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-
-    <title></title>
-    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
-</head>
-
-<body>
-    <main class="container mt-3 mb-3">
-        <div th:fragment="serviceUI" th:if="${registeredService}" id="serviceui" class="mb-4 service-ui text-center">
-            <div th:if="${#strings.equalsIgnoreCase(registeredService.class.simpleName, 'OAuthRegisteredService')}">
-                <div class="osf-banner-without-name">
-                    <img id="serviceLogo" class="service-ui-logo" th:src="@{'images/osf-banner.png'}" alt="Service banner"/>
-                </div>
-            </div>
-            <div th:unless="${#strings.equalsIgnoreCase(registeredService.class.simpleName, 'OAuthRegisteredService')}">
-                <div class="osf-banner-without-name" th:if="${#strings.isEmpty(registeredService.name)}">
-                    <img id="serviceLogo" class="service-ui-logo" th:src="${registeredService.logo} ? ${registeredService.logo} : @{'images/osf-banner.png'}" alt="Service banner"/>
-                </div>
-                <table class="osf-shield-with-name osf-shield-with-name-branded" th:unless="${#strings.isEmpty(registeredService.name)}">
-                    <tbody>
-                    <tr>
-                        <td>
-                            <img id="serviceLogoBranded" class="service-ui-logo service-ui-logo-branded" th:src="${registeredService.logo} ? ${registeredService.logo} : @{'images/osf-logo.png'}" alt="Service banner"/>
-                        </td>
-                        <td>
-                            <span id="serviceNameBranded" class="service-ui-name service-ui-name-branded" th:text="${registeredService.name}"></span>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </main>
-</body>
-
-</html>

From 3e1099fecdc314a03434c6bb2ca0080eab9f3768 Mon Sep 17 00:00:00 2001
From: Longze Chen <cslzchen@gmail.com>
Date: Thu, 18 Sep 2025 21:46:52 -0400
Subject: [PATCH 4/6] Update generic logged-in and logged-out page

---
 src/main/resources/templates/casGenericSuccessView.html | 4 ----
 src/main/resources/templates/casLogoutView.html         | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/src/main/resources/templates/casGenericSuccessView.html b/src/main/resources/templates/casGenericSuccessView.html
index 7ade4139..cba49b15 100644
--- a/src/main/resources/templates/casGenericSuccessView.html
+++ b/src/main/resources/templates/casGenericSuccessView.html
@@ -14,10 +14,6 @@
 
         <div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
             <section class="login-error-card">
-                <section class="text-without-mdi text-center text-bold text-large margin-large-vertical title">
-                    <span th:utext="#{screen.generic.loginsuccess.tips}"></span>
-                </section>
-                <hr class="my-4" />
                 <section class="card-message">
                     <h1 th:utext="#{screen.generic.loginsuccess.heading}"></h1>
                     <div th:utext="#{screen.generic.loginsuccess.message}"></div>
diff --git a/src/main/resources/templates/casLogoutView.html b/src/main/resources/templates/casLogoutView.html
index c23e1c08..d52a5784 100644
--- a/src/main/resources/templates/casLogoutView.html
+++ b/src/main/resources/templates/casLogoutView.html
@@ -14,10 +14,6 @@
 
         <div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
             <section class="login-error-card">
-                <section class="text-without-mdi text-center text-bold text-large margin-large-vertical title">
-                    <span th:utext="#{screen.generic.logoutsuccess.tips}"></span>
-                </section>
-                <hr class="my-4" />
                 <section class="card-message">
                     <h1 th:utext="#{screen.generic.logoutsuccess.heading}"></h1>
                     <div th:utext="#{screen.generic.logoutsuccess.message}"></div>

From 49fea876013fac56206940b61f5a7676557dfff5 Mon Sep 17 00:00:00 2001
From: Longze Chen <cslzchen@gmail.com>
Date: Thu, 18 Sep 2025 22:53:40 -0400
Subject: [PATCH 5/6] Update OAuth confirm and failure page; add hover color
 for deny button

---
 src/main/resources/static/css/cas.css                    | 5 +++++
 src/main/resources/templates/casOAuth20ErrorView.html    | 9 ---------
 src/main/resources/templates/protocol/oauth/confirm.html | 6 ------
 3 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/main/resources/static/css/cas.css b/src/main/resources/static/css/cas.css
index a3ed39b8..e789fc26 100644
--- a/src/main/resources/static/css/cas.css
+++ b/src/main/resources/static/css/cas.css
@@ -679,6 +679,7 @@ button.close {
     --cas-theme-osf-blue-hover: #0089ff;
     --cas-theme-grey-hover: #f5f8fb;
     --cas-theme-osf-red: #b52b27;
+    --cas-theme-osf-red-hover: #E40303;
     --cas-theme-osf-disabled: #eeeeee;
     --cas-theme-osf-disabled-dark: #cccccc;
     --cas-theme-primary: var(--cas-theme-osf-navbar, #263947);
@@ -830,6 +831,10 @@ body {
 .form-button .button-osf-red,
 .form-button-inline .button-osf-red {
     background-color: var(--cas-theme-osf-red, #b52b27);
+
+    &:hover {
+        background-color: var(--cas-theme-osf-red-hover, #E40303);
+    }
 }
 
 .form-button .button-osf-disabled,
diff --git a/src/main/resources/templates/casOAuth20ErrorView.html b/src/main/resources/templates/casOAuth20ErrorView.html
index 31362440..09691818 100644
--- a/src/main/resources/templates/casOAuth20ErrorView.html
+++ b/src/main/resources/templates/casOAuth20ErrorView.html
@@ -14,15 +14,6 @@
 
     <div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
         <section class="login-error-card">
-            <section>
-                <div th:replace="fragments/osfbannerui :: osfBannerUI">
-                    <a href="fragments/osfbannerui.html"></a>
-                </div>
-            </section>
-            <section class="text-without-mdi text-center text-bold text-large margin-large-vertical title-danger">
-                <span th:utext="#{screen.authnerror.tips}"></span>
-            </section>
-            <hr class="my-4" />
             <section class="card-message">
                 <h1 th:utext="#{screen.oauth.error.heading}"></h1>
                 <p th:utext="#{${errorMsg}}"></p>
diff --git a/src/main/resources/templates/protocol/oauth/confirm.html b/src/main/resources/templates/protocol/oauth/confirm.html
index 0a48a64a..033a0808 100644
--- a/src/main/resources/templates/protocol/oauth/confirm.html
+++ b/src/main/resources/templates/protocol/oauth/confirm.html
@@ -14,12 +14,6 @@
 
         <div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
             <section class="login-section">
-                <section>
-                    <div th:replace="fragments/osfbannerui :: osfBannerUI">
-                        <a href="fragments/osfbannerui.html"></a>
-                    </div>
-                </section>
-                <hr class="my-4" />
                 <section class="card-message">
                     <h1 th:text="#{screen.oauth.confirm.header}" />
                     <h2 class="downsize-to-h3" th:text="#{screen.oauth.confirm.message}" />

From edc6b8f966e240e89198e841e642a988fda59c48 Mon Sep 17 00:00:00 2001
From: Longze Chen <cslzchen@gmail.com>
Date: Fri, 19 Sep 2025 00:18:51 -0400
Subject: [PATCH 6/6] Rework OAuth confirm and error pages

---
 src/main/resources/messages.properties          |  7 ++++---
 src/main/resources/static/css/cas.css           |  9 +++++++--
 .../templates/casOAuth20ErrorView.html          |  5 +++--
 .../templates/protocol/oauth/confirm.html       | 17 +++++++++++++----
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/main/resources/messages.properties b/src/main/resources/messages.properties
index 536f795f..25aa8bb5 100644
--- a/src/main/resources/messages.properties
+++ b/src/main/resources/messages.properties
@@ -760,14 +760,15 @@ screen.institutionssomultipleemailsnotsupported.message=\
 screen.oauth.confirm.title=Approve Access
 screen.oauth.confirm.header=Approve or deny authorization
 screen.oauth.confirm.message=Do you want to grant access to the following service with listed access scopes?
-screen.oauth.confirm.service=Name: {0}
-screen.oauth.confirm.description=Description: {0}
-screen.oauth.confirm.scopes=Scope(s) requested: {0}
+screen.oauth.confirm.service.name=Service Name
+screen.oauth.confirm.service.description=Service Description
+screen.oauth.confirm.service.scopes=Scope(s) Requested
 screen.oauth.confirm.allow=Allow
 screen.oauth.confirm.deny=Deny
 screen.oauth.confirm.backtoosf=Exit and go back to OSF
 screen.oauth.error.title=OAuth Error
 screen.oauth.error.heading=Authorization failed
+screen.oauth.error.detail=Error Detail
 screen.oauth.error.exit=Exit
 #
 # Pac4j Authentication Delegation Error Views
diff --git a/src/main/resources/static/css/cas.css b/src/main/resources/static/css/cas.css
index e789fc26..aa25dfe1 100644
--- a/src/main/resources/static/css/cas.css
+++ b/src/main/resources/static/css/cas.css
@@ -890,6 +890,7 @@ body {
     flex: 1;
 }
 
+.login-section .card-message h1,
 .login-error-card .card-message h1 {
     text-align: center;
 }
@@ -972,7 +973,8 @@ body {
     font-size: 1rem;
 }
 
-.login-error-card .pre-formatted-small pre {
+.login-error-card .pre-formatted-small pre,
+.login-section .card-message .pre-formatted-small pre {
     font-size: 0.75rem;
     white-space: pre-wrap;
 }
@@ -1002,8 +1004,11 @@ body {
 }
 
 .login-error-card #errorInfo,
-.login-error-card #authnAttr {
+.login-error-card #authnAttr,
+.login-error-card .text-with-border,
+.login-section .text-with-border {
     margin-top: 1rem;
+    margin-bottom: 1rem;
     padding: 0 1rem;
     border: solid #e7e7e7;
 }
diff --git a/src/main/resources/templates/casOAuth20ErrorView.html b/src/main/resources/templates/casOAuth20ErrorView.html
index 09691818..c71cb1e4 100644
--- a/src/main/resources/templates/casOAuth20ErrorView.html
+++ b/src/main/resources/templates/casOAuth20ErrorView.html
@@ -17,9 +17,10 @@
             <section class="card-message">
                 <h1 th:utext="#{screen.oauth.error.heading}"></h1>
                 <p th:utext="#{${errorMsg}}"></p>
-                <p class="pre-formatted-small word-break-all">
+                <h2 th:text="#{screen.oauth.error.detail}" />
+                <section class="text-with-border pre-formatted-small word-break-all">
                     <pre class="wrap" th:utext="#{${errorCode + ': ' + errorParam}}"></pre>
-                </p>
+                </section>
             </section>
             <hr class="my-4" />
             <section class="text-with-mdi">
diff --git a/src/main/resources/templates/protocol/oauth/confirm.html b/src/main/resources/templates/protocol/oauth/confirm.html
index 033a0808..744f4cbe 100644
--- a/src/main/resources/templates/protocol/oauth/confirm.html
+++ b/src/main/resources/templates/protocol/oauth/confirm.html
@@ -16,10 +16,19 @@
             <section class="login-section">
                 <section class="card-message">
                     <h1 th:text="#{screen.oauth.confirm.header}" />
-                    <h2 class="downsize-to-h3" th:text="#{screen.oauth.confirm.message}" />
-                    <p th:text="#{screen.oauth.confirm.service(${serviceName})}" />
-                    <p th:text="#{screen.oauth.confirm.description(${serviceDescription})}" />
-                    <p th:text="#{screen.oauth.confirm.scopes(${scope})}" />
+                    <p class="downsize-to-h3" th:text="#{screen.oauth.confirm.message}" />
+                    <h2 th:text="#{screen.oauth.confirm.service.name}" />
+                    <section class="text-with-border pre-formatted-small">
+                        <pre th:text="${serviceName}"></pre>
+                    </section>
+                    <h2 th:text="#{screen.oauth.confirm.service.description}" />
+                    <section class="text-with-border pre-formatted-small">
+                        <pre th:text="${serviceDescription}"></pre>
+                    </section>
+                    <h2 th:text="#{screen.oauth.confirm.service.scopes}" />
+                    <section class="text-with-border pre-formatted-small">
+                        <pre th:text="${scope}"></pre>
+                    </section>
                 </section>
                 <section class="form-button-inline">
                     <a class="mdc-button mdc-button--raised button-osf-blue" id="allow" name="allow"  th:href="@{${callbackUrl}}">