diff --git a/Configuration/TypoScript/Extension/Felogin/constants.typoscript b/Configuration/TypoScript/Extension/Felogin/constants.typoscript
index cda9d8ccd..f1b250d0d 100644
--- a/Configuration/TypoScript/Extension/Felogin/constants.typoscript
+++ b/Configuration/TypoScript/Extension/Felogin/constants.typoscript
@@ -1,4 +1,5 @@
-# FRONTEND LOGIN
-styles.content.loginform {
-    templateFile = EXT:bootstrap_package/Resources/Private/Templates/Felogin/FrontendLogin.html
-}
+########################
+#### FRONTEND LOGIN ####
+########################
+
+@import 'EXT:felogin/Configuration/TypoScript/constants.typoscript'
diff --git a/Configuration/TypoScript/Extension/Felogin/setup.typoscript b/Configuration/TypoScript/Extension/Felogin/setup.typoscript
index 25950c852..aceadeffe 100644
--- a/Configuration/TypoScript/Extension/Felogin/setup.typoscript
+++ b/Configuration/TypoScript/Extension/Felogin/setup.typoscript
@@ -1,17 +1,22 @@
-# FRONTEND LOGIN
-plugin.tx_felogin_pi1 {
-    wrapContentInBaseClass = 0
-    welcomeMessage_stdWrap.wrap = <p>|</p>
-    logoutMessage_stdWrap.wrap = <p>|</p>
-    errorMessage_stdWrap.wrap = <p class="text-danger">|</p>
-    successMessage_stdWrap.wrap = <p class="text-success">|</p>
-    cookieWarning_stdWrap.wrap = <p class="text-warning">|</p>
-    forgotMessage_stdWrap.wrap = <p>|</p>
-    forgotErrorMessage_stdWrap.wrap = <p class="text-danger">|</p>
-    forgotResetMessageEmailSentMessage_stdWrap.wrap = <p class="text-success">|</p>
-    changePasswordNotValidMessage_stdWrap.wrap = <p class="text-danger">|</p>
-    changePasswordTooShortMessage_stdWrap.wrap = <p class="text-danger">|</p>
-    changePasswordNotEqualMessage_stdWrap.wrap = <p class="text-danger">|</p>
-    changePasswordMessage_stdWrap.wrap = <p>|</p>
-    changePasswordDoneMessage_stdWrap.wrap = <p class="text-success">|</p>
+########################
+#### FRONTEND LOGIN ####
+########################
+
+@import 'EXT:felogin/Configuration/TypoScript/setup.typoscript'
+
+plugin.tx_felogin_login {
+    view {
+        templateRootPaths {
+            20 = EXT:bootstrap_package/Resources/Private/Templates/Felogin/
+            21 = {$plugin.bootstrap_package.view.templateRootPath}Felogin/
+        }
+        partialRootPaths {
+            20 = EXT:bootstrap_package/Resources/Private/Partials/Felogin/
+            21 = {$plugin.bootstrap_package.view.partialRootPath}Felogin/
+        }
+        layoutRootPaths {
+            20 = EXT:bootstrap_package/Resources/Private/Layouts/Felogin/
+            21 = {$plugin.bootstrap_package.view.layoutRootPath}Felogin/
+        }
+    }
 }
diff --git a/Resources/Private/Partials/Felogin/CookieWarning.html b/Resources/Private/Partials/Felogin/CookieWarning.html
new file mode 100644
index 000000000..2e2c80dda
--- /dev/null
+++ b/Resources/Private/Partials/Felogin/CookieWarning.html
@@ -0,0 +1,5 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+
+<p class="text-warning"><f:translate key="cookie_warning" /></p>
+
+</html>
diff --git a/Resources/Private/Templates/Felogin/FrontendLogin.html b/Resources/Private/Templates/Felogin/FrontendLogin.html
deleted file mode 100644
index 9692e3bf5..000000000
--- a/Resources/Private/Templates/Felogin/FrontendLogin.html
+++ /dev/null
@@ -1,159 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Templates for felogin</title>
-</head>
-<body>
-
-<h1>Common markers</h1>
-<p>These are substituted in all felogin item displaying templates.</p>
-
-<h2>Markers</h2>
-<ul>
-    <li>###ACTION_URI###     - URI of the request for the login/logout form</li>
-    <li>###EXTRA_HIDDEN###   - Hook required (additional hidden field used by kb_md5fepw extension by Kraft Bernhard)</li>
-    <li>###ON_SUBMIT###      - Hook required (used by kb_md5fepw extension by Kraft Bernhard)</li>
-    <li>###PREFIXID###       - Same as class name ('tx_felogin_pi1') useful to get a unique classname prefix</li>
-    <li>###REDIRECT_URL###   - URL of redirection upon login</li>
-    <li>###NOREDIRECT###     - if set, no redirect will be done</li>
-    <li>###STORAGE_PID###    - explicit enough I guess (if not : id of the page where user are stored)</li>
-    <li>###STATUS_HEADER###  - depends of the template</li>
-    <li>###STATUS_MESSAGE### - depends of the template</li>
-</ul>
-
-<h2>Wrap parts</h2>
-<ul>
-    <li>###HEADER_VALID###  - useful to define what to show/hide</li>
-    <li>###MESSAGE_VALID### - useful to define what to show/hide</li>
-    <li>###FORGOTP_VALID### - useful to define what to show/hide</li>
-    <li>###PERMALOGIN_VALID### - useful to define what to show/hide</li>
-</ul>
-
-<h2>felogin Language Markers (see pi/locallang.xlf)</h2>
-<ul>
-    <li>###EMAIL_LABEL###                 - corresponding to 'your_email'</li>
-    <li>###FORGOT_PASSWORD###             - corresponding to 'forgot_password'</li>
-    <li>###FORGOT_PASSWORD_BACKTOLOGIN### - corresponding to 'forgot_password_backToLogin'</li>
-    <li>###FORGOT_PASSWORD_ENTEREMAIL###  - corresponding to 'forgot_password_enterEmail'</li>
-    <li>###LOGIN_LABEL###                 - corresponding to 'login'</li>
-    <li>###PASSWORD_LABEL###              - corresponding to 'password'</li>
-    <li>###SEND_PASSWORD###               - corresponding to 'send_password'</li>
-    <li>###USERNAME_LABEL###              - corresponding to 'username'</li>
-</ul>
-
-
-<!--###TEMPLATE_LOGIN###-->
-###STATUS_HEADER###
-###STATUS_MESSAGE###
-<!--###LOGIN_FORM###-->
-<form action="###ACTION_URI###" target="_top" method="post" onsubmit="###ON_SUBMIT###">
-    <fieldset>
-        <legend>###LEGEND###</legend>
-        <div class="form-group">
-            <label for="user">###USERNAME_LABEL###</label>
-            <input class="form-control" type="text" id="user" name="user" value="" />
-        </div>
-        <div class="form-group">
-            <label for="pass">###PASSWORD_LABEL###</label>
-            <input class="form-control" type="password" id="pass" name="pass" value="" data-rsa-encryption="" />
-        </div>
-        <!--###PERMALOGIN_VALID###-->
-        <div class="form-group">
-            <div class="checkbox">
-                <label for="permalogin">
-                    <input name="permalogin" value="0" type="hidden" ###PERMALOGIN_HIDDENFIELD_ATTRIBUTES### id="permaloginHiddenField" />
-                    <input name="permalogin" value="1" type="checkbox" ###PERMALOGIN_CHECKBOX_ATTRIBUTES### id="permalogin"  onclick="document.getElementById('permaloginHiddenField').disabled = this.checked;" />
-                    ###PERMALOGIN###
-                </label>
-            </div>
-        </div>
-        <!--###PERMALOGIN_VALID###-->
-        <div class="form-group">
-            <input class="btn btn-primary" type="submit" name="submit" value="###LOGIN_LABEL###" />
-        </div>
-        <div class="felogin-hidden">
-            <input type="hidden" name="logintype" value="login" />
-            <input type="hidden" name="pid" value="###STORAGE_PID###" />
-            <input type="hidden" name="redirect_url" value="###REDIRECT_URL###" />
-            <input type="hidden" name="###PREFIXID###[noredirect]" value="###NOREDIRECT###" />
-            ###EXTRA_HIDDEN###
-        </div>
-    </fieldset>
-</form>
-<!--###FORGOTP_VALID###-->
-<p><!--###FORGOT_PASSWORD_LINK###-->###FORGOT_PASSWORD###<!--###FORGOT_PASSWORD_LINK###--></p>
-<!--###FORGOTP_VALID###-->
-<!--###LOGIN_FORM###-->
-<!--###TEMPLATE_LOGIN###-->
-
-
-<!--###TEMPLATE_LOGOUT###-->
-###STATUS_HEADER###
-###STATUS_MESSAGE###
-<form action="###ACTION_URI###" target="_top" method="post">
-    <fieldset>
-        <legend>###LEGEND###</legend>
-        <dl>
-            <dt>###USERNAME_LABEL###</dt>
-            <dd>###USERNAME###</dd>
-        </dl>
-        <div class="form-group">
-            <input class="btn btn-primary" type="submit" name="submit" value="###LOGOUT_LABEL###" />
-        </div>
-        <div class="felogin-hidden">
-            <input type="hidden" name="logintype" value="logout" />
-            <input type="hidden" name="pid" value="###STORAGE_PID###" />
-            <input type="hidden" name="###PREFIXID###[noredirect]" value="###NOREDIRECT###" />
-        </div>
-    </fieldset>
-</form>
-<!--###TEMPLATE_LOGOUT###-->
-
-
-<!--###TEMPLATE_FORGOT###-->
-###STATUS_HEADER###
-###STATUS_MESSAGE###
-<!--###FORGOT_FORM###-->
-<form action="###ACTION_URI###" method="post">
-    <div class="felogin-hidden">
-        <input type="hidden" name="tx_felogin_pi1[forgot_hash]" value="###FORGOTHASH###" />
-    </div>
-    <fieldset>
-        <legend>###LEGEND###</legend>
-        <div class="form-group">
-            <label for="tx_felogin_pi1-forgot-email">###DATA_LABEL###</label>
-            <input class="form-control" type="text" name="###FORGOT_EMAIL###" id="tx_felogin_pi1-forgot-email" />
-        </div>
-        <div class="form-group">
-            <input class="btn btn-primary" type="submit" name="submit" value="###SEND_PASSWORD###" />
-        </div>
-    </fieldset>
-</form>
-<!--###FORGOT_FORM###-->
-<p>###BACKLINK_LOGIN###</p>
-<!--###TEMPLATE_FORGOT###-->
-
-
-<!--###TEMPLATE_CHANGEPASSWORD###-->
-###STATUS_HEADER###
-###STATUS_MESSAGE###
-<!--###CHANGEPASSWORD_FORM###-->
-<form action="###ACTION_URI###" method="post">
-    <fieldset>
-        <legend>###LEGEND###</legend>
-        <div class="form-group">
-            <label for="tx_felogin_pi1-newpassword1">###NEWPASSWORD1_LABEL###</label>
-            <input class="form-control" type="password" name="###NEWPASSWORD1###" id="tx_felogin_pi1-newpassword1" />
-        </div>
-        <div class="form-group">
-            <label for="tx_felogin_pi1-newpassword2">###NEWPASSWORD2_LABEL###</label>
-            <input class="form-control" type="password" name="###NEWPASSWORD2###" id="tx_felogin_pi1-newpassword2" />
-        </div>
-        <div class="form-group">
-            <input class="btn btn-primary" type="submit" name="tx_felogin_pi1[changepasswordsubmit]" value="###SEND_PASSWORD###" />
-        </div>
-    </fieldset>
-</form>
-<!--###CHANGEPASSWORD_FORM###-->
-###BACKLINK_LOGIN###
-<!--###TEMPLATE_CHANGEPASSWORD###-->
diff --git a/Resources/Private/Templates/Felogin/Login/Login.html b/Resources/Private/Templates/Felogin/Login/Login.html
new file mode 100644
index 000000000..7530381fc
--- /dev/null
+++ b/Resources/Private/Templates/Felogin/Login/Login.html
@@ -0,0 +1,91 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+
+<f:flashMessages />
+<f:if condition="{cookieWarning}">
+    <f:render partial="CookieWarning" />
+</f:if>
+
+<f:if condition="{messageKey}">
+    <h3>
+        <f:render partial="RenderLabelOrMessage" arguments="{key: '{messageKey}_header'}" />
+    </h3>
+    <p{f:if(condition: '{messageKey} == "error"', then: ' class="text-danger"')}>
+        <f:render partial="RenderLabelOrMessage" arguments="{key: '{messageKey}_message'}" />
+    </p>
+</f:if>
+<f:if condition="{onSubmit}">
+    <f:then>
+        <f:form target="_top" fieldNamePrefix="" action="login" onsubmit="{onSubmit}">
+            <f:render section="content" arguments="{_all}" />
+        </f:form>
+    </f:then>
+    <f:else>
+        <f:form target="_top" fieldNamePrefix="" action="login">
+            <f:render section="content" arguments="{_all}" />
+        </f:form>
+    </f:else>
+</f:if>
+
+<f:if condition="{settings.showForgotPassword}">
+    <f:link.action action="recovery" controller="PasswordRecovery">
+        <f:render partial="RenderLabelOrMessage" arguments="{key: 'forgot_header'}" />
+    </f:link.action>
+</f:if>
+
+<f:section name="content">
+    <fieldset>
+        <legend><f:translate key="login" /></legend>
+        <div class="form-group">
+            <label class="form-label" for="user"><f:translate key="username" /></label>
+            <f:form.textfield name="user" class="form-control" required="true" additionalAttributes="{autocomplete: 'username'}" />
+        </div>
+        <div class="form-group">
+            <label class="form-label" for="pass"><f:translate key="password" /></label>
+            <f:form.password name="pass" class="form-control" data="{rsa-encryption: ''}" additionalAttributes="{required: 'required', autocomplete: 'current-password'}" />
+        </div>
+
+        <f:if condition="{permaloginStatus} > -1">
+            <div class="form-group">
+                <div class="form-check">
+                    <f:if condition="{permaloginStatus} == 1">
+                        <f:then>
+                            <f:form.hidden name="permalogin" value="0" additionalAttributes="{disabled: 'disabled'}" />
+                            <f:form.checkbox class="form-check-input" name="permalogin" id="permalogin" value="1" checked="checked" />
+                        </f:then>
+                        <f:else>
+                            <f:form.hidden name="permalogin" value="0" />
+                            <f:form.checkbox class="form-check-input" name="permalogin" id="permalogin" value="1" />
+                        </f:else>
+                    </f:if>
+                    <label class="form-check-label" for="permalogin">
+                        <f:translate id="permalogin" />
+                    </label>
+                </div>
+            </div>
+        </f:if>
+
+        <div class="form-group">
+            <f:form.submit name="submit" class="btn btn-primary" value="{f:translate(key: 'login')}" />
+        </div>
+
+        <div class="felogin-hidden">
+            <f:form.hidden name="logintype" value="login" />
+            <f:form.hidden name="pid" value="{storagePid}" />
+            <f:if condition="{redirectURL}!=''">
+                <f:form.hidden name="redirect_url" value="{redirectURL}" />
+            </f:if>
+            <f:if condition="{referer}!=''">
+                <f:form.hidden name="referer" value="{referer}" />
+            </f:if>
+            <f:if condition="{redirectReferrer}!=''">
+                <f:form.hidden name="redirectReferrer" value="off" />
+            </f:if>
+            <f:if condition="{noRedirect}!=''">
+                <f:form.hidden name="noredirect" value="1" />
+            </f:if>
+
+            {extraHidden}
+        </div>
+    </fieldset>
+</f:section>
+</html>
diff --git a/Resources/Private/Templates/Felogin/Login/Logout.html b/Resources/Private/Templates/Felogin/Login/Logout.html
new file mode 100644
index 000000000..fa5ec7936
--- /dev/null
+++ b/Resources/Private/Templates/Felogin/Login/Logout.html
@@ -0,0 +1,31 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+
+<f:if condition="{cookieWarning}">
+    <f:render partial="CookieWarning" />
+</f:if>
+
+<h3>
+    <f:render partial="RenderLabelOrMessage" arguments="{key: 'status_header'}" />
+</h3>
+<p>
+    <f:render partial="RenderLabelOrMessage" arguments="{key: 'status_message'}" />
+</p>
+
+<f:form action="login" actionUri="{actionUri}" target="_top" fieldNamePrefix="">
+    <fieldset>
+        <legend><f:translate key="logout" /></legend>
+        <dl>
+            <dt><f:translate key="username" /></dt>
+            <dd>{user.username}</dd>
+        </dl>
+        <div class="form-group">
+            <f:form.submit name="submit" class="btn btn-primary" value="{f:translate(key: 'logout')}" />
+        </div>
+
+        <div class="felogin-hidden">
+            <f:form.hidden name="logintype" value="logout" />
+            <f:form.hidden name="pid" value="{storagePid}" />
+        </div>
+    </fieldset>
+</f:form>
+</html>
diff --git a/Resources/Private/Templates/Felogin/PasswordRecovery/Recovery.html b/Resources/Private/Templates/Felogin/PasswordRecovery/Recovery.html
new file mode 100644
index 000000000..3079dd8a4
--- /dev/null
+++ b/Resources/Private/Templates/Felogin/PasswordRecovery/Recovery.html
@@ -0,0 +1,29 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<h3>
+    <f:render partial="RenderLabelOrMessage" arguments="{key: 'forgot_header'}" />
+</h3>
+<p>
+    <f:render partial="RenderLabelOrMessage" arguments="{key: 'forgot_reset_message'}" />
+</p>
+
+<f:render partial="ValidationErrors" />
+
+<f:form action="recovery" method="post">
+    <fieldset>
+        <legend><f:render partial="RenderLabelOrMessage" arguments="{key: 'reset_password'}" /></legend>
+        <div class="form-group">
+            <label class="form-label" for="userIdentifier"><f:translate key="enter_your_data" /></label>
+            <f:form.textfield name="userIdentifier" class="form-control" />
+        </div>
+        <div class="form-group">
+            <f:form.submit class="btn btn-primary" value="{f:translate(key: 'reset_password')}" />
+        </div>
+    </fieldset>
+</f:form>
+
+<p>
+    <f:link.action action="login" controller="Login">
+        <f:translate key="forgot_header_backToLogin" />
+    </f:link.action>
+</p>
+</html>
diff --git a/Resources/Private/Templates/Felogin/PasswordRecovery/ShowChangePassword.html b/Resources/Private/Templates/Felogin/PasswordRecovery/ShowChangePassword.html
new file mode 100644
index 000000000..7f60658fe
--- /dev/null
+++ b/Resources/Private/Templates/Felogin/PasswordRecovery/ShowChangePassword.html
@@ -0,0 +1,32 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<h3>
+    <f:translate key="change_password_header" />
+</h3>
+<p>
+    <f:translate key="change_password_message" arguments="{0: settings.newPasswordMinLength}" />
+</p>
+
+<f:render partial="ValidationErrors" />
+
+<f:form action="changePassword" method="post">
+    <legend><f:translate key="change_password" /></legend>
+    <div class="form-group">
+        <label class="form-label" for="newPass"><f:translate key="newpassword_label1" /></label>
+        <f:form.password name="newPass" class="form-control" additionalAttributes="{autocomplete: 'new-password'}" />
+    </div>
+    <div class="form-group">
+        <label class="form-label" for="newPassRepeat"><f:translate key="newpassword_label2" /></label>
+        <f:form.password name="newPassRepeat" class="form-control" additionalAttributes="{autocomplete: 'new-password'}" />
+    </div>
+    <div class="form-group">
+        <f:form.submit class="btn btn-primary" value="{f:translate(key: 'change_password')}" />
+    </div>
+    <f:form.hidden name="hash" value="{hash}" />
+</f:form>
+
+<p>
+    <f:link.action action="login" controller="Login">
+        <f:translate key="forgot_header_backToLogin" />
+    </f:link.action>
+</p>
+</html>
