diff --git a/src/main/resources/messages.properties b/src/main/resources/messages.properties
index 60245f3b..25aa8bb5 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.
@@ -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 75097f81..aa25dfe1 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,
@@ -870,8 +875,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;
 }
 
@@ -886,53 +890,11 @@ body {
     flex: 1;
 }
 
+.login-section .card-message h1,
 .login-error-card .card-message h1 {
     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;
@@ -1011,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;
 }
@@ -1041,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;
 }
@@ -1137,11 +1103,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;
@@ -1168,11 +1129,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;
@@ -1199,11 +1155,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;
@@ -1230,11 +1181,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;
@@ -1250,16 +1196,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;
     }
 
@@ -1269,22 +1210,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) {
@@ -1317,22 +1242,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/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>
diff --git a/src/main/resources/templates/casOAuth20ErrorView.html b/src/main/resources/templates/casOAuth20ErrorView.html
index 31362440..c71cb1e4 100644
--- a/src/main/resources/templates/casOAuth20ErrorView.html
+++ b/src/main/resources/templates/casOAuth20ErrorView.html
@@ -14,21 +14,13 @@
 
     <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>
-                <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/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/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>
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>
diff --git a/src/main/resources/templates/protocol/oauth/confirm.html b/src/main/resources/templates/protocol/oauth/confirm.html
index 0a48a64a..744f4cbe 100644
--- a/src/main/resources/templates/protocol/oauth/confirm.html
+++ b/src/main/resources/templates/protocol/oauth/confirm.html
@@ -14,18 +14,21 @@
 
         <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}" />
-                    <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}}">