diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
index b61fa5e9f138f..148b7638ad2eb 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
@@ -46,45 +46,11 @@
     --sf-toolbar-green-900: #030404;
 }
 
-.sf-minitoolbar {
-    --sf-toolbar-gray-800: #262626;
-
-    background-color: var(--sf-toolbar-gray-800);
-    border-top-left-radius: 4px;
-    bottom: 0;
-    box-sizing: border-box;
-    display: none;
-    height: 36px;
-    padding: 6px;
-    position: fixed;
-    right: 0;
-    z-index: 99999;
-}
-
-.sf-minitoolbar button {
-    background-color: transparent;
-    padding: 0;
-    border: none;
-}
-.sf-minitoolbar svg,
-.sf-minitoolbar img {
-    --sf-toolbar-gray-200: #e5e5e5;
-
-    color: var(--sf-toolbar-gray-200);
-    max-height: 24px;
-    max-width: 24px;
-    display: inline;
-}
-
 .sf-toolbar-clearer {
     clear: both;
     height: 36px;
 }
 
-.sf-display-none {
-    display: none;
-}
-
 .sf-toolbarreset *:not(svg rect) {
     box-sizing: content-box;
     vertical-align: baseline;
@@ -127,27 +93,52 @@
     color: var(--sf-toolbar-gray-700);
 }
 
-.sf-toolbarreset .hide-button {
+.sf-toolbarreset .sf-toolbar-toggle-button {
     background: var(--sf-toolbar-gray-800);
     color: var(--sf-toolbar-gray-300);
     display: block;
     position: absolute;
-    top: 2px;
+    top: 1px;
     right: 0;
     width: 36px;
-    height: 34px;
+    height: 35px;
     cursor: pointer;
     text-align: center;
     border: none;
     margin: 0;
     padding: 0;
+    outline: none;
 }
-.sf-toolbarreset .hide-button:hover {
+.sf-toolbarreset .sf-toolbar-toggle-button:hover {
     background: var(--sf-toolbar-gray-700);
 }
-.sf-toolbarreset .hide-button svg {
-    max-height: 18px;
-    margin-top: 1px;
+
+.sf-toolbar.sf-toolbar-closed .sf-toolbarreset .sf-toolbar-block {
+    display: none;
+}
+.sf-toolbar.sf-toolbar-closed .sf-toolbarreset .sf-toolbar-toggle-button {
+    top: -37px;
+}
+
+.sf-toolbar .sf-toolbar-toggle-button i {
+    display: block;
+    height: 35px;
+    place-content: center;
+}
+.sf-toolbar.sf-toolbar-opened .sf-toolbar-toggle-button .sf-toolbar-icon-closed {
+    display: none;
+}
+.sf-toolbar.sf-toolbar-opened .sf-toolbar-toggle-button .sf-toolbar-icon-opened {
+    display: block;
+}
+.sf-toolbar.sf-toolbar-closed .sf-toolbar-toggle-button .sf-toolbar-icon-closed {
+    display: block;
+}
+.sf-toolbar.sf-toolbar-closed .sf-toolbar-toggle-button .sf-toolbar-icon-opened {
+    display: none;
+}
+.sf-toolbar.sf-toolbar-closed .sf-toolbarreset .sf-toolbar-toggle-button {
+    border-top: 2px solid var(--sf-toolbar-gray-800);
 }
 
 .sf-toolbar-block {
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig
index 565ec39bfe2ef..b82f911c3ddc6 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig
@@ -1,11 +1,4 @@
-<!-- START of Symfony Web Debug Toolbar -->
-<div id="sfMiniToolbar-{{ token }}" class="sf-minitoolbar" data-no-turbolink data-turbo="false">
-    <button type="button" title="Show Symfony toolbar" id="sfToolbarMiniToggler-{{ token }}" accesskey="D" aria-expanded="false" aria-controls="sfToolbarMainContent-{{ token }}">
-        {{ source('@WebProfiler/Icon/symfony.svg') }}
-    </button>
-</div>
 <div id="sfToolbarClearer-{{ token }}" class="sf-toolbar-clearer"></div>
-
 <div id="sfToolbarMainContent-{{ token }}" class="sf-toolbarreset notranslate clear-fix" data-no-turbolink data-turbo="false">
     {% for name, template in templates %}
         {% if block('toolbar', template) is defined %}
@@ -39,8 +32,8 @@
         </div>
     {% endif %}
 
-    <button class="hide-button" type="button" id="sfToolbarHideButton-{{ token }}" title="Close Toolbar" accesskey="D" aria-expanded="true" aria-controls="sfToolbarMainContent-{{ token }}">
-        {{ source('@WebProfiler/Icon/close.svg') }}
+    <button class="sf-toolbar-toggle-button" type="button" id="sfToolbarToggleButton-{{ token }}" title="Close Toolbar" accesskey="D" aria-expanded="true" aria-controls="sfToolbarMainContent-{{ token }}">
+        <i class="sf-toolbar-icon-opened">{{ source('@WebProfiler/Icon/close.svg') }}</i>
+        <i class="sf-toolbar-icon-closed">{{ source('@WebProfiler/Icon/symfony.svg') }}</i>
     </button>
 </div>
-<!-- END of Symfony Web Debug Toolbar -->
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
index eaf9329aadde7..91e6dc05e658c 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
@@ -1,4 +1,5 @@
-<div id="sfwdt{{ token }}" class="sf-toolbar sf-display-none" role="region" aria-label="Symfony Web Debug Toolbar">
+<!-- START of Symfony Web Debug Toolbar -->
+<div id="sfwdt{{ token }}" class="sf-toolbar sf-toolbar-opened" role="region" aria-label="Symfony Web Debug Toolbar">
     {{ include('@WebProfiler/Profiler/toolbar.html.twig', {
         templates: {
             'request': '@WebProfiler/Profiler/cancel.html.twig'
@@ -453,60 +454,32 @@
 
                 showToolbar: function(token) {
                     var sfwdt = this.getSfwdt(token);
-                    removeClass(sfwdt, 'sf-display-none');
 
-                    if (getPreference('toolbar/displayState') == 'none') {
-                        document.getElementById('sfToolbarMainContent-' + token).style.display = 'none';
-                        document.getElementById('sfToolbarClearer-' + token).style.display = 'none';
-                        document.getElementById('sfMiniToolbar-' + token).style.display = 'block';
+                    if ('closed' === getPreference('toolbar/displayState')) {
+                        addClass(sfwdt, 'sf-toolbar-closed');
+                        removeClass(sfwdt, 'sf-toolbar-opened');
                     } else {
-                        document.getElementById('sfToolbarMainContent-' + token).style.display = 'block';
-                        document.getElementById('sfToolbarClearer-' + token).style.display = 'block';
-                        document.getElementById('sfMiniToolbar-' + token).style.display = 'none';
+                        addClass(sfwdt, 'sf-toolbar-opened');
+                        removeClass(sfwdt, 'sf-toolbar-closed');
                     }
                 },
 
                 hideToolbar: function(token) {
                     var sfwdt = this.getSfwdt(token);
-                    addClass(sfwdt, 'sf-display-none');
+                    addClass(sfwdt, 'sf-toolbar-closed');
+                    removeClass(sfwdt, 'sf-toolbar-opened');
                 },
 
                 initToolbar: function(token) {
                     this.showToolbar(token);
 
-                    var hideButton = document.getElementById('sfToolbarHideButton-' + token);
-                    var hideButtonSvg = hideButton.querySelector('svg');
-                    hideButtonSvg.setAttribute('aria-hidden', 'true');
-                    hideButtonSvg.setAttribute('focusable', 'false');
-                    addEventListener(hideButton, 'click', function (event) {
+                    var toggleButton = document.querySelector(`#sfToolbarToggleButton-${token}`);
+                    addEventListener(toggleButton, 'click', function (event) {
                         event.preventDefault();
 
-                        var p = this.parentNode;
-                        p.style.display = 'none';
-                        (p.previousElementSibling || p.previousSibling).style.display = 'none';
-                        document.getElementById('sfMiniToolbar-' + token).style.display = 'block';
-                        setPreference('toolbar/displayState', 'none');
-                    });
-
-                    var showButton = document.getElementById('sfToolbarMiniToggler-' + token);
-                    var showButtonSvg = showButton.querySelector('svg');
-                    showButtonSvg.setAttribute('aria-hidden', 'true');
-                    showButtonSvg.setAttribute('focusable', 'false');
-                    addEventListener(showButton, 'click', function (event) {
-                        event.preventDefault();
-
-                        var elem = this.parentNode;
-                        if (elem.style.display == 'none') {
-                            document.getElementById('sfToolbarMainContent-' + token).style.display = 'none';
-                            document.getElementById('sfToolbarClearer-' + token).style.display = 'none';
-                            elem.style.display = 'block';
-                        } else {
-                            document.getElementById('sfToolbarMainContent-' + token).style.display = 'block';
-                            document.getElementById('sfToolbarClearer-' + token).style.display = 'block';
-                            elem.style.display = 'none'
-                        }
-
-                        setPreference('toolbar/displayState', 'block');
+                        const newState = 'opened' === getPreference('toolbar/displayState') ? 'closed' : 'opened';
+                        setPreference('toolbar/displayState', newState);
+                        'opened' === newState ? Sfjs.showToolbar(token) : Sfjs.hideToolbar(token);
                     });
                 },
 
@@ -655,3 +628,4 @@
 
     Sfjs.loadToolbar('{{ token }}');
 /*]]>*/</script>
+<!-- END of Symfony Web Debug Toolbar -->