diff --git a/src/bin/build-keycloak-theme/generateFtl/ftl2js.ftl b/src/bin/build-keycloak-theme/generateFtl/ftl2js.ftl
index 1daca7c5..c6c816d9 100644
--- a/src/bin/build-keycloak-theme/generateFtl/ftl2js.ftl
+++ b/src/bin/build-keycloak-theme/generateFtl/ftl2js.ftl
@@ -60,7 +60,7 @@
             var out= {
                 "showUsername": ${auth.showUsername()?c},
                 "showResetCredentials": ${auth.showResetCredentials()?c},
-                "showTryAnotherWayLink": ${auth.showTryAnotherWayLink()?c}
+                "showTryAnotherWayLink": ${auth.showTryAnotherWayLink()?c},
                 "selectedCredential": "${auth.selectedCredential!''}" || undefined
             };
 
diff --git a/src/lib/components/KcProperties.ts b/src/lib/components/KcProperties.ts
index 52247bea..61fa1279 100644
--- a/src/lib/components/KcProperties.ts
+++ b/src/lib/components/KcProperties.ts
@@ -5,6 +5,7 @@ import { allPropertiesValuesToUndefined } from "../tools/allPropertiesValuesToUn
 export type KcClasses<CssClasses extends string> = { [key in CssClasses]?: string[] | string };
 
 export type KcTemplateCssClasses = 
+    "kcHtmlClass" |
     "kcLoginClass" |
     "kcHeaderClass" |
     "kcHeaderWrapperClass" |
@@ -43,6 +44,7 @@ export const defaultKcTemplateProperties: KcTemplateProperties = {
             .map(end => `node_modules/patternfly/dist/css/patternfly${end}`),
         "lib/zocial/zocial.css"
     ],
+    "kcHtmlClass": "login-pf",
     "kcLoginClass": "login-pf-page",
     "kcContentWrapperClass": "row",
     "kcHeaderClass": "login-pf-page-header",
diff --git a/src/lib/components/Template.tsx b/src/lib/components/Template.tsx
index 8dd20cee..c87efb24 100644
--- a/src/lib/components/Template.tsx
+++ b/src/lib/components/Template.tsx
@@ -92,6 +92,10 @@ export const Template = memo((props: TemplateProps) => {
                 )
         );
 
+        document.getElementsByTagName("html")[0]
+            .classList
+            .add(cx(kcProperties.kcHtmlClass));
+
 
     }, []);