From d8187ac52193f4ba9acb0f0b072bc4ab9a2ef1d2 Mon Sep 17 00:00:00 2001
From: Murilo Brito <91566541+moliloo@users.noreply.github.com>
Date: Wed, 6 Aug 2025 05:11:42 -0300
Subject: [PATCH] style level up application (#632)

---
 module/applications/levelup/levelup.mjs       |  10 +-
 styles/less/dialog/index.less                 |   1 +
 styles/less/dialog/level-up/footer.less       |  19 +++
 .../dialog/level-up/navigation-container.less |  20 ++-
 .../dialog/level-up/selections-container.less |  59 +++++++--
 styles/less/dialog/level-up/sheet.less        |   6 +-
 .../dialog/level-up/summary-container.less    |  45 ++++++-
 .../less/dialog/level-up/tiers-container.less |   8 +-
 styles/less/global/elements.less              |  52 +++++---
 templates/components/card-preview.hbs         |  16 ++-
 templates/levelup/tabs/footer.hbs             |  19 +++
 templates/levelup/tabs/selections.hbs         | 122 ++++++++++--------
 templates/levelup/tabs/summary.hbs            |  25 ++--
 templates/levelup/tabs/tab-navigation.hbs     |  32 ++---
 14 files changed, 290 insertions(+), 144 deletions(-)
 create mode 100644 styles/less/dialog/level-up/footer.less

diff --git a/module/applications/levelup/levelup.mjs b/module/applications/levelup/levelup.mjs
index f025c131..cb88e5dd 100644
--- a/module/applications/levelup/levelup.mjs
+++ b/module/applications/levelup/levelup.mjs
@@ -20,10 +20,11 @@ export default class DhlevelUp extends HandlebarsApplicationMixin(ApplicationV2)
 
     static DEFAULT_OPTIONS = {
         tag: 'form',
-        classes: ['daggerheart', 'levelup'],
+        classes: ['daggerheart', 'dialog', 'dh-style', 'levelup'],
         position: { width: 1000, height: 'auto' },
         window: {
-            resizable: true
+            resizable: true,
+            icon: 'fa-solid fa-arrow-turn-up'
         },
         actions: {
             save: this.save,
@@ -45,7 +46,10 @@ export default class DhlevelUp extends HandlebarsApplicationMixin(ApplicationV2)
     static PARTS = {
         tabs: { template: 'systems/daggerheart/templates/levelup/tabs/tab-navigation.hbs' },
         advancements: { template: 'systems/daggerheart/templates/levelup/tabs/advancements.hbs' },
-        selections: { template: 'systems/daggerheart/templates/levelup/tabs/selections.hbs' },
+        selections: {
+            template: 'systems/daggerheart/templates/levelup/tabs/selections.hbs',
+            scrollable: ['.selections']
+        },
         summary: { template: 'systems/daggerheart/templates/levelup/tabs/summary.hbs' },
         footer: { template: 'systems/daggerheart/templates/levelup/tabs/footer.hbs' }
     };
diff --git a/styles/less/dialog/index.less b/styles/less/dialog/index.less
index c6a16527..942016e0 100644
--- a/styles/less/dialog/index.less
+++ b/styles/less/dialog/index.less
@@ -3,6 +3,7 @@
 @import './level-up/sheet.less';
 @import './level-up/summary-container.less';
 @import './level-up/tiers-container.less';
+@import './level-up/footer.less';
 
 @import './resource-dice/sheet.less';
 
diff --git a/styles/less/dialog/level-up/footer.less b/styles/less/dialog/level-up/footer.less
new file mode 100644
index 00000000..daf25b60
--- /dev/null
+++ b/styles/less/dialog/level-up/footer.less
@@ -0,0 +1,19 @@
+@import '../../utils/fonts.less';
+
+.daggerheart.levelup {
+    .tab-footer {
+        margin-top: 10px;
+        .levelup-navigation-actions,
+        .levelup-footer {
+            display: flex;
+            justify-content: end;
+            gap: 10px;
+
+            button {
+                font-family: @font-body;
+                font-weight: bold;
+                height: 40px;
+            }
+        }
+    }
+}
diff --git a/styles/less/dialog/level-up/navigation-container.less b/styles/less/dialog/level-up/navigation-container.less
index 142cf089..d8872931 100644
--- a/styles/less/dialog/level-up/navigation-container.less
+++ b/styles/less/dialog/level-up/navigation-container.less
@@ -1,3 +1,6 @@
+@import '../../utils/colors.less';
+@import '../../utils/fonts.less';
+
 .daggerheart.levelup {
     .levelup-navigation-container {
         display: flex;
@@ -7,23 +10,18 @@
 
         nav {
             flex: 1;
+            border: none;
 
             .levelup-tab-container {
                 display: flex;
                 align-items: center;
                 gap: 4px;
-            }
-        }
 
-        .levelup-navigation-actions {
-            width: 306px;
-            display: flex;
-            justify-content: end;
-            gap: 16px;
-            margin-right: 4px;
-
-            * {
-                width: calc(50% - 8px);
+                a,
+                span {
+                    font-family: @font-body;
+                    color: light-dark(@dark-blue, @golden);
+                }
             }
         }
     }
diff --git a/styles/less/dialog/level-up/selections-container.less b/styles/less/dialog/level-up/selections-container.less
index 552f7c86..843fead0 100644
--- a/styles/less/dialog/level-up/selections-container.less
+++ b/styles/less/dialog/level-up/selections-container.less
@@ -1,18 +1,38 @@
+@import '../../utils/fonts.less';
+@import '../../utils/colors.less';
+
 .daggerheart.levelup {
     .levelup-selections-container {
+        overflow: auto;
+        padding: 10px 0;
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+        max-height: 500px;
+        mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+
         .achievement-experience-cards {
             display: flex;
             gap: 8px;
 
             .achievement-experience-card {
-                border: 1px solid;
-                border-radius: 4px;
-                padding-right: 4px;
-                font-size: 18px;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
+                background: light-dark(@dark-blue-40, @golden-40);
+                border-radius: 3px;
+                padding: 5px;
+                font-size: 16px;
                 gap: 4px;
+                width: 100%;
+
+                input {
+                    background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
+                    width: 80%;
+                }
+
+                span {
+                    font-family: @font-body;
+                }
 
                 .achievement-experience-marker {
                     border: 1px solid;
@@ -30,10 +50,13 @@
         .levelup-card-selection {
             display: flex;
             flex-wrap: wrap;
+            justify-content: center;
             gap: 40px;
+            height: 190px;
 
             .card-preview-container {
-                width: calc(100% * (1 / 5));
+                height: 100%;
+                max-width: 200px;
             }
 
             .levelup-domains-selection-container {
@@ -89,10 +112,30 @@
             }
         }
 
+        .card-section {
+            flex: 1 1 100%;
+
+            .card-section-header {
+                display: flex;
+                align-items: center;
+                gap: 20px;
+                margin-bottom: 10px;
+
+                h3 {
+                    font-family: @font-subtitle;
+                    color: light-dark(@dark, @beige);
+                    margin: 0;
+                    white-space: nowrap;
+                }
+            }
+        }
+
         .levelup-selections-title {
-            display: flex;
-            align-items: center;
-            gap: 4px;
+            margin-left: auto;
+            margin-right: auto;
+            font-size: 22px;
+            font-weight: bold;
+            padding: 0 12px;
         }
 
         .levelup-radio-choices {
diff --git a/styles/less/dialog/level-up/sheet.less b/styles/less/dialog/level-up/sheet.less
index 2f89034c..ade7c8a9 100644
--- a/styles/less/dialog/level-up/sheet.less
+++ b/styles/less/dialog/level-up/sheet.less
@@ -25,9 +25,11 @@
     section {
         .section-container {
             display: flex;
-            flex-direction: column;
-            gap: 8px;
+            flex-direction: row;
+            justify-content: center;
+            gap: 20px 8px;
             margin-top: 8px;
+            flex-wrap: wrap;
         }
     }
 
diff --git a/styles/less/dialog/level-up/summary-container.less b/styles/less/dialog/level-up/summary-container.less
index fbaa783e..eb760cde 100644
--- a/styles/less/dialog/level-up/summary-container.less
+++ b/styles/less/dialog/level-up/summary-container.less
@@ -1,5 +1,28 @@
+@import '../../utils/colors.less';
+@import '../../utils/fonts.less';
+
 .daggerheart.levelup {
+    .summary-header {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        margin-bottom: 10px;
+
+        h3 {
+            font-family: @font-subtitle;
+            color: light-dark(@dark, @beige);
+            margin: 0;
+            white-space: nowrap;
+        }
+    }
     .levelup-summary-container {
+        overflow: auto;
+        padding: 10px 0;
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+        max-height: 700px;
+        mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+
         .level-achievements-container,
         .level-advancements-container {
             display: flex;
@@ -11,7 +34,7 @@
             h4,
             h5 {
                 margin: 0;
-                color: var(--color-text-secondary);
+                color: light-dark(@dark, @beige);
             }
         }
 
@@ -19,7 +42,19 @@
             display: flex;
             align-items: center;
             gap: 4px;
-            font-size: 20px;
+            font-size: 14px;
+            font-family: @font-body;
+            color: light-dark(@dark, @beige);
+        }
+
+        h5.summary-section {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 16px;
+            font-family: @font-subtitle;
+            color: light-dark(@dark, @beige);
+            margin-bottom: 5px;
         }
 
         .summary-selection-container {
@@ -28,9 +63,11 @@
 
             .summary-selection {
                 border: 2px solid;
-                border-radius: 6px;
+                border-radius: 3px;
                 padding: 0 4px;
-                font-size: 18px;
+                font-size: 14px;
+                font-family: @font-body;
+                color: light-dark(@dark, @beige);
             }
         }
     }
diff --git a/styles/less/dialog/level-up/tiers-container.less b/styles/less/dialog/level-up/tiers-container.less
index bf270fe9..1149ede3 100644
--- a/styles/less/dialog/level-up/tiers-container.less
+++ b/styles/less/dialog/level-up/tiers-container.less
@@ -1,3 +1,6 @@
+@import '../../utils/colors.less';
+@import '../../utils/fonts.less';
+
 .daggerheart.levelup {
     .tiers-container {
         display: flex;
@@ -38,7 +41,7 @@
                         height: min-content;
 
                         &.multi {
-                            border: 2px solid grey;
+                            border: 2px solid light-dark(@dark-blue-40, @golden-40);
                             padding: 2.4px 2.5px 0;
                             border-radius: 4px;
                             gap: 2px;
@@ -56,7 +59,8 @@
                 }
 
                 .checkbox-group-label {
-                    font-size: 14px;
+                    font-family: @font-body;
+                    font-size: 12px;
                     font-style: italic;
                 }
             }
diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less
index 4b638748..067b4c86 100755
--- a/styles/less/global/elements.less
+++ b/styles/less/global/elements.less
@@ -674,8 +674,8 @@
 
 .application .component.dh-style.card-preview-container {
     position: relative;
-    border-radius: 6px;
-    border: 2px solid var(--color-tabs-border);
+    border: 2px solid transparent;
+
     display: flex;
     flex-direction: column;
     aspect-ratio: 0.75;
@@ -697,31 +697,41 @@
         justify-content: center;
     }
 
-    .preview-image-container {
-        flex: 1;
-        border-radius: 4px 4px 0 0;
-    }
-
-    .preview-text-container {
-        flex: 1;
-        border-radius: 0 0 4px 4px;
+    .preview-selected-container {
         display: flex;
         flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        font-size: 18px;
-        text-align: center;
-        color: var(--color-text-selection-bg);
-        background-image: url(../assets/parchments/dh-parchment-light.png);
+        border: 2px solid light-dark(@dark-blue-50, @beige-50);
+        border-radius: 6px;
+        max-width: 200px;
+        height: 100%;
+
+        .preview-image-container {
+            width: 100%;
+            flex-grow: 1;
+            object-fit: cover;
+            border-radius: 4px 4px 0 0;
+        }
+
+        .preview-text-container {
+            font-family: @font-body;
+            padding: 10px 0;
+            text-align: center;
+            font-size: 16px;
+            color: light-dark(@beige, @dark);
+            background-image: url(../assets/parchments/dh-parchment-light.png);
+            border-radius: 0 0 4px 4px;
+        }
     }
 
     .preview-empty-container {
+        border-radius: 6px;
         pointer-events: none;
         position: relative;
         display: flex;
         align-items: center;
         justify-content: center;
         flex: 1;
+        border: 2px dashed light-dark(@dark-blue-50, @beige-50);
 
         .preview-empty-inner-container {
             width: 100%;
@@ -729,15 +739,19 @@
             justify-content: center;
 
             .preview-add-icon {
-                font-size: 48px;
+                font-size: 40px;
+                color: light-dark(@dark-blue-50, @beige-50);
             }
 
             .preview-empty-subtext {
                 position: absolute;
-                top: 10%;
-                font-size: 18px;
+                bottom: 5%;
+                font-size: 10px;
                 font-variant: small-caps;
                 text-align: center;
+                font-family: @font-body;
+                font-style: italic;
+                color: light-dark(@dark-blue-60, @beige-80);
             }
         }
     }
diff --git a/templates/components/card-preview.hbs b/templates/components/card-preview.hbs
index 08d4ca01..67388b6d 100644
--- a/templates/components/card-preview.hbs
+++ b/templates/components/card-preview.hbs
@@ -3,13 +3,15 @@
     {{#if (not disabled)}}data-action="viewCompendium"{{/if}} data-compendium="{{this.compendium}}" data-path="{{this.path}}" data-limit="{{this.limit}}"
 >
     {{#if this.img}}
-        <img class="preview-image-container" src="{{this.img}}" />
-        <div class="preview-text-container">
-            {{#if altPartialBlock}}
-                {{> @partial-block }}
-            {{else}}
-                {{this.name}}
-            {{/if}}
+        <div class="preview-selected-container">
+            <img class="preview-image-container" src="{{this.img}}" />
+            <div class="preview-text-container">
+                {{#if altPartialBlock}}
+                    {{> @partial-block }}
+                {{else}}
+                    {{this.name}}
+                {{/if}}
+            </div>
         </div>
     {{else}}
         <div class="preview-empty-container">
diff --git a/templates/levelup/tabs/footer.hbs b/templates/levelup/tabs/footer.hbs
index 85c49a91..1e87a573 100644
--- a/templates/levelup/tabs/footer.hbs
+++ b/templates/levelup/tabs/footer.hbs
@@ -1,4 +1,23 @@
 <section class='tab-footer'>
+    {{#if this.levelupAuto}}
+        <div class="levelup-navigation-actions {{#if (not this.showTabs)}}test{{/if}}">       
+            {{#if this.navigate.previous.fromSummary}}
+                <button data-action="activatePart" data-part="advancements">{{localize "DAGGERHEART.APPLICATIONS.Levelup.navigateToLevelup"}}</button>
+                <button data-action="save" {{#if (not this.levelup.allLevelsFinished)}}disabled{{/if}}>{{localize "Finish Levelup"}}</button>
+            {{else}}
+                {{#if (not this.navigate.previous.disabled)}}
+                    <button data-action="updateCurrentLevel" >{{this.navigate.previous.label}}</button>
+                {{/if}}
+            {{/if}}
+            {{#if this.navigate.next.show}}
+                {{#if this.navigate.next.toSummary}}
+                    <button data-action="activatePart" data-part="summary"  {{#if this.navigate.next.disabled}}disabled{{/if}}>{{localize "DAGGERHEART.APPLICATIONS.Levelup.navigateToSummary"}}</button>
+                {{else}}
+                    <button data-action="updateCurrentLevel" data-forward="true" {{#if this.navigate.next.disabled}}disabled{{/if}}>{{this.navigate.next.label}}</button>
+                {{/if}}
+            {{/if}}
+        </div>
+    {{/if}}
     {{#unless levelupAuto}}
         <div class="levelup-footer">
             <button type="button" data-action="close">{{localize "Cancel"}}</button>
diff --git a/templates/levelup/tabs/selections.hbs b/templates/levelup/tabs/selections.hbs
index f6996934..edfca6b4 100644
--- a/templates/levelup/tabs/selections.hbs
+++ b/templates/levelup/tabs/selections.hbs
@@ -5,55 +5,60 @@
 >
     <div class="section-container levelup-selections-container">
         {{#if (gt this.newExperiences.length 0)}}
-            <div>
-                <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.newExperiences"}}</h3>
+            <fieldset class="new-experience">
+                <legend class="levelup-selections-title">
+                    {{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.newExperiences"}}
+                </legend>
                 <div class="achievement-experience-cards">
                     {{#each this.newExperiences}}
                         <div class="achievement-experience-card">
-                            <div class="flexrow">
-                                <input type="text" name="{{concat "levelup.levels." this.level ".achievements.experiences." this.key ".name"}}" value="{{this.name}}" placeholder="{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experiencePlaceholder"}}" />
-                                <div class="flex0">{{numberFormat this.modifier sign=true}}</div>
-                            </div>
+                            <input type="text" name="{{concat "levelup.levels." this.level ".achievements.experiences." this.key ".name"}}" value="{{this.name}}" placeholder="{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experiencePlaceholder"}}" />
+                            <span>{{numberFormat this.modifier sign=true}}</span>
                             <div class="achievement-experience-marker">
                                 {{#if this.name}}<i class="fa-solid fa-check"></i>{{/if}}
                             </div>
                         </div>
                     {{/each}}
                 </div>
-            </div>
+            </fieldset>
         {{/if}}
 
         {{#if this.traits.active}}
-            <div>
-                <h3 class="levelup-selections-title">
-                    <div>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.traits"}}</div>
-                    <div>{{this.traits.progress.selected}}/{{this.traits.progress.max}}</div>
-                </h3>
+            <fieldset>
+                <legend class="levelup-selections-title">
+                    <span>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.traits"}} {{this.traits.progress.selected}}/{{this.traits.progress.max}}</span>
+                </legend>
 
                 <input type="text" class="levelup-trait-increases" value="{{this.traits.values}}" />
-            </div>
+            </fieldset>
         {{/if}}
 
         {{#if this.experienceIncreases.active}}
-            <div>
-                <h3 class="levelup-selections-title">
-                    <div>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experienceIncreases"}}</div>
-                    <div>{{this.experienceIncreases.progress.selected}}/{{this.experienceIncreases.progress.max}}</div>
-                </h3>
+            <fieldset>
+                <legend class="levelup-selections-title">
+                    <span>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experienceIncreases"}} {{this.experienceIncreases.progress.selected}}/{{this.experienceIncreases.progress.max}}</span>
+                </legend>
 
                 <input type="text" class="levelup-experience-increases" value="{{this.experienceIncreases.values}}" />
-            </div>
+            </fieldset>
         {{/if}}
 
         {{#if (gt this.domainCards.length 0)}}
-            <div>
-                <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h3>
+            <div class="card-section">
+                <div class="card-section-header">
+                    <side-line-div class="invert"></side-line-div>
+                    <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h3>
+                    <side-line-div></side-line-div>
+                </div>
+                <div class="tip">
+
+                </div>
 
                 <div class="levelup-card-selection domain-cards">
                     {{#each this.domainCards}}
                         {{#> "systems/daggerheart/templates/components/card-preview.hbs" this }}
                             {{#each this.emptySubtexts}}
-                                <div>{{this}}</div>
+                                <div class="">{{this}}</div>
                             {{/each}}
                         {{/"systems/daggerheart/templates/components/card-preview.hbs"}}
                     {{/each}}
@@ -62,8 +67,12 @@
         {{/if}}
 
         {{#if (gt this.subclassCards.length 0)}}
-            <div>
-                <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.subclass"}}</h3>
+            <div class="card-section">
+                <div class="card-section-header">
+                    <side-line-div class="invert"></side-line-div>
+                    <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.subclass"}}</h3>
+                    <side-line-div></side-line-div>
+                </div>
 
                 <div class="levelup-card-selection subclass-cards">
                     {{#each this.subclassCards}}
@@ -74,40 +83,47 @@
         {{/if}}
 
         {{#if this.multiclass}}
-            <div>
-                <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.multiclass"}}</h3>
+            <div class="card-section">
+                <div class="card-section-header">
+                    <side-line-div class="invert"></side-line-div>
+                    <h3>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.multiclass"}}</h3>
+                    <side-line-div></side-line-div>
+                </div>
 
                 <div class="levelup-card-selection multiclass-cards" data-path="{{this.multiclass.path}}" data-tier="{{this.multiclass.tier}}" data-min-cost="{{this.multiclass.minCost}}" data-amount="{{this.multiclass.amount}}" data-value="{{this.multiclass.value}}" data-type="{{this.multiclass.type}}">
                     {{#> "systems/daggerheart/templates/components/card-preview.hbs" this.multiclass }}
                         {{this.multiclass.emptySubtext}}
                     {{/"systems/daggerheart/templates/components/card-preview.hbs"}}
-                    <div class="levelup-domains-selection-container">
-                        {{#each this.multiclass.domains}}
-                            <div class="levelup-domain-selection-container {{#if this.disabled}}disabled{{/if}}" {{#if (not this.disabled)}}data-action="selectDomain" data-uuid="{{../multiclass.uuid}}" data-domain="{{this.id}}" data-path="{{../multiclass.path}}" {{/if}}>
-                                <div class="levelup-domain-label">{{localize this.label}}</div>
-                                <img src="{{this.src}}" />
-                                {{#if this.selected}}
-                                    <div class="levelup-domain-selected">
-                                        <i class="fa-solid fa-check"></i>
-                                    </div>
-                                {{/if}}
-                            </div>
-                        {{/each}}
-                    </div>
-
-                    <div class="levelup-domains-selection-container">
-                        {{#each this.multiclass.subclasses}}
-                            <div class="levelup-domain-selection-container {{#if this.disabled}}disabled{{/if}}" {{#if (not this.disabled)}}data-action="selectSubclass" data-uuid="{{../multiclass.uuid}}" data-subclass="{{this.uuid}}" data-path="{{../multiclass.path}}" {{/if}}>
-                                <div class="levelup-domain-label">{{localize this.name}}</div>
-                                <img src="{{this.img}}" />
-                                {{#if this.selected}}
-                                    <div class="levelup-domain-selected">
-                                        <i class="fa-solid fa-check"></i>
-                                    </div>
-                                {{/if}}
-                            </div>
-                        {{/each}}
-                    </div>
+                    {{#if this.multiclass.domains}}
+                        <div class="levelup-domains-selection-container">
+                            {{#each this.multiclass.domains}}
+                                <div class="levelup-domain-selection-container {{#if this.disabled}}disabled{{/if}}" {{#if (not this.disabled)}}data-action="selectDomain" data-uuid="{{../multiclass.uuid}}" data-domain="{{this.id}}" data-path="{{../multiclass.path}}" {{/if}}>
+                                    <div class="levelup-domain-label">{{localize this.label}}</div>
+                                    <img src="{{this.src}}" />
+                                    {{#if this.selected}}
+                                        <div class="levelup-domain-selected">
+                                            <i class="fa-solid fa-check"></i>
+                                        </div>
+                                    {{/if}}
+                                </div>
+                            {{/each}}
+                        </div>
+                    {{/if}}
+                    {{#if this.multiclass.subclasses}}
+                        <div class="levelup-domains-selection-container">
+                            {{#each this.multiclass.subclasses}}
+                                <div class="levelup-domain-selection-container {{#if this.disabled}}disabled{{/if}}" {{#if (not this.disabled)}}data-action="selectSubclass" data-uuid="{{../multiclass.uuid}}" data-subclass="{{this.uuid}}" data-path="{{../multiclass.path}}" {{/if}}>
+                                    <div class="levelup-domain-label">{{localize this.name}}</div>
+                                    <img src="{{this.img}}" />
+                                    {{#if this.selected}}
+                                        <div class="levelup-domain-selected">
+                                            <i class="fa-solid fa-check"></i>
+                                        </div>
+                                    {{/if}}
+                                </div>
+                            {{/each}}
+                        </div>
+                    {{/if}}
                 </div>
             </div>
         {{/if}}
diff --git a/templates/levelup/tabs/summary.hbs b/templates/levelup/tabs/summary.hbs
index 78220b23..a57b820a 100644
--- a/templates/levelup/tabs/summary.hbs
+++ b/templates/levelup/tabs/summary.hbs
@@ -3,6 +3,13 @@
     data-tab='{{tabs.summary.id}}'
     data-group='{{tabs.summary.group}}'
 >
+
+    <div class="summary-header">
+        <side-line-div class="invert"></side-line-div>
+        <h3>{{localize tabs.summary.label}}</h3>
+        <side-line-div></side-line-div>
+    </div>
+
     <div class="section-container levelup-summary-container">
         {{#if this.achievements}}
             <fieldset>
@@ -35,7 +42,7 @@
                     {{/if}}
                     {{#if this.achievements.domainCards.shown}}
                         <div>
-                            <h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h5>
+                            <h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h5>
                             <div class="summary-selection-container">
                                 {{#each this.achievements.domainCards.values}}
                                     <div class="summary-selection">{{this.name}}</div>
@@ -45,7 +52,7 @@
                     {{/if}}
                     {{#if this.achievements.experiences.shown}}
                         <div>
-                            <h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.newExperiences"}}</h5>
+                            <h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.newExperiences"}}</h5>
                             <div class="summary-selection-container">
                                 {{#each this.achievements.experiences.values}}
                                     <div class="summary-selection">{{this.name}} {{numberFormat this.modifier sign=true}}</div>
@@ -97,7 +104,7 @@
 
                 {{#if this.advancements.traits}}
                     <div>
-                        <h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.traits"}}</h5>
+                        <h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.traits"}}</h5>
   
                             {{#each this.advancements.traits}}
                                 <div class="increase-container">
@@ -111,7 +118,7 @@
 
                 {{#if this.advancements.domainCards}}
                     <div>
-                        <h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h5>
+                        <h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.domainCards"}}</h5>
                         <div class="summary-selection-container">
                             {{#each this.advancements.domainCards}}
                                 <div class="summary-selection">{{this.name}}</div>
@@ -122,7 +129,7 @@
 
                 {{#if this.advancements.experiences}}
                     <div>
-                        <h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experienceIncreases"}}</h5>
+                        <h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.experienceIncreases"}}</h5>
                         <div class="summary-selection-container">
                             {{#each this.advancements.experiences}}
                                 <div class="summary-selection">{{this.name}} {{numberFormat this.modifier sign=true}}</div>
@@ -133,7 +140,7 @@
 
                 {{#if this.advancements.subclass}}
                     <div>
-                        <h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.subclass"}}</h5>
+                        <h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.subclass"}}</h5>
                         <div class="summary-selection-container">
                             {{#each this.advancements.subclass}}
                                 <div class="summary-selection">{{this.name}} - {{this.featureLabel}}</div>
@@ -145,7 +152,7 @@
                 {{#if this.advancements.multiclass}}
                     {{#with this.advancements.multiclass}}
                         <div>
-                            <h5>{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.multiclass"}}</h5>
+                            <h5 class="summary-section">{{localize "DAGGERHEART.APPLICATIONS.Levelup.summary.multiclass"}}</h5>
                             <div class="summary-selection-container">
                                 <div class="summary-selection">{{this.name}}</div>
                                 <div class="summary-selection">{{this.domain}}</div>
@@ -176,9 +183,5 @@
                 {{/each}}
             </div>
         </fieldset>
-
-        <footer class="levelup-footer">
-            <button data-action="save" {{#if (not this.levelup.allLevelsFinished)}}disabled{{/if}}>{{localize "Finish Levelup"}}</button>
-        </footer>
     </div>
 </section>
\ No newline at end of file
diff --git a/templates/levelup/tabs/tab-navigation.hbs b/templates/levelup/tabs/tab-navigation.hbs
index 990e909d..0a73e5ab 100644
--- a/templates/levelup/tabs/tab-navigation.hbs
+++ b/templates/levelup/tabs/tab-navigation.hbs
@@ -1,3 +1,4 @@
+{{#unless tabs.summary.active}}
 <section class='tab-navigation'>
     {{#if levelupAuto}}
         <line-div></line-div>
@@ -9,36 +10,19 @@
                             <div class="levelup-tab-container">
                                 <a class='{{tab.id}} {{tab.cssClass}}' data-action='tab' data-group='{{tab.group}}' data-tab='{{tab.id}}'>
                                     {{localize tab.label}}
+                                    {{#if tab.progress}}
+                                        <span>{{tab.progress.selected}}/{{tab.progress.max}}</span>
+                                    {{/if}}
                                 </a>
-                                {{#if tab.progress}}
-                                    <div>{{tab.progress.selected}}/{{tab.progress.max}}</div>
-                                {{/if}}
                             </div>
                         {{/if}}
                     {{/each}}
                 </nav>
             {{/if}}
-            {{#if this.levelupAuto}}
-                <div class="levelup-navigation-actions {{#if (not this.showTabs)}}test{{/if}}">       
-                    {{#if this.navigate.previous.fromSummary}}
-                        <button data-action="activatePart" data-part="advancements">{{localize "DAGGERHEART.APPLICATIONS.Levelup.navigateToLevelup"}}</button>
-                    {{else}}
-                        {{#if (not this.navigate.previous.disabled)}}
-                            <button data-action="updateCurrentLevel" >{{this.navigate.previous.label}}</button>
-                        {{/if}}
-                    {{/if}}
-                    {{#if this.navigate.next.show}}
-                        {{#if this.navigate.next.toSummary}}
-                            <button data-action="activatePart" data-part="summary"  {{#if this.navigate.next.disabled}}disabled{{/if}}>{{localize "DAGGERHEART.APPLICATIONS.Levelup.navigateToSummary"}}</button>
-                        {{else}}
-                            <button data-action="updateCurrentLevel" data-forward="true" {{#if this.navigate.next.disabled}}disabled{{/if}}>{{this.navigate.next.label}}</button>
-                        {{/if}}
-                    {{else}}
-                        <div></div>
-                    {{/if}}
-                </div>
-            {{/if}}
         </div>
         <line-div></line-div>
     {{/if}}
-</section>
\ No newline at end of file
+</section>
+{{else}}
+<section></section>
+{{/unless}}
\ No newline at end of file