diff --git a/views/twig/apex/d3_account_totp.html.twig b/views/twig/apex/d3_account_totp.html.twig
index 2159afe..79fa9d2 100644
--- a/views/twig/apex/d3_account_totp.html.twig
+++ b/views/twig/apex/d3_account_totp.html.twig
@@ -1,8 +1,16 @@
 {% capture append = "oxidBlock_content" %}
 
-    <h1 class="page-header">{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}</h1>
+<div class="container-xxl py-5">
+    <div class="row">
+        <h1 class="h3 page-header col pl-0 ml-3">
+            {{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}
+        </h1>
+        <div class="col-12 col-sm-3 button-col">
+            {% include "page/account/inc/account_menu.html.twig" with {active_link: "d3totp"} %}
+        </div>
+    </div>
 
-    {% set totp = user.d3GetTotp() %}
+    {% set totp = user.d3GetSessionedTotp() %}
     {% set userid = user.getId() %}
     {{ totp.loadByUserId(userid) }}
 
@@ -28,123 +36,135 @@
         {% endif %}
     </style>
 
-    {% block d3_account_totp %}
-        <form action="{{ oViewConf.getSelfActionLink() }}" name="d3totpform" class="form-horizontal" method="post">
-            <div class="hidden">
-                {{ oViewConf.getHiddenSid()|raw }}
-                {{ oViewConf.getNavFormParams() }}
-                <input type="hidden" id="fncname" name="fnc" value="">
-                <input type="hidden" name="cl" value="{{ oViewConf.getActiveClassName() }}">
-            </div>
+    <script type="text/javascript">
+        function toggle(id) {
+            var div1 = document.getElementById(id);
+            if(document.getElementById('totp_use').checked) {
+                div1.style.display = 'block';
+            } else {
+                div1.style.display = 'none';
+            }
+        }
+    </script>
 
-            <p>
-                <input id="totp_use" value="1" type="checkbox" name="totp_use" {% if totp.getId() %} checked{% endif %} {% if false == totp.getId() %}onclick="$('.registerNew').toggle(); $('.submitBtn').toggle();"{% endif %}>
-                <label for="totp_use">{{ translate({ ident: "D3_TOTP_ACCOUNT_USE" }) }}</label>
-            </p>
-
-            {% if false == totp.getId() %}
-                <div class="registerNew {# flow #} panel panel-default {# wave #} card">
-                    <div class="{# flow #} panel-heading {# wave #} card-header">
-                        {{ translate({ ident: "D3_TOTP_REGISTERNEW" }) }}
+    <div class="card card-lg">
+        <div class="card-body">
+            {% block d3_account_totp %}
+                <form action="{{ oViewConf.getSelfActionLink() }}" name="d3totpform" class="form-horizontal" method="post">
+                    <div class="hidden">
+                        {{ oViewConf.getHiddenSid()|raw }}
+                        {{ oViewConf.getNavFormParams()|raw }}
+                        <input type="hidden" id="fncname" name="fnc" value="">
+                        <input type="hidden" name="cl" value="{{ oViewConf.getActiveClassName() }}">
                     </div>
-                    <div class="{# flow #} panel-body {# wave #} card-body">
-                        <dl>
-                            <dt>
-                                {{ translate({ ident: "D3_TOTP_QRCODE" }) }}&nbsp;
-                            </dt>
-                            <dd>
-                                {{ totp.getQrCodeElement() }}
-                            </dd>
-                        </dl>
-                        <p>
-                            {{ translate({ ident: "D3_TOTP_QRCODE_HELP" }) }}
-                        </p>
 
-                        <hr>
+                    <p>
+                        <input id="totp_use" value="1" type="checkbox" name="totp_use" {% if totp.getId() %} checked{% endif %} {% if false == totp.getId() %}onclick="toggle('registerNew'); toggle('submitBtn');"{% endif %}>
+                        <label for="totp_use">{{ translate({ ident: "D3_TOTP_ACCOUNT_USE" }) }}</label>
+                    </p>
 
-                        <dl>
-                            <dt>
-                                <label for="secret">{{ translate({ ident: "D3_TOTP_SECRET" }) }}</label>
-                            </dt>
-                            <dd>
-                                <textarea rows="3" cols="50" id="secret" name="secret" class="editinput" readonly="readonly">{{ totp.getSecret() }}</textarea>
-                            </dd>
-                        </dl>
-                        <p>
-                            {{ translate({ ident: "D3_TOTP_SECRET_HELP" }) }}
-                        </p>
+                    {% if false == totp.getId() %}
+                        <div class="registerNew {# apex #} card" id="registerNew">
+                            <div class="{# apex #} card-header">
+                                {{ translate({ ident: "D3_TOTP_REGISTERNEW" }) }}
+                            </div>
+                            <div class="{# apex #} card-body">
+                                <dl>
+                                    <dt>
+                                        {{ translate({ ident: "D3_TOTP_QRCODE" }) }}&nbsp;
+                                    </dt>
+                                    <dd>
+                                        {{ totp.getQrCodeElement()|raw }}
+                                    </dd>
+                                </dl>
+                                <p>
+                                    {{ translate({ ident: "D3_TOTP_QRCODE_HELP" }) }}
+                                </p>
 
-                        <hr>
+                                <hr>
 
-                        <dl>
-                            <dt>
-                                <label for="otp">{{ translate({ ident: "D3_TOTP_CURROTP" }) }}</label>
-                            </dt>
-                            <dd>
-                                <input type="text" class="editinput" size="6" maxlength="6" id="otp" name="otp" value="" {{ readonly }}>
-                            </dd>
-                        </dl>
-                        <p>
-                            {{ translate({ ident: "D3_TOTP_CURROTP_HELP" }) }}
-                        </p>
-                    </div>
-                </div>
-            {% endif %}
+                                <dl>
+                                    <dt>
+                                        <label for="secret">{{ translate({ ident: "D3_TOTP_SECRET" }) }}</label>
+                                    </dt>
+                                    <dd>
+                                        <textarea rows="3" cols="50" id="secret" name="secret" class="editinput" readonly="readonly">{{ totp.getSecret() }}</textarea>
+                                    </dd>
+                                </dl>
+                                <p>
+                                    {{ translate({ ident: "D3_TOTP_SECRET_HELP" }) }}
+                                </p>
 
-            {% if totp.getId() %}
-                {% block d3_account_totp_deletenotes %}
-                    <div class="{# flow #} panel panel-default {# wave #} card">
-                        <div class="{# flow #} panel-heading {# wave #} card-header">
-                            {{ translate({ ident: "D3_TOTP_REGISTEREXIST" }) }}
+                                <hr>
+
+                                <dl>
+                                    <dt>
+                                        <label for="otp">{{ translate({ ident: "D3_TOTP_CURROTP" }) }}</label>
+                                    </dt>
+                                    <dd>
+                                        <input type="text" class="editinput" size="6" maxlength="6" id="otp" name="otp" value="" {{ readonly }}>
+                                    </dd>
+                                </dl>
+                                <p>
+                                    {{ translate({ ident: "D3_TOTP_CURROTP_HELP" }) }}
+                                </p>
+                            </div>
                         </div>
-                        <div class="{# flow #} panel-body {# wave #} card-body">
-                            {{ translate({ ident: "D3_TOTP_REGISTERDELETE_DESC" }) }}
-                        </div>
-                    </div>
-                {% endblock %}
-
-                {% block d3_account_totp_backupcodes %}
-                    <div class="{# flow #} panel panel-default {# wave #} card">
-                        <div class="{# flow #} panel-heading {# wave #} card-header">
-                            {{ translate({ ident: "D3_TOTP_BACKUPCODES" }) }}
-                        </div>
-                        <div class="{# flow #} panel-body {# wave #} card-body">
-                            {% if oView.getBackupCodes() %}
-                                {% block d3_account_totp_backupcodes_list %}
-                                    <label for="backupcodes">{{ translate({ ident: "D3_TOTP_BACKUPCODES_DESC" }) }}</label>
-                                    <textarea id="backupcodes" rows="10" cols="20">{{ oView.getBackupCodes() }}</textarea>
-                                {% endblock %}
-                            {% else %}
-                                {% block d3_account_totp_backupcodes_info %}
-                                    {{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT", args: oView.getAvailableBackupCodeCount() }) }}<br>
-                                    {{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT_DESC" }) }}
-                                {% endblock %}
-                            {% endif %}
-                        </div>
-                    </div>
-                {% endblock %}
-            {% endif %}
-
-            <p class="submitBtn">
-                <button type="submit" class="btn btn-primary"
-                    {% if totp.getId() %}
-                        onclick="
-                            if(false is same as(document.getElementById('totp_use').checked && false === confirm('{{ translate({ ident: "D3_TOTP_REGISTERDELETE_CONFIRM" }) }}')) {return false;}
-)
-                            document.getElementById('fncname').value = 'delete';
-                        "
-                    {% else %}
-                        onclick="document.getElementById('fncname').value = 'create';"
                     {% endif %}
-                >
-                    {{ translate({ ident: "D3_TOTP_ACCOUNT_SAVE" }) }}
-                </button>
-            </p>
-        </form>
-    {% endblock %}
+
+                    {% if totp.getId() %}
+                        {% block d3_account_totp_deletenotes %}
+                            <div class="{# apex #} card">
+                                <div class="{# apex #} card-header">
+                                    {{ translate({ ident: "D3_TOTP_REGISTEREXIST" }) }}
+                                </div>
+                                <div class="{# apex #} card-body">
+                                    {{ translate({ ident: "D3_TOTP_REGISTERDELETE_DESC" }) }}
+                                </div>
+                            </div>
+                        {% endblock %}
+
+                        {% block d3_account_totp_backupcodes %}
+                            <div class="{# apex #} card">
+                                <div class="{# apex #} card-header">
+                                    {{ translate({ ident: "D3_TOTP_BACKUPCODES" }) }}
+                                </div>
+                                <div class="{# apex #} card-body">
+                                    {% if oView.getBackupCodes() %}
+                                        {% block d3_account_totp_backupcodes_list %}
+                                            <label for="backupcodes">{{ translate({ ident: "D3_TOTP_BACKUPCODES_DESC" }) }}</label>
+                                            <textarea id="backupcodes" rows="10" cols="20">{{ oView.getBackupCodes() }}</textarea>
+                                        {% endblock %}
+                                    {% else %}
+                                        {% block d3_account_totp_backupcodes_info %}
+                                            {{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT", args: oView.getAvailableBackupCodeCount() }) }}<br>
+                                            {{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT_DESC" }) }}
+                                        {% endblock %}
+                                    {% endif %}
+                                </div>
+                            </div>
+                        {% endblock %}
+                    {% endif %}
+
+                    <div class="mb-3 submitBtn" id="submitBtn">
+                        <button type="submit" class="btn btn-primary"
+                            {% if totp.getId() %}
+                                onclick="
+                                    if(false === document.getElementById('totp_use').checked && false === confirm('{{ translate({ ident: "D3_TOTP_REGISTERDELETE_CONFIRM" }) }}')) {return false;}
+                                    document.getElementById('fncname').value = 'delete';
+                                "
+                            {% else %}
+                                onclick="document.getElementById('fncname').value = 'create';"
+                            {% endif %}
+                        >
+                            {{ translate({ ident: "D3_TOTP_ACCOUNT_SAVE" }) }}
+                        </button>
+                    </div>
+                </form>
+            {% endblock %}
+        </div>
+    </div>
+</div>
 {% endcapture %}
 
-{% capture append = "oxidBlock_sidebar" %}
-    {% include "page/account/inc/account_menu.html.twig" with {active_link: "d3totp"} %}
-{% endcapture %}
 {% include "layout/page.html.twig" with {sidebar: "Left"} %}
\ No newline at end of file
diff --git a/views/twig/extensions/themes/default/page/account/dashboard.html.twig b/views/twig/extensions/themes/default/page/account/dashboard.html.twig
index bf09fd2..310167d 100644
--- a/views/twig/extensions/themes/default/page/account/dashboard.html.twig
+++ b/views/twig/extensions/themes/default/page/account/dashboard.html.twig
@@ -1,11 +1,19 @@
-{{ parent() }}
+{% extends "page/account/dashboard.html.twig" %}
 
-<div class="card">
-    <div class="card-header">
-        <a href="{{ seo_url({ ident: oViewConf.getSelfLink()|cat("cl=d3_account_totp") }) }}">{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}</a>
-        <a href="{{ seo_url({ ident: oViewConf.getSslSelfLink()|cat("cl=d3_account_totp") }) }}" class="btn btn-outline-dark btn-sm float-right edit-button">
-            <i class="fa fa-arrow-right"></i>
-        </a>
+{% block account_dashboard_col2 %}
+    {{ parent() }}
+
+    <div class="col mb-3">
+        <div class="card card-lg h-100">
+            <h2 class="h4 card-header card-title">{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}</h2>
+            <div class="card-body">
+                <div class="card-text mb-3">
+                    {{ translate({ ident: "D3_TOTP_ACCOUNT_DESC" }) }}
+                </div>
+                <a class="btn btn-outline-primary stretched-link" href="{{ seo_url({ ident: oViewConf.getSelfLink()|cat("cl=d3_account_totp") }) }}">
+                    {{ translate({ ident: "MORE" }) }}
+                </a>
+            </div>
+        </div>
     </div>
-    <div class="card-body">{{ translate({ ident: "D3_TOTP_ACCOUNT_DESC" }) }}</div>
-</div>
\ No newline at end of file
+{% endblock %}
\ No newline at end of file
diff --git a/views/twig/extensions/themes/default/page/account/inc/account_menu.html.twig b/views/twig/extensions/themes/default/page/account/inc/account_menu.html.twig
index da7092d..5201902 100644
--- a/views/twig/extensions/themes/default/page/account/inc/account_menu.html.twig
+++ b/views/twig/extensions/themes/default/page/account/inc/account_menu.html.twig
@@ -1,4 +1,11 @@
-{{ parent() }}
-<li class="list-group-item{% if active_link == "d3totp" %} active{% endif %}">
-    <a class="{# wave #} list-group-link" href="{{ seo_url({ ident: oViewConf.getSelfLink()|cat("cl=d3_account_totp") }) }}" title="{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}">{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}</a>
-</li>
\ No newline at end of file
+{% extends "page/account/inc/account_menu.html.twig" %}
+
+{% block account_menu %}
+    {{ parent() }}
+    <a class="dropdown-item{% if active_link == "d3totp" %} active{% endif %}"
+       href="{{ seo_url({ ident: oViewConf.getSelfLink()|cat("cl=d3_account_totp") }) }}"
+       title="{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}"
+    >
+        {{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}
+    </a>
+{% endblock %}
\ No newline at end of file