diff --git a/Resources/views/SymfonyProfiler/translation.html.twig b/Resources/views/SymfonyProfiler/translation.html.twig
index e4a9c3b8..064fe5e7 100644
--- a/Resources/views/SymfonyProfiler/translation.html.twig
+++ b/Resources/views/SymfonyProfiler/translation.html.twig
@@ -4,133 +4,72 @@
  # Authors Tobias Nyholm, Damien Alexandre (damienalexandre), Damien Harper
  #}
 
-{% import _self as translation_helper %}
+{% import _self as helper %}
 
-{% block panelContent %}
-    <h2>Translation Metrics</h2>
+{% block panel %}
+    <h2>PHP Translation</h2>
 
     <div>
         <a class="btn" href="javascript:void(0);" onclick='syncAll()'>Synchronize all translations</a><br />
         <div id="top-result-area"></div>
     </div>
 
-    <div class="metrics">
-        <div class="metric">
-            <span class="value">{{ collector.countdefines }}</span>
-            <span class="label">Defined messages</span>
-        </div>
-
-        <div class="metric">
-            <span class="value">{{ collector.countFallbacks }}</span>
-            <span class="label">Fallback messages</span>
-        </div>
-
-        <div class="metric">
-            <span class="value">{{ collector.countMissings }}</span>
-            <span class="label">Missing messages</span>
-        </div>
-    </div>
+    {{ parent() }}
 
-    <h2>Translation Messages</h2>
-
-    {# sort translation messages in groups #}
-    {% set messages_defined, messages_missing, messages_fallback = [], [], [] %}
-    {% for key, message in collector.messages %}
-        {% if message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_DEFINED') %}
-            {% set messages_defined = messages_defined|merge({(key): message}) %}
-        {% elseif message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_MISSING') %}
-            {% set messages_missing = messages_missing|merge({(key): message}) %}
-        {% elseif message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_EQUALS_FALLBACK') %}
-            {% set messages_fallback = messages_fallback|merge({(key): message}) %}
-        {% endif %}
-    {% endfor %}
-
-<form action="{{ path('php_translation_profiler_translation_create_assets', {'token': token}) }}" method="post"
-      id="translations-list" onSubmit="return saveTranslations(this);" >
     <span class="hidden">
         <img src="{{ asset("bundles/translation/css/images/loader.svg") }}" width="60" id="svg-loader">
     </span>
 
-    <div class="sf-tabs">
-        <div class="tab">
-            <h3 class="tab-title">Defined <span class="badge">{{ messages_defined|length }}</span></h3>
-
-            <div class="tab-content">
-                <p class="help">
-                    These messages are correctly translated into the given locale.
-                </p>
-
-                {% if messages_defined is empty %}
-                    <div class="empty">
-                        <p>None of the used translation messages are defined for the given locale.</p>
-                    </div>
-                {% else %}
-                    {{ translation_helper.render_table(messages_defined) }}
-                {% endif %}
-            </div>
-        </div>
-
-        <div class="tab">
-            <h3 class="tab-title">Fallback <span class="badge">{{ messages_fallback|length }}</span></h3>
-
-            <div class="tab-content">
-                <p class="help">
-                    These messages are not available for the given locale
-                    but Symfony found them in the fallback locale catalog.
-                </p>
-
-                {% if messages_fallback is empty %}
-                    <div class="empty">
-                        <p>No fallback translation messages were used.</p>
-                    </div>
-                {% else %}
-                    {{ translation_helper.render_table(messages_fallback) }}
-                {% endif %}
-            </div>
-        </div>
-
-        <div class="tab">
-            <h3 class="tab-title">Missing <span class="badge">{{ messages_missing|length }}</span></h3>
-
-            <div class="tab-content">
-                <p class="help">
-                    These messages are not available for the given locale and cannot
-                    be found in the fallback locales. Add them to the translation
-                    catalogue to avoid Symfony outputting untranslated contents.
-                </p>
-
-                {% if messages_missing is empty %}
-                    <div class="empty">
-                        <p>There are no messages of this category.</p>
-                    </div>
-                {% else %}
-                    {{ translation_helper.render_table(messages_missing, true) }}
-                {% endif %}
-            </div>
-        </div>
-    </div>
+    {% include "@Translation/SymfonyProfiler/javascripts.html.twig" %}
+{% endblock %}
 
-    <p class="full-width" id="translationResult"></p>
+{% block defined_messages %}
+    {% set messages = [] %}
+    {% for key, message in collector.messages|filter(message => message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_DEFINED')) %}
+        {% set messages = messages|merge({(key): message}) %}
+    {% endfor %}
 
-    <button type="submit" class="btn">
-        Add selected messages
-    </button>
+    {{ helper.render_table(messages) }}
+{% endblock %}
 
-</form>
-    {% include "@Translation/SymfonyProfiler/javascripts.html.twig" %}
+{% block fallback_messages %}
+    {% set messages = [] %}
+    {% for key, message in collector.messages|filter(message => message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_EQUALS_FALLBACK')) %}
+        {% set messages = messages|merge({(key): message}) %}
+    {% endfor %}
+
+    {{ helper.render_table(messages) }}
 {% endblock %}
 
-{% block panel %}
-    {{ block('panelContent') }}
+{% block missing_messages %}
+    {% set messages = [] %}
+    {% for key, message in collector.messages|filter(message => message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_MISSING')) %}
+        {% set messages = messages|merge({(key): message}) %}
+    {% endfor %}
+
+    <form action="{{ path('php_translation_profiler_translation_create_assets', {'token': token}) }}" method="post"
+        id="translations-list" onSubmit="return saveTranslations(this);" >
+
+            {{ helper.render_table(messages, true) }}
+
+        <p class="full-width" id="translationResult"></p>
+
+        <button type="submit" class="btn">
+            Add selected messages
+        </button>
+
+    </form>
 {% endblock %}
 
-{% macro render_table(messages, checkedByDefault = false) %}
+{% macro render_table(messages, withCheckbox = false) %}
     <table>
         <thead>
         <tr>
-            <th>
-                <input type="checkbox" id="check-all-control" onchange="toggleCheckAll(this)" {% if checkedByDefault %}checked="checked"{% endif %}>
-            </th>
+            {% if withCheckbox %}
+                <th>
+                    <input type="checkbox" id="check-all-control" onchange="toggleCheckAll(this)" checked="checked">
+                </th>
+            {% endif %}
             <th>Locale</th>
             <th>Domain</th>
             <th>Times used</th>
@@ -143,10 +82,8 @@
         {% for key, message in messages %}
             <tr id="{{ key }}">
                 <td>
-                    {% if message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_MISSING') %}
+                    {% if withCheckbox %}
                         <input type="checkbox" name="translationKey" value="{{ key }}" checked="checked" class="translation-key-checkbox">
-                    {% else %}
-                        <input type="checkbox" disabled="disabled">
                     {% endif %}
                 </td>
                 <td class="font-normal text-small">{{ message.locale }}</td>