diff --git a/Classes/Controller/AuthenticationController.php b/Classes/Controller/AuthenticationController.php
index 45fb305..3ebb61c 100644
--- a/Classes/Controller/AuthenticationController.php
+++ b/Classes/Controller/AuthenticationController.php
@@ -18,14 +18,23 @@
 use Neos\Flow\I18n\Translator;
 use Neos\Flow\Mvc\ActionRequest;
 use Neos\Flow\Mvc\Exception\UnsupportedRequestTypeException;
+use Neos\Flow\Mvc\FlashMessage\FlashMessageService;
+use Neos\Flow\Mvc\View\ViewInterface;
 use Neos\Flow\Security\Authentication\Controller\AbstractAuthenticationController;
 use Neos\Flow\Security\Exception\AuthenticationRequiredException;
+use Neos\Fusion\View\FusionView;
 
 /**
  * Controller for displaying a login/logout form and authenticating/logging out "frontend users"
  */
 class AuthenticationController extends AbstractAuthenticationController
 {
+
+    /**
+     * @var FusionView
+     */
+    protected $defaultViewObjectName = FusionView::class;
+
     /**
      * @var Translator
      * @Flow\Inject
@@ -44,12 +53,21 @@ class AuthenticationController extends AbstractAuthenticationController
      */
     protected $translationSourceName;
 
+    /**
+     * @Flow\Inject
+     * @var FlashMessageService
+     */
+    protected $flashMessageService;
+
     /**
      * @return void
      */
     public function indexAction(): void
     {
-        $this->view->assign('account', $this->securityContext->getAccount());
+        $this->view->assignMultiple([
+            'account' => $this->securityContext->getAccount(),
+            'flashMessages' => $this->flashMessageService->getFlashMessageContainerForRequest($this->request)->getMessagesAndFlush(),
+        ]);
     }
 
     /**
@@ -117,4 +135,17 @@ protected function getErrorFlashMessage()
     {
         return false;
     }
+
+    /**
+     * Sets the Fusion path pattern on the view.
+     *
+     * @param ViewInterface $view
+     * @return void
+     */
+    protected function initializeView(ViewInterface $view)
+    {
+        parent::initializeView($view);
+        /** @var FusionView $view */
+        $view->setFusionPathPattern('resource://Flowpack.Neos.FrontendLogin/Private/Fusion/Backend');
+    }
 }
diff --git a/Resources/Private/Fusion/Backend/Root.fusion b/Resources/Private/Fusion/Backend/Root.fusion
new file mode 100644
index 0000000..0bc17ce
--- /dev/null
+++ b/Resources/Private/Fusion/Backend/Root.fusion
@@ -0,0 +1,71 @@
+include: resource://Neos.Fusion/Private/Fusion/Root.fusion
+include: resource://Neos.Fusion.Form/Private/Fusion/Root.fusion
+
+Flowpack.Neos.FrontendLogin.AuthenticationController.index = Neos.Fusion:Component {
+    account = ${account}
+    flashMessages = ${flashMessages}
+
+    settings = ${Configuration.setting('Flowpack.Neos.FrontendLogin')}
+
+    renderer = afx`
+        <div class="panel panel-default">
+            <div class="panel-body">
+                <p @if.generalAccess={Security.hasAccess('Neos.Neos:Backend.GeneralAccess')}>
+                    {I18n.id('authentication.backendmessage').package(props.settings.translation.packageKey).source(props.settings.translation.sourceName).translate()}
+                </p>
+                <div @if.hasUserRole={Security.hasRole('Flowpack.Neos.FrontendLogin:User')}>
+                    <p>
+                        {I18n.id('authentication.form.loggedIn').value('You are logged in as').package(props.settings.translation.packageKey).source(props.settings.translation.sourceName).translate()}&nbsp;
+                        <strong>"{props.account.accountIdentifier}"</strong>
+                    </p>
+                    <Neos.Fusion.Form:Form form.target.action="logout" attributes.class="form-horizontal clearfix" attributes.role="form">
+                        <Neos.Fusion.Form:Button attributes.class="btn btn-primary">
+                            {I18n.id('authentication.form.logout').value('Logout').package(props.settings.translation.packageKey).source(props.settings.translation.sourceName).translate()}
+                        </Neos.Fusion.Form:Button>
+                    </Neos.Fusion.Form:Form>
+                </div>
+                <div @if.hasNotUserRole={!Security.hasAccess('Neos.Neos:Backend.GeneralAccess') && !Security.hasRole('Flowpack.Neos.FrontendLogin:User')}>
+                    <ul @if.hasFlashMessages={props.flashMessages}>
+                        <Neos.Fusion:Loop items={props.flashMessages} itemName="flashMessage">
+                            <li @if.isError={flashMessage.severity == 'Error'} class="flashmessages-error">{flashMessage.message}</li>
+                        </Neos.Fusion:Loop>
+                    </ul>
+
+                    <Neos.Fusion.Form:Form form.target.action="authenticate" attributes.class="form-horizontal clearfix" attributes.role="form">
+                        <div class="form-group">
+                            <label for="flowpack-neos-frontendlogin-username" class="col-sm-2 control-label">
+                                {I18n.id('authentication.form.username').package(props.settings.translation.packageKey).source(props.settings.translation.sourceName).translate()}:
+                            </label>
+                            <div class="col-sm-10">
+                                <Neos.Fusion.Form:Input
+                                    field.name="__authentication[Neos][Flow][Security][Authentication][Token][UsernamePassword][username]"
+                                    attributes.id="flowpack-neos-frontendlogin-username"
+                                    attributes.class="form-control"
+                                />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="flowpack-neos-frontendlogin-password" class="col-sm-2 control-label">
+                                {I18n.id('authentication.form.password').package(props.settings.translation.packageKey).source(props.settings.translation.sourceName).translate()}:
+                            </label>
+                            <div class="col-sm-10">
+                                <Neos.Fusion.Form:Password
+                                    field.name="__authentication[Neos][Flow][Security][Authentication][Token][UsernamePassword][password]"
+                                    attributes.id="flowpack-neos-frontendlogin-password"
+                                    attributes.class="form-control"
+                                />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="pull-right">
+                                <Neos.Fusion.Form:Button attributes.class="btn btn-primary">
+                                    {I18n.id('authentication.form.submit').package(props.settings.translation.packageKey).source(props.settings.translation.sourceName).translate()}
+                                </Neos.Fusion.Form:Button>
+                            </div>
+                        </div>
+                    </Neos.Fusion.Form:Form>
+                </div>
+            </div>
+        </div>
+    `
+}
diff --git a/Resources/Private/Fusion/NodeTypes/LoginForm.fusion b/Resources/Private/Fusion/NodeTypes/LoginForm.fusion
index 8932f06..1602cc6 100644
--- a/Resources/Private/Fusion/NodeTypes/LoginForm.fusion
+++ b/Resources/Private/Fusion/NodeTypes/LoginForm.fusion
@@ -1,16 +1,18 @@
 ##
 # "LoginForm" element, extending "Plugin"
 #
-prototype(Flowpack.Neos.FrontendLogin:LoginForm) < prototype(Neos.Neos:Plugin) {
-	package = 'Flowpack.Neos.FrontendLogin'
-	controller = 'Authentication'
-	action = 'index'
+prototype(Flowpack.Neos.FrontendLogin:LoginForm) < prototype(Neos.Neos:ContentComponent) {
+    renderer = Neos.Neos:Plugin {
+        package = 'Flowpack.Neos.FrontendLogin'
+        controller = 'Authentication'
+        action = 'index'
 
-	redirectAfterLoginUri = Neos.Neos:NodeUri {
-		node = ${q(node).property('redirectAfterLogin')}
-	}
+        redirectAfterLoginUri = Neos.Neos:NodeUri {
+            node = ${q(node).property('redirectAfterLogin')}
+        }
 
-	redirectAfterLogoutUri = Neos.Neos:NodeUri {
-		node = ${q(node).property('redirectAfterLogout')}
-	}
-}
\ No newline at end of file
+        redirectAfterLogoutUri = Neos.Neos:NodeUri {
+            node = ${q(node).property('redirectAfterLogout')}
+        }
+    }
+}
diff --git a/Resources/Private/Templates/Authentication/Index.html b/Resources/Private/Templates/Authentication/Index.html
deleted file mode 100644
index 76c373d..0000000
--- a/Resources/Private/Templates/Authentication/Index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-{namespace neos=Neos\Neos\ViewHelpers}
-<div class="panel panel-default">
-	<div class="panel-body">
-		<f:security.ifAccess privilegeTarget="Neos.Neos:Backend.GeneralAccess">
-			<f:then>
-				<p><f:translate package="{settings.translation.packageKey}" id="authentication.backendmessage" source="{settings.translation.sourceName}"/></p>
-			</f:then>
-			<f:else>
-				<f:security.ifHasRole role="Flowpack.Neos.FrontendLogin:User">
-					<f:then>
-						<p>You're logged in as <strong>"{account.accountIdentifier}"</strong></p>
-						<f:form action="logout" method="post" class="form-horizontal clearfix" additionalAttributes="{role:'form'}">
-							<f:form.submit value="Logout" class="btn btn-primary" />
-						</f:form>
-					</f:then>
-					<f:else>
-						<f:flashMessages severity="Error" />
-
-						<f:form action="authenticate" method="post" class="form-horizontal clearfix" additionalAttributes="{role:'form'}">
-							<div class="form-group">
-								<label for="flowpack-neos-frontendlogin-username" class="col-lg-4 control-label"><f:translate package="{settings.translation.packageKey}" id="authentication.form.username" source="{settings.translation.sourceName}"/>:</label>
-								<input name="__authentication[Neos][Flow][Security][Authentication][Token][UsernamePassword][username]" class="form-control" id="flowpack-neos-frontendlogin-username" type="text" />
-							</div>
-							<div class="form-group">
-								<label for="flowpack-neos-frontendlogin-password" class="col-lg-4 control-label"><f:translate package="{settings.translation.packageKey}" id="authentication.form.password" source="{settings.translation.sourceName}"/>:</label>
-								<input name="__authentication[Neos][Flow][Security][Authentication][Token][UsernamePassword][password]" class="form-control" id="flowpack-neos-frontendlogin-password" type="password" />
-							</div>
-							<div class="form-group">
-								<div class="pull-right">
-									<f:form.submit value="{f:translate(package:settings.translation.packageKey, id:'authentication.form.submit', source: settings.translation.sourceName)}" class="btn btn-primary" />
-								</div>
-							</div>
-						</f:form>
-					</f:else>
-				</f:security.ifHasRole>
-			</f:else>
-		</f:security.ifAccess>
-	</div>
-</div>
diff --git a/composer.json b/composer.json
index 7d7b2d4..7f04455 100644
--- a/composer.json
+++ b/composer.json
@@ -4,7 +4,9 @@
     "description": "Neos plugin demonstrating a simple frontend login",
     "license": "MIT",
     "require": {
-        "neos/neos": "^5.0 || dev-master"
+        "neos/neos": "^5.0 || dev-master",
+        "neos/fusion-form": "^1.0 || dev-master",
+        "neos/fusion-afx": "^1.4 || dev-master"
     },
     "autoload": {
         "psr-4": {
@@ -13,7 +15,7 @@
     },
     "extra": {
         "branch-alias": {
-            "dev-master": "4.0.x-dev"
+            "dev-master": "5.0.x-dev"
         },
         "applied-flow-migrations": [
             "TYPO3.FLOW3-201201261636",