From 03652c4718e9d5c6bf8d6fb713ed10fc6a2a3061 Mon Sep 17 00:00:00 2001
From: jose-rZM <100773386+jose-rZM@users.noreply.github.com>
Date: Sat, 16 May 2026 13:40:35 +0200
Subject: [PATCH 1/6] feat(ui): redesign

---
 resources.qrc              |   1 -
 resources/styles/app.qss   | 256 +++++++++++++++----
 src/gui/lltabledialog.cpp  |  14 +-
 src/gui/lltabledialog.h    |   2 +
 src/gui/lltutorwindow.cpp  |  78 ++++--
 src/gui/lltutorwindow.ui   |  57 ++++-
 src/gui/mainwindow.cpp     | 296 ++++++++++++---------
 src/gui/mainwindow.ui      | 509 ++++++++++++++++++++-----------------
 src/gui/slrtabledialog.cpp |  19 +-
 src/gui/slrtabledialog.h   |   2 +
 src/gui/slrtutorwindow.cpp |  14 +-
 src/gui/slrtutorwindow.ui  |  57 ++++-
 12 files changed, 841 insertions(+), 464 deletions(-)

diff --git a/resources.qrc b/resources.qrc
index 47e5d964..641551d3 100644
--- a/resources.qrc
+++ b/resources.qrc
@@ -5,7 +5,6 @@
         <file>resources/NotoSans-Bold.ttf</file>
         <file>resources/NotoSans-Italic.ttf</file>
         <file>resources/NotoSans-Regular.ttf</file>
-        <file>resources/trophy.svg</file>
         <file>resources/styles/app.qss</file>
         <file>translations/st_en.qm</file>
         <file>translations/st_es.qm</file>
diff --git a/resources/styles/app.qss b/resources/styles/app.qss
index 138c84a1..90ec64d1 100644
--- a/resources/styles/app.qss
+++ b/resources/styles/app.qss
@@ -9,6 +9,38 @@ QWidget#centralwidget {
     color: #E0E0E0;
 }
 
+QWidget#homeContent {
+    background: transparent;
+}
+
+QLabel#homeEyebrow {
+    color: #15B9C2;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+QLabel#homeTitle {
+    color: #F4F7F8;
+    font-size: 30px;
+    font-weight: 700;
+}
+
+QLabel#homeSubtitle {
+    color: #9AA5A8;
+    font-size: 15px;
+    line-height: 1.5;
+}
+
+QLabel#difficultyTitle {
+    color: #C9D0D2;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
 QMenu#menuAcercaDe::item {
     padding: 6px 24px;
 }
@@ -23,56 +55,84 @@ QMenu#menuAcercaDe::icon {
 }
 
 QLabel#labelScore {
-    font-weight: bold;
+    font-weight: 700;
     font-size: 15px;
-    color: white;
+    color: #F3F5F6;
+}
+
+QLabel#badgeNivel {
+    min-width: 34px;
+    min-height: 24px;
+    padding: 0 10px;
+    border-radius: 12px;
+    background-color: rgba(17, 179, 188, 0.18);
+    color: #BDECEF;
+    border: none;
+    qproperty-alignment: 'AlignCenter';
+}
+
+QProgressBar#progressBarNivel {
+    background-color: #2A2E30;
+    border: none;
+    border-radius: 4px;
+}
+
+QProgressBar#progressBarNivel::chunk {
+    background-color: #11B3BC;
+    border-radius: 4px;
 }
 
 QPushButton#pushButton,
 QPushButton#pushButton_2 {
-    background-color: #00ADB5;
+    background-color: #262B2D;
     color: #FFFFFF;
-    border: none;
-    padding: 12px 24px;
+    border: 1px solid #353A3D;
+    padding: 0 18px;
     border-radius: 10px;
     font-size: 16px;
-    font-weight: bold;
+    font-weight: 700;
+    text-align: left;
 }
 
 QPushButton#pushButton:hover,
 QPushButton#pushButton_2:hover {
-    background-color: #00CED1;
+    background-color: #2D3436;
+    border: 1px solid #4A5255;
 }
 
 QPushButton#pushButton:pressed,
 QPushButton#pushButton_2:pressed {
-    background-color: #007F86;
+    background-color: #222729;
 }
 
 QPushButton#tutorial {
-    background-color: #2F2F2F;
-    color: #CCCCCC;
-    border: 1px solid #444444;
-    padding: 8px 16px;
-    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.03);
+    color: #CDD5D7;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 0 14px;
+    border-radius: 8px;
     font-size: 14px;
+    font-weight: 600;
+    text-align: left;
 }
 
 QPushButton#tutorial:hover {
-    background-color: #3A3A3A;
+    background-color: rgba(255, 255, 255, 0.06);
     color: #FFFFFF;
+    border: 1px solid rgba(255, 255, 255, 0.14);
 }
 
 QPushButton#tutorial:pressed {
-    background-color: #262626;
+    background-color: rgba(255, 255, 255, 0.09);
 }
 
 QRadioButton#lv1Button,
 QRadioButton#lv2Button,
 QRadioButton#lv3Button {
-    color: #DDDDDD;
-    font-size: 16px;
-    spacing: 6px;
+    color: #D9E0E2;
+    font-size: 15px;
+    font-weight: 600;
+    spacing: 8px;
 }
 
 QRadioButton#lv1Button::indicator,
@@ -100,26 +160,73 @@ QRadioButton#lv3Button::indicator:checked + QLabel {
 
 QPushButton#idiom {
     background: transparent;
-    color: #CCCCCC;
-    border: 1px solid #00ADB5;
-    border-radius: 4px;
-    padding: 6px 14px;
+    color: #AEB7BA;
+    border: 1px solid #3A4245;
+    border-radius: 8px;
+    padding: 6px 12px;
     font-size: 12px;
 }
 
 QPushButton#idiom:hover {
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: rgba(255, 255, 255, 0.04);
     color: #FFFFFF;
+    border: 1px solid #4A5457;
 }
 
 QPushButton#idiom:pressed {
     background-color: rgba(255, 255, 255, 0.10);
 }
 
+QWidget#LLTutorWindow,
+QWidget#SLRTutorWindow {
+    background-color: #1F1F1F;
+}
+
+QWidget#LLTutorWindow QPushButton#backButton,
+QWidget#SLRTutorWindow QPushButton#backButton {
+    background: transparent;
+    color: #C5CED0;
+    border: 1px solid #353D40;
+    border-radius: 8px;
+    padding: 6px 12px;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+QWidget#LLTutorWindow QPushButton#backButton:hover,
+QWidget#SLRTutorWindow QPushButton#backButton:hover {
+    background-color: rgba(255, 255, 255, 0.04);
+    color: #FFFFFF;
+    border: 1px solid #475155;
+}
+
+QWidget#LLTutorWindow QPushButton#backButton:pressed,
+QWidget#SLRTutorWindow QPushButton#backButton:pressed {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+QWidget#LLTutorWindow QLabel#tick,
+QWidget#SLRTutorWindow QLabel#tick {
+    color: #42C78B;
+}
+
+QWidget#LLTutorWindow QLabel#cross,
+QWidget#SLRTutorWindow QLabel#cross {
+    color: #E46B6B;
+}
+
+QWidget#LLTutorWindow QLabel#cntRight,
+QWidget#LLTutorWindow QLabel#cntWrong,
+QWidget#SLRTutorWindow QLabel#cntRight,
+QWidget#SLRTutorWindow QLabel#cntWrong {
+    color: #F1F4F5;
+    font-weight: 600;
+}
+
 QListWidget#listWidget {
-    border: 1px solid #3A3A3A;
-    border-radius: 6px;
-    background-color: transparent;
+    border: 1px solid #303638;
+    border-radius: 12px;
+    background-color: #212526;
 }
 
 QListWidget#listWidget::viewport {
@@ -155,10 +262,10 @@ QListWidget#listWidget QScrollBar::sub-page:vertical {
 }
 
 QAbstractScrollArea#gr {
-    background-color: #232936;
-    border: 1px solid #3A3A3A;
-    padding: 12px;
-    border-radius: 6px;
+    background-color: #20252B;
+    border: 1px solid #30363A;
+    padding: 14px;
+    border-radius: 12px;
 }
 
 QAbstractScrollArea#gr QWidget {
@@ -166,19 +273,25 @@ QAbstractScrollArea#gr QWidget {
 }
 
 QFrame#grammarView {
-    background-color: #232936;
+    background-color: #20252B;
 }
 
 QTextEdit#textEdit {
-    background-color: #1E1E1E;
+    background-color: #212526;
     color: #FFFFFF;
-    border: 1px solid #3A3A3A;
-    border-radius: 6px;
-    padding: 8px;
+    border: 1px solid #303638;
+    border-radius: 12px;
+    padding: 12px;
     selection-background-color: #44475A;
     selection-color: #FFFFFF;
 }
 
+QTextEdit#textEdit QWidget,
+QTextEdit#textEdit QAbstractScrollArea,
+QTextEdit#textEdit QAbstractScrollArea::viewport {
+    background-color: #212526;
+}
+
 QTextEdit#textEdit QScrollBar:vertical {
     background: #1E1E1E;
     width: 10px;
@@ -208,42 +321,43 @@ QTextEdit#textEdit QScrollBar::sub-page:vertical {
 }
 
 QTextEdit#userResponse {
-    background-color: #2E2E2E;
-    color: #E0E0E0;
-    border: 1px solid #444444;
-    border-radius: 6px;
-    padding: 6px 10px;
-    font-size: 16px;
+    background-color: #252A2C;
+    color: #E7ECEE;
+    border: 1px solid #383F42;
+    border-radius: 12px;
+    padding: 10px 14px;
+    font-size: 15px;
 }
 
 QTextEdit#userResponse:focus {
-    border-bottom: 2px solid #00ADB5;
+    border: 1px solid #11B3BC;
+    background-color: #282E30;
 }
 
 QTextEdit#userResponse:disabled {
-    background-color: #3A3A3A;
+    background-color: #313638;
     color: #777777;
-    border: 1px solid #555555;
+    border: 1px solid #444A4D;
 }
 
 QPushButton#confirmButton {
-    background-color: rgba(0, 173, 181, 0.85);
+    background-color: #11B3BC;
     border: none;
-    border-radius: 20px;
-    min-width: 40px;
-    min-height: 40px;
-    max-width: 40px;
-    max-height: 40px;
+    border-radius: 16px;
+    min-width: 48px;
+    min-height: 48px;
+    max-width: 48px;
+    max-height: 48px;
     padding: 0px;
-    icon-size: 24px 24px;
+    icon-size: 22px 22px;
 }
 
 QPushButton#confirmButton:hover {
-    background-color: #00C8D6;
+    background-color: #1AC4CD;
 }
 
 QPushButton#confirmButton:pressed {
-    background-color: #009AA3;
+    background-color: #0A9098;
 }
 
 QPushButton#confirmButton:disabled {
@@ -363,6 +477,42 @@ QMessageBox QPushButton[role="danger"]:pressed {
     background-color: #C12E2A;
 }
 
+QDialog#infoDialog {
+    background-color: #1F1F1F;
+    color: #E8ECEE;
+}
+
+QLabel#infoDialogEyebrow {
+    color: #11B3BC;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+}
+
+QLabel#infoDialogTitle {
+    color: #F5F7F8;
+    font-size: 24px;
+    font-weight: 700;
+}
+
+QLabel#infoDialogSubtitle {
+    color: #9AA5A8;
+    font-size: 14px;
+}
+
+QTextBrowser#infoDialogContent {
+    background-color: #212526;
+    color: #E8ECEE;
+    border: 1px solid #303638;
+    border-radius: 12px;
+    padding: 14px 16px;
+    selection-background-color: #35515A;
+}
+
+QTextBrowser#infoDialogContent a {
+    color: #36C5CC;
+}
+
 QWizard[wizardTheme="slr"] * {
     background-color: #2B2B2B;
     color: #E0E0E0;
diff --git a/src/gui/lltabledialog.cpp b/src/gui/lltabledialog.cpp
index c6fad3df..5f7b128c 100644
--- a/src/gui/lltabledialog.cpp
+++ b/src/gui/lltabledialog.cpp
@@ -17,6 +17,7 @@
  */
 
 #include "lltabledialog.h"
+#include <QApplication>
 #include <QFontDatabase>
 #include <QStyledItemDelegate>
 
@@ -96,7 +97,18 @@ LLTableDialog::LLTableDialog(const QStringList& rowHeaders,
 
     resize(width, height);
     connect(submitButton, &QPushButton::clicked, this,
-            [this]() { emit submitted(getTableData()); });
+            [this]() {
+                commitPendingEdit();
+                emit submitted(getTableData());
+            });
+}
+
+void LLTableDialog::commitPendingEdit() {
+    if (QWidget* editor = QApplication::focusWidget();
+        editor != nullptr && table->isAncestorOf(editor)) {
+        submitButton->setFocus(Qt::OtherFocusReason);
+        QApplication::processEvents();
+    }
 }
 
 QVector<QVector<QString>> LLTableDialog::getTableData() const {
diff --git a/src/gui/lltabledialog.h b/src/gui/lltabledialog.h
index 73be372f..8efd7e60 100644
--- a/src/gui/lltabledialog.h
+++ b/src/gui/lltabledialog.h
@@ -83,6 +83,8 @@ class LLTableDialog : public QDialog {
     void submitted(const QVector<QVector<QString>>& data);
 
   private:
+    void commitPendingEdit();
+
     QTableWidget* table; ///< The widget representing the LL(1) parsing table.
     QPushButton*  submitButton; ///< Button to submit the completed table.
 };
diff --git a/src/gui/lltutorwindow.cpp b/src/gui/lltutorwindow.cpp
index ecf1a31e..e228dce1 100644
--- a/src/gui/lltutorwindow.cpp
+++ b/src/gui/lltutorwindow.cpp
@@ -43,6 +43,44 @@ QString NormalizeProductionCell(const QString& cell) {
     return normalized;
 }
 
+QStringList ParseProductionCell(Grammar& grammar, const QString& cell) {
+    const QString trimmed = cell.trimmed();
+    if (trimmed.isEmpty()) {
+        return {};
+    }
+
+    const QStringList spacedTokens =
+        trimmed.split(kCellWhitespace, Qt::SkipEmptyParts);
+    if (!spacedTokens.isEmpty()) {
+        bool allKnown = true;
+        for (const QString& token : spacedTokens) {
+            if (!grammar.st_.In(token.toStdString())) {
+                allKnown = false;
+                break;
+            }
+        }
+
+        if (allKnown) {
+            return spacedTokens;
+        }
+    }
+
+    const QString normalized = NormalizeProductionCell(trimmed);
+    if (normalized.isEmpty()) {
+        return {};
+    }
+
+    QStringList production;
+    for (const std::string& symbol : grammar.Split(normalized.toStdString())) {
+        production.append(QString::fromStdString(symbol));
+    }
+    if (!production.isEmpty()) {
+        return production;
+    }
+
+    return {normalized};
+}
+
 ParsedSymbols ParseSymbolList(const QString& input) {
     ParsedSymbols parsed;
     const QString text     = input.trimmed();
@@ -78,7 +116,7 @@ LLTutorWindow::LLTutorWindow(const Grammar& grammar, TutorialManager* tm,
 
     // ====== UI Setup ==========================================
     ui->setupUi(this);
-    ui->backButton->setText(tr("Back"));
+    ui->backButton->setText(tr("Atras"));
 
     // -- Confirm Button Icon & Shadow
     ui->confirmButton->setIcon(QIcon(":/resources/send.svg"));
@@ -146,10 +184,10 @@ void LLTutorWindow::requestExit(bool applyResults) {
 
 bool LLTutorWindow::confirmExitToHome() {
     QMessageBox msg(this);
-    msg.setWindowTitle(tr("Leave LL(1) exercise"));
+    msg.setWindowTitle(tr("Salir del ejercicio LL(1)"));
     msg.setTextFormat(Qt::RichText);
-    msg.setText(tr("Do you want to go back to the home page? This will discard "
-                   "your current progress."));
+    msg.setText(tr("Quieres volver al menu principal? Se perdera el progreso "
+                   "actual."));
     msg.setStandardButtons(QMessageBox::Yes | QMessageBox::No);
     msg.setDefaultButton(QMessageBox::No);
 
@@ -157,7 +195,7 @@ bool LLTutorWindow::confirmExitToHome() {
     QAbstractButton* noBtn  = msg.button(QMessageBox::No);
 
     if (yesBtn) {
-        yesBtn->setText(tr("Yes"));
+        yesBtn->setText(tr("Si"));
         yesBtn->setCursor(Qt::PointingHandCursor);
         yesBtn->setIcon(QIcon());
         yesBtn->setProperty("role", "primary");
@@ -192,7 +230,6 @@ void LLTutorWindow::exportConversationToPdf(const QString& filePath) {
     html += R"(
     <style>
     body {
-        font-family: sans-serif;
         font-size: 11pt;
         line-height: 1.6;
         margin: 20px;
@@ -230,7 +267,6 @@ void LLTutorWindow::exportConversationToPdf(const QString& filePath) {
     ul {
         padding-left: 20px;
         margin-bottom: 20px;
-        font-family: sans-serif;
         font-size: 11pt;
     }
     li {
@@ -375,7 +411,7 @@ void LLTutorWindow::updateProgressPanel() {
 
     QString html = R"(
         <html>
-        <body style="font-family: sans-serif; font-size: 11pt; color: #f0f0f0; background-color: #1e1e1e;">
+        <body style="font-size: 11pt; color: #f0f0f0; background-color: #212526;">
     )";
 
     // === CABECERAS (First) ===
@@ -560,17 +596,12 @@ void LLTutorWindow::showTableForCPrime() {
 
                     for (int j = 0; j < rawTable[i].size(); ++j) {
                         const QString& colHeader = colHeaders[j];
-                        QString&       cell      = rawTable[i][j];
-                        cell = NormalizeProductionCell(cell);
-                        if (cell.isEmpty()) {
+                        QString& cell = rawTable[i][j];
+                        if (cell.trimmed().isEmpty()) {
                             continue;
                         }
-                        QStringList production = stdVectorToQVector(
-                            ll1.gr_.Split(cell.toStdString()));
-                        if (production.empty()) {
-                            // Split could not process the string
-                            production = {cell};
-                        }
+                        QStringList production = ParseProductionCell(ll1.gr_, cell);
+                        cell = production.join(" ");
                         lltable[rowHeader][colHeader] = production;
                     }
                 }
@@ -632,14 +663,11 @@ void LLTutorWindow::handleTableSubmission(const QVector<QVector<QString>>& raw,
         const auto& rowH = sortedNonTerminals[i];
         for (int j = 0; j < raw[i].size(); ++j) {
             const auto& colH = colHeaders[j];
-            QString&    cell = rawTable[i][j];
-            cell             = NormalizeProductionCell(cell);
-            if (cell.isEmpty())
+            QString& cell = rawTable[i][j];
+            if (cell.trimmed().isEmpty())
                 continue;
-            QStringList prod =
-                stdVectorToQVector(ll1.gr_.Split(cell.toStdString()));
-            if (prod.empty())
-                prod = {cell};
+            QStringList prod = ParseProductionCell(ll1.gr_, cell);
+            cell             = prod.join(" ");
             lltable[rowH][colH] = prod;
         }
     }
@@ -1364,7 +1392,7 @@ QString LLTutorWindow::feedback() {
 
     // ====== Fallback case ======
     default:
-        return "No feedback provided.";
+        return tr("No se ha generado retroalimentacion.");
     }
 }
 
diff --git a/src/gui/lltutorwindow.ui b/src/gui/lltutorwindow.ui
index adeaf24b..40b891c7 100644
--- a/src/gui/lltutorwindow.ui
+++ b/src/gui/lltutorwindow.ui
@@ -18,16 +18,34 @@
     <normaloff>:/resources/syntaxtutor.png</normaloff>:/resources/syntaxtutor.png</iconset>
   </property>
   <layout class="QVBoxLayout" name="verticalLayout">
+   <property name="spacing">
+    <number>14</number>
+   </property>
+   <property name="leftMargin">
+    <number>18</number>
+   </property>
+   <property name="topMargin">
+    <number>18</number>
+   </property>
+   <property name="rightMargin">
+    <number>18</number>
+   </property>
+   <property name="bottomMargin">
+    <number>18</number>
+   </property>
    <item>
-     <layout class="QHBoxLayout" name="horizontalLayout_3">
+      <layout class="QHBoxLayout" name="horizontalLayout_3">
+      <property name="spacing">
+       <number>10</number>
+      </property>
       <item>
        <widget class="QPushButton" name="backButton">
         <property name="cursor">
          <cursorShape>PointingHandCursor</cursorShape>
         </property>
-        <property name="text">
-         <string>Back</string>
-        </property>
+         <property name="text">
+          <string>Atras</string>
+         </property>
        </widget>
       </item>
       <item>
@@ -126,9 +144,12 @@
       </item>
      </layout>
    </item>
-   <item>
-    <layout class="QHBoxLayout" name="horizontalLayout_4">
-      <item>
+    <item>
+     <layout class="QHBoxLayout" name="horizontalLayout_4">
+      <property name="spacing">
+       <number>16</number>
+      </property>
+       <item>
        <widget class="QListWidget" name="listWidget">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
@@ -163,8 +184,14 @@
       </item>
      </layout>
    </item>
-   <item>
-    <layout class="QHBoxLayout" name="horizontalLayout">
+    <item>
+     <layout class="QHBoxLayout" name="horizontalLayout">
+      <property name="spacing">
+       <number>12</number>
+      </property>
+      <property name="alignment">
+       <set>Qt::AlignVCenter</set>
+      </property>
       <item>
        <widget class="CustomTextEdit" name="userResponse">
         <property name="sizePolicy">
@@ -189,9 +216,15 @@
       </item>
       <item>
        <widget class="QPushButton" name="confirmButton">
-        <property name="cursor">
-         <cursorShape>PointingHandCursor</cursorShape>
-        </property>
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="cursor">
+          <cursorShape>PointingHandCursor</cursorShape>
+         </property>
         <property name="text">
          <string/>
         </property>
diff --git a/src/gui/mainwindow.cpp b/src/gui/mainwindow.cpp
index 9c66403a..bfa229f8 100644
--- a/src/gui/mainwindow.cpp
+++ b/src/gui/mainwindow.cpp
@@ -19,15 +19,84 @@
 #include "mainwindow.h"
 #include "tutorialmanager.h"
 #include "ui_mainwindow.h"
+#include <QDialog>
+#include <QDialogButtonBox>
+#include <QHBoxLayout>
+#include <QLabel>
 #include <QMessageBox>
 #include <QPixmap>
 #include <QStackedWidget>
+#include <QTextBrowser>
+#include <QVBoxLayout>
+
+namespace {
+
+void showInfoDialog(QWidget* parent, const QString& windowTitle,
+                    const QString& eyebrow, const QString& title,
+                    const QString& html) {
+    auto* dialog = new QDialog(parent);
+    dialog->setObjectName("infoDialog");
+    dialog->setWindowTitle(windowTitle);
+    dialog->setModal(true);
+    dialog->resize(620, 480);
+
+    auto* layout = new QVBoxLayout(dialog);
+    layout->setSpacing(14);
+    layout->setContentsMargins(24, 22, 24, 18);
+
+    auto* eyebrowLabel = new QLabel(eyebrow, dialog);
+    eyebrowLabel->setObjectName("infoDialogEyebrow");
+
+    auto* titleLabel = new QLabel(title, dialog);
+    titleLabel->setObjectName("infoDialogTitle");
+    titleLabel->setWordWrap(true);
+
+    auto* content = new QTextBrowser(dialog);
+    content->setObjectName("infoDialogContent");
+    content->setOpenExternalLinks(true);
+    content->setFrameShape(QFrame::NoFrame);
+    content->setHtml(html);
+
+    auto* buttons = new QDialogButtonBox(QDialogButtonBox::Close, dialog);
+    if (auto* closeBtn = buttons->button(QDialogButtonBox::Close)) {
+        closeBtn->setText(QObject::tr("Cerrar"));
+        closeBtn->setCursor(Qt::PointingHandCursor);
+        closeBtn->setProperty("role", "primary");
+        closeBtn->setIcon(QIcon());
+    }
+
+    QObject::connect(buttons, &QDialogButtonBox::rejected, dialog,
+                     &QDialog::accept);
+
+    layout->addWidget(eyebrowLabel);
+    layout->addWidget(titleLabel);
+    layout->addWidget(content, 1);
+    layout->addWidget(buttons);
+
+    dialog->exec();
+    dialog->deleteLater();
+}
+
+} // namespace
 
 MainWindow::MainWindow(QWidget* parent)
     : QMainWindow(parent), ui(new Ui::MainWindow),
       settings("UMA", "SyntaxTutor") {
     factory.Init();
     ui->setupUi(this);
+    ui->homeEyebrow->setText(tr("Tutores interactivos"));
+    ui->homeTitle->setText(tr("Elige cómo quieres practicar"));
+    ui->homeSubtitle->setText(
+        tr("Inicia un tutor y ajusta la "
+           "dificultad de la gramática antes de empezar."));
+    ui->pushButton->setText(tr("LL(1)"));
+    ui->pushButton_2->setText(tr("SLR(1)"));
+    ui->tutorial->setText(tr("Tutorial"));
+    ui->difficultyTitle->setText(tr("Dificultad"));
+    ui->lv1Button->setText(tr("Nivel 1"));
+    ui->lv2Button->setText(tr("Nivel 2"));
+    ui->lv3Button->setText(tr("Nivel 3"));
+    ui->idiom->setText(tr("Idioma"));
     defaultWindowTitle = windowTitle();
 
     homePage = takeCentralWidget();
@@ -165,39 +234,40 @@ MainWindow::~MainWindow() {
 void MainWindow::applyLevelStyling(unsigned lvl) {
     int     idx    = qBound(1, static_cast<int>(lvl), 10) - 1;
     QString c      = levelColors[idx];
-    QString border = QColor(c).darker(120).name();
 
     ui->badgeNivel->setStyleSheet(QString(R"(
     QLabel {
-    min-width: 24px;
+    min-width: 28px;
     min-height: 24px;
-    padding: 0px 6px;
-    font-weight: bold;
+    padding: 0px 10px;
+    font-weight: 700;
     font-size: 12px;
-    background-color: %1;
-    color: white;
+    background-color: rgba(%1, %2, %3, 0.18);
+    color: %4;
     border-radius: 12px;
-    border: 1px solid %2;
+    border: none;
     qproperty-alignment: 'AlignCenter';
 }       
     )")
-                                      .arg(c)
-                                      .arg(border));
+                                      .arg(QColor(c).red())
+                                      .arg(QColor(c).green())
+                                      .arg(QColor(c).blue())
+                                      .arg(c));
 
     ui->badgeNivel->setText(QString::number(lvl));
     ui->progressBarNivel->setStyleSheet(QString(R"(
     QProgressBar {
-        background-color: #2A2A2A;
-        border: 1px solid #666666;   
-        border-radius: 3px;
-        min-height: 5px;
-        max-height: 5px;
+        background-color: #2A2E30;
+        border: none;
+        border-radius: 4px;
+        min-height: 8px;
+        max-height: 8px;
         text-align: center;
         color: transparent;
     }
     QProgressBar::chunk {
         background-color: %1;
-        border-radius: 3px;
+        border-radius: 4px;
         margin: 0px;
     }
 )")
@@ -531,17 +601,12 @@ void MainWindow::setupTutorial() {
 }
 
 void MainWindow::on_actionSobre_la_aplicaci_n_triggered() {
-    QMessageBox about(this);
-    about.setWindowTitle(tr("Sobre la aplicación"));
-    QPixmap pix(":/resources/syntaxtutor.png");
-    about.setIconPixmap(
-        pix.scaled(48, 48, Qt::KeepAspectRatio, Qt::SmoothTransformation));
-
-    about.setTextFormat(Qt::RichText);
     const auto versionLine =
         tr("<p><b>Versión:</b> %1</p>").arg(qApp->applicationVersion());
-    about.setText(
-        tr("<h2>SyntaxTutor</h2>") + versionLine +
+    showInfoDialog(
+        this, tr("Sobre la aplicación"), tr("SyntaxTutor"),
+        tr("Una herramienta de escritorio para practicar análisis sintáctico"),
+        versionLine +
         tr("<p>Trabajo Fin de Grado – Tutorial Interactivo sobre Analizadores "
            "Sintácticos.</p>") +
         tr("<p><b>Autor:</b> José R.</p>") +
@@ -551,116 +616,111 @@ void MainWindow::on_actionSobre_la_aplicaci_n_triggered() {
         tr("<p><a href='https://github.com/jose-rZM/SyntaxTutor'>GitHub - "
            "jose-rZM</a></p>") +
         tr("<p>2025 Universidad de Málaga</p>"));
-
-    about.setStandardButtons(QMessageBox::Close);
-    auto* closeBtn = about.button(QMessageBox::Close);
-    if (closeBtn) {
-        closeBtn->setCursor(Qt::PointingHandCursor);
-        closeBtn->setIcon(QIcon());
-    }
-    about.exec();
 }
 
 void MainWindow::on_actionReferencia_LL_1_triggered() {
-    QMessageBox help(this);
-    help.setWindowTitle(tr("Referencia rápida LL(1)"));
-    help.setTextFormat(Qt::RichText);
-    help.setText(tr(R"(
-      <h3>Referencia LL(1)</h3>
-      <ul>
-        <li><b>CAB(X):</b> conjunto de símbolos terminales que comienzan cadenas derivables desde X.</li>
-        <li><b>SIG(A):</b> conjunto de terminales que pueden seguir a A en alguna derivación.</li>
-  <li><b>Construcción de la Tabla LL(1):</b>
-    <ul>
-      <li>Para cada producción <code>A → α</code> y cada terminal <code>a</code> tal que 
-          <code>a ∈ CAB(α)</code>, asignar  
-          <code>Tabla[A][a] = "α"</code>.</li>
-      <li>Si <code>ε ∈ CAB(α)</code>, entonces para cada terminal 
-          <code>b ∈ SIG(A)</code> asignar  
-          <code>Tabla[A][b] = "α"</code>.</li>
-      <li>Si <code>ε ∈ CAB(α)</code> y <code>$ ∈ SIG(A)</code>, entonces  
-          <code>Tabla[A][$] = "α"</code> (fin de cadena).</li>
-      <li><b>Aceptación:</b> Por convención, no se añade entrada especial; el parser termina cuando 
-          encuentra <code>$</code> en la pila y en la entrada.</li>
-    </ul>
-  </li>
-        <li><b>Conflictos:</b> Sitios donde CAB(α) ∩ CAB(β) ≠ ∅ o ε ∈ CAB(α) y CAB(β) ∩ SIG(A) ≠ ∅.</li>
-      </ul>
-    )"));
-    help.setStandardButtons(QMessageBox::Close);
-    auto* closeBtn = help.button(QMessageBox::Close);
-    if (closeBtn) {
-        closeBtn->setCursor(Qt::PointingHandCursor);
-        closeBtn->setIcon(QIcon());
-    }
-    help.exec();
+    showInfoDialog(
+        this, tr("Referencia rápida LL(1)"), tr("LL(1)"),
+        tr("Resumen de conjuntos y construcción de la tabla predictiva"),
+        tr(R"(
+            <h3>Conceptos clave</h3>
+            <p><b>CAB(X):</b> conjunto de símbolos terminales que pueden comenzar cadenas derivables desde <code>X</code>.</p>
+            <p><b>SIG(A):</b> conjunto de terminales que pueden aparecer justo después de <code>A</code> en alguna derivación.</p>
+            <h3>Construcción de la tabla LL(1)</h3>
+            <ul>
+              <li>Para cada producción <code>A → α</code> y cada terminal <code>a ∈ CAB(α)</code>, asigna <code>Tabla[A][a] = α</code>.</li>
+              <li>Si <code>ε ∈ CAB(α)</code>, para cada <code>b ∈ SIG(A)</code> asigna <code>Tabla[A][b] = α</code>.</li>
+              <li>Si <code>ε ∈ CAB(α)</code> y <code>$ ∈ SIG(A)</code>, entonces <code>Tabla[A][$] = α</code>.</li>
+            </ul>
+            <h3>Conflictos</h3>
+            <p>Aparecen cuando dos producciones compiten por la misma celda, por ejemplo si <code>CAB(α) ∩ CAB(β) ≠ ∅</code> o si una producción con <code>ε</code> invade símbolos de <code>SIG(A)</code>.</p>
+        )"));
 }
 
 void MainWindow::on_actionReferencia_SLR_1_triggered() {
-    QMessageBox help(this);
-    help.setWindowTitle(tr("Referencia rápida SLR(1)"));
-    help.setTextFormat(Qt::RichText);
-    help.setText(tr(R"(
-      <h3>Referencia SLR(1)</h3>
-      <ul>
-        <li><b>Ítems LR(0):</b> producciones con “∙” marcando la posición de análisis.</li>
-        <li><b>Cierre( I ):</b> añadir ítems B → ∙ γ para cada ítem A → α ∙ B β. Repetir hasta que no se añadan más.</li>
-        <li><b>Goto( I, X ) o δ( I, X ):</b> desplazar “∙” sobre X en todos los ítems de I y calcular su cierre.</li>
-<li><b>Tabla SLR(1):</b>
-  <ul>
-    <li><b>Acciones (Action):</b>  
-      Para cada estado I y cada terminal a:
-      <ul>
-        <li>Si existe el ítem <code>A → α∙aβ</code> en I, entonces <code>Action[I,a] = s<sub>j</sub></code> (shift al estado j = Goto(I,a)).</li>
-        <li>Si existe el ítem <code>A → α∙</code> en I, entonces <code>Action[I,a] = r<sub>k</sub></code> (reduce usando la producción k = A→α) <em>para todo</em> <code>a ∈ SIG(A)</code>.</li>
-        <li><code>Action[I,$] = acc</code> si <code>S → A·$</code> está en I (aceptación).</li>
-      </ul>
-    </li>
-    <li><b>Transiciones (Goto):</b>  
-      Para cada estado I y cada no terminal A:
-      <ul>
-        <li>Si <code>Goto(I,A) = J</code>, entonces <code>Goto[I,A] = J</code>.</li>
-      </ul>
-    </li>
-  </ul>
-</li>
-      </ul>
-    )"));
-    help.setStandardButtons(QMessageBox::Close);
-    auto* closeBtn = help.button(QMessageBox::Close);
-    if (closeBtn) {
-        closeBtn->setCursor(Qt::PointingHandCursor);
-        closeBtn->setIcon(QIcon());
-    }
-    help.exec();
+    showInfoDialog(
+        this, tr("Referencia rápida SLR(1)"), tr("SLR(1)"),
+        tr("Resumen de items LR(0), cierre, goto y tabla de análisis"),
+        tr(R"(
+            <h3>Conceptos clave</h3>
+            <p><b>Ítems LR(0):</b> producciones con un punto que marca la posición actual del análisis.</p>
+            <p><b>Cierre(I):</b> si un ítem contiene <code>∙ B</code>, añade los ítems <code>B → ∙ γ</code> correspondientes y repite hasta estabilizar.</p>
+            <p><b>Goto(I, X):</b> desplaza el punto sobre <code>X</code> en todos los ítems válidos y calcula después su cierre.</p>
+            <h3>Tabla SLR(1)</h3>
+            <ul>
+              <li><b>Action[I, a] = s<sub>j</sub></b> si existe un ítem <code>A → α ∙ a β</code> y <code>Goto(I, a) = j</code>.</li>
+              <li><b>Action[I, a] = r<sub>k</sub></b> si existe un ítem completo <code>A → α ∙</code> y <code>a ∈ SIG(A)</code>.</li>
+              <li><b>Action[I, $] = acc</b> cuando el estado contiene la situación de aceptación.</li>
+              <li><b>Goto[I, A] = J</b> para transiciones con no terminales.</li>
+            </ul>
+            <h3>Conflictos</h3>
+            <p>Un estado presenta conflicto cuando no puede elegirse una única acción válida, por ejemplo entre <i>shift</i> y <i>reduce</i> o entre dos reducciones distintas.</p>
+        )"));
 }
 
 #include <QProcess>
 void MainWindow::on_idiom_clicked() {
-    QMessageBox msgBox;
-    msgBox.setWindowTitle(tr("Idioma"));
-    msgBox.setText(tr("Selecciona el idioma de la aplicación:"));
-    QPushButton* btnEs =
-        msgBox.addButton(tr("Español"), QMessageBox::AcceptRole);
-    btnEs->setObjectName("btnEs");
+    QString selectedLang;
+
+    QDialog dialog(this);
+    dialog.setObjectName("infoDialog");
+    dialog.setWindowTitle(tr("Idioma"));
+    dialog.setModal(true);
+    dialog.resize(420, 220);
+
+    auto* layout = new QVBoxLayout(&dialog);
+    layout->setSpacing(14);
+    layout->setContentsMargins(24, 22, 24, 18);
+
+    auto* eyebrow = new QLabel(tr("Idioma"), &dialog);
+    eyebrow->setObjectName("infoDialogEyebrow");
+
+    auto* title = new QLabel(tr("Selecciona el idioma de la aplicación"), &dialog);
+    title->setObjectName("infoDialogTitle");
+    title->setWordWrap(true);
+
+    auto* subtitle = new QLabel(
+        tr("El cambio se aplicará al reiniciar la aplicación."), &dialog);
+    subtitle->setObjectName("infoDialogSubtitle");
+    subtitle->setWordWrap(true);
+
+    auto* buttonsLayout = new QHBoxLayout;
+    buttonsLayout->setSpacing(10);
+
+    auto* btnEs = new QPushButton(tr("Español"), &dialog);
+    btnEs->setCursor(Qt::PointingHandCursor);
     btnEs->setProperty("role", "primary");
-    QPushButton* btnEn =
-        msgBox.addButton(tr("Inglés"), QMessageBox::AcceptRole);
-    btnEn->setObjectName("btnEn");
+
+    auto* btnEn = new QPushButton(tr("Inglés"), &dialog);
+    btnEn->setCursor(Qt::PointingHandCursor);
     btnEn->setProperty("role", "primary");
-    QPushButton* btnCanc =
-        msgBox.addButton(tr("Cancelar"), QMessageBox::RejectRole);
-    btnCanc->setObjectName("btnCanc");
-    btnCanc->setProperty("role", "danger");
-    msgBox.exec();
 
-    QString selectedLang;
+    auto* btnCanc = new QPushButton(tr("Cancelar"), &dialog);
+    btnCanc->setCursor(Qt::PointingHandCursor);
+    btnCanc->setProperty("role", "danger");
 
-    if (msgBox.clickedButton() == btnEs) {
+    connect(btnEs, &QPushButton::clicked, &dialog, [&dialog, &selectedLang]() {
         selectedLang = "es";
-    } else if (msgBox.clickedButton() == btnEn) {
+        dialog.accept();
+    });
+    connect(btnEn, &QPushButton::clicked, &dialog, [&dialog, &selectedLang]() {
         selectedLang = "en";
-    } else {
+        dialog.accept();
+    });
+    connect(btnCanc, &QPushButton::clicked, &dialog, &QDialog::reject);
+
+    buttonsLayout->addWidget(btnEs);
+    buttonsLayout->addWidget(btnEn);
+    buttonsLayout->addStretch();
+    buttonsLayout->addWidget(btnCanc);
+
+    layout->addWidget(eyebrow);
+    layout->addWidget(title);
+    layout->addWidget(subtitle);
+    layout->addSpacing(6);
+    layout->addLayout(buttonsLayout);
+
+    if (dialog.exec() != QDialog::Accepted || selectedLang.isEmpty()) {
         return;
     }
 
diff --git a/src/gui/mainwindow.ui b/src/gui/mainwindow.ui
index a59d7532..01fca6ad 100644
--- a/src/gui/mainwindow.ui
+++ b/src/gui/mainwindow.ui
@@ -24,85 +24,53 @@
     <normaloff>:/resources/syntaxtutor.png</normaloff>:/resources/syntaxtutor.png</iconset>
   </property>
   <widget class="QWidget" name="centralwidget">
-   <layout class="QVBoxLayout" name="verticalLayout_4" stretch="0,1,3,0,3,1,0">
-    <property name="sizeConstraint">
-     <enum>QLayout::SizeConstraint::SetDefaultConstraint</enum>
+   <layout class="QVBoxLayout" name="verticalLayout_4" stretch="0,0,1,0">
+    <property name="spacing">
+     <number>14</number>
+    </property>
+    <property name="leftMargin">
+     <number>28</number>
+    </property>
+    <property name="topMargin">
+     <number>24</number>
+    </property>
+    <property name="rightMargin">
+     <number>28</number>
+    </property>
+    <property name="bottomMargin">
+     <number>24</number>
     </property>
     <item>
-     <layout class="QHBoxLayout" name="gamificationLayout" stretch="0,0">
+     <layout class="QHBoxLayout" name="headerLayout">
       <property name="spacing">
-       <number>4</number>
-      </property>
-      <property name="sizeConstraint">
-       <enum>QLayout::SizeConstraint::SetMinimumSize</enum>
-      </property>
-      <property name="leftMargin">
-       <number>2</number>
-      </property>
-      <property name="topMargin">
-       <number>2</number>
-      </property>
-      <property name="rightMargin">
-       <number>2</number>
-      </property>
-      <property name="bottomMargin">
-       <number>2</number>
+       <number>12</number>
       </property>
       <item>
-       <layout class="QVBoxLayout" name="verticalLayout_3">
-        <property name="sizeConstraint">
-         <enum>QLayout::SizeConstraint::SetMinimumSize</enum>
+       <layout class="QHBoxLayout" name="statusLayout">
+        <property name="spacing">
+         <number>8</number>
         </property>
         <item>
-         <layout class="QHBoxLayout" name="horizontalLayout">
-          <item>
-           <widget class="QLabel" name="thropy">
-            <property name="text">
-             <string>&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p&gt;&lt;img src=&quot;:/resources/trophy.svg&quot; height=&quot;24&quot;/&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
-            </property>
-            <property name="textFormat">
-             <enum>Qt::TextFormat::RichText</enum>
-            </property>
-           </widget>
-          </item>
-          <item>
-           <widget class="QLabel" name="labelScore">
-            <property name="font">
-             <font>
-              <pointsize>12</pointsize>
-              <bold>true</bold>
-             </font>
-            </property>
-            <property name="cursor">
-             <cursorShape>ArrowCursor</cursorShape>
-            </property>
-            <property name="text">
-             <string>Puntos: 0</string>
-            </property>
-           </widget>
-          </item>
-         </layout>
+         <widget class="QLabel" name="labelScore">
+          <property name="font">
+           <font>
+            <pointsize>12</pointsize>
+            <bold>true</bold>
+           </font>
+          </property>
+          <property name="text">
+           <string>Puntos: 0</string>
+          </property>
+         </widget>
         </item>
         <item>
          <widget class="QLabel" name="badgeNivel">
-          <property name="sizePolicy">
-           <sizepolicy hsizetype="Preferred" vsizetype="Minimum">
-            <horstretch>0</horstretch>
-            <verstretch>0</verstretch>
-           </sizepolicy>
-          </property>
           <property name="minimumSize">
            <size>
             <width>38</width>
             <height>26</height>
            </size>
           </property>
-          <property name="font">
-           <font>
-            <pointsize>-1</pointsize>
-            <bold>true</bold>
-           </font>
-          </property>
           <property name="text">
            <string>1</string>
           </property>
@@ -111,195 +79,291 @@
        </layout>
       </item>
       <item>
-       <widget class="QProgressBar" name="progressBarNivel">
+       <spacer name="horizontalSpacerHeader">
+        <property name="orientation">
+         <enum>Qt::Orientation::Horizontal</enum>
+        </property>
+        <property name="sizeHint" stdset="0">
+         <size>
+          <width>40</width>
+          <height>20</height>
+         </size>
+        </property>
+       </spacer>
+      </item>
+      <item>
+       <widget class="QPushButton" name="idiom">
         <property name="sizePolicy">
-         <sizepolicy hsizetype="Expanding" vsizetype="Minimum">
+         <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
-        <property name="minimumSize">
-         <size>
-          <width>200</width>
-          <height>7</height>
-         </size>
+        <property name="cursor">
+         <cursorShape>PointingHandCursor</cursorShape>
         </property>
-        <property name="value">
-         <number>50</number>
+        <property name="layoutDirection">
+         <enum>Qt::LayoutDirection::RightToLeft</enum>
         </property>
-        <property name="textVisible">
-         <bool>false</bool>
+        <property name="text">
+         <string>Idioma</string>
         </property>
        </widget>
       </item>
      </layout>
     </item>
     <item>
-     <spacer name="verticalSpacer_2">
-      <property name="orientation">
-       <enum>Qt::Orientation::Vertical</enum>
+     <widget class="QProgressBar" name="progressBarNivel">
+      <property name="minimumSize">
+       <size>
+        <width>0</width>
+        <height>8</height>
+       </size>
       </property>
-      <property name="sizeHint" stdset="0">
+      <property name="maximumSize">
        <size>
-        <width>20</width>
-        <height>40</height>
+        <width>16777215</width>
+        <height>8</height>
        </size>
       </property>
-     </spacer>
+      <property name="value">
+       <number>50</number>
+      </property>
+      <property name="textVisible">
+       <bool>false</bool>
+      </property>
+     </widget>
     </item>
     <item>
-     <layout class="QVBoxLayout" name="mainBtnsLayout" stretch="0,0,0">
+     <layout class="QHBoxLayout" name="contentRowLayout">
       <item>
-       <widget class="QPushButton" name="pushButton">
-        <property name="sizePolicy">
-         <sizepolicy hsizetype="Minimum" vsizetype="Maximum">
-          <horstretch>1</horstretch>
-          <verstretch>0</verstretch>
-         </sizepolicy>
+       <spacer name="horizontalSpacerLeftContent">
+        <property name="orientation">
+         <enum>Qt::Orientation::Horizontal</enum>
         </property>
-        <property name="minimumSize">
+        <property name="sizeHint" stdset="0">
          <size>
-          <width>432</width>
-          <height>0</height>
+          <width>40</width>
+          <height>20</height>
          </size>
         </property>
-        <property name="font">
-         <font>
-          <pointsize>12</pointsize>
-         </font>
-        </property>
-        <property name="text">
-         <string>LL(1)</string>
-        </property>
-       </widget>
+       </spacer>
       </item>
       <item>
-       <widget class="QPushButton" name="pushButton_2">
-        <property name="sizePolicy">
-         <sizepolicy hsizetype="Minimum" vsizetype="Fixed">
-          <horstretch>0</horstretch>
-          <verstretch>0</verstretch>
-         </sizepolicy>
-        </property>
-        <property name="minimumSize">
+       <widget class="QWidget" name="homeContent">
+        <property name="maximumSize">
          <size>
-          <width>432</width>
-          <height>0</height>
+          <width>560</width>
+          <height>16777215</height>
          </size>
         </property>
-        <property name="font">
-         <font>
-          <pointsize>12</pointsize>
-         </font>
-        </property>
-        <property name="text">
-         <string>SLR(1)</string>
-        </property>
+        <layout class="QVBoxLayout" name="homeContentLayout" stretch="0,0,0,1">
+         <property name="spacing">
+          <number>24</number>
+         </property>
+         <property name="topMargin">
+          <number>30</number>
+         </property>
+         <property name="bottomMargin">
+          <number>12</number>
+         </property>
+         <item>
+          <layout class="QVBoxLayout" name="heroLayout">
+           <property name="spacing">
+            <number>8</number>
+           </property>
+           <item>
+            <widget class="QLabel" name="homeEyebrow">
+             <property name="text">
+              <string>Tutores interactivos</string>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <widget class="QLabel" name="homeTitle">
+             <property name="text">
+              <string>Elige como quieres practicar</string>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <widget class="QLabel" name="homeSubtitle">
+             <property name="text">
+              <string>Inicia un tutor, continua con la guia interactiva y ajusta la dificultad de la gramatica antes de empezar.</string>
+             </property>
+             <property name="wordWrap">
+              <bool>true</bool>
+             </property>
+            </widget>
+           </item>
+          </layout>
+         </item>
+         <item>
+         <layout class="QVBoxLayout" name="mainBtnsLayout">
+           <property name="spacing">
+            <number>14</number>
+           </property>
+           <item>
+            <widget class="QPushButton" name="pushButton">
+             <property name="minimumSize">
+              <size>
+               <width>0</width>
+               <height>52</height>
+              </size>
+             </property>
+             <property name="font">
+              <font>
+               <pointsize>12</pointsize>
+              </font>
+             </property>
+             <property name="text">
+              <string>LL(1)</string>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <widget class="QPushButton" name="pushButton_2">
+             <property name="minimumSize">
+              <size>
+               <width>0</width>
+               <height>52</height>
+              </size>
+             </property>
+             <property name="font">
+              <font>
+               <pointsize>12</pointsize>
+              </font>
+             </property>
+             <property name="text">
+              <string>SLR(1)</string>
+             </property>
+            </widget>
+          </item>
+          <item>
+            <spacer name="tutorialSpacer">
+             <property name="orientation">
+              <enum>Qt::Orientation::Vertical</enum>
+             </property>
+             <property name="sizeHint" stdset="0">
+              <size>
+               <width>20</width>
+               <height>10</height>
+              </size>
+             </property>
+            </spacer>
+           </item>
+           <item>
+            <widget class="QPushButton" name="tutorial">
+             <property name="minimumSize">
+              <size>
+               <width>0</width>
+               <height>40</height>
+              </size>
+             </property>
+             <property name="cursor">
+              <cursorShape>PointingHandCursor</cursorShape>
+             </property>
+             <property name="text">
+              <string>Tutorial</string>
+             </property>
+            </widget>
+           </item>
+          </layout>
+         </item>
+         <item>
+          <layout class="QVBoxLayout" name="difficultySectionLayout">
+           <property name="spacing">
+            <number>10</number>
+           </property>
+           <item>
+            <widget class="QLabel" name="difficultyTitle">
+             <property name="text">
+              <string>Dificultad</string>
+             </property>
+            </widget>
+           </item>
+           <item>
+            <layout class="QHBoxLayout" name="levelsLayout">
+             <property name="spacing">
+              <number>22</number>
+             </property>
+             <item>
+              <widget class="QRadioButton" name="lv1Button">
+               <property name="text">
+                <string>Nivel 1</string>
+               </property>
+               <property name="checked">
+                <bool>true</bool>
+               </property>
+              </widget>
+             </item>
+             <item>
+              <widget class="QRadioButton" name="lv2Button">
+               <property name="text">
+                <string>Nivel 2</string>
+               </property>
+              </widget>
+             </item>
+             <item>
+              <widget class="QRadioButton" name="lv3Button">
+               <property name="text">
+                <string>Nivel 3</string>
+               </property>
+              </widget>
+             </item>
+             <item>
+              <spacer name="horizontalSpacerLevelsTrailing">
+               <property name="orientation">
+                <enum>Qt::Orientation::Horizontal</enum>
+               </property>
+               <property name="sizeHint" stdset="0">
+                <size>
+                 <width>40</width>
+                 <height>20</height>
+                </size>
+               </property>
+              </spacer>
+             </item>
+            </layout>
+           </item>
+          </layout>
+         </item>
+         <item>
+          <spacer name="verticalSpacerBottomContent">
+           <property name="orientation">
+            <enum>Qt::Orientation::Vertical</enum>
+           </property>
+           <property name="sizeType">
+            <enum>QSizePolicy::Policy::Expanding</enum>
+           </property>
+           <property name="sizeHint" stdset="0">
+            <size>
+             <width>20</width>
+             <height>40</height>
+            </size>
+           </property>
+          </spacer>
+         </item>
+        </layout>
        </widget>
       </item>
       <item>
-       <widget class="QPushButton" name="tutorial">
-        <property name="sizePolicy">
-         <sizepolicy hsizetype="Minimum" vsizetype="Fixed">
-          <horstretch>0</horstretch>
-          <verstretch>0</verstretch>
-         </sizepolicy>
+       <spacer name="horizontalSpacerRightContent">
+        <property name="orientation">
+         <enum>Qt::Orientation::Horizontal</enum>
         </property>
-        <property name="minimumSize">
+        <property name="sizeHint" stdset="0">
          <size>
-          <width>432</width>
-          <height>0</height>
+          <width>40</width>
+          <height>20</height>
          </size>
         </property>
-        <property name="cursor">
-         <cursorShape>PointingHandCursor</cursorShape>
-        </property>
-        <property name="text">
-         <string>Tutorial</string>
-        </property>
-       </widget>
-      </item>
-     </layout>
-    </item>
-    <item>
-     <spacer name="verticalSpacer_3">
-      <property name="orientation">
-       <enum>Qt::Orientation::Vertical</enum>
-      </property>
-      <property name="sizeHint" stdset="0">
-       <size>
-        <width>20</width>
-        <height>40</height>
-       </size>
-      </property>
-     </spacer>
-    </item>
-    <item>
-     <layout class="QVBoxLayout" name="levelsLayout" stretch="0,0,0">
-      <property name="spacing">
-       <number>17</number>
-      </property>
-      <item alignment="Qt::AlignmentFlag::AlignHCenter">
-       <widget class="QRadioButton" name="lv1Button">
-        <property name="sizePolicy">
-         <sizepolicy hsizetype="Minimum" vsizetype="Maximum">
-          <horstretch>0</horstretch>
-          <verstretch>0</verstretch>
-         </sizepolicy>
-        </property>
-        <property name="font">
-         <font>
-          <pointsize>-1</pointsize>
-         </font>
-        </property>
-        <property name="text">
-         <string>Nivel 1</string>
-        </property>
-        <property name="checked">
-         <bool>true</bool>
-        </property>
-       </widget>
-      </item>
-      <item alignment="Qt::AlignmentFlag::AlignHCenter">
-       <widget class="QRadioButton" name="lv2Button">
-        <property name="sizePolicy">
-         <sizepolicy hsizetype="Minimum" vsizetype="Maximum">
-          <horstretch>0</horstretch>
-          <verstretch>0</verstretch>
-         </sizepolicy>
-        </property>
-        <property name="font">
-         <font>
-          <pointsize>-1</pointsize>
-         </font>
-        </property>
-        <property name="text">
-         <string>Nivel 2</string>
-        </property>
-       </widget>
-      </item>
-      <item alignment="Qt::AlignmentFlag::AlignHCenter">
-       <widget class="QRadioButton" name="lv3Button">
-        <property name="sizePolicy">
-         <sizepolicy hsizetype="Minimum" vsizetype="Maximum">
-          <horstretch>0</horstretch>
-          <verstretch>0</verstretch>
-         </sizepolicy>
-        </property>
-        <property name="font">
-         <font>
-          <pointsize>-1</pointsize>
-         </font>
-        </property>
-        <property name="text">
-         <string>Nivel 3</string>
-        </property>
-       </widget>
+       </spacer>
       </item>
      </layout>
     </item>
     <item>
-     <spacer name="verticalSpacer">
+     <spacer name="verticalSpacerFooter">
       <property name="orientation">
        <enum>Qt::Orientation::Vertical</enum>
       </property>
@@ -309,30 +373,11 @@
       <property name="sizeHint" stdset="0">
        <size>
         <width>20</width>
-        <height>40</height>
+        <height>20</height>
        </size>
       </property>
      </spacer>
     </item>
-    <item>
-     <widget class="QPushButton" name="idiom">
-      <property name="sizePolicy">
-       <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
-        <horstretch>0</horstretch>
-        <verstretch>0</verstretch>
-       </sizepolicy>
-      </property>
-      <property name="cursor">
-       <cursorShape>PointingHandCursor</cursorShape>
-      </property>
-      <property name="layoutDirection">
-       <enum>Qt::LayoutDirection::RightToLeft</enum>
-      </property>
-      <property name="text">
-       <string>Idioma</string>
-      </property>
-     </widget>
-    </item>
    </layout>
   </widget>
   <widget class="QMenuBar" name="menubar">
diff --git a/src/gui/slrtabledialog.cpp b/src/gui/slrtabledialog.cpp
index f7594017..09e57dab 100644
--- a/src/gui/slrtabledialog.cpp
+++ b/src/gui/slrtabledialog.cpp
@@ -17,6 +17,7 @@
  */
 
 #include "slrtabledialog.h"
+#include <QApplication>
 #include <QFontDatabase>
 #include <QHBoxLayout>
 #include <QStyledItemDelegate>
@@ -112,9 +113,23 @@ SLRTableDialog::SLRTableDialog(int rowCount, int colCount,
     resize(width, height);
 
     connect(submitButton, &QPushButton::clicked, this,
-            [this]() { emit submitted(getTableData()); });
+            [this]() {
+                commitPendingEdit();
+                emit submitted(getTableData());
+            });
     connect(guidedButton, &QPushButton::clicked, this,
-            [this]() { emit guidedRequested(getTableData()); });
+            [this]() {
+                commitPendingEdit();
+                emit guidedRequested(getTableData());
+            });
+}
+
+void SLRTableDialog::commitPendingEdit() {
+    if (QWidget* editor = QApplication::focusWidget();
+        editor != nullptr && table->isAncestorOf(editor)) {
+        submitButton->setFocus(Qt::OtherFocusReason);
+        QApplication::processEvents();
+    }
 }
 
 QVector<QVector<QString>> SLRTableDialog::getTableData() const {
diff --git a/src/gui/slrtabledialog.h b/src/gui/slrtabledialog.h
index 1869d4a3..16eaf749 100644
--- a/src/gui/slrtabledialog.h
+++ b/src/gui/slrtabledialog.h
@@ -75,6 +75,8 @@ class SLRTableDialog : public QDialog {
     void highlightInvalidCells(const QList<QPair<int, int>>& coords);
 
   private:
+    void commitPendingEdit();
+
     QTableWidget* table;        ///< Widget for editing the SLR(1) table.
     QPushButton*  submitButton; ///< Button used to validate/submit the table.
     QPushButton*  guidedButton; ///< Button to launch guided mode.
diff --git a/src/gui/slrtutorwindow.cpp b/src/gui/slrtutorwindow.cpp
index 390e08e0..ffc2b292 100644
--- a/src/gui/slrtutorwindow.cpp
+++ b/src/gui/slrtutorwindow.cpp
@@ -200,7 +200,7 @@ SLRTutorWindow::SLRTutorWindow(const Grammar& g, TutorialManager* tm,
 
     // ====== UI Setup ==========================================
     ui->setupUi(this);
-    ui->backButton->setText(tr("Back"));
+    ui->backButton->setText(tr("Atras"));
 
     // -- Confirm Button: Icon + Shadow
     ui->confirmButton->setIcon(QIcon(":/resources/send.svg"));
@@ -267,10 +267,10 @@ void SLRTutorWindow::requestExit(bool applyResults) {
 
 bool SLRTutorWindow::confirmExitToHome() {
     QMessageBox msg(this);
-    msg.setWindowTitle(tr("Leave SLR(1) exercise"));
+    msg.setWindowTitle(tr("Salir del ejercicio SLR(1)"));
     msg.setTextFormat(Qt::RichText);
-    msg.setText(tr("Do you want to go back to the home page? This will discard "
-                   "your current progress."));
+    msg.setText(tr("Quieres volver al menu principal? Se perdera el progreso "
+                   "actual."));
     msg.setStandardButtons(QMessageBox::Yes | QMessageBox::No);
     msg.setDefaultButton(QMessageBox::No);
 
@@ -278,7 +278,7 @@ bool SLRTutorWindow::confirmExitToHome() {
     QAbstractButton* noBtn  = msg.button(QMessageBox::No);
 
     if (yesBtn) {
-        yesBtn->setText(tr("Yes"));
+        yesBtn->setText(tr("Si"));
         yesBtn->setCursor(Qt::PointingHandCursor);
         yesBtn->setIcon(QIcon());
         yesBtn->setProperty("role", "primary");
@@ -313,7 +313,6 @@ void SLRTutorWindow::exportConversationToPdf(const QString& filePath) {
     html += R"(
     <style>
     body {
-        font-family: sans-serif;
         font-size: 11pt;
         line-height: 1.6;
         margin: 20px;
@@ -351,7 +350,6 @@ void SLRTutorWindow::exportConversationToPdf(const QString& filePath) {
     ul {
         padding-left: 20px;
         margin-bottom: 20px;
-        font-family: sans-serif;
         font-size: 11pt;
     }
     li {
@@ -849,7 +847,7 @@ void SLRTutorWindow::updateProgressPanel() {
 
     text += R"(
         <html>
-        <body style="font-family: sans-serif; color: #f0f0f0; background-color: #1e1e1e;">
+        <body style="color: #f0f0f0; background-color: #212526;">
     )";
 
     if (userMadeStates.empty()) {
diff --git a/src/gui/slrtutorwindow.ui b/src/gui/slrtutorwindow.ui
index 09f8994d..f496a209 100644
--- a/src/gui/slrtutorwindow.ui
+++ b/src/gui/slrtutorwindow.ui
@@ -18,16 +18,34 @@
     <normaloff>:/resources/syntaxtutor.png</normaloff>:/resources/syntaxtutor.png</iconset>
   </property>
   <layout class="QVBoxLayout" name="verticalLayout">
+   <property name="spacing">
+    <number>14</number>
+   </property>
+   <property name="leftMargin">
+    <number>18</number>
+   </property>
+   <property name="topMargin">
+    <number>18</number>
+   </property>
+   <property name="rightMargin">
+    <number>18</number>
+   </property>
+   <property name="bottomMargin">
+    <number>18</number>
+   </property>
    <item>
-     <layout class="QHBoxLayout" name="horizontalLayout_3">
+      <layout class="QHBoxLayout" name="horizontalLayout_3">
+      <property name="spacing">
+       <number>10</number>
+      </property>
       <item>
        <widget class="QPushButton" name="backButton">
         <property name="cursor">
          <cursorShape>PointingHandCursor</cursorShape>
         </property>
-        <property name="text">
-         <string>Back</string>
-        </property>
+         <property name="text">
+          <string>Atras</string>
+         </property>
        </widget>
       </item>
       <item>
@@ -126,9 +144,12 @@
       </item>
      </layout>
    </item>
-   <item>
-    <layout class="QHBoxLayout" name="horizontalLayout_2">
-      <item>
+    <item>
+     <layout class="QHBoxLayout" name="horizontalLayout_2">
+      <property name="spacing">
+       <number>16</number>
+      </property>
+       <item>
        <widget class="QListWidget" name="listWidget">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
@@ -163,8 +184,14 @@
       </item>
      </layout>
    </item>
-   <item>
-    <layout class="QHBoxLayout" name="horizontalLayout">
+    <item>
+     <layout class="QHBoxLayout" name="horizontalLayout">
+      <property name="spacing">
+       <number>12</number>
+      </property>
+      <property name="alignment">
+       <set>Qt::AlignVCenter</set>
+      </property>
       <item>
        <widget class="CustomTextEdit" name="userResponse">
         <property name="sizePolicy">
@@ -189,9 +216,15 @@
       </item>
       <item>
        <widget class="QPushButton" name="confirmButton">
-        <property name="cursor">
-         <cursorShape>PointingHandCursor</cursorShape>
-        </property>
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="cursor">
+          <cursorShape>PointingHandCursor</cursorShape>
+         </property>
         <property name="text">
          <string/>
         </property>

From 6a616676f2daef5a5dfe95b2699ae69c8ee6d61c Mon Sep 17 00:00:00 2001
From: jose-rZM <100773386+jose-rZM@users.noreply.github.com>
Date: Fri, 29 May 2026 20:29:26 +0200
Subject: [PATCH 2/6] fix(ui): align text edit and send button

---
 resources/styles/app.qss   |  8 ++++----
 src/gui/lltutorwindow.cpp  | 26 +++++---------------------
 src/gui/lltutorwindow.ui   |  6 +++---
 src/gui/slrtutorwindow.cpp | 22 +++++-----------------
 src/gui/slrtutorwindow.ui  |  6 +++---
 5 files changed, 20 insertions(+), 48 deletions(-)

diff --git a/resources/styles/app.qss b/resources/styles/app.qss
index 90ec64d1..0470999b 100644
--- a/resources/styles/app.qss
+++ b/resources/styles/app.qss
@@ -340,7 +340,7 @@ QTextEdit#userResponse:disabled {
     border: 1px solid #444A4D;
 }
 
-QPushButton#confirmButton {
+QToolButton#confirmButton {
     background-color: #11B3BC;
     border: none;
     border-radius: 16px;
@@ -352,15 +352,15 @@ QPushButton#confirmButton {
     icon-size: 22px 22px;
 }
 
-QPushButton#confirmButton:hover {
+QToolButton#confirmButton:hover {
     background-color: #1AC4CD;
 }
 
-QPushButton#confirmButton:pressed {
+QToolButton#confirmButton:pressed {
     background-color: #0A9098;
 }
 
-QPushButton#confirmButton:disabled {
+QToolButton#confirmButton:disabled {
     background-color: #888888;
     color: #DDDDDD;
 }
diff --git a/src/gui/lltutorwindow.cpp b/src/gui/lltutorwindow.cpp
index e228dce1..7e4631f8 100644
--- a/src/gui/lltutorwindow.cpp
+++ b/src/gui/lltutorwindow.cpp
@@ -118,17 +118,14 @@ LLTutorWindow::LLTutorWindow(const Grammar& grammar, TutorialManager* tm,
     ui->setupUi(this);
     ui->backButton->setText(tr("Atras"));
 
-    // -- Confirm Button Icon & Shadow
+    // -- Confirm Button Icon
     ui->confirmButton->setIcon(QIcon(":/resources/send.svg"));
-    auto* shadow = new QGraphicsDropShadowEffect;
-    shadow->setBlurRadius(10);
-    shadow->setOffset(0);
-    shadow->setColor(QColor::fromRgb(0, 200, 214));
-    ui->confirmButton->setGraphicsEffect(shadow);
 
     // -- User Response Box
     ui->userResponse->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    ui->userResponse->setFixedHeight(48);
     ui->userResponse->setPlaceholderText(tr("Introduce aquí tu respuesta."));
+    ui->confirmButton->setFixedSize(48, 48);
 
     // -- Chat Font
     ui->listWidget->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
@@ -1991,21 +1988,8 @@ void LLTutorWindow::on_userResponse_textChanged() {
     int padding       = 20;
     int desiredHeight = lineCount * lineHeight + padding;
 
-    // Establecer mínimo fijo (respetado por el layout)
-    const int minHeight = 45;
-    ui->userResponse->setMinimumHeight(minHeight);
-
-    // Animar el cambio de altura real
-    QPropertyAnimation* animation =
-        new QPropertyAnimation(ui->userResponse, "minimumHeight");
-    animation->setDuration(120);
-    animation->setStartValue(ui->userResponse->height());
-    animation->setEndValue(
-        std::max(minHeight, desiredHeight)); // nunca menos de minHeight
-    animation->start(QAbstractAnimation::DeleteWhenStopped);
-
-    // Establece también el máximo para limitar el crecimiento
-    ui->userResponse->setMaximumHeight(maxLines * lineHeight + padding);
+    const int minHeight = 48;
+    ui->userResponse->setFixedHeight(std::max(minHeight, desiredHeight));
 }
 
 void LLTutorWindow::TeachFirstTree(const std::vector<std::string>&  symbols,
diff --git a/src/gui/lltutorwindow.ui b/src/gui/lltutorwindow.ui
index 40b891c7..48d3e45c 100644
--- a/src/gui/lltutorwindow.ui
+++ b/src/gui/lltutorwindow.ui
@@ -202,8 +202,8 @@
         </property>
         <property name="minimumSize">
          <size>
-          <width>0</width>
-          <height>45</height>
+           <width>0</width>
+           <height>48</height>
          </size>
         </property>
         <property name="maximumSize">
@@ -215,7 +215,7 @@
        </widget>
       </item>
       <item>
-       <widget class="QPushButton" name="confirmButton">
+        <widget class="QToolButton" name="confirmButton">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
            <horstretch>0</horstretch>
diff --git a/src/gui/slrtutorwindow.cpp b/src/gui/slrtutorwindow.cpp
index ffc2b292..cb6c8188 100644
--- a/src/gui/slrtutorwindow.cpp
+++ b/src/gui/slrtutorwindow.cpp
@@ -202,17 +202,14 @@ SLRTutorWindow::SLRTutorWindow(const Grammar& g, TutorialManager* tm,
     ui->setupUi(this);
     ui->backButton->setText(tr("Atras"));
 
-    // -- Confirm Button: Icon + Shadow
+    // -- Confirm Button Icon
     ui->confirmButton->setIcon(QIcon(":/resources/send.svg"));
-    auto* shadow = new QGraphicsDropShadowEffect;
-    shadow->setBlurRadius(10);
-    shadow->setOffset(0);
-    shadow->setColor(QColor::fromRgb(0, 200, 214));
-    ui->confirmButton->setGraphicsEffect(shadow);
 
     ui->userResponse->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    ui->userResponse->setFixedHeight(48);
     ui->userResponse->setPlaceholderText(
         tr("Introduce aquí tu respuesta. Ctrl + Enter para nueva línea."));
+    ui->confirmButton->setFixedSize(48, 48);
 
     // -- Chat Appearance
     ui->listWidget->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
@@ -3089,17 +3086,8 @@ void SLRTutorWindow::on_userResponse_textChanged() {
     int padding       = 20;
     int desiredHeight = lineCount * lineHeight + padding;
 
-    const int minHeight = 45;
-    ui->userResponse->setMinimumHeight(minHeight);
-
-    QPropertyAnimation* animation =
-        new QPropertyAnimation(ui->userResponse, "minimumHeight");
-    animation->setDuration(120);
-    animation->setStartValue(ui->userResponse->height());
-    animation->setEndValue(std::max(minHeight, desiredHeight));
-    animation->start(QAbstractAnimation::DeleteWhenStopped);
-
-    ui->userResponse->setMaximumHeight(maxLines * lineHeight + padding);
+    const int minHeight = 48;
+    ui->userResponse->setFixedHeight(std::max(minHeight, desiredHeight));
 }
 
 QString
diff --git a/src/gui/slrtutorwindow.ui b/src/gui/slrtutorwindow.ui
index f496a209..46d3da4c 100644
--- a/src/gui/slrtutorwindow.ui
+++ b/src/gui/slrtutorwindow.ui
@@ -202,8 +202,8 @@
         </property>
         <property name="minimumSize">
          <size>
-          <width>0</width>
-          <height>45</height>
+           <width>0</width>
+           <height>48</height>
          </size>
         </property>
         <property name="maximumSize">
@@ -215,7 +215,7 @@
        </widget>
       </item>
       <item>
-       <widget class="QPushButton" name="confirmButton">
+        <widget class="QToolButton" name="confirmButton">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
            <horstretch>0</horstretch>

From 6589da149bf5da9cff7f9b9d751c0e871c748c21 Mon Sep 17 00:00:00 2001
From: jose-rZM <100773386+jose-rZM@users.noreply.github.com>
Date: Fri, 29 May 2026 21:18:09 +0200
Subject: [PATCH 3/6] fix(ui): horizontal size of grammar panel

---
 src/gui/lltutorwindow.cpp  | 1 +
 src/gui/slrtutorwindow.cpp | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/gui/lltutorwindow.cpp b/src/gui/lltutorwindow.cpp
index 7e4631f8..66cf2032 100644
--- a/src/gui/lltutorwindow.cpp
+++ b/src/gui/lltutorwindow.cpp
@@ -136,6 +136,7 @@ LLTutorWindow::LLTutorWindow(const Grammar& grammar, TutorialManager* tm,
     grammarView = new GrammarView(ui->gr);
     grammarView->setRows(buildGrammarRows(this->grammar));
     ui->gr->setWidget(grammarView);
+    ui->gr->setMinimumWidth(grammarView->sizeHint().width() + 32);
     ui->gr->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
 
     sortedNonTerminals =
diff --git a/src/gui/slrtutorwindow.cpp b/src/gui/slrtutorwindow.cpp
index cb6c8188..702ece58 100644
--- a/src/gui/slrtutorwindow.cpp
+++ b/src/gui/slrtutorwindow.cpp
@@ -232,6 +232,7 @@ SLRTutorWindow::SLRTutorWindow(const Grammar& g, TutorialManager* tm,
     grammarView = new GrammarView(ui->gr);
     grammarView->setRows(buildGrammarRows(grammar));
     ui->gr->setWidget(grammarView);
+    ui->gr->setMinimumWidth(grammarView->sizeHint().width() + 32);
     ui->gr->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
 
     // ====== Status, Progress & First Message ===================

From 6d34081bdacdb0c40ab1fe9928ac5cd4f19afbd8 Mon Sep 17 00:00:00 2001
From: jose-rZM <100773386+jose-rZM@users.noreply.github.com>
Date: Fri, 29 May 2026 21:27:09 +0200
Subject: [PATCH 4/6] fix(ui): horizontal size of chat panel

---
 src/gui/lltutorwindow.cpp  | 62 +++++++++++++++++++++++++++++++----
 src/gui/lltutorwindow.h    |  2 ++
 src/gui/slrtutorwindow.cpp | 66 ++++++++++++++++++++++++++++++++++----
 src/gui/slrtutorwindow.h   |  4 +++
 4 files changed, 120 insertions(+), 14 deletions(-)

diff --git a/src/gui/lltutorwindow.cpp b/src/gui/lltutorwindow.cpp
index 66cf2032..a3a8591a 100644
--- a/src/gui/lltutorwindow.cpp
+++ b/src/gui/lltutorwindow.cpp
@@ -130,6 +130,7 @@ LLTutorWindow::LLTutorWindow(const Grammar& grammar, TutorialManager* tm,
     // -- Chat Font
     ui->listWidget->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
     ui->listWidget->verticalScrollBar()->setSingleStep(10);
+    ui->listWidget->viewport()->installEventFilter(this);
 
     // ====== Grammar Display & Formatting ======================
     formattedGrammar = FormatGrammar(this->grammar);
@@ -460,6 +461,7 @@ void LLTutorWindow::addMessage(const QString& text, bool isUser) {
     }
 
     QWidget*     messageWidget = new QWidget;
+    messageWidget->setProperty("chatMessage", true);
     QVBoxLayout* mainLayout    = new QVBoxLayout;
     mainLayout->setSpacing(2);
     mainLayout->setContentsMargins(10, 5, 10, 5);
@@ -476,19 +478,22 @@ void LLTutorWindow::addMessage(const QString& text, bool isUser) {
     innerLayout->setSpacing(0);
 
     QLabel* label = new QLabel(messageText);
+    label->setProperty("chatBubble", true);
+    label->setProperty("chatText", messageText);
     label->setWordWrap(true);
     label->setTextInteractionFlags(Qt::TextSelectableByMouse);
     label->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Minimum);
 
+    const int listWidth      = qMax(0, ui->listWidget->viewport()->width());
+    const int bubbleMaxWidth = qMax(180, listWidth - 72);
+
     QFontMetrics fm(label->font());
-    int          textWidth = fm.boundingRect(0, 0, ui->listWidget->width(), 0,
+    int          textWidth = fm.boundingRect(0, 0, bubbleMaxWidth, 0,
                                              Qt::TextWordWrap, text)
                         .width();
 
-    int maxWidth      = ui->listWidget->width() * 0.8;
-    int adjustedWidth = qMin(textWidth + 32, maxWidth);
-    label->setMaximumWidth(adjustedWidth);
-    label->setMinimumWidth(300);
+    int adjustedWidth = qBound(80, textWidth + 32, bubbleMaxWidth);
+    label->setFixedWidth(adjustedWidth);
 
     if (isUser) {
         if (text.isEmpty()) {
@@ -557,7 +562,8 @@ void LLTutorWindow::addMessage(const QString& text, bool isUser) {
     messageWidget->updateGeometry();
 
     QListWidgetItem* item = new QListWidgetItem(ui->listWidget);
-    item->setSizeHint(messageWidget->sizeHint());
+    item->setSizeHint(
+        QSize(qMax(0, listWidth - 2), messageWidget->sizeHint().height()));
 
     if (isUser) {
         lastUserMessage = messageWidget;
@@ -565,6 +571,7 @@ void LLTutorWindow::addMessage(const QString& text, bool isUser) {
 
     ui->listWidget->addItem(item);
     ui->listWidget->setItemWidget(item, messageWidget);
+    relayoutChatMessages();
     ui->listWidget->update();
     ui->listWidget->scrollToBottom();
 }
@@ -1750,12 +1757,49 @@ void LLTutorWindow::addGrammarMessage() {
     mainLayout->addLayout(bubbleLayout);
 
     QListWidgetItem* item = new QListWidgetItem(ui->listWidget);
-    item->setSizeHint(messageWidget->sizeHint());
+    const int listWidth = qMax(0, ui->listWidget->viewport()->width());
+    item->setSizeHint(
+        QSize(qMax(0, listWidth - 2), messageWidget->sizeHint().height()));
     ui->listWidget->addItem(item);
     ui->listWidget->setItemWidget(item, messageWidget);
+    relayoutChatMessages();
     ui->listWidget->scrollToBottom();
 }
 
+void LLTutorWindow::relayoutChatMessages() {
+    const int listWidth = ui->listWidget->viewport()->width();
+    if (listWidth <= 0) {
+        return;
+    }
+
+    const int bubbleMaxWidth = qMax(180, listWidth - 72);
+
+    for (int i = 0; i < ui->listWidget->count(); ++i) {
+        auto* item    = ui->listWidget->item(i);
+        auto* widget  = ui->listWidget->itemWidget(item);
+        if (!widget) {
+            continue;
+        }
+
+        const auto labels = widget->findChildren<QLabel*>();
+        for (auto* label : labels) {
+            if (!label->property("chatBubble").toBool()) {
+                continue;
+            }
+
+            const QString text = label->property("chatText").toString();
+            QFontMetrics   fm(label->font());
+            const int textWidth =
+                fm.boundingRect(0, 0, bubbleMaxWidth, 0, Qt::TextWordWrap, text)
+                    .width();
+            label->setFixedWidth(qBound(80, textWidth + 32, bubbleMaxWidth));
+        }
+
+        widget->updateGeometry();
+        item->setSizeHint(QSize(listWidth - 2, widget->sizeHint().height()));
+    }
+}
+
 void LLTutorWindow::addWidgetMessage(QWidget* widget) {
     QListWidgetItem* item = new QListWidgetItem(ui->listWidget);
     item->setSizeHint(widget->sizeHint());
@@ -2196,6 +2240,10 @@ void LLTutorWindow::drawTree(const std::unique_ptr<TreeNode>& root,
 
 #include <QWheelEvent>
 bool LLTutorWindow::eventFilter(QObject* obj, QEvent* event) {
+    if (obj == ui->listWidget->viewport() && event->type() == QEvent::Resize) {
+        QTimer::singleShot(0, this, [this]() { relayoutChatMessages(); });
+    }
+
     if (auto* view = qobject_cast<QGraphicsView*>(obj)) {
         if (event->type() == QEvent::Wheel) {
             QWheelEvent* wheelEvent = static_cast<QWheelEvent*>(event);
diff --git a/src/gui/lltutorwindow.h b/src/gui/lltutorwindow.h
index e0d4057a..3f5fdf90 100644
--- a/src/gui/lltutorwindow.h
+++ b/src/gui/lltutorwindow.h
@@ -223,6 +223,8 @@ class LLTutorWindow : public QWidget {
     bool eventFilter(QObject* obj, QEvent* event) override;
 
   private:
+    void relayoutChatMessages();
+
     // ====== Core Objects ======================================
     Ui::LLTutorWindow* ui;
     Grammar            grammar;
diff --git a/src/gui/slrtutorwindow.cpp b/src/gui/slrtutorwindow.cpp
index 702ece58..3e85b2fd 100644
--- a/src/gui/slrtutorwindow.cpp
+++ b/src/gui/slrtutorwindow.cpp
@@ -214,6 +214,7 @@ SLRTutorWindow::SLRTutorWindow(const Grammar& g, TutorialManager* tm,
     // -- Chat Appearance
     ui->listWidget->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
     ui->listWidget->verticalScrollBar()->setSingleStep(10);
+    ui->listWidget->viewport()->installEventFilter(this);
 
     // ====== Grammar Formatting =================================
     sortedNonTerminals =
@@ -926,6 +927,7 @@ void SLRTutorWindow::addMessage(const QString& text, bool isUser) {
         lastUserMessageLogIdx = conversationLog.size() - 1;
     }
     QWidget*     messageWidget = new QWidget;
+    messageWidget->setProperty("chatMessage", true);
     QVBoxLayout* mainLayout    = new QVBoxLayout;
     mainLayout->setSpacing(2);
     mainLayout->setContentsMargins(10, 5, 10, 5);
@@ -942,19 +944,22 @@ void SLRTutorWindow::addMessage(const QString& text, bool isUser) {
     innerLayout->setSpacing(0);
 
     QLabel* label = new QLabel(messageText);
+    label->setProperty("chatBubble", true);
+    label->setProperty("chatText", messageText);
     label->setWordWrap(true);
     label->setTextInteractionFlags(Qt::TextSelectableByMouse);
     label->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Minimum);
 
+    const int listWidth      = qMax(0, ui->listWidget->viewport()->width());
+    const int bubbleMaxWidth = qMax(180, listWidth - 72);
+
     QFontMetrics fm(label->font());
-    int          textWidth = fm.boundingRect(0, 0, ui->listWidget->width(), 0,
+    int          textWidth = fm.boundingRect(0, 0, bubbleMaxWidth, 0,
                                              Qt::TextWordWrap, text)
                         .width();
 
-    int maxWidth      = ui->listWidget->width() * 0.8;
-    int adjustedWidth = qMin(textWidth + 32, maxWidth);
-    label->setMaximumWidth(adjustedWidth);
-    label->setMinimumWidth(300);
+    int adjustedWidth = qBound(80, textWidth + 32, bubbleMaxWidth);
+    label->setFixedWidth(adjustedWidth);
 
     if (isUser) {
         if (text.isEmpty()) {
@@ -1023,7 +1028,8 @@ void SLRTutorWindow::addMessage(const QString& text, bool isUser) {
     messageWidget->updateGeometry();
 
     QListWidgetItem* item = new QListWidgetItem(ui->listWidget);
-    item->setSizeHint(messageWidget->sizeHint());
+    item->setSizeHint(
+        QSize(qMax(0, listWidth - 2), messageWidget->sizeHint().height()));
 
     if (isUser) {
         lastUserMessage = messageWidget;
@@ -1031,6 +1037,7 @@ void SLRTutorWindow::addMessage(const QString& text, bool isUser) {
 
     ui->listWidget->addItem(item);
     ui->listWidget->setItemWidget(item, messageWidget);
+    relayoutChatMessages();
     ui->listWidget->update();
     ui->listWidget->scrollToBottom();
 }
@@ -1091,12 +1098,57 @@ void SLRTutorWindow::addGrammarMessage() {
     mainLayout->addLayout(bubbleLayout);
 
     QListWidgetItem* item = new QListWidgetItem(ui->listWidget);
-    item->setSizeHint(messageWidget->sizeHint());
+    const int listWidth = qMax(0, ui->listWidget->viewport()->width());
+    item->setSizeHint(
+        QSize(qMax(0, listWidth - 2), messageWidget->sizeHint().height()));
     ui->listWidget->addItem(item);
     ui->listWidget->setItemWidget(item, messageWidget);
+    relayoutChatMessages();
     ui->listWidget->scrollToBottom();
 }
 
+void SLRTutorWindow::relayoutChatMessages() {
+    const int listWidth = ui->listWidget->viewport()->width();
+    if (listWidth <= 0) {
+        return;
+    }
+
+    const int bubbleMaxWidth = qMax(180, listWidth - 72);
+
+    for (int i = 0; i < ui->listWidget->count(); ++i) {
+        auto* item   = ui->listWidget->item(i);
+        auto* widget = ui->listWidget->itemWidget(item);
+        if (!widget) {
+            continue;
+        }
+
+        const auto labels = widget->findChildren<QLabel*>();
+        for (auto* label : labels) {
+            if (!label->property("chatBubble").toBool()) {
+                continue;
+            }
+
+            const QString text = label->property("chatText").toString();
+            QFontMetrics   fm(label->font());
+            const int textWidth =
+                fm.boundingRect(0, 0, bubbleMaxWidth, 0, Qt::TextWordWrap, text)
+                    .width();
+            label->setFixedWidth(qBound(80, textWidth + 32, bubbleMaxWidth));
+        }
+
+        widget->updateGeometry();
+        item->setSizeHint(QSize(listWidth - 2, widget->sizeHint().height()));
+    }
+}
+
+bool SLRTutorWindow::eventFilter(QObject* obj, QEvent* event) {
+    if (obj == ui->listWidget->viewport() && event->type() == QEvent::Resize) {
+        QTimer::singleShot(0, this, [this]() { relayoutChatMessages(); });
+    }
+
+    return QWidget::eventFilter(obj, event);
+}
+
 void SLRTutorWindow::wrongAnimation() {
     if (lastUserMessage == nullptr) {
         return;
diff --git a/src/gui/slrtutorwindow.h b/src/gui/slrtutorwindow.h
index 13f4cbba..4a18a2c4 100644
--- a/src/gui/slrtutorwindow.h
+++ b/src/gui/slrtutorwindow.h
@@ -237,7 +237,11 @@ class SLRTutorWindow : public QWidget {
         QWidget::closeEvent(event);
     }
 
+    bool eventFilter(QObject* obj, QEvent* event) override;
+
   private:
+    void relayoutChatMessages();
+
     // ====== Helper Functions ======================================
     std::vector<std::string> qvectorToStdVector(const QVector<QString>& qvec);
     QVector<QString> stdVectorToQVector(const std::vector<std::string>& vec);

From 5a09e9f93341eda4ace850367161a769d0940b3e Mon Sep 17 00:00:00 2001
From: jose-rZM <100773386+jose-rZM@users.noreply.github.com>
Date: Fri, 29 May 2026 21:30:45 +0200
Subject: [PATCH 5/6] fix(ui): horizontal size of grammar panel when maximize

---
 src/gui/lltutorwindow.cpp  | 2 +-
 src/gui/slrtutorwindow.cpp | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/gui/lltutorwindow.cpp b/src/gui/lltutorwindow.cpp
index a3a8591a..69f3fdc5 100644
--- a/src/gui/lltutorwindow.cpp
+++ b/src/gui/lltutorwindow.cpp
@@ -137,7 +137,7 @@ LLTutorWindow::LLTutorWindow(const Grammar& grammar, TutorialManager* tm,
     grammarView = new GrammarView(ui->gr);
     grammarView->setRows(buildGrammarRows(this->grammar));
     ui->gr->setWidget(grammarView);
-    ui->gr->setMinimumWidth(grammarView->sizeHint().width() + 32);
+    ui->gr->setFixedWidth(grammarView->sizeHint().width() + 32);
     ui->gr->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
 
     sortedNonTerminals =
diff --git a/src/gui/slrtutorwindow.cpp b/src/gui/slrtutorwindow.cpp
index 3e85b2fd..5e5a949c 100644
--- a/src/gui/slrtutorwindow.cpp
+++ b/src/gui/slrtutorwindow.cpp
@@ -233,7 +233,7 @@ SLRTutorWindow::SLRTutorWindow(const Grammar& g, TutorialManager* tm,
     grammarView = new GrammarView(ui->gr);
     grammarView->setRows(buildGrammarRows(grammar));
     ui->gr->setWidget(grammarView);
-    ui->gr->setMinimumWidth(grammarView->sizeHint().width() + 32);
+    ui->gr->setFixedWidth(grammarView->sizeHint().width() + 32);
     ui->gr->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
 
     // ====== Status, Progress & First Message ===================

From 9d2e1ed22535bdfdc08fd6913571067aa54fdd1f Mon Sep 17 00:00:00 2001
From: jose-rZM <100773386+jose-rZM@users.noreply.github.com>
Date: Fri, 29 May 2026 21:33:26 +0200
Subject: [PATCH 6/6] feat(app): upgrade to 2.0.0-ALPHA

---
 APP_VERSION      | 2 +-
 src/appversion.h | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/APP_VERSION b/APP_VERSION
index ee90284c..60d413dc 100644
--- a/APP_VERSION
+++ b/APP_VERSION
@@ -1 +1 @@
-1.0.4
+2.0.0-ALPHA
diff --git a/src/appversion.h b/src/appversion.h
index f9ed797b..7280c1d1 100644
--- a/src/appversion.h
+++ b/src/appversion.h
@@ -5,11 +5,11 @@
 
 namespace SyntaxTutor::Version {
 inline QString current() {
-    return QStringLiteral("1.0.4");
+    return QStringLiteral("2.0.0-ALPHA");
 }
 
 inline const char* raw() {
-    return "1.0.4";
+    return "2.0.0-ALPHA";
 }
 } // namespace SyntaxTutor::Version
 #endif // APPVERSION_H