From 787822b5dad075d8df91a771c0aedf312e6d05d4 Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Fri, 8 May 2026 15:32:50 +0200
Subject: [PATCH 01/13] new signup and finalize page

---
 assets/js/accommodation_widget.js             |  18 +-
 assets/scss/_signup.scss                      | 566 ++++++++++++++++++
 assets/scss/bewelcome.scss                    |   2 +
 src/Form/SignupFormFinalizeType.php           |   2 +-
 templates/base-lite.html.twig                 |  15 +-
 .../profile/accommodation_widget.html.twig    |  18 +-
 templates/signup/confirm.email.html.twig      |  12 +-
 templates/signup/finalize.html.twig           |  74 ++-
 templates/signup/first.step.html.twig         | 113 ++--
 translations/missing/menu.yaml                |   3 +
 translations/missing/validators.yaml          |   3 +
 translations/validators.en.yaml               |   4 +
 12 files changed, 731 insertions(+), 99 deletions(-)
 create mode 100644 assets/scss/_signup.scss
 create mode 100644 translations/missing/validators.yaml
 create mode 100644 translations/validators.en.yaml

diff --git a/assets/js/accommodation_widget.js b/assets/js/accommodation_widget.js
index 426c5cf327..cf65791914 100644
--- a/assets/js/accommodation_widget.js
+++ b/assets/js/accommodation_widget.js
@@ -14,10 +14,12 @@ const radioHandler = (event) => {
             hostingInterest.classList.remove('u:hidden');
             hostingInterest.classList.add('u:block');
         }
-        accommodationRadiobuttons.forEach( (radio) => {
-            radio.parentElement.classList.remove('u:bg-gray-400')
+        accommodationRadiobuttons.forEach((radio) => {
+            const optionContent = radio.parentElement.querySelector('.signup-finalize__accommodation-content');
+            optionContent?.classList.remove('signup-finalize__accommodation-content--active');
         })
-        event.target.parentElement.classList.add('u:bg-gray-400');
+        const selectedOptionContent = event.target.parentElement.querySelector('.signup-finalize__accommodation-content');
+        selectedOptionContent?.classList.add('signup-finalize__accommodation-content--active');
     }
 }
 
@@ -39,15 +41,21 @@ const slider = document.querySelectorAll('input[type="range"]');
 
 function updateValueOutput(value) {
     const valueOutput = document.getElementsByClassName('rangeSlider__value-output');
+    const markerIndex = Math.max(0, Math.min(markers.length - 1, Number(value)));
     if (valueOutput.length) {
-        valueOutput[0].innerHTML = markers[value];
+        valueOutput[0].innerHTML = markers[markerIndex];
     }
 }
 
 const initializeHostingInterestSlider = () => {
+    if (slider.length && Number.parseInt(slider[0].value ?? '0', 10) <= 0) {
+        slider[0].value = '5';
+    }
+
     return rangeSlider.create(slider, {
         onInit: function () {
-            updateValueOutput(0);
+            const currentValue = Number.parseInt(slider[0]?.value ?? '0', 10);
+            updateValueOutput(Number.isNaN(currentValue) ? 5 : currentValue);
         },
         onSlide: function (value, percent, position) {
             updateValueOutput(value);
diff --git a/assets/scss/_signup.scss b/assets/scss/_signup.scss
new file mode 100644
index 0000000000..8b008db81a
--- /dev/null
+++ b/assets/scss/_signup.scss
@@ -0,0 +1,566 @@
+.main--bare {
+  margin-top: 0;
+  margin-bottom: 0;
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - var(--bw-topbar-offset, 64px));
+}
+
+.signup-layout {
+  display: flex;
+  flex: 1 0 auto;
+
+  &__image {
+    display: none;
+    flex: 0 0 50%;
+    position: relative;
+    overflow: hidden;
+
+    @media (min-width: 992px) {
+      display: flex;
+    }
+  }
+
+  &__img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.52) 0%,
+      rgba(0, 0, 0, 0.38) 50%,
+      rgba(0, 0, 0, 0.62) 100%
+    );
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 2.5rem;
+    text-align: center;
+  }
+
+  &__brand {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 2rem;
+  }
+
+  &__logo-icon {
+    width: 56px;
+    height: 56px;
+    flex: 0 0 56px;
+    object-fit: contain;
+  }
+
+  &__logo-text {
+    height: 38px;
+    object-fit: contain;
+    object-position: left center;
+  }
+
+  &__tagline {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1.125rem;
+    max-width: 400px;
+    line-height: 1.65;
+    margin-bottom: 0.75rem;
+  }
+
+  &__subheading {
+    color: rgba(255, 255, 255, 0.92);
+    font-size: 0.9375rem;
+    max-width: 380px;
+    line-height: 1.6;
+    text-align: center;
+    margin-bottom: 0;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
+  }
+
+  &__form-panel {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    background: #fff;
+    overflow-y: auto;
+  }
+
+  &__form-inner {
+    width: 100%;
+    max-width: 460px;
+
+    .o-input {
+      display: block;
+      width: 100%;
+      padding: 0.7rem 1rem;
+      font-size: 1rem;
+      line-height: 1.4;
+      color: #0f172a;
+      background: #f1f5f9;
+      border: 1.5px solid transparent;
+      border-radius: 0.875rem;
+      transition:
+        background-color 0.18s ease,
+        border-color 0.18s ease,
+        box-shadow 0.18s ease;
+
+      &::placeholder {
+        color: #94a3b8;
+      }
+
+      &:focus {
+        outline: none;
+        background: #fff;
+        border-color: #f37000;
+        box-shadow: 0 0 0 4px rgba(243, 112, 0, 0.13);
+      }
+    }
+
+    .o-form-group,
+    .o-form-group-sm {
+      margin-bottom: 0.875rem;
+    }
+
+    .form-text {
+      font-size: 0.78rem;
+      color: #9ca3af;
+      margin-top: 0.2rem;
+      line-height: 1.4;
+    }
+
+    // Keep validation feedback subtle on signup: text only, no badge/box.
+    .invalid-feedback {
+      display: block;
+      margin-top: 0.3rem;
+      padding: 0;
+      background: transparent !important;
+      border: 0;
+      border-radius: 0;
+      color: #dc3545;
+    }
+
+    .form-error-icon {
+      display: none;
+    }
+
+    .form-error-message {
+      color: #dc3545;
+      font-size: 0.82rem;
+      line-height: 1.35;
+    }
+  }
+
+  &__heading {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #111827;
+  }
+
+  &__submit {
+    min-width: 180px;
+    min-height: 2.75rem;
+    padding: 0.75rem 1.5rem;
+    border: 0;
+    border-radius: 999px;
+    color: #fff;
+    font-size: 0.98rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%, #e06000 100%);
+    box-shadow: none;
+    transition: filter 0.15s ease;
+
+    &:hover,
+    &:focus {
+      color: #fff;
+      filter: brightness(1.07);
+    }
+  }
+
+  &__terms {
+    margin-top: 1rem;
+    padding: 1rem 1.25rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    background: #f9fafb;
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: #374151;
+
+    .o-form-group,
+    .o-form-group-sm {
+      margin-bottom: 0;
+    }
+
+    .o-checkbox {
+      margin-bottom: 0;
+    }
+
+    .o-checkbox__label {
+      font-size: 0.875rem;
+      font-weight: 400;
+      color: #374151;
+      line-height: 1.55;
+    }
+
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+
+  &__login-link {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    line-height: 1.2;
+    color: #6b7280;
+    font-size: 0.875rem;
+    text-align: left;
+
+    a {
+      font-weight: 600;
+    }
+  }
+}
+
+.signup-finalize {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+
+  &__inner {
+    width: 100%;
+    min-width: 320px;
+    max-width: 680px;
+    padding: 1.1rem 1.1rem 1rem;
+    background-color: transparent !important;
+    background: transparent !important;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  &__heading {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    color: #111827;
+  }
+
+  &__subheading {
+    color: #6b7280;
+    margin-bottom: 1rem;
+    font-size: 0.9375rem;
+    line-height: 1.5;
+  }
+
+  &__section {
+    margin-bottom: 1rem;
+    padding: 1.2rem 1.35rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.65rem;
+    background: rgba(255, 255, 255, 0.72);
+
+    > :not(.signup-finalize__section-title) {
+      padding-left: 0.35rem;
+      padding-right: 0.35rem;
+    }
+  }
+
+  &__section-title {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    margin: 0 0 0.8rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
+    font-size: 1.02rem;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    color: #1f2937;
+
+    &::before {
+      content: '';
+      width: 0.36rem;
+      height: 0.36rem;
+      border-radius: 999px;
+      background: #f37000;
+      flex: 0 0 auto;
+      box-shadow: 0 0 0 4px rgba(243, 112, 0, 0.12);
+    }
+  }
+
+  &__gender {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.35rem 0.75rem;
+
+    .o-radio-button {
+      position: relative;
+      margin: 0;
+      text-align: center;
+    }
+
+    .o-radio-button__input {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .o-radio-button__input + label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 2.4rem;
+      padding: 0.45rem 0.8rem;
+      border-radius: 999px;
+      border: 1px solid #dbe2ea;
+      background: #f8fafc;
+      color: #475569;
+      font-size: 0.9rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition:
+        background-color 0.16s ease,
+        border-color 0.16s ease,
+        color 0.16s ease,
+        box-shadow 0.16s ease;
+    }
+
+    .o-radio-button__input + label:hover {
+      background: #f1f5f9;
+      border-color: #cbd5e1;
+    }
+
+    .o-radio-button__input:checked + label {
+      color: #fff;
+      border-color: #f37000;
+      background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%, #e06000 100%);
+      box-shadow: 0 2px 8px rgba(243, 112, 0, 0.3);
+    }
+
+    .o-radio-button__input:focus-visible + label {
+      outline: 2px solid rgba(243, 112, 0, 0.35);
+      outline-offset: 2px;
+    }
+  }
+
+  .o-form-group,
+  .o-form-group-sm {
+    margin-bottom: 1.15rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .o-input {
+    display: block;
+    width: 100%;
+    padding: 0.7rem 1rem;
+    font-size: 1rem;
+    line-height: 1.4;
+    color: #0f172a;
+    background: #f1f5f9;
+    border: 1.5px solid transparent;
+    border-radius: 0.875rem;
+    transition:
+      background-color 0.18s ease,
+      border-color 0.18s ease,
+      box-shadow 0.18s ease;
+
+    &::placeholder {
+      color: #94a3b8;
+    }
+
+    &:focus {
+      outline: none;
+      background: #fff;
+      border-color: #f37000;
+      box-shadow: 0 0 0 4px rgba(243, 112, 0, 0.13);
+    }
+  }
+
+  .auto-search-wrapper.loupe {
+    position: relative;
+
+    .o-input.js-location-picker {
+      padding-left: 2.2rem;
+    }
+  }
+
+  .form-text {
+    font-size: 0.78rem;
+    color: #9ca3af;
+    margin-top: 0.2rem;
+    line-height: 1.4;
+  }
+
+  .o-form-group > label,
+  .o-form-group > .o-input-label {
+    display: block;
+    margin-bottom: 0.35rem;
+  }
+
+  .invalid-feedback {
+    display: block;
+    margin-top: 0.3rem;
+    padding: 0;
+    background: transparent !important;
+    border: 0;
+    border-radius: 0;
+    color: #dc3545;
+  }
+
+  .form-error-icon {
+    display: none;
+  }
+
+  .form-error-message {
+    color: #dc3545;
+    font-size: 0.82rem;
+    line-height: 1.35;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.25rem;
+  }
+
+  &__accommodation-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(8.5rem, 11rem));
+    justify-content: center;
+    text-align: center;
+    gap: 0.75rem;
+    margin: 0.65rem 0.35rem 0.35rem;
+  }
+
+  &__accommodation-option {
+    margin: 0;
+    min-height: 2.95rem;
+    padding: 0;
+    border: 0;
+    border-radius: 0.9rem;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: box-shadow 0.16s ease, outline-color 0.16s ease;
+
+    &:hover {}
+
+    &--left {
+    }
+
+    &--right {
+    }
+
+  }
+
+  &__accommodation-content {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 0.65rem;
+    font-size: 0.9rem;
+    line-height: 1.2;
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    min-height: 2.95rem;
+    padding: 0.4rem 0.75rem;
+    border-radius: 0.8rem;
+    color: #fff;
+    transition: filter 0.16s ease, box-shadow 0.16s ease, outline-color 0.16s ease;
+
+    &--no {
+      background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
+    }
+
+    &--yes {
+      background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
+    }
+
+    &--active {
+      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
+      outline: 0;
+      outline-offset: 0;
+
+      small {
+        font-weight: 700;
+        color: #fff;
+      }
+
+      .signup-finalize__accommodation-icon {
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
+      }
+    }
+
+    &--no#{&}--active {
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82), 0 0 0 2px rgba(220, 38, 38, 0.28);
+    }
+
+    &--yes#{&}--active {
+      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82), 0 0 0 2px rgba(22, 163, 74, 0.28);
+    }
+
+    small {
+      display: inline-flex;
+      align-items: center;
+      color: rgba(255, 255, 255, 0.88);
+      transition: font-weight 0.16s ease, color 0.16s ease;
+      font-size: 0.9rem;
+      margin: 0;
+    }
+  }
+
+  &__accommodation-icon {
+    display: inline-flex;
+    width: 1.65rem;
+    height: 1.65rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    font-size: 0.78rem;
+
+    &--no {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    &--yes {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  .o-form-group > .o-input-label {
+    display: block;
+    margin: 0 0.35rem 0.35rem;
+  }
+}
diff --git a/assets/scss/bewelcome.scss b/assets/scss/bewelcome.scss
index b0bb9b6e64..505bf20192 100644
--- a/assets/scss/bewelcome.scss
+++ b/assets/scss/bewelcome.scss
@@ -616,3 +616,5 @@
     object-fit: cover;
   }
 }
+
+@import "signup";
diff --git a/src/Form/SignupFormFinalizeType.php b/src/Form/SignupFormFinalizeType.php
index 435bd32b8e..9979ca1296 100644
--- a/src/Form/SignupFormFinalizeType.php
+++ b/src/Form/SignupFormFinalizeType.php
@@ -133,7 +133,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                     'min' => 0,
                     'max' => 10,
                 ],
-                'data' => 0,
+                'data' => 5,
             ])
             ->add('newsletters', CheckboxType::class, [
                 'label' => 'signup.label.newsletters',
diff --git a/templates/base-lite.html.twig b/templates/base-lite.html.twig
index 929e14357b..7809608727 100644
--- a/templates/base-lite.html.twig
+++ b/templates/base-lite.html.twig
@@ -30,17 +30,8 @@
 
 </head>
 <body>
-    <nav class="navbar navbar-sticky-top navbar-expand-md navbar-dark bg-primary bordert-1 borderb-1">
-        <div class="container-lg">
-            <a class="navbar-brand" href="{{ url('homepage') }}">
-                <div class="u:flex u:flex-row u:h-[40px] u:w-[220px]">
-                    <img class="u:pl-4 u:md:pl-8 u:md:pr-8" src="{{ asset('images/logo_icon_2025.svg') }}" alt="BeWelcome logo"/>
-                    <img class="" src="{{ asset('images/logo_text_2025.svg') }}" alt="BeWelcome text"/>
-                </div>
-            </a>
-        </div>
-    </nav>
-    <main role="main">
+    {% include 'loginbar.html.twig' with { slim_nav: true } %}
+    <main role="main" class="{% block main_class %}{% endblock %}">
         <noscript><div class="container-lg"><div class="alert alert-danger"><p class="h5">You need to activate Javascript for bewelcome.org</p><small>Without it some function won't work.</small></div></div></noscript>
         <div class="container-lg">
             {% for label, messages in app.flashes %}
@@ -55,9 +46,11 @@
                 </div>
             {% endfor %}
         </div>
+        {% block main_content %}
         <div class="container-lg">
             {% block content %}{% endblock %}
         </div>
+        {% endblock main_content %}
     </main>
     {% include 'footer.html.twig' %}
     {{ encore_entry_script_tags('bewelcome') }}
diff --git a/templates/profile/accommodation_widget.html.twig b/templates/profile/accommodation_widget.html.twig
index 157293523c..9760a81015 100644
--- a/templates/profile/accommodation_widget.html.twig
+++ b/templates/profile/accommodation_widget.html.twig
@@ -1,26 +1,32 @@
 <div class="o-form-group u:content-center mt-2 {% if form.accommodation.vars.valid == false %}is-invalid{% endif %}">
   <span class="o-input-label">Accommodation</span>
   {{ form_errors(form.accommodation) }}
-  <div class="u:grid u:grid-cols-2 u:text-center">
-    <label for="{{ form.accommodation.children[0].vars.id }}" style="margin: 0" class="u:rounded-ss-4 u:rounded-es-4 u:p-4 u:bg-gray-200 {% if form.accommodation.vars.value == form.accommodation.children[0].vars.value %}u:bg-gray-400{% endif %} u:hover:bg-gray-400">
+  <div class="signup-finalize__accommodation-grid">
+    <label for="{{ form.accommodation.children[0].vars.id }}" class="signup-finalize__accommodation-option signup-finalize__accommodation-option--left">
       <input type="radio" id="{{ form.accommodation.children[0].vars.id }}"
              name="{{ form.accommodation.children[0].vars.full_name }}"
              value="{{ form.accommodation.children[0].vars.value }}"
              data-username="{{ member.username }}"
-             {% if form.accommodation.vars.value == form.accommodation.children[0].vars.value %}checked="checked"{% endif %}
+             {% if form.accommodation.vars.value is null or form.accommodation.vars.value == form.accommodation.children[0].vars.value %}checked="checked"{% endif %}
              class="noradio js-accommodation">
-      <div class="u:text-12 u:leading-16"><img src="images/icons/no.png" alt="" title=""><br>
+      <div class="signup-finalize__accommodation-content signup-finalize__accommodation-content--no {% if form.accommodation.vars.value is null or form.accommodation.vars.value == form.accommodation.children[0].vars.value %}signup-finalize__accommodation-content--active{% endif %}">
+        <span class="signup-finalize__accommodation-icon signup-finalize__accommodation-icon--no" aria-hidden="true">
+          <i class="fas fa-house"></i>
+        </span>
         <small>{{ form.accommodation.children[0].vars.label|trans }}</small>
       </div>
     </label>
-    <label for="{{ form.accommodation.children[1].vars.id }}" style="margin: 0" class="u:rounded-ee-4 u:rounded-se-4 u:p-4 u:bg-gray-200 {% if form.accommodation.vars.value == form.accommodation.children[1].vars.value %}u:bg-gray-400{% endif %} u:hover:bg-gray-400">
+    <label for="{{ form.accommodation.children[1].vars.id }}" class="signup-finalize__accommodation-option signup-finalize__accommodation-option--right">
       <input type="radio" id="{{ form.accommodation.children[1].vars.id }}"
              name="{{ form.accommodation.children[1].vars.full_name }}"
              value="{{ form.accommodation.children[1].vars.value }}"
              {% if form.accommodation.vars.value == form.accommodation.children[1].vars.value %}checked="checked"{% endif %}
              data-username="{{ member.username }}"
              class="noradio js-accommodation">
-      <div class="u:text-12 u:leading-16"><img src="images/icons/yes.png" alt="" title=""><br>
+      <div class="signup-finalize__accommodation-content signup-finalize__accommodation-content--yes {% if form.accommodation.vars.value == form.accommodation.children[1].vars.value %}signup-finalize__accommodation-content--active{% endif %}">
+        <span class="signup-finalize__accommodation-icon signup-finalize__accommodation-icon--yes" aria-hidden="true">
+          <i class="fas fa-house-user"></i>
+        </span>
         <small>{{ form.accommodation.children[1].vars.label|trans }}</small>
       </div>
     </label>
diff --git a/templates/signup/confirm.email.html.twig b/templates/signup/confirm.email.html.twig
index 2584f228f5..075556abd8 100644
--- a/templates/signup/confirm.email.html.twig
+++ b/templates/signup/confirm.email.html.twig
@@ -5,17 +5,19 @@
 {% endblock stylesheets %}
 
 {% block content %}
-<div class="u:min-w-[320px] u:max-w-[640px] u:m-auto">
+<div class="signup-finalize">
+<div class="signup-finalize__inner">
 
-<h1>{{ 'members.confirm.email'|trans }}</h1>
-    {{ 'members.confirm.email.blurb'|trans|raw }}
+<h1 class="signup-finalize__heading">{{ 'members.confirm.email'|trans }}</h1>
+    <p class="signup-finalize__subheading">{{ 'members.confirm.email.blurb'|trans|striptags }}</p>
     {{ form_start(confirm_email, { 'attr': { autocomplete: 'off', class: 'u:mt-8' } }) }}
     {{ form_row(confirm_email.registration_key) }}
 
-    <div class="u:flex u:justify-end u:mt-8">
-        <input type="submit" class="o-button" value="{{ 'members.confirm.email.button'|trans }}">
+    <div class="signup-finalize__actions">
+        <input type="submit" class="o-button signup-layout__submit" value="{{ 'members.confirm.email.button'|trans }}">
     </div>
 
     {{ form_end(confirm_email) }}
 </div>
+</div>
 {% endblock content %}
diff --git a/templates/signup/finalize.html.twig b/templates/signup/finalize.html.twig
index 67a38926ad..0ec5f9305e 100644
--- a/templates/signup/finalize.html.twig
+++ b/templates/signup/finalize.html.twig
@@ -9,17 +9,20 @@
 {% endblock stylesheets %}
 
 {% block content %}
-<div class="u:min-w-[320px] u:max-w-[640px] u:m-auto">
+<div class="signup-finalize">
+<div class="signup-finalize__inner">
 
-<h1>{{ 'members.finalize.account'|trans }}</h1>
-    {{ 'members.finalize.account.blurb'|trans|raw }}
+<h1 class="signup-finalize__heading">{{ 'members.finalize.account'|trans }}</h1>
+    <p class="signup-finalize__subheading">{{ 'members.finalize.account.blurb'|trans|striptags }}</p>
     {{ form_start(finalize, { 'attr': { autocomplete: 'off', class: 'u:mt-8' } }) }}
-    {{ form_row(finalize.registration_key) }}
-    {{ form_row(finalize.name) }}
-    {{ form_row(finalize.short_name) }}
-    {{ form_row(finalize.mother_tongue) }}
-    {{ form_row(finalize.birthdate) }}
-    <div class="o-form-group u:grid u:grid-cols-3">
+    <section class="signup-finalize__section">
+        <h2 class="signup-finalize__section-title">{{ 'profile'|trans }}</h2>
+        {{ form_row(finalize.registration_key) }}
+        {{ form_row(finalize.name) }}
+        {{ form_row(finalize.short_name) }}
+        {{ form_row(finalize.mother_tongue) }}
+        {{ form_row(finalize.birthdate) }}
+        <div class="o-form-group signup-finalize__gender">
         <div class="u:col-span-3"><label>{{ 'label.gender'|trans }}</label></div>
         <div class="u:col-span-3">{{ form_errors(finalize.gender) }}</div>
         <div class="o-radio-button">
@@ -46,39 +49,44 @@
         <div class="u:col-span-3">
             <small id="{{ finalize.gender.vars.id }}_help" class="form-text text-muted">{{ finalize.gender.vars.help|trans }}</small>
         </div>
-    </div>
+        </div>
+    </section>
     {% do finalize.gender.setRendered %}
-    <div class="o-form-group">
-    <label for="{{ finalize.location.fullname.vars.id}}">{{ finalize.location.vars.label}}</label>
-    {{ form_errors(finalize.location.fullname) }}
-    <div class="auto-search-wrapper max-height loupe">
-        <input type="text" id="{{ finalize.location.fullname.vars.id}}" name="{{ finalize.location.fullname.vars.full_name }}"
-               class="o-input js-location-picker{% if finalize.location.fullname.vars.errors|length > 0 %} is-invalid{% endif %}" autocomplete="off"
-               placeholder="{{ 'trip.leg.location'|trans }}"
-               aria-label="{{ 'trip.leg.location'|trans }}"
-               {% if finalize.location.fullname.vars.value %}value="{{ finalize.location.fullname.vars.value }}"{% endif %}
-        >
-    </div>
-    {{ form_help(finalize.location) }}
-    {% do finalize.location.setRendered %}
-    </div>
+    <section class="signup-finalize__section">
+        <h2 class="signup-finalize__section-title">{{ 'profile.location'|trans }}</h2>
+        <div class="o-form-group">
+            <label for="{{ finalize.location.fullname.vars.id}}">{{ finalize.location.vars.label}}</label>
+            {{ form_errors(finalize.location.fullname) }}
+            <div class="auto-search-wrapper max-height loupe">
+                <input type="text" id="{{ finalize.location.fullname.vars.id}}" name="{{ finalize.location.fullname.vars.full_name }}"
+                       class="o-input js-location-picker{% if finalize.location.fullname.vars.errors|length > 0 %} is-invalid{% endif %}" autocomplete="off"
+                       placeholder="{{ 'trip.leg.location'|trans }}"
+                       aria-label="{{ 'trip.leg.location'|trans }}"
+                       {% if finalize.location.fullname.vars.value %}value="{{ finalize.location.fullname.vars.value }}"{% endif %}
+                >
+            </div>
+            {{ form_help(finalize.location) }}
+            {% do finalize.location.setRendered %}
+        </div>
 
-    {{ form_widget(finalize.location.geoname_id) }}
-    {{ form_widget(finalize.location.latitude) }}
-    {{ form_widget(finalize.location.longitude) }}
+        {{ form_widget(finalize.location.geoname_id) }}
+        {{ form_widget(finalize.location.latitude) }}
+        {{ form_widget(finalize.location.longitude) }}
 
-    {% include 'profile/accommodation_widget.html.twig' with {form: finalize} %}
+        {% include 'profile/accommodation_widget.html.twig' with {form: finalize} %}
+    </section>
 
-    <div class="u:mt-8">
-        <p class="u:text-18 u:mb-8 u:font-600">{{ 'signup.optional'|trans }}</p>
+    <section class="signup-finalize__section">
+        <h2 class="signup-finalize__section-title">{{ 'signup.optional'|trans }}</h2>
         {{ form_row(finalize.newsletters) }}
         {{ form_row(finalize.local_events) }}
         {# {{ form_row(finalize.trips_notifications) }}  #}
-    </div>
-    <div class="u:flex u:justify-end u:mt-8">
-        <input type="submit" class="o-button" value="{{ 'signup.activate'|trans }}">
+    </section>
+    <div class="signup-finalize__actions">
+        <input type="submit" class="o-button signup-layout__submit" value="{{ 'signup.activate'|trans }}">
     </div>
 
     {{ form_end(finalize) }}
 </div>
+</div>
 {% endblock content %}
diff --git a/templates/signup/first.step.html.twig b/templates/signup/first.step.html.twig
index c9aab29f68..8ad4389b47 100644
--- a/templates/signup/first.step.html.twig
+++ b/templates/signup/first.step.html.twig
@@ -10,45 +10,82 @@
     {{ encore_entry_script_tags('password/check') }}
 {% endblock javascripts %}
 
-{% block content %}
-    <div class="u:min-w-[320px] u:max-w-[640px] u:m-auto">
-    <h1>{{ 'signup'|trans }}</h1>
-    {{ form_start(signup, { 'attr': { autocomplete: 'off' } }) }}
-    {% if signup.username.vars.value is empty %}
-        {{ form_row(signup.username, {'attr': {autofocus: 'autofocus'}}) }}
-
-        {{ form_row(signup.email) }}
-    {% else %}
-        {{ form_row(signup.username) }}
-
-        {{ form_row(signup.email, {'attr': {autofocus: 'autofocus'}}) }}
-    {% endif %}
-
-    <div class="o-form-group u:mt-8">
-        {{ form_label(signup.password) }}
-        <div class="u:relative">
-            {{ form_widget(signup.password) }}
-            <button type="button" id="password_show_hide" class="js-password-show-hide u:absolute u:text-gray-50 u:border-0 u:bg-white u:h-full u:top-0 u:end-0" style="height: 38px; margin: 1px; background-color: transparent">
-                <svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path class="block" d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
-                    <circle class="block" cx="12" cy="12" r="3"></circle>
-                </svg>
-            </button>
-        </div>
-        <div class="u:flex u:flex-row u:space-x-4 u:my-4 u:px-8 js-password-strength">
-            <div class="u:grow u:bg-gray-300 u:rounded-4 u:h-4"></div>
-            <div class="u:grow u:bg-gray-300 u:rounded-4 u:h-4"></div>
-            <div class="u:grow u:bg-gray-300 u:rounded-4 u:h-4"></div>
-            <div class="u:grow u:bg-gray-300 u:rounded-4 u:h-4"></div>
-            <div class="u:grow u:bg-gray-300 u:rounded-4 u:h-4"></div>
+{% block main_class %}main--bare{% endblock %}
+
+{% block main_content %}
+<div class="signup-layout">
+    <div class="signup-layout__image" aria-hidden="true">
+        <img class="signup-layout__img"
+             srcset="{{ asset('images/homepicture-1200px_2-min.jpg') }} 1200w, {{ asset('images/homepicture-576px_2-min.jpg') }} 576w"
+             src="{{ asset('images/homepicture-1200px_2-min.jpg') }}"
+             alt="">
+        <div class="signup-layout__overlay">
+            <div class="signup-layout__brand">
+                <img class="signup-layout__logo-icon" src="{{ asset('images/logo_icon_2025.svg') }}" alt="" width="56" height="56">
+                <img class="signup-layout__logo-text" src="{{ asset('images/logo_text_2025.svg') }}" alt="BeWelcome">
+            </div>
+            <p class="signup-layout__tagline">{{ 'home.abstract.bewelcome.cultural' | trans }}</p>
+            <p class="signup-layout__subheading">{{ 'home.bewelcome.free' | trans | escape | replace({
+                '%link_start%': '',
+                '%link_end%': ''
+            }) }}</p>
         </div>
-        {{ form_help(signup.password) }}
     </div>
 
-    {{ form_row(signup.terms_privacy) }}
-    <div class="u:flex u:justify-end">
-        <input type="submit" class="o-button" value="{{ 'signup.join'|trans }}">
-    </div>
-    {{ form_end(signup) }}
+    <div class="signup-layout__form-panel">
+        <div class="signup-layout__form-inner">
+            <h1 class="signup-layout__heading">{{ 'signup' | trans }}</h1>
+
+            {{ form_start(signup, { 'attr': { autocomplete: 'off' } }) }}
+
+            {% if signup.username.vars.value is empty %}
+                {{ form_row(signup.username, {'attr': {autofocus: 'autofocus'}}) }}
+                {{ form_row(signup.email) }}
+            {% else %}
+                {{ form_row(signup.username) }}
+                {{ form_row(signup.email, {'attr': {autofocus: 'autofocus'}}) }}
+            {% endif %}
+
+            <div class="o-form-group u:mt-8">
+                {{ form_label(signup.password) }}
+                <div class="u:relative">
+                    {{ form_widget(signup.password) }}
+                    <button type="button" id="password_show_hide" class="js-password-show-hide u:absolute u:text-gray-50 u:border-0 u:bg-white u:h-full u:top-0 u:end-0" style="height: 38px; margin: 1px; background-color: transparent">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path class="block" d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+                            <circle class="block" cx="12" cy="12" r="3"></circle>
+                        </svg>
+                    </button>
+                </div>
+                <div class="u:flex u:flex-row u:space-x-4 u:my-4 u:px-8 js-password-strength">
+                    <div class="u:grow u:bg-gray-300 u:rounded-4 u:h-4"></div>
+                    <div class="u:grow u:bg-gray-300 u:rounded-4 u:h-4"></div>
+                    <div class="u:grow u:bg-gray-300 u:rounded-4 u:h-4"></div>
+                    <div class="u:grow u:bg-gray-300 u:rounded-4 u:h-4"></div>
+                    <div class="u:grow u:bg-gray-300 u:rounded-4 u:h-4"></div>
+                </div>
+                {{ form_help(signup.password) }}
+            </div>
+
+            <div class="signup-layout__terms">
+                <div class="o-form-group">
+                    {{ form_widget(signup.terms_privacy, {
+                        'label': signup.terms_privacy.vars.label|trans ~ ' ' ~ 'help.terms'|trans,
+                        'label_html': true
+                    }) }}
+                </div>
+            </div>
+
+            <div class="signup-layout__actions">
+                <p class="signup-layout__login-link">
+                    {{ 'menu.already.a.member' | trans }}
+                    <a href="{{ url('homepage') }}">{{ 'login' | trans }}</a>
+                </p>
+                <input type="submit" class="o-button signup-layout__submit" value="{{ 'signup.join' | trans }}">
+            </div>
+
+            {{ form_end(signup) }}
+        </div>
     </div>
-{% endblock content %}
+</div>
+{% endblock main_content %}
diff --git a/translations/missing/menu.yaml b/translations/missing/menu.yaml
index 49ff9c3f3c..a8559aabc6 100644
--- a/translations/missing/menu.yaml
+++ b/translations/missing/menu.yaml
@@ -1,6 +1,9 @@
 menu.not.a.member.yet:
     - 'Not a member yet?'
     - Shown in the menu to point website user to the possibility to sign-up for BeWelcome
+menu.already.a.member:
+    - 'Already a member?'
+    - Shown on the signup page next to the login link
 menu.login.toggle:
     - 'Open/close the menu'
     - Aria label; not visible on the page but useful for people using a screen reader
diff --git a/translations/missing/validators.yaml b/translations/missing/validators.yaml
new file mode 100644
index 0000000000..68f945b960
--- /dev/null
+++ b/translations/missing/validators.yaml
@@ -0,0 +1,3 @@
+signup.error.terms_privacy:
+    - You must agree to the Terms of Use and Privacy Policy to continue.
+    - Validation error shown when the terms checkbox is not checked on the signup page.
diff --git a/translations/validators.en.yaml b/translations/validators.en.yaml
new file mode 100644
index 0000000000..548d22be1e
--- /dev/null
+++ b/translations/validators.en.yaml
@@ -0,0 +1,4 @@
+signup.error.terms_privacy: "You must agree to the Terms of Use and Privacy Policy to continue."
+signup.error.username: "Please enter a username."
+signup.error.email.blank: "Please enter your email address."
+signup.error.password.blank: "Please enter a password."

From 7b92d6c046290b028ecfb90e4b3f43045f20de7f Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Fri, 8 May 2026 19:05:39 +0200
Subject: [PATCH 02/13] finish setup message

---
 assets/scss/_signup.scss | 86 ++++++++++++++++++++++++++++++++++++++++
 templates/base.html.twig | 21 +++++++---
 2 files changed, 102 insertions(+), 5 deletions(-)

diff --git a/assets/scss/_signup.scss b/assets/scss/_signup.scss
index 8b008db81a..8b3ad5d777 100644
--- a/assets/scss/_signup.scss
+++ b/assets/scss/_signup.scss
@@ -564,3 +564,89 @@
     margin: 0 0.35rem 0.35rem;
   }
 }
+
+// Setup completion banner
+.setup-banner {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  margin: 1rem 0 0.25rem;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(37, 99, 235, 0.08) 100%);
+  border: 1px solid rgba(59, 130, 246, 0.22);
+  border-left: 3.5px solid #2563eb;
+  border-radius: 0.875rem;
+
+  &__body {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 0;
+  }
+
+  &__icon {
+    flex: 0 0 auto;
+    width: 2.25rem;
+    height: 2.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(59, 130, 246, 0.1);
+    border-radius: 50%;
+    color: #2563eb;
+  }
+
+  &__message {
+    font-size: 0.9375rem;
+    color: #1f2937;
+    font-weight: 500;
+    line-height: 1.5;
+    margin: 0;
+    min-width: 0;
+  }
+
+  &__action {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.5625rem 1.25rem;
+    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 60%, #1d4ed8 100%);
+    color: #fff !important;
+    border-radius: 999px;
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: filter 0.15s ease, box-shadow 0.15s ease;
+    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
+
+    &:hover,
+    &:focus {
+      filter: brightness(1.07);
+      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.38);
+      color: #fff !important;
+      text-decoration: none;
+    }
+
+    svg {
+      flex: 0 0 auto;
+    }
+  }
+
+  @media (max-width: 576px) {
+    flex-wrap: wrap;
+
+    &__body {
+      flex: 0 0 100%;
+    }
+
+    &__action {
+      flex: 0 0 100%;
+      justify-content: center;
+      margin-top: 0.25rem;
+    }
+  }
+}
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 6bdb314959..df639acc87 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -49,12 +49,23 @@
         {% if not hide_finish_setup is defined %}
           {% if loggedInMember.status == constant('App\\Doctrine\\MemberStatusType::MAIL_CONFIRMED') or
             loggedInMember.status == constant('App\\Doctrine\\MemberStatusType::AWAITING_MAIL_CONFIRMATION') %}
-            <div class="u:flex u:flex-col u:md:flex-row u:justify-between u:mt-8 alert alert-notice">
-              <div>{% set deletionDate = app.user.created|date_modify("+7 days")|format_date('long') %}
-                {{ 'profile.finish.setup'|trans({deletion_date: deletionDate})|raw }}</div>
-              <div><a class="o-button bg-primary white"
-                      href="{{ url('finish_setup', {username: app.user.Username}) }}">{{ 'profile.finish.setup.button'|trans }}</a>
+            {% set deletionDate = app.user.created|date_modify("+7 days")|format_date('long') %}
+            <div class="setup-banner">
+              <div class="setup-banner__body">
+                <div class="setup-banner__icon">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="10"/>
+                    <polyline points="12 6 12 12 16 14"/>
+                  </svg>
+                </div>
+                <p class="setup-banner__message">{{ 'profile.finish.setup'|trans({deletion_date: deletionDate})|raw }}</p>
               </div>
+              <a class="setup-banner__action" href="{{ url('finish_setup', {username: app.user.Username}) }}">
+                {{ 'profile.finish.setup.button'|trans }}
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <polyline points="9 18 15 12 9 6"/>
+                </svg>
+              </a>
             </div>
           {% endif %}
           {% if loggedInMember.status == constant('App\\Doctrine\\MemberStatusType::ACCOUNT_ACTIVATED') %}

From bcddd0710ed29e018084a7737611704bb64bb217 Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Fri, 8 May 2026 19:26:01 +0200
Subject: [PATCH 03/13] logo full

---
 assets/scss/_signup.scss              | 10 ++++++++--
 templates/signup/first.step.html.twig |  3 +--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/assets/scss/_signup.scss b/assets/scss/_signup.scss
index 8b3ad5d777..51a379edfe 100644
--- a/assets/scss/_signup.scss
+++ b/assets/scss/_signup.scss
@@ -51,8 +51,14 @@
   &__brand {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 2rem;
+    justify-content: center;
+    margin-bottom: 1.6rem;
+  }
+
+  &__logo-full {
+    width: min(100%, 19rem);
+    height: auto;
+    object-fit: contain;
   }
 
   &__logo-icon {
diff --git a/templates/signup/first.step.html.twig b/templates/signup/first.step.html.twig
index 8ad4389b47..4a5af60044 100644
--- a/templates/signup/first.step.html.twig
+++ b/templates/signup/first.step.html.twig
@@ -21,8 +21,7 @@
              alt="">
         <div class="signup-layout__overlay">
             <div class="signup-layout__brand">
-                <img class="signup-layout__logo-icon" src="{{ asset('images/logo_icon_2025.svg') }}" alt="" width="56" height="56">
-                <img class="signup-layout__logo-text" src="{{ asset('images/logo_text_2025.svg') }}" alt="BeWelcome">
+                <img class="signup-layout__logo-full" src="{{ asset('images/logo_full_2025.svg') }}" alt="BeWelcome">
             </div>
             <p class="signup-layout__tagline">{{ 'home.abstract.bewelcome.cultural' | trans }}</p>
             <p class="signup-layout__subheading">{{ 'home.bewelcome.free' | trans | escape | replace({

From 87f5bf3918867743bf793c9427f6d7b8a3457df1 Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Fri, 8 May 2026 19:37:05 +0200
Subject: [PATCH 04/13] acomodation switch

---
 assets/scss/_signup.scss | 119 +++++++++++++++++----------------------
 1 file changed, 51 insertions(+), 68 deletions(-)

diff --git a/assets/scss/_signup.scss b/assets/scss/_signup.scss
index 51a379edfe..df9325134c 100644
--- a/assets/scss/_signup.scss
+++ b/assets/scss/_signup.scss
@@ -455,113 +455,96 @@
 
   &__accommodation-grid {
     display: grid;
-    grid-template-columns: repeat(2, minmax(8.5rem, 11rem));
-    justify-content: center;
-    text-align: center;
+    grid-template-columns: repeat(2, 1fr);
     gap: 0.75rem;
-    margin: 0.65rem 0.35rem 0.35rem;
+    margin: 0.65rem 0 0.35rem;
   }
 
   &__accommodation-option {
     margin: 0;
-    min-height: 2.95rem;
     padding: 0;
     border: 0;
-    border-radius: 0.9rem;
     background: transparent;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: box-shadow 0.16s ease, outline-color 0.16s ease;
-
-    &:hover {}
-
-    &--left {
-    }
+    display: block;
 
-    &--right {
+    input[type="radio"] {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
     }
-
   }
 
   &__accommodation-content {
-    display: inline-flex;
+    display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    gap: 0.65rem;
-    font-size: 0.9rem;
-    line-height: 1.2;
-    width: 100%;
-    max-width: none;
-    height: 100%;
-    min-height: 2.95rem;
-    padding: 0.4rem 0.75rem;
-    border-radius: 0.8rem;
-    color: #fff;
-    transition: filter 0.16s ease, box-shadow 0.16s ease, outline-color 0.16s ease;
-
-    &--no {
-      background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
-    }
+    gap: 0.6rem;
+    padding: 0.65rem 1rem;
+    border-radius: 0.875rem;
+    border: 1.5px solid #e5e7eb;
+    background: #f8fafc;
+    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
 
-    &--yes {
-      background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
+    small {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #64748b;
+      margin: 0;
+      transition: color 0.16s ease;
     }
 
-    &--active {
-      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
-      outline: 0;
-      outline-offset: 0;
-
-      small {
-        font-weight: 700;
-        color: #fff;
-      }
-
-      .signup-finalize__accommodation-icon {
-        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
-      }
+    &:hover {
+      border-color: #cbd5e1;
+      background: #f1f5f9;
     }
 
     &--no#{&}--active {
-      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82), 0 0 0 2px rgba(220, 38, 38, 0.28);
+      border-color: #f87171;
+      background: rgba(239, 68, 68, 0.05);
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+
+      small { color: #dc2626; }
     }
 
     &--yes#{&}--active {
-      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
-      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82), 0 0 0 2px rgba(22, 163, 74, 0.28);
-    }
+      border-color: #4ade80;
+      background: rgba(22, 163, 74, 0.05);
+      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
 
-    small {
-      display: inline-flex;
-      align-items: center;
-      color: rgba(255, 255, 255, 0.88);
-      transition: font-weight 0.16s ease, color 0.16s ease;
-      font-size: 0.9rem;
-      margin: 0;
+      small { color: #15803d; }
     }
   }
 
   &__accommodation-icon {
     display: inline-flex;
-    width: 1.65rem;
-    height: 1.65rem;
+    width: 1.75rem;
+    height: 1.75rem;
     align-items: center;
     justify-content: center;
-    border-radius: 999px;
-    font-size: 0.78rem;
+    border-radius: 50%;
+    font-size: 0.85rem;
+    transition: background 0.16s ease, color 0.16s ease;
 
     &--no {
-      color: #fff;
-      background: rgba(255, 255, 255, 0.2);
+      background: #f1f5f9;
+      color: #94a3b8;
     }
 
     &--yes {
-      color: #fff;
-      background: rgba(255, 255, 255, 0.2);
+      background: #f1f5f9;
+      color: #94a3b8;
+    }
+
+    .signup-finalize__accommodation-content--no.signup-finalize__accommodation-content--active & {
+      background: rgba(239, 68, 68, 0.1);
+      color: #ef4444;
+    }
+
+    .signup-finalize__accommodation-content--yes.signup-finalize__accommodation-content--active & {
+      background: rgba(22, 163, 74, 0.1);
+      color: #16a34a;
     }
   }
 

From 36f2b68f4f0ca07c36a1bf1e418f9d87e4ebdf2b Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Fri, 8 May 2026 21:28:11 +0200
Subject: [PATCH 05/13] landing welcome block

---
 .../tailwindcss/layouts/_layouts.general.css  | 297 ++++++++++++++++--
 templates/landing/landing.html.twig           |  94 +++---
 .../landing/widget/accommodation.html.twig    |  22 +-
 .../profilepicturewithaccommodation.html.twig |   2 +-
 4 files changed, 339 insertions(+), 76 deletions(-)

diff --git a/assets/tailwindcss/layouts/_layouts.general.css b/assets/tailwindcss/layouts/_layouts.general.css
index 0449a83bca..3bfeac9f25 100644
--- a/assets/tailwindcss/layouts/_layouts.general.css
+++ b/assets/tailwindcss/layouts/_layouts.general.css
@@ -77,40 +77,301 @@
 
 
 
+/* =========================================================
+   Landing welcome — full redesign
+   ========================================================= */
+
 .l-landing-welcome {
   display: grid;
-  grid-template-columns: 120px 1fr;
-  grid-gap: 32px;
+  grid-template-columns: 100px 1fr minmax(260px, 340px);
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1.25rem 1.75rem;
+  background: linear-gradient(120deg, #fffaf5 0%, #ffffff 55%);
+  border-radius: 1.25rem;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 8px 28px rgba(15, 23, 42, 0.07);
   width: 100%;
 }
 
 @media (max-width: 900px) {
   .l-landing-welcome {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    grid-template-columns: 88px 1fr;
+    margin-top: 0 !important;
+    grid-template-rows: auto auto;
+    gap: 0.75rem;
+    padding: 0.875rem 1rem;
+  }
+
+  .l-welcome-strip__search {
+    grid-column: 1 / -1;
   }
-}
 
-.l-landing-welcome a {
-  color: var(--u-color-bewelcome);
+  .l-welcome-strip__label {
+    font-size: 0.5rem;
+    letter-spacing: 0.03em;
+  }
 }
 
+@media (max-width: 540px) {
+  .l-landing-welcome {
+    grid-template-columns: 76px 1fr;
+    gap: 0.625rem;
+    padding: 0.75rem 0.875rem;
+  }
+
+  .l-welcome-strip__meta {
+    justify-content: flex-start;
+  }
+}
 
+/* ── Avatar ─────────────────────────────────────────────── */
 
+#welcomeavatar .o-avatar__img-wrapper {
+  width: 100px !important;
+  height: 100px !important;
+  border: none !important;
+  border-radius: 50% !important;
+  box-shadow: none !important;
+}
 
-.l-welcome-card {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  border-radius: 16px;
-  box-shadow: 0 10px 30px -3px #d7d7d7;
-  background-color: var(--u-color-white);
+#welcomeavatar .o-avatar--l {
+  width: 100px;
+  grid-template-rows: 100px 1fr;
 }
 
 @media (max-width: 900px) {
-  .l-welcome-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  #welcomeavatar .o-avatar__img-wrapper {
+    width: 88px !important;
+    height: 88px !important;
+  }
+  #welcomeavatar .o-avatar--l {
+    width: 88px;
+    grid-template-rows: 88px 1fr;
+  }
+}
+
+@media (max-width: 540px) {
+  #welcomeavatar .o-avatar__img-wrapper {
+    width: 76px !important;
+    height: 76px !important;
   }
+  #welcomeavatar .o-avatar--l {
+    width: 76px;
+    grid-template-rows: 76px 1fr;
+  }
+}
+
+#welcomeavatar .o-avatar__host-status {
+  display: none;
+}
+
+/* ── Info strip ─────────────────────────────────────────── */
+
+.l-welcome-strip__info {
+  min-width: 0;
+}
+
+.l-welcome-strip__label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #94a3b8;
+  margin: 0 0 0.2rem;
+}
+
+.l-welcome-strip__name-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+.l-welcome-strip__name {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: #0f172a;
+  line-height: 1.2;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.l-welcome-strip__name a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.l-welcome-strip__name a:hover {
+  color: #f37000;
+}
+
+.l-welcome-strip__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.l-welcome-strip__sep {
+  color: #cbd5e1;
+  font-size: 0.875rem;
+  user-select: none;
+}
+
+.l-welcome-strip__not-setup {
+  font-size: 0.875rem;
+  color: #94a3b8;
+  margin: 0;
+}
+
+/* Location button */
+.l-welcome-strip__city-form {
+  display: contents;
+}
+
+.l-welcome-strip__city {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.9375rem !important;
+  font-weight: 500 !important;
+  color: #64748b !important;
+  background: transparent;
+  border: none;
+  padding: 0 !important;
+  margin: 0 !important;
+  cursor: pointer;
+  transition: color 0.15s ease;
+  line-height: 1.4;
+}
+
+.l-welcome-strip__city svg {
+  width: 15px;
+  height: 15px;
+  color: #f37000;
+  flex-shrink: 0;
+}
+
+.l-welcome-strip__city:hover {
+  color: #f37000 !important;
+  text-decoration: none !important;
+}
+
+/* ── Hosting segmented toggle ───────────────────────────── */
+
+.l-hosting-toggle {
+  display: inline-flex;
+  align-items: center;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  padding: 4px;
+  gap: 2px;
+  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+}
+
+.l-hosting-toggle__opt {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.48rem 1rem;
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #94a3b8;
+  text-decoration: none !important;
+  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.l-hosting-toggle__opt:hover {
+  color: #475569;
+  text-decoration: none !important;
+}
+
+.l-hosting-toggle__opt--yes.l-hosting-toggle__opt--active {
+  background: linear-gradient(135deg, #00d068 0%, #00b855 100%);
+  color: #fff;
+  box-shadow: 0 1px 6px rgba(0, 184, 85, 0.35);
+}
+
+.l-hosting-toggle__opt--no.l-hosting-toggle__opt--active {
+  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
+  color: #fff;
+  box-shadow: 0 1px 6px rgba(71, 85, 105, 0.3);
+}
+
+/* ── Search bar ─────────────────────────────────────────── */
+
+.l-welcome-strip__search {
+  width: 100%;
+}
+
+.l-welcome-strip__search-bar {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 999px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.l-welcome-strip__search-bar:focus-within {
+  border-color: #f37000;
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.1), 0 2px 8px rgba(15, 23, 42, 0.06);
+}
+
+.l-welcome-strip__search-bar .auto-search-wrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.l-welcome-strip__search-input {
+  display: block;
+  width: 100%;
+  padding: 0.7rem 0.75rem 0.7rem 35px !important;
+  font-size: 0.9375rem;
+  background: transparent;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  color: #0f172a;
+}
+
+.l-welcome-strip__search-input::placeholder {
+  color: #94a3b8;
+}
+
+.l-welcome-strip__search-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex-shrink: 0;
+  margin: 0.3rem;
+  padding: 0.5rem 1.1rem;
+  background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%, #e06000 100%);
+  color: #fff;
+  border: none;
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  transition: filter 0.15s ease, box-shadow 0.15s ease;
+  box-shadow: 0 2px 8px rgba(243, 112, 0, 0.28);
+}
+
+.l-welcome-strip__search-btn:hover,
+.l-welcome-strip__search-btn:focus {
+  filter: brightness(1.07);
+  box-shadow: 0 4px 14px rgba(243, 112, 0, 0.36);
+  color: #fff;
 }
diff --git a/templates/landing/landing.html.twig b/templates/landing/landing.html.twig
index de04b079e5..6a7d8585dc 100644
--- a/templates/landing/landing.html.twig
+++ b/templates/landing/landing.html.twig
@@ -19,57 +19,55 @@
     member: app.user
     } only %}
 
-	<div class="l-welcome-card">
-
-		<div class="u:flex u:flex-col u:justify-center u:py-16 u:px-24">
-        <p class="u:text-26 u:leading-32 u:font-400 u:font-display u:mb-8">{{ 'landing.welcomeback' | trans }}<span class="u:font-300">{{ macros.profilelink(app.user.Username) }}</span></p>
-            {# accomoodation null indicates that the meber hasn't finished setting up yet #}
-            {% if not app.user.Accommodation is null %}
-			<div class="u:flex u:items-center">
-				{% include 'landing/widget/accommodation.html.twig' with {
-                    member: app.user
-                } only %}
-				<p class="u:text-20 u:leading-26 u:gray-60 u:font-display u:font-300 u:ms-4">in</p>
-				{# Provide a way to search in member's location #}
-                {{ form_start( searchLocation, { 'action': path('search_locations'), 'attr' : {'style' : 'display: inline;'}} ) }}
-				<button type="submit" id="home_updateMap" name="home[updateMap]" class="searchsubmit u:text-22 u:leading-26 u:ms-4 u:mb-0 u:font-display u:font-400 u:text-bewelcome btn">
-					{{ searchLocation.vars.value.location }}
-				</button>
-				{% do searchLocation.updateMap.setRendered %}
-				<div class="d-none invisible">{{ form_rest(searchLocation) }}</div>
-				{{ form_end(searchLocation) }}
-			</div>
-            {% else %}
-                <p>{{ 'profile.created'|trans }}<p>
-            {% endif %}
+	<div class="l-welcome-strip__info">
+		<p class="l-welcome-strip__label">{{ 'landing.welcomeback' | trans }}</p>
+		<div class="l-welcome-strip__name-row">
+			<p class="l-welcome-strip__name">{{ macros.profilelink(app.user.Username) }}</p>
+			{% if not app.user.Accommodation is null %}
+			{{ form_start(searchLocation, { 'action': path('search_locations'), 'attr': {'class': 'l-welcome-strip__city-form'} }) }}
+			<button type="submit" id="home_updateMap" name="home[updateMap]" class="searchsubmit l-welcome-strip__city btn">
+				<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
+				{{ searchLocation.vars.value.location }}
+			</button>
+			{% do searchLocation.updateMap.setRendered %}
+			<div class="d-none invisible">{{ form_rest(searchLocation) }}</div>
+			{{ form_end(searchLocation) }}
+			{% endif %}
 		</div>
-		{# where do you want to go? #}
-		<div class="u:flex u:items-center u:justify-center u:bg-gray-5 u:py-16 u:px-24 u:rounded-r-16">
-			{{ form_start( tinySearch, { 'action': path('search_locations'), 'attr': {'class': 'u:w-full'} } ) }}
-
-			<label for="{{ tinySearch.location.vars.id}}" class="visually-hidden">{{ 'landing.whereyougo' | trans }}</label>
-			<div class="input-group">
-                <div class="auto-search-wrapper max-height loupe">
-                    <input type="text" id="{{ tinySearch.location.vars.id}}" name="{{ tinySearch.location.vars.full_name }}"
-                           class="js-location-picker" autocomplete="off"
-                           placeholder="{{ 'trip.leg.location'|trans }}"
-                           aria-label="{{ 'trip.leg.location'|trans }}"
-                           {% if tinySearch.location.vars.value %}value="{{ tinySearch.location.vars.value }}"{% endif %}
-                    >
-                </div>
-                <div class="u:block">{{ form_errors(tinySearch.location) }}</div>
-                {% do tinySearch.location.setRendered %}
-                <span class="input-group-append">
-					<button type="submit" id="tiny_updateMap" name="{{ tinySearch.updateMap.vars.name }}" class="btn o-button">{{ 'go'|trans }}</button>
-				</span>
-			</div>
-            <div class="u:block">{{ form_errors(tinySearch.location) }}</div>
-            {% do tinySearch.location.setRendered %}
-            {% do tinySearch.updateMap.setRendered %}
-			<div class="d-none" aria-hidden="true">{{ form_rest( tinySearch ) }}</div>
-			{{ form_end( tinySearch ) }}
+		{% if not app.user.Accommodation is null %}
+		<div class="l-welcome-strip__meta">
+			{% include 'landing/widget/accommodation.html.twig' with { member: app.user } only %}
+		</div>
+		{% else %}
+			<p class="l-welcome-strip__not-setup">{{ 'profile.created'|trans }}</p>
+		{% endif %}
+	</div>
 
+	<div class="l-welcome-strip__search">
+		{{ form_start(tinySearch, { 'action': path('search_locations'), 'attr': {'class': 'u:w-full'} }) }}
+		<label for="{{ tinySearch.location.vars.id }}" class="visually-hidden">{{ 'landing.whereyougo' | trans }}</label>
+		<div class="l-welcome-strip__search-bar">
+			<div class="auto-search-wrapper max-height loupe">
+				<input type="text"
+					id="{{ tinySearch.location.vars.id }}"
+					name="{{ tinySearch.location.vars.full_name }}"
+					class="l-welcome-strip__search-input js-location-picker"
+					autocomplete="off"
+					placeholder="{{ 'landing.whereyougo' | trans }}"
+					aria-label="{{ 'landing.whereyougo' | trans }}"
+					{% if tinySearch.location.vars.value %}value="{{ tinySearch.location.vars.value }}"{% endif %}
+				>
+			</div>
+			<button type="submit" id="tiny_updateMap" name="{{ tinySearch.updateMap.vars.name }}" class="l-welcome-strip__search-btn">
+				{{ 'go'|trans }}
+				<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
+			</button>
 		</div>
+		<div class="u:block">{{ form_errors(tinySearch.location) }}</div>
+		{% do tinySearch.location.setRendered %}
+		{% do tinySearch.updateMap.setRendered %}
+		<div class="d-none" aria-hidden="true">{{ form_rest(tinySearch) }}</div>
+		{{ form_end(tinySearch) }}
 	</div>
 </div>
 
diff --git a/templates/landing/widget/accommodation.html.twig b/templates/landing/widget/accommodation.html.twig
index 4c62f3e4ec..f84ced9e6d 100644
--- a/templates/landing/widget/accommodation.html.twig
+++ b/templates/landing/widget/accommodation.html.twig
@@ -1,10 +1,14 @@
-<div id="accommodation" class="btn-group u:mr-4">
-    <button type="button" class="o-button o-button--br-16 dropdown-toggle u:font-700 u:capitalize {% if member.Accommodation == constant('App\\Doctrine\\AccommodationType::YES') %}u:bg-hosting{% else %}u:bg-bewelcome{% endif %}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        {%  if member.Accommodation == constant('App\\Doctrine\\AccommodationType::YES') %}{{ 'hosting' | trans }}{% endif %}
-        {%  if member.Accommodation == constant('App\\Doctrine\\AccommodationType::NO') %}{{ 'not hosting' | trans }}{% endif %}
-    </button>
-    <div class="dropdown-menu hoststatusdropdown">
-        <a id="{{ constant('App\\Doctrine\\AccommodationType::YES') }}" class="hosting dropdown-item u:font-700 u:capitalize" href="#">{{ 'dashboard.hosting.yes' | trans }}</a>
-        <a id="{{ constant('App\\Doctrine\\AccommodationType::NO') }}" class="hosting dropdown-item u:font-700 u:capitalize" href="#">{{ 'dashboard.hosting.no' | trans }}</a>
-    </div>
+<div id="accommodation" class="l-hosting-toggle">
+    <a id="{{ constant('App\\Doctrine\\AccommodationType::YES') }}"
+       class="hosting l-hosting-toggle__opt l-hosting-toggle__opt--yes{% if member.Accommodation == constant('App\\Doctrine\\AccommodationType::YES') %} l-hosting-toggle__opt--active{% endif %}"
+       href="#" title="{{ 'dashboard.hosting.yes'|trans }}">
+        <i class="fas fa-house-user"></i>
+        <span>{{ 'hosting'|trans }}</span>
+    </a>
+    <a id="{{ constant('App\\Doctrine\\AccommodationType::NO') }}"
+       class="hosting l-hosting-toggle__opt l-hosting-toggle__opt--no{% if member.Accommodation == constant('App\\Doctrine\\AccommodationType::NO') %} l-hosting-toggle__opt--active{% endif %}"
+       href="#" title="{{ 'dashboard.hosting.no'|trans }}">
+        <i class="fas fa-house"></i>
+        <span>{{ 'not hosting'|trans }}</span>
+    </a>
 </div>
diff --git a/templates/landing/widget/profilepicturewithaccommodation.html.twig b/templates/landing/widget/profilepicturewithaccommodation.html.twig
index c46d3f2fff..63988f2de1 100644
--- a/templates/landing/widget/profilepicturewithaccommodation.html.twig
+++ b/templates/landing/widget/profilepicturewithaccommodation.html.twig
@@ -1,5 +1,5 @@
 {% import 'macros.twig' as macros %}
-<div class="u:relative u:flex u:items-center" id="welcomeavatar">
+<div class="u:relative u:flex u:items-center" id="welcomeavatar"{% if not member.Accommodation is null %} data-hosting="{{ member.Accommodation == constant('App\\Doctrine\\AccommodationType::YES') ? 'yes' : 'no' }}"{% endif %}>
     <div class="o-avatar o-avatar--l o-avatar--noname o-avatar--shadow">
         {{ macros.roundedavatarstack( member.Username, 120, false, true) }}
         {% if not member.Accommodation is null %}

From 76bae3ed73a89393306afe2c77f15887bcf4a399 Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Sun, 10 May 2026 00:26:47 +0200
Subject: [PATCH 06/13] profile page + toaster

---
 assets/js/profile/profile.js                  |    3 +
 assets/js/profile/show.js                     |   23 +-
 .../tailwindcss/layouts/_layouts.general.css  | 1356 ++++++++++++++++-
 src/Controller/ProfileController.php          |   10 +-
 templates/base.html.twig                      |   30 +-
 templates/profile/content.html.twig           |  759 ++++-----
 templates/profile/header.html.twig            |  337 ++--
 templates/profile/profile.html.twig           |   50 +-
 templates/profile/show.html.twig              |   99 +-
 9 files changed, 2017 insertions(+), 650 deletions(-)

diff --git a/assets/js/profile/profile.js b/assets/js/profile/profile.js
index d96f267abd..f782257cd6 100644
--- a/assets/js/profile/profile.js
+++ b/assets/js/profile/profile.js
@@ -1,3 +1,6 @@
+import { Toast } from 'bootstrap';
+document.querySelectorAll('.p-toast[data-bs-autohide="true"]').forEach(el => new Toast(el).show());
+
 const L = require("leaflet");
 
 const locationMaps = document.querySelectorAll('[id^=location-map]')
diff --git a/assets/js/profile/show.js b/assets/js/profile/show.js
index f87f503fcf..292ab3d1f8 100644
--- a/assets/js/profile/show.js
+++ b/assets/js/profile/show.js
@@ -1,11 +1,12 @@
-const languageSwitch = document.getElementById("language-switch");
-
-languageSwitch.addEventListener("change", e => {
-    const languages = document.querySelectorAll('[id^=profile-language-]');
-    languages.forEach(language => {
-        language.classList.add('u:hidden!');
-    })
-    const current = document.getElementById("profile-language-" + e.target.value);
-    current.classList.remove('u:hidden!')
-})
-
+import { Tooltip } from 'bootstrap';
+
+document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new Tooltip(el));
+
+document.querySelectorAll('.p-lang-pill').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('[id^=profile-language-]').forEach(el => el.classList.add('u:hidden!'));
+        document.getElementById('profile-language-' + btn.dataset.lang).classList.remove('u:hidden!');
+        document.querySelectorAll('.p-lang-pill').forEach(b => b.classList.remove('p-lang-pill--active'));
+        btn.classList.add('p-lang-pill--active');
+    });
+});
diff --git a/assets/tailwindcss/layouts/_layouts.general.css b/assets/tailwindcss/layouts/_layouts.general.css
index 3bfeac9f25..e51049fccf 100644
--- a/assets/tailwindcss/layouts/_layouts.general.css
+++ b/assets/tailwindcss/layouts/_layouts.general.css
@@ -87,7 +87,7 @@
   align-items: center;
   gap: 1.5rem;
   padding: 1.25rem 1.75rem;
-  background: linear-gradient(120deg, #fffaf5 0%, #ffffff 55%);
+  background: #ffffff;
   border-radius: 1.25rem;
   box-shadow:
     0 1px 3px rgba(15, 23, 42, 0.04),
@@ -375,3 +375,1357 @@
   box-shadow: 0 4px 14px rgba(243, 112, 0, 0.36);
   color: #fff;
 }
+
+
+/* =========================================================
+   Profile — full redesign
+   ========================================================= */
+
+/* ── Hero cover ─────────────────────────────────────────── */
+
+/* ═══════════════════════════════════════════════════════════
+   PROFILE HERO  –  LinkedIn-style
+   ══════════════════════════════════════════════════════════ */
+
+main:has(.p-hero) {
+  margin-top: 0 !important;
+}
+
+.p-hero {
+  background: #fff;
+  border-radius: 0;
+  box-shadow: 0 1px 4px rgba(15,23,42,0.08);
+  overflow: hidden;
+  margin-bottom: 0;
+  position: relative;
+}
+
+/* Banner = map or fallback */
+.p-hero__banner {
+  height: 180px;
+  position: relative;
+  z-index: 1;
+}
+
+.p-hero__banner .leaflet-tile-pane {
+  filter: grayscale(1) brightness(1.1) contrast(0.85);
+}
+
+.p-hero__banner--fallback {
+  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+}
+
+/* Body stacks above the Leaflet banner */
+.p-hero__body {
+  position: relative;
+  z-index: 2;
+}
+
+/* Row below banner: avatar col + info */
+.p-hero__body {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.75rem;
+  padding: 0 2rem 1.75rem;
+}
+
+/* ── Avatar col ─────────────────────────────────────────── */
+.p-hero__avatar-col {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: -90px;
+  position: relative;
+  z-index: 10;
+}
+
+.p-hero__avatar-wrap {
+  position: relative;
+  width: 210px;
+  height: 210px;
+  border-radius: 50%;
+  border: 4px solid #fff;
+  box-shadow: 0 4px 16px rgba(15,23,42,0.15);
+  overflow: hidden;
+  background: #f1f5f9;
+  flex-shrink: 0;
+}
+
+.p-hero__avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Activity badge below avatar */
+.p-hero__activity-below {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  border-radius: 999px;
+  padding: 0.22rem 0.65rem;
+  white-space: nowrap;
+}
+
+.p-hero__activity-below i { font-size: 0.4rem; }
+
+.p-hero__activity-label {
+  font-weight: 400;
+  opacity: 0.75;
+  margin-right: 0.1rem;
+}
+
+/* ── Info ───────────────────────────────────────────────── */
+.p-hero__info {
+  flex: 1;
+  min-width: 0;
+  padding-top: 0.875rem;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: 1rem;
+  align-content: start;
+}
+
+/* All content children stay in col 1 */
+.p-hero__top-row,
+.p-hero__location,
+.p-hero__location--empty,
+.p-hero__occupation,
+.p-hero__meta { grid-column: 1; }
+
+/* Actions align with the name row on desktop */
+.p-hero__actions {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: start;
+}
+
+.p-hero__top-row {
+  margin-bottom: 0.25rem;
+}
+
+.p-hero__identity { min-width: 0; }
+
+.p-hero__name-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.p-hero__trophy {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #fef3c7, #fde68a);
+  color: #92400e;
+  border: 1px solid #fcd34d;
+  text-decoration: none !important;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.p-hero__trophy:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
+  color: #78350f;
+}
+
+.p-hero__name {
+  font-size: 1.625rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.p-hero__username {
+  font-size: 0.9375rem;
+  color: #94a3b8;
+  font-weight: 400;
+}
+
+.p-hero__realname {
+  font-size: 0.9375rem;
+  color: #64748b;
+  margin: 0;
+}
+
+.p-hero__location {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.9375rem;
+  color: #475569;
+  margin: 0.5rem 0 0.25rem;
+  flex-wrap: wrap;
+}
+
+.p-hero__location svg { color: #f37000; flex-shrink: 0; }
+.p-hero__location a { color: #f37000; text-decoration: none; }
+.p-hero__location a:hover { color: #c25a00; }
+
+.p-hero__location--empty {
+  color: #94a3b8;
+  font-style: italic;
+  font-size: 0.875rem;
+  margin: 0.5rem 0 0.25rem;
+}
+
+.p-hero__occupation {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  color: #64748b;
+  margin: 0.2rem 0 0;
+}
+
+.p-hero__occupation i { color: #94a3b8; font-size: 0.8125rem; }
+
+/* Meta row */
+.p-hero__meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-top: 0.75rem;
+}
+
+.p-hero__meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  color: #64748b;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  padding: 0.22rem 0.65rem;
+  white-space: nowrap;
+}
+
+.p-hero__meta-item i { font-size: 0.65rem; color: #94a3b8; }
+.p-hero__meta-item--lang { background: #fff; color: #334155; font-weight: 500; }
+.p-hero__meta-item--muted { color: #94a3b8; background: transparent; border-color: transparent; font-size: 0.6875rem; flex-basis: 100%; white-space: normal; }
+
+/* ── Activity badge shared colors ───────────────────────── */
+.p-hero__activity-badge--active  { background: #dcfce7; color: #16a34a; }
+.p-hero__activity-badge--recent  { background: #fef3c7; color: #d97706; }
+.p-hero__activity-badge--inactive { background: #f1f5f9; color: #94a3b8; }
+
+/* ── About me quote block ────────────────────────────────── */
+.p-profile__quote {
+  font-size: 0.9375rem;
+  color: #475569;
+  font-style: italic;
+  background: #f8fafc;
+  border-left: 3px solid #f37000;
+  border-radius: 0 0.375rem 0.375rem 0;
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  position: relative;
+}
+
+.p-profile__quote::before {
+  content: '\201C';
+  font-style: normal;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: #f37000;
+  opacity: 0.5;
+  margin-right: 0.15rem;
+  vertical-align: -0.2rem;
+}
+
+.p-profile__quote::after {
+  content: '\201D';
+  font-style: normal;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: #f37000;
+  opacity: 0.5;
+  margin-left: 0.15rem;
+  vertical-align: -0.2rem;
+}
+
+.p-hero__location {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.9375rem;
+  color: #475569;
+  font-weight: 500;
+  margin: 0 0 0.5rem;
+  flex-wrap: wrap;
+}
+
+.p-hero__location svg {
+  color: #f37000;
+  flex-shrink: 0;
+}
+
+.p-hero__location a {
+  color: #f37000;
+  text-decoration: none;
+}
+
+.p-hero__location a:hover {
+  color: #c25a00;
+}
+
+.p-hero__location--empty {
+  color: #94a3b8;
+  font-style: italic;
+  font-size: 0.875rem;
+  margin: 0 0 0.625rem;
+}
+
+.p-hero__stats {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
+.p-hero__stat {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: #94a3b8;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  padding: 0.2rem 0.6rem;
+  white-space: nowrap;
+}
+
+/* ── Activity badge shared colors ───────────────────────── */
+.p-hero__activity-badge--active {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.p-hero__activity-badge--recent {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.p-hero__activity-badge--inactive {
+  background: #f1f5f9;
+  color: #94a3b8;
+}
+
+/* ── Stat icons ─────────────────────────────────────────── */
+.p-hero__stat-icon {
+  margin-right: 0.3rem;
+  font-size: 0.6rem;
+  color: #94a3b8;
+}
+
+.p-hero__stat-icon--female {
+  color: #ec4899;
+}
+
+.p-hero__stat-icon--male {
+  color: #3b82f6;
+}
+
+.p-hero__stat-icon--other {
+  color: #8b5cf6;
+}
+
+.p-hero__stat-icon--active { color: #16a34a; }
+.p-hero__stat-icon--recent { color: #d97706; }
+.p-hero__stat-icon--inactive { color: #94a3b8; }
+
+.p-hero__stat-icon--active {
+  color: #22c55e;
+}
+
+.p-hero__stat-icon--recent {
+  color: #f59e0b;
+}
+
+.p-hero__stat-icon--inactive {
+  color: #cbd5e1;
+}
+
+/* ── Hosting badge ──────────────────────────────────────── */
+
+.p-hero__hosting-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 0.3rem 0.8rem;
+  white-space: nowrap;
+}
+
+.p-hero__hosting-badge--yes {
+  background: linear-gradient(135deg, #00d068 0%, #00b855 100%);
+  color: #fff;
+  box-shadow: 0 1px 6px rgba(0, 184, 85, 0.25);
+}
+
+.p-hero__hosting-badge--no {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.p-hero__avatar-frame {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
+}
+
+.p-hero__accommodation-badge {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 0.7rem;
+  pointer-events: none;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+  z-index: 11;
+}
+.p-hero__accommodation-badge--yes { background: #00b855; color: #fff; }
+.p-hero__accommodation-badge--no  { background: rgba(255,255,255,0.9); color: #94a3b8; }
+
+/* ── Action buttons ─────────────────────────────────────── */
+
+.p-hero__actions {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.p-hero__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 1rem;
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none !important;
+  cursor: pointer;
+  transition: filter 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+  white-space: nowrap;
+  border: none;
+}
+
+.p-hero__btn--primary {
+  background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%);
+  color: #fff !important;
+  box-shadow: 0 2px 8px rgba(243, 112, 0, 0.25);
+}
+
+.p-hero__btn--primary:hover {
+  filter: brightness(1.07);
+  box-shadow: 0 4px 14px rgba(243, 112, 0, 0.35);
+}
+
+.p-hero__btn--outline {
+  background: #f37000;
+  color: #fff !important;
+  border: none;
+  box-shadow: 0 2px 8px rgba(243, 112, 0, 0.25);
+}
+
+.p-hero__btn--outline:hover {
+  background: #c25a00;
+  box-shadow: 0 4px 14px rgba(243, 112, 0, 0.35);
+}
+
+.p-hero__btn--secondary {
+  background: linear-gradient(135deg, #ff9a2e, #f37000);
+  color: #fff !important;
+  border: none;
+  box-shadow: 0 2px 8px rgba(243, 112, 0, 0.3);
+}
+
+.p-hero__btn--secondary:hover {
+  background: linear-gradient(135deg, #ffaa44, #e06500);
+  box-shadow: 0 4px 14px rgba(243, 112, 0, 0.45);
+}
+
+.p-hero__btn--icon {
+  padding: 0.5rem 0.65rem;
+  background: #f8fafc;
+  color: #64748b !important;
+  border: 1px solid #e2e8f0;
+}
+
+.p-hero__btn--icon:hover {
+  background: #f1f5f9;
+  color: #334155 !important;
+  border-color: #cbd5e1;
+}
+
+.p-hero__btn--muted {
+  color: #94a3b8 !important;
+}
+
+.p-hero__btn--muted:hover {
+  color: #ef4444 !important;
+  border-color: #fca5a5;
+  background: #fef2f2;
+}
+
+.dropdown-toggle-no-arrow::after { display: none; }
+
+.p-hero__dropdown {
+  background: #fff !important;
+  border: 1px solid #e2e8f0 !important;
+  border-radius: 0.75rem !important;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
+  padding: 0.35rem !important;
+  min-width: 190px;
+}
+
+.p-hero__dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 0.875rem;
+  color: #334155;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.p-hero__dropdown-item:hover {
+  background: #f8fafc;
+  color: #0f172a;
+}
+
+.p-hero__dropdown-item--danger { color: #ef4444; }
+.p-hero__dropdown-item--danger:hover { background: #fef2f2; color: #dc2626; }
+
+.p-hero__status-form {
+  display: flex;
+  flex-direction: row;
+  gap: 0.4rem;
+  align-items: center;
+}
+
+/* ── Tab navigation ─────────────────────────────────────── */
+
+.p-hero__tabs {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  border-top: 1px solid #f1f5f9;
+  padding: 0 1.5rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.p-hero__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.p-hero__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.7rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #64748b;
+  text-decoration: none !important;
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.p-hero__tab:hover {
+  color: #334155;
+  border-bottom-color: #e2e8f0;
+}
+
+.p-hero__tab--active {
+  color: #f37000;
+  border-bottom-color: #f37000;
+  font-weight: 600;
+}
+
+.p-hero__tab-count {
+  background: #f1f5f9;
+  color: #64748b;
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.p-hero__tab--active .p-hero__tab-count {
+  background: rgba(243, 112, 0, 0.1);
+  color: #f37000;
+}
+
+/* ── Map ────────────────────────────────────────────────── */
+
+.p-hero__map {
+  width: 100%;
+  height: 90px;
+  border-top: 1px solid #f1f5f9;
+}
+
+.p-hero__map--bottom {
+  height: 220px;
+  border-top: none;
+  border-radius: 1rem;
+  margin-top: 1.5rem;
+  overflow: hidden;
+}
+
+/* ── Profile body layout ────────────────────────────────── */
+
+.p-profile-layout {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: 1.25rem;
+  align-items: start;
+  padding-top: 1.5rem;
+}
+
+.p-profile-main { min-width: 0; }
+
+.p-profile-secondary {
+  min-width: 0;
+  align-self: start;
+  position: sticky;
+  top: 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.p-profile-secondary .card {
+  border-radius: 1rem;
+  border: none;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 16px rgba(15, 23, 42, 0.06);
+  margin-bottom: 0;
+}
+
+.p-profile-secondary .card-header {
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #94a3b8;
+  background: #fff;
+  border-bottom: 1px solid #f8fafc;
+  padding: 0.6rem 0.875rem;
+  border-radius: 1rem 1rem 0 0;
+}
+
+.p-profile-secondary .card-body {
+  padding: 0.75rem 0.875rem !important;
+  font-size: 0.875rem;
+  color: #475569;
+  line-height: 1.6;
+}
+
+/* ── Toasts ─────────────────────────────────────────────── */
+.p-toast {
+  min-width: 280px;
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 20px rgba(15,23,42,0.15);
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+.p-toast--success { background: #16a34a; color: #fff; }
+.p-toast--danger, .p-toast--error { background: #dc2626; color: #fff; }
+.p-toast--warning { background: #d97706; color: #fff; }
+.p-toast--info { background: #2563eb; color: #fff; }
+
+/* ── Global toast notifications (bw-toast) ──────────────── */
+@keyframes bw-toast-in {
+  from { opacity: 0; transform: translateX(1.5rem) scale(0.95); }
+  to   { opacity: 1; transform: translateX(0)       scale(1);    }
+}
+
+.bw-toast {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 0.875rem 0.875rem 1rem;
+  min-width: 280px;
+  max-width: 360px;
+  border-radius: 0.875rem;
+  background: #fff;
+  color: #334155;
+  box-shadow:
+    0 0 0 1px rgba(15, 23, 42, 0.07),
+    0 8px 32px rgba(15, 23, 42, 0.12),
+    0 2px 8px  rgba(15, 23, 42, 0.06);
+  margin-bottom: 0.5rem;
+  border: none !important;
+  animation: bw-toast-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+.bw-toast__icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  font-size: 0.85rem;
+}
+
+.bw-toast__body {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: #334155;
+}
+
+.bw-toast__close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  color: #94a3b8;
+  font-size: 0.75rem;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.bw-toast__close:hover {
+  color: #475569;
+  background: #f1f5f9;
+}
+
+/* Variants — tinted background + matching icon bubble */
+.bw-toast--notice  { background: #eef4fd; }
+.bw-toast--success { background: #f0fdf4; }
+.bw-toast--error   { background: #fef2f2; }
+.bw-toast--warning { background: #fffbeb; }
+
+.bw-toast--notice .bw-toast__icon  { background: rgba(55, 129, 235, 0.14); color: #3781eb; }
+.bw-toast--success .bw-toast__icon { background: rgba( 22, 163,  74, 0.15); color: #16a34a; }
+.bw-toast--error .bw-toast__icon   { background: rgba(220,  38,  38, 0.15); color: #dc2626; }
+.bw-toast--warning .bw-toast__icon { background: rgba(217, 119,   6, 0.15); color: #d97706; }
+
+.bw-toast--notice .bw-toast__body  { color: #1a4d9e; }
+.bw-toast--success .bw-toast__body { color: #15803d; }
+.bw-toast--error .bw-toast__body   { color: #b91c1c; }
+.bw-toast--warning .bw-toast__body { color: #92400e; }
+
+.bw-toast--notice .bw-toast__close  { color: #3781eb; }
+.bw-toast--success .bw-toast__close { color: #16a34a; }
+.bw-toast--error .bw-toast__close   { color: #dc2626; }
+.bw-toast--warning .bw-toast__close { color: #d97706; }
+
+.bw-toast--notice .bw-toast__close:hover  { background: rgba(55, 129, 235, 0.1); }
+.bw-toast--success .bw-toast__close:hover { background: rgba( 22, 163,  74, 0.1); }
+.bw-toast--error .bw-toast__close:hover   { background: rgba(220,  38,  38, 0.1); }
+.bw-toast--warning .bw-toast__close:hover { background: rgba(217, 119,   6, 0.1); }
+
+/* ── About Me: full-bleed flush below hero ──────────────── */
+.p-about-hero {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+  margin-top: 0;
+  margin-bottom: 1.5rem !important;
+}
+.p-about-hero > .card {
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
+}
+.p-about-hero > .card > .card-body {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.p-about-hero > .card > .card-header {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+/* ── Language switcher ──────────────────────────────────── */
+.p-lang-pills {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.p-hero__body-wrap {
+  position: relative;
+}
+
+.p-lang-pills--overlay {
+  position: absolute;
+  top: -38px;
+  right: 0;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(6px);
+  border-radius: 999px;
+  padding: 0.2rem 0.5rem;
+}
+
+.p-lang-pills__globe {
+  font-size: 0.7rem;
+  color: #64748b;
+  margin-right: 0.15rem;
+}
+
+.p-lang-pill {
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #94a3b8;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  line-height: 1.4;
+}
+
+.p-lang-pill:hover {
+  border-color: #f37000;
+  color: #f37000;
+}
+
+.p-lang-pill--active {
+  background: #f37000;
+  border-color: #f37000;
+  color: #fff;
+}
+
+/* ── Sidebar cards ──────────────────────────────────────── */
+
+.p-sidebar-card {
+  background: #fff;
+  border-radius: 1rem;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 16px rgba(15, 23, 42, 0.06);
+  overflow: hidden;
+}
+
+.p-sidebar-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 0.875rem;
+  border-bottom: 1px solid #f8fafc;
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #94a3b8;
+}
+
+.p-sidebar-card__header a {
+  color: #94a3b8;
+  text-decoration: none;
+}
+
+.p-sidebar-card__header a:hover {
+  color: #f37000;
+}
+
+.p-sidebar-card__body {
+  padding: 0.75rem 0.875rem;
+  font-size: 0.875rem;
+  color: #475569;
+  line-height: 1.6;
+}
+
+.p-sidebar-card__lang-level {
+  font-size: 0.625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #94a3b8;
+  margin: 0.625rem 0 0.15rem;
+}
+
+.p-sidebar-card__lang-level:first-child {
+  margin-top: 0;
+}
+
+.p-sidebar-card__lang-list {
+  color: #334155;
+  margin: 0 0 0.2rem;
+  font-size: 0.875rem;
+}
+
+.p-sidebar-card__empty {
+  color: #94a3b8;
+  font-style: italic;
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.p-sidebar-card__group-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
+.p-sidebar-card__group-item:last-of-type {
+  margin-bottom: 0;
+}
+
+.p-sidebar-card__group-item img {
+  width: 38px;
+  height: 38px;
+  border-radius: 0.5rem;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.p-sidebar-card__group-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #334155;
+  text-decoration: none;
+  line-height: 1.3;
+  display: block;
+}
+
+.p-sidebar-card__group-name:hover {
+  color: #f37000;
+}
+
+.p-sidebar-card__more-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8125rem;
+  color: #f37000;
+  text-decoration: none;
+  font-weight: 500;
+  margin-top: 0.5rem;
+}
+
+.p-sidebar-card__count-badge {
+  background: rgba(243, 112, 0, 0.1);
+  color: #f37000;
+  border-radius: 999px;
+  padding: 0.1rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+/* ── Main content cards override ────────────────────────── */
+
+.p-profile-main .card {
+  border-radius: 1rem;
+  border: none;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 16px rgba(15, 23, 42, 0.06);
+  margin-bottom: 1rem;
+}
+
+.p-profile-main .card-header {
+  font-size: 0.8rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  background: #fff;
+  color: #1e293b;
+  border-bottom: none;
+  padding: 0.9rem 1.25rem 1.15rem !important;
+  border-left: none;
+  border-radius: 1rem 1rem 0 0;
+  flex-direction: row !important;
+  flex-wrap: wrap;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 0.5rem;
+  position: relative;
+}
+.p-profile-main .card-header::after {
+  content: '';
+  position: absolute;
+  left: 1.25rem;
+  bottom: 0.55rem;
+  width: 2rem;
+  height: 3px;
+  background: #f37000;
+  border-radius: 2px;
+}
+
+.p-profile-main .card-header a {
+  color: #94a3b8 !important;
+}
+
+.p-profile-main .card-header a:hover {
+  color: #f37000 !important;
+}
+
+.p-profile-main .card-body {
+  padding: 0.75rem 1.25rem 1rem !important;
+  font-size: 0.9375rem;
+  color: #334155;
+  line-height: 1.6;
+}
+
+/* Same horizontal inset as .card-header; first subsection lines up with section title */
+.p-profile-main .card-body > .card-text > :first-child,
+.p-profile-main .card-body > :first-child {
+  margin-top: 0 !important;
+}
+
+.p-profile-main .card-body > .card-text > .h5:first-child {
+  margin-top: 0 !important;
+}
+
+.p-profile-main .h5 {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #f37000;
+  margin-top: 1.1rem;
+  margin-bottom: 0.3rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.p-profile-main .h5::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: #f37000;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* ── Accommodation stats ────────────────────────────────── */
+.p-accom-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.6rem;
+}
+.p-accom-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8125rem;
+  color: #475569;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  padding: 0.3rem 0.75rem;
+}
+.p-accom-chip i { color: #f37000; font-size: 0.7rem; }
+.p-accom-chip strong { color: #1e293b; }
+.p-accom-chip--access { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; }
+.p-accom-chip--access i { color: #2563eb; }
+.p-accom-updated {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.p-accom-cta {
+  margin-top: 1.25rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 768px) {
+  .p-accom-cta { justify-content: center; }
+}
+
+/* ── Comments ───────────────────────────────────────────── */
+.p-comments-counts {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.p-comments-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 0.3rem 0.75rem;
+  text-decoration: none !important;
+  border: 1px solid;
+}
+.p-comments-count--positive { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
+.p-comments-count--positive:hover { background: #dcfce7; }
+.p-comments-count--neutral  { color: #64748b; background: #f8fafc; border-color: #e2e8f0; }
+.p-comments-count--neutral:hover  { background: #f1f5f9; }
+.p-comments-count--negative { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
+.p-comments-count--negative:hover { background: #fee2e2; }
+
+.p-no-comments {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.5rem 1rem;
+  color: #94a3b8;
+  text-align: center;
+}
+.p-no-comments i { font-size: 1.75rem; opacity: 0.4; }
+.p-no-comments p { margin: 0; font-size: 0.9rem; }
+
+/* ── Responsive ─────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .p-profile-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .p-profile-secondary {
+    position: static;
+  }
+
+  .p-hero__banner { height: 150px; }
+  .p-hero__body { padding: 0 1.25rem 1.25rem; gap: 1.25rem; }
+  .p-hero__avatar-col { margin-top: -75px; }
+  .p-hero__avatar-wrap { width: 175px; height: 175px; }
+}
+
+@media (max-width: 540px) {
+  .p-hero__banner { height: 130px; }
+
+  .p-hero__body {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0 1rem 1.25rem;
+    gap: 0;
+  }
+
+  .p-hero__avatar-col {
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 0.75rem;
+    margin-top: -70px;
+    margin-bottom: 0.5rem;
+  }
+
+  .p-hero__avatar-wrap {
+    width: 150px;
+    height: 150px;
+    border-width: 3px;
+  }
+
+  .p-hero__activity-below {
+    font-size: 0.6875rem;
+    padding: 0.2rem 0.5rem;
+  }
+
+  .p-hero__name { font-size: 1.375rem; }
+
+  /* Single column: actions flow after meta chips, above tabs */
+  .p-hero__info {
+    grid-template-columns: 1fr;
+  }
+
+  .p-hero__top-row,
+  .p-hero__location,
+  .p-hero__location--empty,
+  .p-hero__occupation,
+  .p-hero__meta,
+  .p-hero__actions {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .p-hero__actions {
+    padding: 0.75rem 0 0.25rem;
+    flex-wrap: wrap;
+  }
+
+}
+
+/* ── Photo strip (top of profile content) ──────────────── */
+.p-photo-strip {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  margin-bottom: 1rem;
+  border-radius: 0.75rem;
+  overflow-y: hidden;
+}
+
+.p-photo-strip::-webkit-scrollbar { display: none; }
+
+.p-photo-strip__item {
+  flex-shrink: 0;
+  width: 72px;
+  height: 72px;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  scroll-snap-align: start;
+  display: block;
+  background: #f1f5f9;
+}
+
+.p-photo-strip__item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+.p-photo-strip__item:hover img {
+  transform: scale(1.08);
+}
+
+/* ── Profile gallery grid ───────────────────────────────── */
+.p-gallery-card {
+  overflow: hidden;
+}
+
+.p-gallery-card .card-header {
+  padding-bottom: 0.75rem !important;
+}
+
+.p-gallery-card .card-header::after {
+  display: none;
+}
+
+.p-gallery-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 3px;
+  height: 210px;
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.p-gallery-cell:first-child {
+  grid-row: 1 / 3;
+  aspect-ratio: unset;
+}
+
+.p-gallery-cell {
+  position: relative;
+  aspect-ratio: 1;
+  overflow: hidden;
+  display: block;
+  background: #f1f5f9;
+}
+
+.p-gallery-cell img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.25s ease;
+}
+
+.p-gallery-cell:hover img {
+  transform: scale(1.06);
+}
+
+.p-gallery-cell::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,0);
+  transition: background 0.2s ease;
+}
+
+.p-gallery-cell:hover::after {
+  background: rgba(0,0,0,0.12);
+}
+
+.p-gallery-cell--more img {
+  filter: brightness(0.45);
+}
+
+.p-gallery-cell--more:hover img {
+  filter: brightness(0.45);
+  transform: none;
+}
+
+.p-gallery-cell--more::after { display: none; }
+
+.p-gallery-cell__more-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.p-gallery-footer {
+  padding: 0.6rem 1rem;
+  border-top: 1px solid #f1f5f9;
+  font-size: 0.8125rem;
+}
+
+.p-gallery-footer a {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #64748b;
+  text-decoration: none !important;
+  font-weight: 500;
+}
+
+.p-gallery-footer a:hover { color: #334155; }
+
+.p-gallery-footer__count {
+  background: #f1f5f9;
+  color: #64748b;
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
diff --git a/src/Controller/ProfileController.php b/src/Controller/ProfileController.php
index 8f4066a21e..de5fed3ba0 100644
--- a/src/Controller/ProfileController.php
+++ b/src/Controller/ProfileController.php
@@ -667,7 +667,7 @@ private function renderProfile(Member $member, Member $loggedInMember, ?string $
 
         $template = $editMode ? 'profile/edit.html.twig' : 'profile/show.html.twig';
 
-        return $this->render($template, [
+        $params = [
             'member' => $member,
             'comments' => $comments,
             'comments_count' => $commentCounts,
@@ -678,7 +678,13 @@ private function renderProfile(Member $member, Member $loggedInMember, ?string $
             'status_form' => $this->profileModel->getStatusForm($loggedInMember, $member),
             'globals_js_json' => $this->globals->getGlobalsJsAsJson($loggedInMember, $member),
             'submenu' => $this->profileSubmenu->getSubmenu($loggedInMember, $member),
-        ]);
+        ];
+
+        if (!$editMode) {
+            $params['hide_sidebar'] = true;
+        }
+
+        return $this->render($template, $params);
     }
 
     private function getSectionForm(?string $section, Member $member, string $language): ?FormInterface
diff --git a/templates/base.html.twig b/templates/base.html.twig
index df639acc87..6a7cb9d62d 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -39,10 +39,23 @@
 <body>
 {% set sidebar = (submenu is defined) %}
 {% include 'menu.html.twig' %}
+<div id="toasts" class="position-fixed end-0 p-3" style="z-index:1100;top:72px">
+  {% for label, messages in app.flashes %}
+    {% for message in messages %}
+      {% if label == 'success' %}{% set toastClass = 'bw-toast--success' %}{% set icon = 'fa-check-circle' %}
+      {% elseif label == 'danger' or label == 'error' %}{% set toastClass = 'bw-toast--error' %}{% set icon = 'fa-exclamation-circle' %}
+      {% elseif label == 'warning' %}{% set toastClass = 'bw-toast--warning' %}{% set icon = 'fa-exclamation-triangle' %}
+      {% else %}{% set toastClass = 'bw-toast--notice' %}{% set icon = 'fa-bell' %}{% endif %}
+      <div class="bw-toast {{ toastClass }}" role="alert">
+        <div class="bw-toast__icon"><i class="fas {{ icon }}"></i></div>
+        <div class="bw-toast__body">{{ message | raw }}</div>
+        <button type="button" class="bw-toast__close" aria-label="Close" onclick="this.closest('.bw-toast').remove()"><i class="fas fa-times"></i></button>
+      </div>
+    {% endfor %}
+  {% endfor %}
+</div>
 {% block main %}
   <main role="main">
-    <div id="toasts" class="position-fixed w-100 d-flex flex-column px-2" style="z-index:1000">
-    </div>
     {% set contentBlock %}
       {% set loggedInMember = app.user %}
       {% if not loggedInMember is null %}
@@ -86,21 +99,10 @@
           {% endif %}
         {% endif %}
       {% endif %}
-      {% for label, messages in app.flashes %}
-        <div class="row">
-          {% for message in messages %}
-            <div class="col-12">
-              <div class="alert alert-{{ label }}">
-                {{ message | raw }}
-              </div>
-            </div>
-          {% endfor %}
-        </div>
-      {% endfor %}
       {% block content %}{% endblock %}
     {% endset %}
     <div class="container-lg">
-      {% if sidebar %}
+      {% if sidebar and (hide_sidebar is not defined) %}
         <div class="row mt-2">
           <div class="col-12 col-md-9">
             <p class="float-end d-md-none">
diff --git a/templates/profile/content.html.twig b/templates/profile/content.html.twig
index 3073c0a320..d1a1ee7046 100644
--- a/templates/profile/content.html.twig
+++ b/templates/profile/content.html.twig
@@ -2,552 +2,404 @@
 
 {% set address = member.activeAddress %}
 {% set profileTranslation = translated_fields[profile_language] ?? [] %}
+{% set aboutMe = profileTranslation['AboutMe'] ?? '' %}
+{% set occupation = profileTranslation['Occupation'] ?? '' %}
+{% set offerHosts = profileTranslation['OfferHosts'] ?? '' %}
+{% set hobbies = profileTranslation['Hobbies'] ?? '' %}
+{% set books = profileTranslation['Books'] ?? '' %}
+{% set music = profileTranslation['Music'] ?? '' %}
+{% set movies = profileTranslation['Movies'] ?? '' %}
+{% set organizations = profileTranslation['Organizations'] ?? '' %}
+{% set interests = hobbies|length != 0 or books|length != 0 or music|length != 0 or movies|length != 0 or organizations|length != 0 %}
+{% set pastTrips = profileTranslation['PastTrips'] ?? '' %}
+{% set plannedTrips = profileTranslation['PlannedTrips'] ?? '' %}
+{% set maxLengthOfStay = profileTranslation['MaxLengthOfStay'] ?? '' %}
+{% set iLiveWith = profileTranslation['ILiveWith'] ?? '' %}
+{% set pleaseBring = profileTranslation['PleaseBring'] ?? '' %}
+{% set whereYouSleep = profileTranslation['WhereYouSleep'] ?? '' %}
+{% set standardOffers = member.StandardOffers %}
+{% set offerGuests = profileTranslation['OfferGuests'] ?? '' %}
+{% set additionalInfo = profileTranslation['AdditionalAccommodationInfo'] ?? '' %}
+{% set gettingThere = profileTranslation['GettingThere'] ?? '' %}
+{% set restrictions = member.Restrictions %}
+{% set houseRules = profileTranslation['HouseRules'] ?? '' %}
+
 <div id="profile-language-{{ profile_language }}"
      class="{% if profile_language != active_locale %}u:hidden! {% endif %}">
-  <div class="u:mb-16 u:max-sm:flex u:max-sm:flex-col u:md:block u:md:columns-2">
-    {#
-    Add cards in order
-    'About Me', 'Languages', 'My Interests', 'Travel Experiences', 'Groups', 'Gallery', 'Friends'
-    'Accommodation', 'Comments'
-    #}
-    {% set aboutMe = profileTranslation['AboutMe'] ?? '' %}
-    {% set occupation = profileTranslation['Occupation'] ?? '' %}
-    <div class="u:md:break-inside-avoid u:order-1 u:mb-16">
-      <div class="card u:relative">
+  <div class="p-profile-layout">
+
+    {# ═══════════════════════════════════════════
+       MAIN — About Me · Accommodation · Comments
+       ═══════════════════════════════════════════ #}
+    <div class="p-profile-main">
+
+      {# ── About Me ────────────────────────────── #}
+      {% if aboutMe|length > 0 or offerHosts|length > 0 or edit %}
+      <div class="card">
         <div class="card-header u:flex u:flex-row u:justify-between">
           {{ 'profile.about.me'|trans({}, "messages", profile_language)|raw }}
           {%- if edit -%}
             {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'aboutme'}) %}
             {% set edit_text = 'profile.edit.about.me'|trans({}, 'messages', profile_language) %}
-            <div>
-              <a href="{{ edit_link }}">
-                <i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i>
-                <span class="visually-hidden">{{ edit_text }}</span>
-              </a>
-            </div>
+            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
-        <div class="card-body p-2">
+        <div class="card-body">
           <div class="card-text m-0">
             {% if aboutMe|length != 0 %}
               {{ aboutMe|purify|nl2br }}
-            {% else %}
-              {% if edit %}
-                <div class="h5 u:mt-8 u:mb-0">{{ 'profile.about.me'|trans({}, "messages", profile_language)|raw }}</div>
-              {% else %}
-                {{ 'profile.no.about.me'|trans({}, "messages", profile_language) }}
-              {% endif %}
+            {% elseif edit %}
+              <div class="h5 u:mt-8 u:mb-0">{{ 'profile.about.me'|trans({}, "messages", profile_language)|raw }}</div>
             {% endif %}
             {% if edit %}
               <div class="h5 u:mt-8 u:mb-0">{{ 'profile.occupation'|trans({}, "messages", profile_language)|raw }}</div>
-              <div>
-                {% if occupation|length != 0 %}
-                  {{ occupation|purify|nl2br }}
-                {% endif %}
-              </div>
+              <div>{% if occupation|length != 0 %}{{ occupation|purify|nl2br }}{% endif %}</div>
             {% endif %}
           </div>
-          {% set offerHosts =  profileTranslation['OfferHosts'] ?? '' %}
           {% if offerHosts|length > 0 or edit %}
-            <div class="stay h5 u:mt-8 u:mb-0">
-              {{ 'profile.offer.hosts'|trans({}, "messages", profile_language)|raw }}
-            </div>
-            {% if offerHosts|length > 0 %}
-              <div>{{ profileTranslation['OfferHosts']|purify }}</div>{% endif %}
+            <div class="stay h5 u:mt-8 u:mb-0">{{ 'profile.offer.hosts'|trans({}, "messages", profile_language)|raw }}</div>
+            {% if offerHosts|length > 0 %}<div>{{ profileTranslation['OfferHosts']|purify }}</div>{% endif %}
           {% endif %}
         </div>
       </div>
-    </div>
+      {% endif %}
 
-    <div class="u:md:break-inside-avoid u:order-3 u:mb-16">
+      {# ── Accommodation ───────────────────────── #}
       <div class="card">
-        <div
-          class="card-header u:flex u:flex-row u:justify-between">{{ 'languages.spoken'|trans({}, "messages", profile_language)|raw }}
+        <div class="card-header u:flex u:flex-row u:justify-between">
+          {{ 'profile.accommodation'|trans({}, "messages", profile_language)|raw }}
           {%- if edit -%}
-            {% set edit_link = url('profile_edit_languages', {username: member.username, language: profile_language}) %}
-            {% set edit_text = 'profile.edit.languages'|trans({}, 'messages', profile_language) %}
-            <a href="{{ edit_link }}">
-              <i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i>
-              <span class="visually-hidden">{{ edit_text }}</span>
-            </a>
+            {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'accommodation'}) %}
+            {% set edit_text = 'profile.edit.accommodation'|trans({}, 'messages', profile_language) %}
+            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
-        <div class="card-body p-2">
+        <div class="card-body">
           <div class="card-text m-0">
-            {% for languageLevel in language_levels %}
-              <p class="m-0">
-                {{ ('lang_' ~ languageLevel.language.ShortCode)|lower|trans({}, "messages", profile_language) }}
-                <sup
-                  class="ms-1 gray">{{ ('language.level.' ~ languageLevel.level)|lower|trans({}, "messages", profile_language) }}</sup>
-              </p>
+            {% if not member.accommodation is null or edit %}
+              {% if edit and not address is same as(false) %}
+                <div class="u:flex u:flex-row u:justify-between align-items-center u:mb-8 u:gap-8">
+                  <div>
+                    <p class="h5">{{ 'profile.location'|trans({}, 'messages', profile_language) }}</p>
+                    <p class="u:font-700">{{ address.location.name }}</p>
+                    <p>{{ address.location.admin1.name }} - {{ address.location.country.name }}</p>
+                    <a href="{{ url('profile_set_location', {username: member.username}) }}" class="o-button o-button--outline">{{ 'profile.change.location'|trans({}, 'messages', profile_language) }}</a>
+                  </div>
+                  <div id="location-map-{{ profile_language }}" class="u:w-[40%] u:aspect-3/2 u:border-1 u:border-bewelcome"></div>
+                </div>
+              {% endif %}
+              <div class="p-accom-stats u:mb-8">
+                {% if edit or (member.maxGuests != 0 and member.accommodation == constant('App\\Doctrine\\AccommodationType::YES')) %}
+                  {% set lastUpdate = member.updated ?? member.created %}
+                  <div class="p-accom-chips">
+                    <span class="p-accom-chip">
+                      <i class="fas fa-user-friends"></i>
+                      {{ 'profile.max.guests'|trans({}, "messages", profile_language)|raw }} <strong>{{ member.maxGuests }}</strong>
+                    </span>
+                    <span class="p-accom-chip">
+                      <i class="fas fa-star"></i>
+                      {{ 'profile.hosting_interest'|trans({}, "messages", profile_language)|raw }} <strong>{{ macros.hostingInterest(member.hostingInterest, profile_language) }}</strong>
+                    </span>
+                    {% if not address is same as(false) and address.isWheelChairAccessible %}
+                      <span class="p-accom-chip p-accom-chip--access" title="{{ 'canhostwheelchairyes'|trans({}, "messages", profile_language) }}">
+                        <i class="fas fa-wheelchair"></i> {{ 'wheelchair'|trans({}, "messages", profile_language) }}
+                      </span>
+                    {% endif %}
+                  </div>
+                  <p class="p-accom-updated">
+                    <i class="fas fa-clock"></i>
+                    {{ 'profile.hosting_interest.last_updated'|trans({updated: lastUpdate}, "messages+intl-icu", profile_language) }}
+                  </p>
+                {% else %}
+                  {% if member.accommodation == constant('App\\Doctrine\\AccommodationType::NO') %}
+                    <p class="u:m-0">{{ 'member.not.hosting'|trans({}, "messages", profile_language) }}</p>
+                  {% endif %}
+                {% endif %}
+              </div>
             {% else %}
-              {{ 'profile.no.languages'|trans({}, 'messages', profile_language) }}
-            {% endfor %}
+              <p class="u:m-0">{{ 'profile.no.accommodation'|trans({}, "messages", profile_language) }}</p>
+            {% endif %}
+
+            {% if maxLengthOfStay|length != 0 or edit %}
+              <div class="stay h5 u:mt-8 u:mb-0">{{ 'profile.max.length.of.stay'|trans({}, "messages", profile_language)|raw }}</div>
+              {% if maxLengthOfStay|length != 0 %}<div>{{ profileTranslation['MaxLengthOfStay']|purify }}</div>{% endif %}
+            {% endif %}
+            {% if iLiveWith|length > 0 or edit %}
+              <div class="stay h5 u:mt-8 u:mb-0">{{ 'profile.i.live.with'|trans({}, "messages", profile_language)|raw }}</div>
+              {% if iLiveWith|length > 0 %}<div>{{ profileTranslation['ILiveWith']|purify }}</div>{% endif %}
+            {% endif %}
+            {% if pleaseBring|length > 0 or edit %}
+              <div class="stay h5 u:mt-8 u:mb-0">{{ 'profile.please.bring'|trans({}, "messages", profile_language)|raw }}</div>
+              {% if pleaseBring|length > 0 %}<div>{{ profileTranslation['PleaseBring']|purify }}</div>{% endif %}
+            {% endif %}
+            {% if whereYouSleep|length > 0 or edit %}
+              <div class="h5 u:mt-8 u:mb-0">{{ 'profile.where.you.sleep'|trans({}, "messages", profile_language)|raw }}</div>
+              <div>{% if whereYouSleep|length > 0 %}{{ whereYouSleep|purify }}{% endif %}</div>
+            {% endif %}
+            {% if standardOffers|length > 0 or offerGuests|length > 0 or edit %}
+              <div class="h5 u:mt-8 u:mb-0">{{ 'profile.offer.guests'|trans({}, "messages", profile_language)|raw }}</div>
+              <div>
+                {% for offer in standardOffers %}{{ ('ProfileTypicOffer_' ~ offer)|lower|trans({}, "messages", profile_language) }}<br>{% endfor %}
+                {% if offerGuests|length > 0 %}{{ offerGuests|purify }}{% endif %}
+              </div>
+            {% endif %}
+            {% if additionalInfo|length != 0 or edit %}
+              <div class="h5 u:mt-8 u:mb-0">{{ 'profile.additional.information.for.guests'|trans({}, "messages", profile_language)|raw }}</div>
+              {% if additionalInfo|length != 0 %}{{ additionalInfo|purify }}{% endif %}
+            {% endif %}
+            {% if gettingThere|length != 0 or edit %}
+              <div class="stay h5 u:mt-8 u:mb-0">{{ 'profile.getting.there'|trans({}, "messages", profile_language)|raw }}</div>
+              {% if gettingThere|length != 0 %}<div>{{ profileTranslation['GettingThere']|purify }}</div>{% endif %}
+            {% endif %}
+            {% if restrictions|length > 0 or houseRules|length > 0 or edit %}
+              <div class="h5 u:mt-8">{{ 'profile.house.rules'|trans({}, "messages", profile_language)|raw }}</div>
+              <div>
+                {% for restriction in restrictions %}{{ ('restriction_' ~ restriction)|lower|trans({}, "messages", profile_language) }}<br>{% endfor %}
+                {% if houseRules|length > 0 %}{{ houseRules|purify }}{% endif %}
+              </div>
+            {% endif %}
+
+            {% if not edit and app.user != member and member.accommodation == constant('App\\Doctrine\\AccommodationType::YES') %}
+              <div class="p-accom-cta">
+                <a href="{{ url('hosting_request', {username: member.username}) }}" class="p-hero__btn p-hero__btn--primary">
+                  <i class="fas fa-bed"></i> {{ 'profile.request.hosting'|trans({}, "messages", profile_language) }}
+                </a>
+              </div>
+            {% endif %}
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="u:md:break-inside-avoid u:order-3 u:mb-16">
+      {# ── Comments ────────────────────────────── #}
       <div class="card">
-        <div
-          class="card-header u:flex u:flex-row u:justify-between">{{ 'languages.spoken'|trans({}, "messages", profile_language)|raw }}
+        <div class="card-header u:flex u:flex-row u:justify-between">
+          {{ 'profile.comments'|trans({}, "messages", profile_language) }}
+          {%- if edit and comments|slice(0,10)|length > 0 -%}
+            {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'comments'}) %}
+            {% set edit_text = 'profile.edit.comments'|trans({}, 'messages', profile_language) %}
+            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
+          {%- endif -%}
+        </div>
+        <div class="card-body">
+          {% if comments|length > 0 %}
+            <div class="p-comments-counts">
+              <a href="{{ url('profile_comments', {username: member.username, type: 'positive'}) }}" class="p-comments-count p-comments-count--positive">
+                <i class="fas fa-thumbs-up"></i> {{ comments_count.positive }}
+              </a>
+              <a href="{{ url('profile_comments', {username: member.username, type: 'neutral'}) }}" class="p-comments-count p-comments-count--neutral">
+                <i class="fas fa-minus"></i> {{ comments_count.neutral }}
+              </a>
+              <a href="{{ url('profile_comments', {username: member.username, type: 'negative'}) }}" class="p-comments-count p-comments-count--negative">
+                <i class="fas fa-thumbs-down"></i> {{ comments_count.negative }}
+              </a>
+            </div>
+          {% endif %}
+          {% set commentsShown = 0 %}
+          {% for comment in comments|slice(0,10) %}
+            {% set commentToVisible = (comment['to'] is defined) ? (comment['to'].showCondition(app.user) > 0) : false %}
+            {% set commentFromVisible = (comment['from'] is defined) ? (comment['from'].showCondition(app.user) > 0) : false %}
+            {% if commentToVisible or commentFromVisible %}
+              {% set commentsShown = commentsShown + 1 %}
+              {% include 'profile/comment.embedded.html.twig' with { comment: comment, language: profile_language } %}
+            {% endif %}
+          {% else %}
+            <div class="p-no-comments">
+              <i class="fas fa-comment-slash"></i>
+              <p>{{ 'profile.no.comments'|trans({}, 'messages', profile_language) }}</p>
+            </div>
+          {% endfor %}
+          {% if comments|length != visibleComments %}
+            <a href="{{ url('profile_comments', {username: member.username}) }}" class="btn btn-block btn-sm btn-outline-primary">
+              {{ 'showallcomments'|trans({}, "messages", profile_language) }} <span class="badge text-bg-primary u:rounded-8 u:px-8 u:min-w-20">{{ visibleComments }}</span>
+            </a>
+          {% endif %}
+          {% if not edit and submenu.items is defined and submenu.items.comment is defined %}
+            <div class="p-accom-cta">
+              <a href="{{ submenu.items.comment.url }}" class="p-hero__btn p-hero__btn--outline">
+                <i class="fas fa-comment"></i> {{ submenu.items.comment.key|lower|trans }}
+              </a>
+            </div>
+          {% endif %}
+        </div>
+      </div>
+
+    </div>{# /.p-profile-main #}
+
+    {# ═══════════════════════════════════════════════════════
+       SECONDARY — Languages · Interests · Travel · Groups · Gallery · Friends
+       ═══════════════════════════════════════════════════════ #}
+    <div class="p-profile-secondary">
+
+      {# ── Languages ───────────────────────────── #}
+      <div class="card">
+        <div class="card-header u:flex u:flex-row u:justify-between">
+          {{ 'languages.spoken'|trans({}, "messages", profile_language)|raw }}
           {%- if edit -%}
             {% set edit_link = url('profile_edit_languages', {username: member.username, language: profile_language}) %}
             {% set edit_text = 'profile.edit.languages'|trans({}, 'messages', profile_language) %}
-            <a href="{{ edit_link }}">
-              <i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i>
-              <span class="visually-hidden">{{ edit_text }}</span>
-            </a>
+            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
-        <div class="card-body p-2">
+        <div class="card-body">
           <div class="card-text m-0">
             {% for level, languages in member.levelLanguages %}
-              <p class="u:font-500 u:text-18 u:font-signika">{{ ('language.level.' ~ level)|lower|trans({}, "messages", profile_language) }}</p>
-              <p class="">
-                {% for language in languages %}
-                  {{ ('lang_' ~ language.ShortCode)|lower|trans({}, "messages", profile_language) }}
-                  {%- if loop.index != loop.last %}, {% endif -%}
-                {% endfor %}
+              <p class="p-sidebar-card__lang-level">{{ ('language.level.' ~ level)|lower|trans({}, "messages", profile_language) }}</p>
+              <p class="p-sidebar-card__lang-list">
+                {% for language in languages %}{{ ('lang_' ~ language.ShortCode)|lower|trans({}, "messages", profile_language) }}{%- if loop.index != loop.last %}, {% endif -%}{% endfor %}
               </p>
             {% else %}
-              {{ 'profile.no.languages'|trans({}, 'messages', profile_language) }}
+              <p class="u:m-0">{{ 'profile.no.languages'|trans({}, 'messages', profile_language) }}</p>
             {% endfor %}
           </div>
         </div>
       </div>
-    </div>
 
-    {# Check if any interests are set #}
-    {% set hobbies = profileTranslation['Hobbies'] ?? '' %}
-    {% set books = profileTranslation['Books'] ?? '' %}
-    {% set music = profileTranslation['Music'] ?? '' %}
-    {% set movies = profileTranslation['Movies'] ?? '' %}
-    {% set organizations = profileTranslation['Organizations'] ?? '' %}
-    {% set interests = hobbies|length != 0 or books|length != 0 or music|length != 0 or movies|length != 0
-      or organizations|length != 0 %}
-
-    <div class="u:md:break-inside-avoid u:order-3 u:mb-16">
+      {# ── Interests ───────────────────────────── #}
+      {% if interests or edit %}
       <div class="card">
-        <div
-          class="card-header u:flex u:flex-row u:justify-between">{{ 'profile.interests'|trans({}, "messages", profile_language)|raw }}
+        <div class="card-header u:flex u:flex-row u:justify-between">
+          {{ 'profile.interests'|trans({}, "messages", profile_language)|raw }}
           {%- if edit -%}
             {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'interests'}) %}
             {% set edit_text = 'profile.edit.interests'|trans({}, 'messages', profile_language) %}
-            <a href="{{ edit_link }}">
-              <i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i>
-              <span class="visually-hidden">{{ edit_text }}</span>
-            </a>
+            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {% endif %}
         </div>
-        <div class="card-body p-2">
-          {% if interests or edit %}
-            <div class="card-text m-0">
-              {% if hobbies|length != 0 or edit %}
-                <div class="h5 u:mt-8 u:mb-0">{{ 'profile.hobbies'|trans({}, "messages", profile_language) }}
-                </div>
-                <div>{{ hobbies|purify }}</div>
-              {% endif %}
-              {% if books|length != 0 or edit %}
-                <div class="h5 u:mt-8 u:mb-0">{{ 'profile.books'|trans({}, "messages", profile_language) }}
-                </div>
-                <div>{{ books|purify }}</div>
-              {% endif %}
-              {% if music|length != 0 or edit %}
-                <div class="h5 u:mt-8 u:mb-0">{{ 'profile.music'|trans({}, "messages", profile_language) }}
-                </div>
-                <div>{{ music|purify }}</div>
-              {% endif %}
-              {% if movies|length != 0 or edit %}
-                <div class="h5 u:mt-8 u:mb-0">{{ 'profile.movies'|trans({}, "messages", profile_language) }}
-                </div>
-                <div>{{ movies|purify }}</div>
-              {% endif %}
-              {% if organizations|length != 0 or edit %}
-                <div class="h5 u:mt-8 u:mb-0">{{ 'profile.organizations'|trans({}, "messages", profile_language) }}
-                </div>
-                <div>{{ organizations|purify }}</div>
-              {% endif %}
-            </div>
-          {% else %}
-            {{ 'profile.no.interests'|trans({}, "messages", profile_language) }}
-          {% endif %}
+        <div class="card-body">
+          <div class="card-text m-0">
+            {% if hobbies|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.hobbies'|trans({}, "messages", profile_language) }}</div><div>{{ hobbies|purify }}</div>{% endif %}
+            {% if books|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.books'|trans({}, "messages", profile_language) }}</div><div>{{ books|purify }}</div>{% endif %}
+            {% if music|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.music'|trans({}, "messages", profile_language) }}</div><div>{{ music|purify }}</div>{% endif %}
+            {% if movies|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.movies'|trans({}, "messages", profile_language) }}</div><div>{{ movies|purify }}</div>{% endif %}
+            {% if organizations|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.organizations'|trans({}, "messages", profile_language) }}</div><div>{{ organizations|purify }}</div>{% endif %}
+          </div>
         </div>
       </div>
-    </div>
-
+      {% endif %}
 
-    {# Check if any travel experience is there #}
-    {% set pastTrips = profileTranslation['PastTrips'] ?? '' %}
-    {% set plannedTrips = profileTranslation['PlannedTrips'] ?? '' %}
-    <div class="u:md:break-inside-avoid u:order-3 u:mb-16">
+      {# ── Travel Experience ───────────────────── #}
+      {% if pastTrips|length > 0 or plannedTrips|length > 0 or edit %}
       <div class="card">
-        <div
-          class="card-header u:flex u:flex-row u:justify-between">{{ 'profile.travel.experience'|trans({}, "messages", profile_language)|raw }}
+        <div class="card-header u:flex u:flex-row u:justify-between">
+          {{ 'profile.travel.experience'|trans({}, "messages", profile_language)|raw }}
           {%- if edit -%}
             {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'travels'}) %}
             {% set edit_text = 'profile.edit.travel.experience'|trans({}, 'messages', profile_language) %}
-            <a href="{{ edit_link }}">
-              <i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i>
-              <span class="visually-hidden">{{ edit_text }}</span>
-            </a>
+            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
-        <div class="card-body p-2">
+        <div class="card-body">
           <div class="card-text m-0">
-            {% if pastTrips|length != 0 or edit %}
-              <div class="h5 u:mt-8 u:mb-0">{{ 'profile.past.trips'|trans({}, "messages", profile_language)|raw }}
-              </div>
-              <div>{{ pastTrips|purify }}</div>
-            {% endif %}
-            {% if plannedTrips|length != 0 or edit %}
-              <div class="h5 u:mt-8 u:mb-0">{{ 'profile.planned.trips'|trans({}, "messages", profile_language)|raw }}
-              </div>
-              <div>{{ plannedTrips|purify }}</div>
-            {% endif %}
-            {% if pastTrips|length == 0 and plannedTrips|length == 0 and not edit %}
-              {{ 'profile.no.travel.experiences'|trans({}, 'messages', profile_language) }}
-            {% endif %}
+            {% if pastTrips|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.past.trips'|trans({}, "messages", profile_language)|raw }}</div><div>{{ pastTrips|purify }}</div>{% endif %}
+            {% if plannedTrips|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.planned.trips'|trans({}, "messages", profile_language)|raw }}</div><div>{{ plannedTrips|purify }}</div>{% endif %}
           </div>
         </div>
       </div>
-    </div>
+      {% endif %}
 
-    <div class="u:md:break-inside-avoid u:order-3 u:mb-16">
+      {# ── Groups ──────────────────────────────── #}
+      {% if member.groups|length > 0 or edit %}
       <div class="card">
-        <div
-          class="card-header u:flex u:flex-row u:justify-between">{{ 'profile.groups'|trans({}, "messages", profile_language)|raw }}
+        <div class="card-header u:flex u:flex-row u:justify-between">
+          {{ 'profile.groups'|trans({}, "messages", profile_language)|raw }}
           {%- if edit -%}
             {% set edit_link = url('groups_mygroups') %}
             {% set edit_text = 'profile.edit.groups'|trans({}, 'messages', profile_language) %}
-            <a href="{{ edit_link }}">
-              <i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i>
-              <span class="visually-hidden">{{ edit_text }}</span>
-            </a>
+            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
-        <div class="p-2">
-          {% for group in member.groups|slice(0,5) %}
-            <div class="mb-3 d-flex d-column">
-              <div>
-                <a href="{{ url('group_start', {group_id: group.id}) }}">
-                  <img class="framed float-start me-2" width="50" height="50" alt="Group"
-                       src="{{ url('group_thumbimg', {group_id: group.id}) }}"/>
-                </a>
-              </div>
-              <div class="text-truncate">
-                <h4 class="m-0 text-truncate"><a
-                    href="{{ url('group_start', {group_id: group.id}) }}">{{ group.name }}</a>
-                </h4>
-                <p class="m-0 text-truncate">
-                  {% set groupMembership = group.membership(member) %}{{ (groupMembership.comments|first).sentence|purify|truncate(50) }}</p>
-              </div>
+        <div class="card-body">
+          {% for group in member.groups|slice(0, 5) %}
+            <div class="p-sidebar-card__group-item">
+              <a href="{{ url('group_start', {group_id: group.id}) }}">
+                <img width="38" height="38" alt="Group" src="{{ url('group_thumbimg', {group_id: group.id}) }}">
+              </a>
+              <a class="p-sidebar-card__group-name" href="{{ url('group_start', {group_id: group.id}) }}">{{ group.name }}</a>
             </div>
-          {% else %}
-            {{ 'profile.no.groups'|trans({}, 'messages', profile_language) }}
           {% endfor %}
           {% if member.groups|length > 5 %}
-            <a class="btn btn-sm btn-block btn-outline-primary"
-               href="{{ url('group_user_all', {username:member.username}) }}">{{ 'groupsallmylink'|trans({}, "messages", profile_language) }} <span
-                class="badge text-bg-primary u:rounded-8 u:px-8 u:min-w-20">{{ member.groups|length }}</span></a>
+            <a class="p-sidebar-card__more-link" href="{{ url('group_user_all', {username: member.username}) }}">
+              {{ 'groupsallmylink'|trans({}, "messages", profile_language) }}
+              <span class="p-sidebar-card__count-badge">{{ member.groups|length }}</span>
+            </a>
           {% endif %}
         </div>
       </div>
-    </div>
+      {% endif %}
 
-    <div class="u:md:break-inside-avoid u:order-3 u:mb-16">
-      <div class="card">
-        <div
-          class="card-header u:flex u:flex-row u:justify-between">{{ 'profile.images'|trans({}, "messages", profile_language)|raw }}
-          {%- if edit -%}
-            {% set edit_link = url('gallery_manage') %}
-            {% set edit_text = 'profile.edit.images'|trans({}, 'messages', profile_language) %}
-            <a href="{{ edit_link }}">
-              <i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i>
-              <span class="visually-hidden">{{ edit_text }}</span>
-            </a>
-          {%- endif -%}
+      {# ── Gallery ─────────────────────────────── #}
+      {% if pictures|length > 0 or edit %}
+      <div class="card p-gallery-card">
+        {%- if edit -%}
+          <div class="card-header u:flex u:flex-row u:justify-end">
+            <a href="{{ url('gallery_manage') }}"><i class="fa fa-edit" title="{{ 'profile.edit.images'|trans({}, 'messages', profile_language) }}" aria-hidden="true"></i></a>
+          </div>
+        {%- endif -%}
+        <div class="p-gallery-grid">
+          {% for picture in pictures|slice(0, 5) %}
+            {% set isLast = loop.last and pictures|length > 5 %}
+            {% if isLast %}
+              <a href="{{ url('gallery', {username: member.username}) }}" class="p-gallery-cell p-gallery-cell--more">
+                <img src="{{ url('gallery_thumbnail', {id: picture.id, t: 1}) }}" alt="{{ picture.title }}">
+                <span class="p-gallery-cell__more-label">+{{ pictures|length - 4 }}</span>
+              </a>
+            {% else %}
+              <a href="{{ url('gallery_image', {id: picture.id}) }}"
+                 class="p-gallery-cell"
+                 data-toggle="lightbox"
+                 data-gallery="profile-gallery"
+                 data-type="image"
+                 data-title="{{ picture.title }}">
+                <img src="{{ url('gallery_thumbnail', {id: picture.id, t: 1}) }}" alt="{{ picture.title }}">
+              </a>
+            {% endif %}
+          {% endfor %}
         </div>
-        <div class="card-body p-2">
-          {% if pictures|length > 0 %}
-            <div class="d-flex flex-wrap justify-content-around">
-              {% for picture in pictures|slice(0,10) %}
-                <a href="{{ url('gallery_image', {id: picture.id}) }}"
-                   style="max-width: 40%; display: flex; align-items: center; margin-bottom: 1rem;"
-                   data-toggle="lightbox"
-                   data-gallery="profile-gallery"
-                   data-type="image"
-                   data-title="{{ picture.title }}">
-                  <img
-                    src="{{ url('gallery_thumbnail', {id: picture.id, t: 1}) }}"
-                    class="img-fluid"
-                    alt="{{ picture.title }}"
-                  />
-                </a>
-              {% endfor %}
-            </div>
-          {% else %}
-            {{ 'profile.no.images'|trans({}, 'messages', profile_language) }}
-          {% endif %}
-          {% if pictures|length > 9 %}
-            <a href="{{ url('gallery', {username: member.username}) }}"
-               class="btn btn-block btn-sm btn-outline-primary">
-              {{ 'profile.all.images'|trans({}, "messages", profile_language) }} <span
-                class="badge text-bg-primary u:rounded-8 u:px-8 u:min-w-20">{{ pictures|length }}</span>
+        {% if pictures|length > 5 %}
+          <div class="p-gallery-footer">
+            <a href="{{ url('gallery', {username: member.username}) }}">
+              {{ 'profile.all.images'|trans({}, "messages", profile_language) }}
+              <span class="p-gallery-footer__count">{{ pictures|length }}</span>
             </a>
-          {% endif %}
-        </div>
+          </div>
+        {% endif %}
       </div>
-    </div>
+      {% endif %}
 
-    <div class="u:md:break-inside-avoid u:order-3 u:mb-16">
+      {# ── Friends ─────────────────────────────── #}
+      {% if friends|length > 0 or edit %}
       <div class="card">
-        <div
-          class="card-header u:flex u:flex-row u:justify-between">{{ 'profile.family.and.friends'|trans({}, "messages", profile_language)|raw }}
+        <div class="card-header u:flex u:flex-row u:justify-between">
+          {{ 'profile.family.and.friends'|trans({}, "messages", profile_language)|raw }}
           {%- if edit -%}
             {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'relations'}) %}
             {% set edit_text = 'profile.edit.family.and.friends'|trans({}, 'messages', profile_language) %}
-            <a href="{{ edit_link }}">
-              <i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i>
-              <span class="visually-hidden">{{ edit_text }}</span>
-            </a>
+            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
-        <div class="card-body p-2">
-          {% if friends|length != 0 %}
-            <div class="u:grid u:grid-cols-3 u:gap-8 u:mb-8">
-              {% for friend in friends|slice(0,9) %}
-                {% set other = friend.left == member ? friend.right : friend.left %}
-                  <div class="u:flex u:flex-col u:items-center">
-                    <div class="o-avatar o-avatar--s u:me-4">
-                      {{ macros.roundedavatarstack(other.username, 48, false) }}
-                    </div>
-                    <a href="{{ url('members_profile', {username: other.username}) }}"
-                      class="u:text-[.875em] u:text-center"
-                      style="word-break: break-all;">{{ other.username }}</a>
-                  </div>
-              {% endfor %}
-            </div>
-          {% else %}
-            {{ 'profile.no.friends'|trans({}, 'messages', profile_language) }}
-          {% endif %}
+        <div class="card-body">
+          <div class="u:grid u:grid-cols-3 u:gap-8 u:mb-8">
+            {% for friend in friends|slice(0, 9) %}
+              {% set other = friend.left == member ? friend.right : friend.left %}
+              <div class="u:flex u:flex-col u:items-center">
+                <div class="o-avatar o-avatar--s u:me-4">{{ macros.roundedavatarstack(other.username, 48, false) }}</div>
+                <a href="{{ url('members_profile', {username: other.username}) }}" class="u:text-[.875em] u:text-center" style="word-break: break-all;">{{ other.username }}</a>
+              </div>
+            {% endfor %}
+          </div>
           {% if friends|length > 9 %}
-            <a href="{{ url('friends', {username: member.username}) }}"
-               class="btn btn-block btn-sm btn-outline-primary">
-              {{ 'profile.all.friends'|trans({}, "messages", profile_language) }} <span
-                class="badge text-bg-primary u:rounded-8 u:px-8 u:min-w-20">{{ friends|length }}</span>
+            <a href="{{ url('friends', {username: member.username}) }}" class="btn btn-block btn-sm btn-outline-primary">
+              {{ 'profile.all.friends'|trans({}, "messages", profile_language) }} <span class="badge text-bg-primary u:rounded-8 u:px-8 u:min-w-20">{{ friends|length }}</span>
             </a>
           {% endif %}
         </div>
       </div>
-    </div>
+      {% endif %}
 
+    </div>{# /.p-profile-secondary #}
 
-    <div class="u:md:break-inside-avoid u:md:break-before-column u:order-2 u:mb-16">
-      <div class="card">
-        <div
-          class="card-header u:flex u:flex-row u:justify-between">{{ 'profile.accommodation'|trans({}, "messages", profile_language)|raw }}
-          {%- if edit -%}
-            {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'accommodation'}) %}
-            {% set edit_text = 'profile.edit.accommodation'|trans({}, 'messages', profile_language) %}
-            <a href="{{ edit_link }}">
-              <i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i>
-              <span class="visually-hidden">{{ edit_text }}</span>
-            </a>
-          {%- endif -%}
-        </div>
-        <div class="card-body p-2">
-          <div class="card-text m-0">
-            {% if not member.accommodation is null or edit %}
-              {% if edit %}
-                {% if not address is same as(false) %}
-                  <div class="u:flex u:flex-row u:justify-between align-items-center u:mb-8 u:gap-8">
-                    <div>
-                      <p class="h5">{{ 'profile.location'|trans({}, 'messages', profile_language) }}</p>
-                      <p class="u:font-700">{{ address.location.name }}</p>
-                      <p>{{ address.location.admin1.name }} - {{ address.location.country.name }}</p>
-                      <a href="{{ url('profile_set_location', {username: member.username}) }}" class="o-button o-button--outline">{{ 'profile.change.location'|trans({}, 'messages', profile_language) }}</a>
-                    </div>
-                    <div id="location-map-{{ profile_language }}"
-                         class="u:w-[40%] u:aspect-3/2 u:border-1 u:border-bewelcome"></div>
-                  </div>
-                {% endif %}
-              {% endif %}
-              <div class="u:flex u:flex-row u:justify-between u:mb-8">
-                <div>
-                  {% if edit or (member.maxGuests != 0 and member.accommodation == constant('App\\Doctrine\\AccommodationType::YES')) %}
-                    {% set lastUpdate = member.updated ?? member.created %}
-                    <p
-                      class="guests h5 u:mb-4">{{ 'profile.max.guests'|trans({}, "messages", profile_language)|raw }} {{ member.maxGuests }}
-                      <br>
-                      {{ 'profile.hosting_interest'|trans({}, "messages", profile_language)|raw }} {{ macros.hostingInterest(member.hostingInterest, profile_language) }}
-                      <br>
-                      <span
-                        class="u:text-12 u:font-400">{{ 'profile.hosting_interest.last_updated'|trans({updated: lastUpdate}, "messages+intl-icu", profile_language) }}</span>
-                    </p>
-                  {% else %}
-                    {% if member.accommodation == constant('App\\Doctrine\\AccommodationType::NO') %}
-                      {{ 'member.not.hosting'|trans({}, "messages", profile_language) }}
-                    {% endif %}
-                  {% endif %}
-                </div>
-
-                <div id="quickinfo" class="U:items-end u:shrink-0">
-                  {% if not address is same as(false) and address.isWheelChairAccessible %}
-                    <img
-                    src="{{ asset('images/icons/wheelchairblue.png') }}" alt="{{ 'wheelchair'|trans({}, "messages", profile_language) }}"
-                                 title="{{ 'canhostwheelchairyes'|trans({}, "messages", profile_language) }}">
-                  {% endif %}
-                  <img src="images/icons/{{ member.accommodation }}.png"
-                       alt="{{ member.accommodation|trans({}, "messages", profile_language) }}"
-                                 title="{{ ('canoffer' ~ member.accommodation)|trans({}, "messages", profile_language) }}
-                  ">
-                </div>
-              </div>
-            {% else %}
-              {{ 'profile.no.accommodation'|trans({}, "messages", profile_language) }}
-            {% endif %}
+  </div>{# /.p-profile-layout #}
 
-            {% set maxLengthOfStay = profileTranslation['MaxLengthOfStay'] ?? '' %}
-            {% if maxLengthOfStay|length != 0 or edit %}
-              <div
-                class="stay h5 u:mt-8 u:mb-0">{{ 'profile.max.length.of.stay'|trans({}, "messages", profile_language)|raw }}</div>
-              {% if maxLengthOfStay|length != 0 %}
-                <div>
-                  {{ profileTranslation['MaxLengthOfStay']|purify }}
-                </div>
-              {% endif %}
-            {% endif %}
-
-            {% set iLiveWith = profileTranslation['ILiveWith'] ?? '' %}
-            {% if iLiveWith|length > 0 or edit %}
-              <div
-                class="stay h5 u:mt-8 u:mb-0">{{ 'profile.i.live.with'|trans({}, "messages", profile_language)|raw }}</div>
-              {% if iLiveWith|length > 0 %}
-                <div>{{ profileTranslation['ILiveWith']|purify }}</div>{% endif %}
-            {% endif %}
-
-            {% set pleaseBring = profileTranslation['PleaseBring'] ?? '' %}
-            {% if pleaseBring|length > 0 or edit %}
-              <div
-                class="stay h5 u:mt-8 u:mb-0">{{ 'profile.please.bring'|trans({}, "messages", profile_language)|raw }}</div>
-              {% if pleaseBring|length > 0 %}
-                <div>{{ profileTranslation['PleaseBring']|purify }}</div>{% endif %}
-            {% endif %}
-
-            {% set whereYouSleep = profileTranslation['WhereYouSleep'] ?? '' %}
-            {% if whereYouSleep|length > 0 or edit %}
-              <div
-                class="h5 u:mt-8 u:mb-0">{{ 'profile.where.you.sleep'|trans({}, "messages", profile_language)|raw }}</div>
-              <div>
-                {% if whereYouSleep|length > 0 %}
-                  {{ whereYouSleep|purify }}
-                {% endif %}
-              </div>
-            {% endif %}
-
-            {% set standardOffers = member.StandardOffers %}
-            {% set offerGuests = profileTranslation['OfferGuests'] ?? '' %}
-            {% if standardOffers|length > 0 or offerGuests|length > 0 or edit %}
-              <div
-                class="h5 u:mt-8 u:mb-0">{{ 'profile.offer.guests'|trans({}, "messages", profile_language)|raw }}</div>
-              <div>
-                {% for offer in standardOffers %}
-                  {{ ('ProfileTypicOffer_' ~ offer)|lower|trans({}, "messages", profile_language) }}
-                  <br>
-                {% endfor %}
-                {% if offerGuests|length > 0 %}
-                  {{ offerGuests|purify }}
-                {% endif %}
-              </div>
-            {% endif %}
-
-            {% set additionalInfo = profileTranslation['AdditionalAccommodationInfo'] ?? '' %}
-            {% if additionalInfo|length != 0 or edit %}
-              <div
-                class="h5 u:mt-8 u:mb-0">{{ 'profile.additional.information.for.guests'|trans({}, "messages", profile_language)|raw }}</div>
-              {% if additionalInfo|length != 0 %}
-                {{ additionalInfo|purify }}
-              {% endif %}
-            {% endif %}
-            {% set gettingThere = profileTranslation['GettingThere'] ?? '' %}
-            {% if gettingThere|length != 0 or edit %}
-              <div
-                class="stay h5 u:mt-8 u:mb-0">{{ 'profile.getting.there'|trans({}, "messages", profile_language)|raw }}</div>
-              {% if gettingThere|length != 0 %}
-                <div>{{ profileTranslation['GettingThere']|purify }}</div>{% endif %}
-            {% endif %}
-            {% set restrictions = member.Restrictions %}
-            {% set houseRules = profileTranslation['HouseRules'] ?? '' %}
-            {% if restrictions|length > 0 or houseRules|length > 0 or edit %}
-              <div
-                class="h5 u:mt-8">{{ 'profile.house.rules'|trans({}, "messages", profile_language)|raw }}</div>
-              <div>
-                {% for restriction in restrictions %}
-                  {{ ('restriction_' ~ restriction)|lower|trans({}, "messages", profile_language) }}
-                  <br>
-                {% endfor %}
-                {% if houseRules|length > 0 %}
-                  {{ houseRules|purify }}
-                {% endif %}
-              </div>
-            {% endif %}
-
-            {% if not edit and member.accommodation == constant('App\\Doctrine\\AccommodationType::YES') %}
-              <div>
-                <a href="{{ url('hosting_request', {username: member.username}) }}"
-                   class="btn btn-primary float-end"><i
-                    class="fa fa-bed me-1"></i>{{ 'profile.request.hosting'|trans({}, "messages", profile_language) }}
-                </a>
-              </div>
-            {% endif %}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="u:md:break-inside-avoid u:order-3 u:mb-16">
-      <div class="card">
-        <div
-          class="card-header u:flex u:flex-row u:justify-between">{{ 'profile.comments'|trans({}, "messages", profile_language) }}
-          {%- if edit and comments|slice(0,10)|length > 0 -%}
-            {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'comments'}) %}
-            {% set edit_text = 'profile.edit.comments'|trans({}, 'messages', profile_language) %}
-            <a href="{{ edit_link }}">
-              <i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i>
-              <span class="visually-hidden">{{ edit_text }}</span>
-            </a>
-          {%- endif -%}
-        </div>
-        <div class="card-body p-2">
-          <div class="u:w-full u:flex u:flex-column u:justify-center u:gap-8">
-            <a href="{{ url('profile_comments', {username: member.username, type: 'positive'}) }}"><span class="u:text-18 u:text-green-600">{{ 'comments.positive'| trans({positive: comments_count.positive }) }}</span></a>
-            <a href="{{ url('profile_comments', {username: member.username, type: 'neutral'}) }}"><span class="u:text-18">{{ 'comments.neutral'| trans({neutral: comments_count.neutral }) }}</span></a>
-            <a href="{{ url('profile_comments', {username: member.username, type: 'negative'}) }}"><span class="u:text-18 u:font-weight-600 u:text-red-600">{{ 'comments.negative'| trans({negative: comments_count.negative }) }}</span></a>
-          </div>
-          {% set commentsShown = 0 %}
-          {% for comment in comments|slice(0,10) %}
-            {% set commentToVisible = (comment['to'] is defined) ? (comment['to'].showCondition(app.user) > 0) : false %}
-            {% set commentFromVisible = (comment['from'] is defined) ? (comment['from'].showCondition(app.user) > 0) : false %}
-            {% if commentToVisible or commentFromVisible %}
-              {% set commentsShown = commentsShown + 1 %}
-              {% include 'profile/comment.embedded.html.twig' with { comment: comment, language: profile_language } %}
-            {% endif %}
-          {% else %}
-            {{ 'profile.no.comments'|trans({}, 'messages', profile_language) }}
-          {% endfor %}
-          {% if comments|length != visibleComments %}
-            <a href="{{ url('profile_comments', {username: member.username}) }}"
-               class="btn btn-block btn-sm btn-outline-primary">
-              {{ 'showallcomments'|trans({}, "messages", profile_language) }} <span
-                class="badge text-bg-primary u:rounded-8 u:px-8 u:min-w-20">{{ visibleComments }}</span>
-            </a>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  </div>
   {% if edit and profile_language != 'en' %}
     <div class="u:flex u:my-8 u:justify-end">
       <button type="button" data-delete-language="{{ profile_language }}" class="o-button">
@@ -555,21 +407,16 @@
         - {{ ('lang_' ~ profile_language)|trans({}, "messages", profile_language) }}
       </button>
     </div>
-
     <div class="micromodal-slide" id="delete-{{ profile_language }}">
       <div class="modal__overlay u:bg-gray-100/50 u:flex u:justify-center u:absolute u:inset-0 u:z-[2001]">
-        <div class="u:bg-white u:p-16 u:m-16 u:rounded-8 u:min-w-50  u:w-max-[80%] u:sm:w-max-[60%] u:md:w-max-[50%] ">
+        <div class="u:bg-white u:p-16 u:m-16 u:rounded-8 u:min-w-50 u:w-max-[80%] u:sm:w-max-[60%] u:md:w-max-[50%]">
           <div class="u:mb-16">
             <p class="u:text-24 u:mb-8 u:font-700 u:text-center">{{ 'profile.language.delete.modal'|trans }}</p>
             <p class="u:text-16">{{ 'profile.language.delete.blurb'|trans }} some extra text... some extra text</p>
           </div>
           <div class="u:flex u:flex-row u:w-full u:justify-between">
-            <a class="o-button"
-               data-micromodal-close>{{ 'language.delete.no'|trans({}, "messages", profile_language) }}</a>
-            <a class="o-button"
-               href="{{ url('profile_delete_language', {username: member.username, language: profile_language}) }}">
-              {{ 'language.delete.yes'|trans({}, "messages", profile_language) }}
-            </a>
+            <a class="o-button" data-micromodal-close>{{ 'language.delete.no'|trans({}, "messages", profile_language) }}</a>
+            <a class="o-button" href="{{ url('profile_delete_language', {username: member.username, language: profile_language}) }}">{{ 'language.delete.yes'|trans({}, "messages", profile_language) }}</a>
           </div>
         </div>
       </div>
diff --git a/templates/profile/header.html.twig b/templates/profile/header.html.twig
index e86d963d02..e6ba6ee35a 100644
--- a/templates/profile/header.html.twig
+++ b/templates/profile/header.html.twig
@@ -10,108 +10,269 @@
   or is_granted(constant('App\\Entity\\Member::ROLE_ADMIN_PROFILE'))
   or is_granted(constant('App\\Entity\\Member::ROLE_ADMIN_ADMIN')) %}
 {% set address = member.activeAddress %}
-<div class="row">
-  <div class="col-12 text-center text-md-start">
-    <h2 class="m-0 d-inline"><strong>
-        {% if member.status == 'PassedAway' %}{{ 'profileinmemoriam'|format(member.Username) }}{% else %}{{ member.Username }}{% endif %}
-      </strong>
+{% set lastActivity = (member.lastActive == null) ? member.created : member.lastActive %}
+{% set occupation = memberfields.Occupation ?? '' %}
+{% set showAge = member.isAgeVisible and member.Age != 0 %}
 
-      {% if member.status != 'PassedAway' and not member.Accommodation is null %}
-        <img src="images/icons/{{ member.Accommodation }}.png" class="mb-2" alt="{{ member.Accommodation|trans }}'
-                        title="{{ ('canoffer' ~ member.Accommodation|lower)|trans }}">
-        {% if not address is same as (false) and address.isWheelChairAccessible %}
-          <img src="images/icons/wheelchairblue.png" class="mb-2" alt="{{ 'wheelchair'|trans }}'
-                        title="{{ 'canhostwheelchairyes'|trans }}" >
-        {% endif %}
-      {% endif %}
-    </h2>
+<div class="p-hero">
+
+  {# ── Banner: map if address exists, gradient fallback ── #}
+  {% if not address is same as(false) %}
+    <input type="hidden" id="latitude" value="{{ address.latitude }}">
+    <input type="hidden" id="longitude" value="{{ address.longitude }}">
+  {% endif %}
+  <div {% if not address is same as(false) %}id="location-map"{% endif %}
+       class="p-hero__banner{% if address is same as(false) %} p-hero__banner--fallback{% endif %}">
   </div>
-</div>
-<div class="row align-items-start">
-  <div class="col-12 col-sm-6">
-    <div class="text-center text-md-start">
-      <div class="d-md-none u:w-full u:relative u:aspect-1/1 u:m-auto">
-        <div class="u:absolute u:w-[50%] u:h-[50%]">
+  {% set _translations = member.translations %}
+  {% set _langs = _translations|keys %}
+  {% set _langCount = 0 %}
+  {% for _l in _langs %}{% if _translations[_l]|length > 1 %}{% set _langCount = _langCount + 1 %}{% endif %}{% endfor %}
+  {# ── Body (below banner) ─────────────────────────────── #}
+  <div class="p-hero__body-wrap container-lg">
+  {% if _langCount > 1 %}
+    {% set _reqLang = app.request.query.get('language') %}
+    {% set _active = _reqLang is not null and _reqLang in _langs ? _reqLang : (locale in _langs ? locale : 'en') %}
+    <div class="p-lang-pills p-lang-pills--overlay">
+      <i class="fas fa-globe p-lang-pills__globe"></i>
+      {% for _l in _langs %}
+        {% if _translations[_l]|length > 1 %}
+          <button class="p-lang-pill{% if _l is same as(_active) %} p-lang-pill--active{% endif %}" data-lang="{{ _l }}">{{ _l|upper }}</button>
+        {% endif %}
+      {% endfor %}
+    </div>
+  {% endif %}
+  <div class="p-hero__body">
+
+    {# ── Avatar col ──────────────────────────────────── #}
+    <div class="p-hero__avatar-col">
+      <div class="p-hero__avatar-frame">
+        <div class="p-hero__avatar-wrap">
           {% if use_lightbox is defined %}
-            <a class="js-profile-picture" href="{{ url('avatar', { username: member.Username, size: 'original'}) }}"
+            <a class="js-profile-picture"
+               href="{{ url('avatar', {username: member.Username, size: 'original'}) }}"
                data-bs-toggle="lightbox"
-               data-always-show-close="true" data-type="image"
-               data-title="{{ 'profile.picture.title'| trans }}">
-              <img class="u:rounded-8 u:w-full u:h-full u:object-cover js-profile-picture"
-                   src="{{ url('avatar', { username: member.Username, size: 320}) }}"
-                   alt="{{ 'profile.picture.title'| trans }}">
+               data-always-show-close="true"
+               data-type="image"
+               data-title="{{ 'profile.picture.title'|trans }}">
+              <img class="p-hero__avatar-img js-profile-picture"
+                   src="{{ url('avatar', {username: member.Username, size: 320}) }}"
+                   alt="{{ 'profile.picture.title'|trans }}">
             </a>
           {% else %}
-            <a href="{{ url('members_profile', {username: member.username}) }}">
-              <img class="u:rounded-8 u:w-full u:h-full u:object-cover js-profile-picture"
-                   src="{{ url('avatar', { username: member.Username, size: 320}) }}"
-                   alt="{{ 'profile.picture.title'| trans }}">
-            </a>
+            <img class="p-hero__avatar-img"
+                 src="{{ url('avatar', {username: member.Username, size: 320}) }}"
+                 alt="{{ member.Username }}">
           {% endif %}
         </div>
+        {% if member.status != 'PassedAway' and member.Accommodation is not null %}
+          {% set _isHosting = member.Accommodation == constant('App\\Doctrine\\AccommodationType::YES') %}
+          {% set _accommodationLabel = _isHosting ? 'hosting'|trans : 'not.hosting'|trans %}
+          <span class="p-hero__accommodation-badge p-hero__accommodation-badge--{{ _isHosting ? 'yes' : 'no' }}"
+                aria-label="{{ _accommodationLabel }}"
+                data-bs-toggle="tooltip"
+                data-bs-placement="right"
+                title="{{ _accommodationLabel }}">
+            <i class="fas fa-{{ _isHosting ? 'house-user' : 'house' }}" aria-hidden="true"></i>
+          </span>
+        {% endif %}
       </div>
+    </div>
 
-      {% if member.visibleName != ''%}<h3>{{ member.visibleName }}</h3>{% endif %}
+    {# ── Info ────────────────────────────────────────── #}
+    <div class="p-hero__info">
 
-      <h5>{% if not address is same as(false) %}
-          {% set location = address.location %}
-          {% set regionName = location.admin1 is null ? '*' : location.admin1.name %}
-          {% set regionCode = location.admin1 is null ? '*' : location.admin1.geonameId %}
-          <a
-            href="{{ url('places_city', {countryname: location.country.name, countrycode: location.countryId, regionname: regionName, regioncode: regionCode, cityname: location.name, citycode: location.geonameId}) }}">
-            {{ location.name -}}
-          </a>, {% if not location.admin1 is null %}
-          <a
-            href="{{ url('places_region', {countryname: location.country.name, countrycode: location.countryId, regionname: location.admin1.name, regioncode: location.admin1id}) }}">
-            {{ location.admin1.name -}}
-          </a>, {% endif %}
-          <a
-            href="{{ url('places_country', {countryname: location.country.name, countrycode: location.countryId}) }}">
-            {{ location.country.name -}}
-          </a>
-          <input type="hidden" id="latitude" value="{{ address.latitude }}"><input type="hidden" id="longitude" value="{{ address.longitude }}">
-          <div id="location-map"
-               class="u:w-full u:aspect-4/1 u:border u:border-bewelcome"></div>
-        {% else %}
-          {{ 'profile.no.city.yet'|trans }}
-        {% endif %}</h5>
-    </div>
-  </div>
-  <div class="col-12 col-sm-6 teaser-border text-center text-md-start">
-    <div id="occupation" class="h5">{% if memberfields.Occupation is defined and memberfields.Occupation != null %}
-      {{ memberfields.Occupation|purify }}
-    {% endif %}</div>
+      {# Top row: name only #}
+      <div class="p-hero__top-row">
+        <div class="p-hero__identity">
+          <div class="p-hero__name-row">
+            {% if member.visibleName != '' %}
+              <h1 class="p-hero__name">{{ member.visibleName }}</h1>
+              <span class="p-hero__username">
+                {% if member.status == 'PassedAway' %}
+                  {{ 'profileinmemoriam'|format(member.Username) }}
+                {% else %}
+                  @{{ member.Username }}
+                {% endif %}
+              </span>
+            {% else %}
+              <h1 class="p-hero__name">
+                {% if member.status == 'PassedAway' %}
+                  {{ 'profileinmemoriam'|format(member.Username) }}
+                {% else %}
+                  {{ member.Username }}
+                {% endif %}
+              </h1>
+            {% endif %}
+          </div>
+        </div>
 
-    <p class="mb-2">
-      {% set showAge = member.isAgeVisible and member.Age != 0 %}
-      {% set showGender = member.isGenderVisible %}
-      {%- if showAge -%}
-        <strong>{{ 'profile.age'|trans }}</strong> {{ member.age }}
-      {%- endif -%}
-      {%- if showAge and showGender -%}<br>{%- endif %}
-      {%- if showGender -%} <strong>{{ 'profile.gender'|trans }}</strong> {{ member.gender|trans }}{%- endif %}
-      {% if showAge or showGender %}<br>{% endif %}<strong>{{ 'profile.joined'|trans }}</strong>
-      {% if member.created.diffInDays <= 7 %}
-        {{ 'last.activity.privacy'| trans }}
-      {% else %}
-        {{ member.created.diffForHumans }}
-      {% endif %}
-      {% if admin %} ({{ member.created|format_datetime() }}){% endif %}
-      <br><strong>{{ 'profile.last.activity'|trans }}</strong>
-      {% set lastActivity = (member.lastActive == null) ? member.created : member.lastActive %}
-      {% if lastActivity.diffInDays <= 7 %}
-        {{ 'last.activity.privacy'| trans }}
+        </div>
+
+      {# Location + occupation #}
+      {% if not address is same as(false) %}
+        {% set location = address.location %}
+        {% set regionName = location.admin1 is null ? '*' : location.admin1.name %}
+        {% set regionCode = location.admin1 is null ? '*' : location.admin1.geonameId %}
+        <p class="p-hero__location">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
+          <a href="{{ url('places_city', {countryname: location.country.name, countrycode: location.countryId, regionname: regionName, regioncode: regionCode, cityname: location.name, citycode: location.geonameId}) }}">{{ location.name }}</a>{% if not location.admin1 is null %},
+          <a href="{{ url('places_region', {countryname: location.country.name, countrycode: location.countryId, regionname: location.admin1.name, regioncode: location.admin1id}) }}">{{ location.admin1.name }}</a>{% endif %},
+          <a href="{{ url('places_country', {countryname: location.country.name, countrycode: location.countryId}) }}">{{ location.country.name }}</a>
+        </p>
       {% else %}
-        {{ lastActivity.diffForHumans }}
+        <p class="p-hero__location--empty">{{ 'profile.no.city.yet'|trans }}</p>
       {% endif %}
-      {% if admin %} ({{ lastActivity|format_datetime() }}){% endif %}
-      {% if not own and status_form is defined and not status_form is null %}
-        {{ form_start(status_form, {'attr': {'class': 'u:grid u:grid-cols-2 u:gap-8'}}) }}
-        {{ form_widget(status_form.status) }}
-        <button type="submit" class="o-button o-button--s u:self-center"
-                value="{{ 'submit'|trans }}">{{ 'submit'|trans }}</button>
-        {{ form_end(status_form) }}
+
+      {% if occupation != '' %}
+        <p class="p-hero__occupation">{{ occupation|purify }}</p>
       {% endif %}
-    </p>
+
+      {# Meta row: hosting · age · gender · languages · joined #}
+      <div class="p-hero__meta">
+        {% if showAge or member.isGenderVisible %}
+          <span class="p-hero__meta-item">
+            {% if showAge %}
+              {{ 'profile.age'|trans }} {{ member.age }}
+            {% endif %}
+            {% if showAge and member.isGenderVisible %}·{% endif %}
+            {% if member.isGenderVisible %}
+              {% if member.gender == constant('App\\Doctrine\\GenderType::FEMALE') %}
+                <i class="fas fa-venus p-hero__stat-icon--female"></i>
+              {% elseif member.gender == constant('App\\Doctrine\\GenderType::MALE') %}
+                <i class="fas fa-mars p-hero__stat-icon--male"></i>
+              {% else %}
+                <i class="fas fa-transgender p-hero__stat-icon--other"></i>
+              {% endif %}
+              {{ member.gender|trans }}
+            {% endif %}
+          </span>
+        {% endif %}
+        {% if member.levelLanguages|length > 0 %}
+          {% for level, langs in member.levelLanguages %}
+            {% for lang in langs %}
+              <span class="p-hero__meta-item p-hero__meta-item--lang">{{ ('lang_' ~ lang.ShortCode)|lower|trans }}</span>
+            {% endfor %}
+          {% endfor %}
+        {% endif %}
+        <span class="p-hero__meta-item p-hero__meta-item--muted">
+          <i class="fas fa-circle
+            {% if lastActivity.diffInDays <= 7 %} p-hero__stat-icon--active
+            {% elseif lastActivity.diffInDays <= 30 %} p-hero__stat-icon--recent
+            {% else %} p-hero__stat-icon--inactive{% endif %}" style="font-size:0.45rem;vertical-align:middle"></i>
+          {{ 'profile.last.activity'|trans }}
+          {% if lastActivity.diffInDays <= 7 %}{{ 'last.activity.privacy'|trans }}
+          {% else %}{{ lastActivity.diffForHumans }}{% endif %}
+          {% if admin %} ({{ lastActivity|format_datetime() }}){% endif %}
+          &nbsp;·&nbsp;
+          {{ 'profile.joined'|trans }}
+          {% if member.created.diffInDays <= 7 %}{{ 'last.activity.privacy'|trans }}{% else %}{{ member.created.diffForHumans }}{% endif %}
+          {% if admin %} ({{ member.created|format_datetime() }}){% endif %}
+        </span>
+      </div>
+
+      {# Actions #}
+      {% set items = submenu.items ?? {} %}
+      <div class="p-hero__actions">
+        {% if own %}
+          <a href="{{ url('profile_edit', {username: member.username}) }}" class="p-hero__btn p-hero__btn--secondary">
+            <i class="fas fa-pen"></i> {{ 'profile.edit'|trans }}
+          </a>
+          {% set _accountItems = [] %}
+          {% for _k in ['edit_account', 'preferences', 'mydata', 'mynotes'] %}
+            {% if items[_k] is defined %}{% set _accountItems = _accountItems|merge([_k]) %}{% endif %}
+          {% endfor %}
+          {% if _accountItems|length > 0 %}
+            <div class="dropdown">
+              <button class="p-hero__btn p-hero__btn--icon dropdown-toggle-no-arrow" data-bs-toggle="dropdown" aria-expanded="false" title="{{ 'my.account'|trans }}">
+                <i class="fas fa-cog"></i>
+              </button>
+              <ul class="dropdown-menu dropdown-menu-end p-hero__dropdown">
+                {% for _k in _accountItems %}
+                  <li><a class="dropdown-item p-hero__dropdown-item" href="{{ items[_k].url }}">
+                    <i class="fas fa-fw fa-{{ items[_k].icon }}"></i> {{ items[_k].key|lower|trans }}
+                  </a></li>
+                {% endfor %}
+              </ul>
+            </div>
+          {% endif %}
+        {% elseif not app.user is null and member.status != 'PassedAway' %}
+          {% if member.Accommodation == constant('App\\Doctrine\\AccommodationType::YES') %}
+            <a href="{{ url('hosting_request', {username: member.username}) }}" class="p-hero__btn p-hero__btn--primary">
+              <i class="fas fa-bed"></i> {{ 'profile.request.hosting'|trans }}
+            </a>
+          {% endif %}
+          <a href="{{ url('message_new', {username: member.Username}) }}" class="p-hero__btn p-hero__btn--outline">
+            <i class="fas fa-envelope"></i> {{ 'message.send'|trans }}
+          </a>
+          {% set hasMore = items.comment is defined or items.friend is defined
+            or items.add_note is defined or items.edit_note is defined
+            or items.report is defined %}
+          {% if hasMore %}
+            <div class="dropdown">
+              <button class="p-hero__btn p-hero__btn--icon dropdown-toggle-no-arrow" data-bs-toggle="dropdown" aria-expanded="false" title="More actions">
+                <i class="fas fa-ellipsis-h"></i>
+              </button>
+              <ul class="dropdown-menu dropdown-menu-end p-hero__dropdown">
+                {% if items.comment is defined %}
+                  <li><a class="dropdown-item p-hero__dropdown-item" href="{{ items.comment.url }}">
+                    <i class="fas fa-fw fa-comment"></i> {{ items.comment.key|lower|trans }}
+                  </a></li>
+                {% endif %}
+                {% if items.friend is defined %}
+                  <li><a class="dropdown-item p-hero__dropdown-item" href="{{ items.friend.url }}">
+                    <i class="fas fa-fw fa-handshake"></i> {{ items.friend.key|lower|trans }}
+                  </a></li>
+                {% endif %}
+                {% if items.add_note is defined or items.edit_note is defined %}
+                  {% set noteItem = items.edit_note is defined ? items.edit_note : items.add_note %}
+                  <li><a class="dropdown-item p-hero__dropdown-item" href="{{ noteItem.url }}">
+                    <i class="fas fa-fw fa-pencil-alt"></i> {{ noteItem.key|lower|trans }}
+                  </a></li>
+                {% endif %}
+                {% if items.report is defined %}
+                  <li><hr class="dropdown-divider"></li>
+                  <li><a class="dropdown-item p-hero__dropdown-item p-hero__dropdown-item--danger" href="{{ items.report.url }}">
+                    <i class="fas fa-fw fa-flag"></i> {{ items.report.key|lower|trans }}
+                  </a></li>
+                {% endif %}
+              </ul>
+            </div>
+          {% endif %}
+        {% endif %}
+        {% if not own and status_form is defined and not status_form is null %}
+          <div class="p-hero__status-form">
+            {{ form_start(status_form) }}
+            {{ form_widget(status_form.status) }}
+            <button type="submit" class="p-hero__btn p-hero__btn--secondary">{{ 'submit'|trans }}</button>
+            {{ form_end(status_form) }}
+          </div>
+        {% endif %}
+      </div>
+
+    </div>
   </div>
+
+  </div>{# /.p-hero__body-wrap #}
+
+  {# ── Tab navigation ──────────────────────────────── #}
+  {% set activeItem = submenu.active is defined and submenu.active != '' ? submenu.active : 'profile' %}
+  <div class="p-hero__tabs-wrap container-lg">
+  <nav class="p-hero__tabs">
+    {% set navItems = ['profile', 'comments', 'friends', 'gallery', 'forum_posts', 'visitors', 'allmessages'] %}
+    {% for key in navItems %}
+      {% if items[key] is defined %}
+        <a href="{{ items[key].url }}"
+           class="p-hero__tab{% if activeItem == key %} p-hero__tab--active{% endif %}">
+          <i class="fas fa-fw fa-{{ items[key].icon }}"></i>
+          {{ items[key].key|lower|trans }}
+          {% if items[key].count is defined and items[key].count > 0 %}
+            <span class="p-hero__tab-count">{{ items[key].count }}</span>
+          {% endif %}
+        </a>
+      {% endif %}
+    {% endfor %}
+  </nav>
+  </div>{# /.p-hero__tabs-wrap #}
+
 </div>
diff --git a/templates/profile/profile.html.twig b/templates/profile/profile.html.twig
index b95ecb030d..6ff86e4820 100644
--- a/templates/profile/profile.html.twig
+++ b/templates/profile/profile.html.twig
@@ -1,24 +1,26 @@
-{% extends 'base.html.twig' %}
-
-{% block title %}{{ 'profile.title'|trans({username:member.Username}) }}{% endblock %}
-
-{% block javascripts %}
-  {{ parent() }}
-  {{ encore_entry_script_tags('profile/profile') }}
-{% endblock javascripts %}
-
-{% block stylesheets %}
-  {{ parent() }}
-  {{ encore_entry_link_tags('lightbox') }}
-  {{ encore_entry_link_tags('leaflet') }}
-{% endblock %}
-
-{% block content %}
-    <div class="u:mb-16">
-        {% include 'profile/header.html.twig' %}
-    </div>
-    <div class="u:mb-16">
-        {% block page_content%}
-        {% endblock page_content %}
-    </div>
-{% endblock content %}
+{% extends 'base.html.twig' %}
+
+{% block title %}{{ 'profile.title'|trans({username:member.Username}) }}{% endblock %}
+
+{% block javascripts %}
+  {{ parent() }}
+  {{ encore_entry_script_tags('profile/profile') }}
+  {{ encore_entry_script_tags('lightbox') }}
+{% endblock javascripts %}
+
+{% block stylesheets %}
+  {{ parent() }}
+  {{ encore_entry_link_tags('lightbox') }}
+  {{ encore_entry_link_tags('leaflet') }}
+{% endblock %}
+
+{% block main %}
+<main role="main">
+  {% include 'profile/header.html.twig' %}
+  <div class="container-lg pt-0">
+    {% block above_body %}{% endblock %}
+    {% block page_content %}{% endblock %}
+    {% block below_body %}{% endblock %}
+  </div>
+</main>
+{% endblock main %}
diff --git a/templates/profile/show.html.twig b/templates/profile/show.html.twig
index 5282820f62..4e2a9c01bf 100644
--- a/templates/profile/show.html.twig
+++ b/templates/profile/show.html.twig
@@ -1,54 +1,45 @@
-{% import 'macros.twig' as macros %}
-
-{% extends 'profile/profile.html.twig' %}
-
-{% block stylesheets %}
-  {{ parent() }}
-  {{ encore_entry_link_tags('readmore') }}
-  {{ encore_entry_link_tags('profile/show') }}
-{% endblock %}
-
-{% block javascripts %}
-  {{ parent() }}
-  {{ encore_entry_script_tags('readmore') }}
-  {{ encore_entry_script_tags('profile/show') }}
-{% endblock %}
-
-{% block page_content %}
-    {% set translated_fields = member.translations %}
-    {% set profile_languages = translated_fields|keys %}
-    {% set own = app.user == member %}
-    {% if not language is null %}
-        {% set active_locale = language in profile_languages ? language : 'en' %}
-    {% else %}
-        {% set active_locale = locale in profile_languages ? locale : 'en' %}
-    {% endif %}
-    {% set language_levels = member.languageLevels %}
-    {% set countLanguages = 0 %}
-    {% for profile_language in profile_languages %}
-        {% if translated_fields[profile_language]|length > 1 %}
-            {% set countLanguages = countLanguages + 1 %}
-        {% endif %}
-    {% endfor %}
-    {% if countLanguages > 1 %}
-    <div id="language-switch-container" class="u:p-8 u:my-4 u:z-[999] u:flex u:items-baseline u:justify-end {% if own %}u:sticky{% endif %} u:bg-white u:border-bewelcome u:rounded-8" style="top:60px; border: 2px solid #f37000;">
-        <label for="language-switch" class="u:me-8">{{ 'profile.switch.language'|trans }}</label>
-        <select id="language-switch" class="u:py-8 u:px-16 u:rounded-8" name="language-switch">
-            {% for profile_language in profile_languages %}
-                {# only add languages that actually have content except for own profile in edit to show missing content #}
-                {% if translated_fields[profile_language]|length > 1 %}
-                    <option value="{{ profile_language }}" {% if profile_language is same as(active_locale) %}selected="selected"{% endif %}>{{ ("lang_" ~ profile_language)|lower|trans({}, "messages", profile_language) }}</option>
-                {% endif %}
-            {% endfor %}
-        </select>
-    </div>
-    {% endif %}
-
-    {% if countLanguages >= 1 %}
-        {% for profile_language in profile_languages %}
-            {% include 'profile/content.html.twig' with {profile_language: profile_language, translated_fields: translated_fields, active_locale:active_locale, edit:false} %}
-        {% endfor %}
-    {% else %}
-        {% include 'profile/content.html.twig' with {profile_language: locale, translated_fields: translated_fields, active_locale: locale, edit:false} %}
-    {% endif %}
-{% endblock page_content %}
+{% import 'macros.twig' as macros %}
+
+{% extends 'profile/profile.html.twig' %}
+
+{% block stylesheets %}
+  {{ parent() }}
+  {{ encore_entry_link_tags('readmore') }}
+  {{ encore_entry_link_tags('profile/show') }}
+{% endblock %}
+
+{% block javascripts %}
+  {{ parent() }}
+  {{ encore_entry_script_tags('readmore') }}
+  {{ encore_entry_script_tags('profile/show') }}
+{% endblock %}
+
+{% block above_body %}{% endblock %}
+
+{% block page_content %}
+  {% set translated_fields = member.translations %}
+  {% set profile_languages = translated_fields|keys %}
+  {% set own = app.user == member %}
+  {% if not language is null %}
+    {% set active_locale = language in profile_languages ? language : 'en' %}
+  {% else %}
+    {% set active_locale = locale in profile_languages ? locale : 'en' %}
+  {% endif %}
+  {% set language_levels = member.languageLevels %}
+  {% set countLanguages = 0 %}
+  {% for profile_language in profile_languages %}
+    {% if translated_fields[profile_language]|length > 1 %}
+      {% set countLanguages = countLanguages + 1 %}
+    {% endif %}
+  {% endfor %}
+
+  {% if countLanguages >= 1 %}
+    {% for profile_language in profile_languages %}
+      {% include 'profile/content.html.twig' with {profile_language: profile_language, translated_fields: translated_fields, active_locale: active_locale, edit: false} %}
+    {% endfor %}
+  {% else %}
+    {% include 'profile/content.html.twig' with {profile_language: locale, translated_fields: translated_fields, active_locale: locale, edit: false} %}
+  {% endif %}
+{% endblock page_content %}
+
+{% block below_body %}{% endblock %}

From c55e4b6fa64816732a49993a2fa6f9a85a7dc3a6 Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Tue, 12 May 2026 15:06:48 +0200
Subject: [PATCH 07/13] login access from header + redesign login page

---
 assets/tailwindcss/layouts/_layouts.login.css | 340 ++++++++++++++++++
 assets/tailwindcss/layouts/layouts.css        |   1 +
 templates/loginbar.html.twig                  |   4 +-
 templates/security/login.html.twig            | 271 +++++++-------
 4 files changed, 466 insertions(+), 150 deletions(-)
 create mode 100644 assets/tailwindcss/layouts/_layouts.login.css

diff --git a/assets/tailwindcss/layouts/_layouts.login.css b/assets/tailwindcss/layouts/_layouts.login.css
new file mode 100644
index 0000000000..b0772a85ce
--- /dev/null
+++ b/assets/tailwindcss/layouts/_layouts.login.css
@@ -0,0 +1,340 @@
+/* =========================================================
+   LOGIN PAGE  –  centered card, mobile-first
+   ========================================================= */
+
+.p-login__body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #1f2937;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  font-family: Signika, sans-serif;
+}
+
+.p-login__overlay {
+  position: fixed;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.7) 100%);
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* ── Top navigation (brand + signup CTA) ─────────────── */
+.p-login__nav {
+  position: relative;
+  z-index: 2;
+  padding: 0.75rem 0;
+}
+
+.p-login__nav-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.p-login__brand {
+  display: inline-flex;
+  align-items: center;
+  height: 40px;
+  text-decoration: none;
+}
+
+.p-login__brand-icon { height: 40px; width: auto; }
+.p-login__brand-text { height: 40px; width: auto; margin-left: 0.5rem; }
+
+.p-login__nav-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.p-login__nav-prompt {
+  display: none;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.8125rem;
+}
+
+.p-login__nav-link {
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 1rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.p-login__nav-link:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.4);
+  color: #fff;
+  text-decoration: none;
+}
+
+@media (min-width: 540px) {
+  .p-login__nav-prompt { display: inline; }
+}
+
+.p-login {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 1rem 3rem;
+}
+
+.p-login__flash {
+  max-width: 480px;
+  margin: 0 auto 1rem;
+}
+
+.p-login__shell {
+  width: 100%;
+  max-width: 440px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+/* ── Intro (tagline above card) ────────────────────────── */
+.p-login__intro {
+  text-align: center;
+  color: #fff;
+  padding: 0 0.5rem;
+}
+
+.p-login__title {
+  font-size: 1.625rem;
+  font-weight: 700;
+  line-height: 1.25;
+  margin: 0 0 0.5rem;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+}
+
+.p-login__subtitle {
+  font-size: 0.9375rem;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.5;
+  margin: 0;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
+}
+
+/* ── Card ─────────────────────────────────────────────── */
+.p-login__card {
+  background: #fff;
+  border-radius: 1.25rem;
+  padding: 1.75rem 1.5rem;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.08),
+    0 12px 40px rgba(15, 23, 42, 0.25);
+}
+
+.p-login__card-title {
+  font-size: 1.375rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0 0 1.25rem;
+  text-align: center;
+}
+
+/* ── Form ─────────────────────────────────────────────── */
+.p-login__form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.p-login__form .o-form-group > label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #475569;
+  margin-bottom: 0.375rem;
+  display: block;
+}
+
+.p-login__form .o-input {
+  height: 44px;
+  font-size: 0.9375rem;
+  border-radius: 0.625rem;
+  border-color: #cbd5e1;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.p-login__form .o-input:focus {
+  border-color: #f37000;
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.15);
+  outline: none;
+}
+
+/* Password field with toggle */
+.p-login__password {
+  position: relative;
+}
+
+.p-login__password .o-input {
+  padding-right: 44px;
+}
+
+.p-login__password-toggle {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: #94a3b8;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.p-login__password-toggle:hover {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+/* Remember-me + forgot-password row */
+.p-login__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin: 0.25rem 0 0.25rem;
+}
+
+.p-login__row .o-checkbox__label {
+  font-size: 0.8125rem;
+  color: #475569;
+}
+
+.p-login__forgot {
+  font-size: 0.8125rem;
+  color: #f37000;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.p-login__forgot:hover {
+  color: #c25a00;
+  text-decoration: underline;
+}
+
+/* Submit button */
+.p-login__submit {
+  margin-top: 0.5rem;
+  border-radius: 0.75rem;
+  box-shadow: 0 2px 8px rgba(243, 112, 0, 0.25);
+  transition: filter 0.15s ease, box-shadow 0.15s ease;
+}
+
+.p-login__submit:hover {
+  filter: brightness(1.05);
+  box-shadow: 0 4px 14px rgba(243, 112, 0, 0.35);
+}
+
+/* ── Help / error messages ────────────────────────────── */
+.p-login__help {
+  margin-top: 0.5rem;
+  padding: 0.75rem 0.875rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 0.625rem;
+  font-size: 0.8125rem;
+  color: #7f1d1d;
+}
+
+.p-login__help p {
+  margin: 0 0 0.4rem;
+  line-height: 1.5;
+}
+
+.p-login__help p:last-child {
+  margin-bottom: 0;
+}
+
+.p-login__help a {
+  color: #b91c1c;
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.p-login__help a:hover {
+  color: #7f1d1d;
+}
+
+.p-login__error,
+.p-login__notice {
+  font-size: 0.875rem;
+  border-radius: 0.625rem;
+  padding: 0.625rem 0.875rem;
+  margin-bottom: 1rem;
+}
+
+/* ── Separator + signup CTA ───────────────────────────── */
+.p-login__separator {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 1.5rem 0 1rem;
+  color: #94a3b8;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.p-login__separator::before,
+.p-login__separator::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: #e2e8f0;
+}
+
+.p-login__signup {
+  border-radius: 0.75rem;
+  height: 44px;
+  font-size: 0.9375rem;
+}
+
+/* ── Responsive ───────────────────────────────────────── */
+@media (max-width: 540px) {
+  .p-login {
+    padding: 1rem 0.75rem 2rem;
+  }
+
+  .p-login__title {
+    font-size: 1.375rem;
+  }
+
+  .p-login__subtitle {
+    font-size: 0.875rem;
+  }
+
+  .p-login__card {
+    padding: 1.5rem 1.25rem;
+    border-radius: 1rem;
+  }
+
+  .p-login__card-title {
+    font-size: 1.25rem;
+  }
+}
diff --git a/assets/tailwindcss/layouts/layouts.css b/assets/tailwindcss/layouts/layouts.css
index bdc9893a40..f65aeb0bbf 100644
--- a/assets/tailwindcss/layouts/layouts.css
+++ b/assets/tailwindcss/layouts/layouts.css
@@ -1,3 +1,4 @@
 @import './_layouts.general.css';
 @import './_layouts.search.css';
 @import './_layouts.calendar.css';
+@import './_layouts.login.css';
diff --git a/templates/loginbar.html.twig b/templates/loginbar.html.twig
index b8599f2742..8ae63619d8 100644
--- a/templates/loginbar.html.twig
+++ b/templates/loginbar.html.twig
@@ -18,8 +18,8 @@
             {% endif %}
             {% if slim_nav %}
                 <li class="nav-item d-flex align-items-center flex-wrap justify-content-end loginbar-slim__cta text-right px-1 px-sm-2">
-                    <span class="small text-white-50 mr-1 d-none d-sm-inline">{{ 'menu.not.a.member.yet' | trans }}</span>
-                    <a class="small font-weight-bold text-white text-nowrap" href="{{ url('signup') }}">{{ 'navbar.button.signup' | trans }}</a>
+                    <span class="small text-white-50 mr-1 d-none d-sm-inline">{{ 'menu.already.a.member' | trans }}</span>
+                    <a class="small font-weight-bold text-white text-nowrap" href="{{ url('security_login') }}">{{ 'login' | trans }}</a>
                 </li>
             {% endif %}
             {% if slim_nav %}
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index 2b911a84a3..f36acef282 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -1,15 +1,15 @@
 {% import 'macros.twig' as macros %}
 <!doctype html>
-<html lang="en">
+<html lang="{{ app.request.locale }}">
 <head>
     <base href="/">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/png" href="{{ asset('/images/favicon-96x96.png') }}" sizes="96x96" />
-    <link rel="icon" type="image/svg+xml" href="{{ asset('/images/favicon.svg') }}" />
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('/images/apple-touch-icon.png') }}" />
-    <meta name="apple-mobile-web-app-title" content="beWelcome" />
+    <link rel="icon" type="image/png" href="{{ asset('/images/favicon-96x96.png') }}" sizes="96x96"/>
+    <link rel="icon" type="image/svg+xml" href="{{ asset('/images/favicon.svg') }}"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('/images/apple-touch-icon.png') }}"/>
+    <meta name="apple-mobile-web-app-title" content="beWelcome"/>
 
     <title>{{ 'login' | trans }} | BeWelcome</title>
 
@@ -22,183 +22,158 @@
     {{ encore_entry_link_tags('bewelcome') }}
     {{ encore_entry_link_tags('tailwind') }}
 
-
     <base id="baseuri" href="{{ app.request.schemeAndHttpHost ~ app.request.baseUrl }}">
 
     <link rel="manifest" href="{{ asset('manifest.webmanifest') }}">
     <script>
-        // Check that service workers are supported
         if ('serviceWorker' in navigator) {
-            // Use the window load event to keep the page load performant
             window.addEventListener('load', () => {
                 navigator.serviceWorker.register('{{ asset('service-worker.js') }}');
             });
         }
     </script>
 </head>
-<body style="
-  /* Location of the image */
-  background-image: url(/images/homepicture-big-1.jpg);
-
-  /* Background image is centered vertically and horizontally at all times */
-  background-position: center center;
-
-  /* Background image doesn't tile */
-  background-repeat: no-repeat;
-
-  /* Background image is fixed in the viewport so that it doesn't move when
-     the content's height is greater than the image's height */
-  background-attachment: fixed;
-
-  /* This is what makes the background image rescale based
-     on the container's size */
-  background-size: cover;
+<body class="p-login__body" style="background-image:url('{{ asset('images/homepicture-big-1.jpg') }}')">
+<div class="p-login__overlay" aria-hidden="true"></div>
 
-  /* Set a background color that will be displayed
-     while the background image is loading */
-  background-color: #464646;
-">
-<nav class="navbar navbar-sticky-top navbar-expand-md navbar-dark bg-primary bordert-1 borderb-1">
-    <div class="container-lg">
-        <a class="navbar-brand" href="{{ url('homepage') }}">
-            <div class="u:flex u:flex-row u:h-[40px] u:w-[220px]">
-                <img class="u:pl-4 u:md:pl-8 u:md:pr-8" src="{{ asset('images/logo_icon_2025.svg') }}" alt="BeWelcome logo"/>
-                <img class="" src="{{ asset('images/logo_text_2025.svg') }}" alt="BeWelcome text"/>
-            </div>
+<nav class="p-login__nav">
+    <div class="container-lg p-login__nav-inner">
+        <a class="p-login__brand" href="{{ url('homepage') }}">
+            <img class="p-login__brand-icon" src="{{ asset('images/logo_icon_2025.svg') }}" alt="BeWelcome logo"/>
+            <img class="p-login__brand-text" src="{{ asset('images/logo_text_2025.svg') }}" alt="BeWelcome"/>
         </a>
+        <div class="p-login__nav-cta">
+            <span class="p-login__nav-prompt">{{ 'menu.not.a.member.yet' | trans }}</span>
+            <a class="p-login__nav-link" href="{{ url('signup') }}">{{ 'navbar.button.signup' | trans }}</a>
+        </div>
     </div>
 </nav>
+
 {% block content %}
-<main role="main">
+<main role="main" class="p-login">
     <noscript>
         <div class="container-lg">
-            <div class="alert alert-danger"><p class="h5">You need to activate Javascript for bewelcome.org</p><small>Without
-                    it some function won't work.</small></div>
+            <div class="alert alert-danger u:mt-16">
+                <p class="h5">You need to activate Javascript for bewelcome.org</p>
+                <small>Without it some functions won't work.</small>
+            </div>
         </div>
     </noscript>
+
     <div class="container-lg">
         {% for label, messages in app.flashes %}
-            <div class="row">
-                {% for message in messages %}
-                    <div class="col-12">
-                        <div class="alert alert-{{ label }}">
-                            {{ message }}
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
+            {% for message in messages %}
+                <div class="alert alert-{{ label }} p-login__flash">{{ message }}</div>
+            {% endfor %}
         {% endfor %}
     </div>
-    <div class="container-lg">
-        <div class="u:flex u:flex-col">
-            <div class="col-10 offset-1 col-sm-8 offset-sm-2">
-                {% for flash_message in app.session.flashBag.get('error') %}
-                    <div class="flash error">
-                        {{ flash_message | trans }}
-                    </div>
-                {% endfor %}
-                {% for flash_message in app.session.flashBag.get('notice') %}
-                    <div class="flash notice">
-                        {{ flash_message | trans }}
-                    </div>
-                {% endfor %}
-                <h1 class="u:text-32 u:leading-40 u:text-white u:text-center u:my-16 u:font-700">BeWelcome - {{ 'indexpageteaseropendoor' | trans }}</h1>
-            </div>
+
+    <div class="p-login__shell">
+        <header class="p-login__intro">
+            <h1 class="p-login__title">{{ 'indexpageteaseropendoor' | trans }}</h1>
+            <p class="p-login__subtitle">{{ 'login.signup.info' | trans | striptags }}</p>
+        </header>
+
+        <section class="p-login__card" aria-labelledby="login-card-title">
+            <h2 id="login-card-title" class="p-login__card-title">{{ 'login' | trans }}</h2>
+
             {% if error %}
-                <div class="col-10 offset-1 col-sm-8 offset-sm-2">
-                    <div class="alert alert-danger">
-                        {{ error.messageKey|trans(error.messageData, 'messages')|raw }}
-                    </div>
+                <div class="p-login__error alert alert-danger u:mb-16" role="alert">
+                    {{ error.messageKey|trans(error.messageData, 'messages')|raw }}
                 </div>
             {% endif %}
 
-            <div class="col-10 offset-1 col-sm-8 offset-sm-2">
-                <div class="row">
-                    <div class="card col-6">
-                        <form id="main-login-form"
-                              class="u:m-0"
-                              role="form"
-                              method="post"
-                              action="{{ path('security_check') }}">
-                            <div class="card-body p-2">
-                                <h4 class="card-title">{{ 'login' | trans }}</h4>
-                                <div class="o-form-group">
-                                    <label for="login-u">{{ 'login.username.or.email' | trans }}</label>
-                                    <input type="text" id="login-u" name="_username" autofocus required
-                                           value="{{ last_username }}"
-                                           class="o-input">
-                                </div>
-                                <div class="o-form-group">
-                                    <label for="login-p">{{ 'password' | trans }}</label>
-                                    <div class="u:relative">
-                                        <input type="password" id="login-p" name="_password" class="o-input js-password-input">
-                                        <button type="button" id="password_show_hide" class="u:absolute u:text-gray-500 u:border-0 u:bg-white u:h-full u:top-0 u:end-0 js-password-show-hide" style="height: 38px; margin: 1px; background-color: transparent">
-                                            <svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                                <path class="block" d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
-                                                <circle class="block" cx="12" cy="12" r="3"></circle>
-                                            </svg>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="o-checkbox u:flex u:items-center u:my-8">
-                                    <input type="checkbox"
-                                           id="login-r"
-                                           class="o-checkbox__input"
-                                           value="1"
-                                           name="_remember_me">
-                                    <label class="o-checkbox__label" for="login-r">{{ 'stayloggedin' | trans }}</label>
-                                </div>
-                                <input type="hidden" name="_csrf_token"
-                                       value="{{ csrf_token('authenticate') }}"
-                                >
-                                {% if not error is null %}
-                                    <p class="mt-3">
-                                        {% if error.messageKey == 'Invalid credentials.' %}
-                                            {{ 'login.forgot.password' | trans }}<br>
-                                            <a href="{{ url('member_request_reset_password') }}">{{ 'login.password.getnew' | trans }}</a>
-                                            <br>
-                                            {{ 'login.forgot.username' | trans }}
-                                        {% endif %}
-                                        {% if error.messageKey == 'login.mail.not_confirmed' %}
-                                            {{ 'login.mail.not_confirmed' | trans }}<br>
-                                            <a href="{{ url('resend_confirmation_email', { 'username': last_username}) }}">{{ 'login.resend.confirmation' | trans }}</a>
-                                        {% endif %}
-                                        {% if error.messageKey == 'member_banned' %}
-                                            {{ 'login.account.banned' | trans }}
-                                        {% endif %}
-                                        {% if error.messageKey == 'member_expired' %}
-                                            {{ 'login.account.expired' | trans }}
-                                        {% endif %}
-                                        {% if error.messageKey == 'member_not_allowed_to_login' %}
-                                            {{ 'login.account.no_login' | trans }}
-                                        {% endif %}
-                                        <br>
-                                        <a href="{{ url('feedback', { 'IdCategory': 3}) }}">{{ 'login.contact.support' | trans }}</a>
-                                    </p>
-                                {% endif %}
-                            </div>
-                            <div class="u:flex u:justify-center u:items-center">
-                                <button type="submit"
-                                        class="o-button o-button--full">{{ 'indexpageloginsubmit' | trans }}</button>
-                            </div>
-                        </form>
+            {% for flash_message in app.session.flashBag.get('error') %}
+                <div class="p-login__error alert alert-danger u:mb-16">{{ flash_message | trans }}</div>
+            {% endfor %}
+            {% for flash_message in app.session.flashBag.get('notice') %}
+                <div class="p-login__notice alert alert-info u:mb-16">{{ flash_message | trans }}</div>
+            {% endfor %}
+
+            <form id="main-login-form"
+                  class="p-login__form"
+                  role="form"
+                  method="post"
+                  action="{{ path('security_check') }}">
+                <div class="o-form-group">
+                    <label for="login-u">{{ 'login.username.or.email' | trans }}</label>
+                    <input type="text" id="login-u" name="_username" autofocus required autocomplete="username"
+                           value="{{ last_username }}"
+                           class="o-input">
+                </div>
+
+                <div class="o-form-group">
+                    <label for="login-p">{{ 'password' | trans }}</label>
+                    <div class="p-login__password">
+                        <input type="password" id="login-p" name="_password" required autocomplete="current-password"
+                               class="o-input js-password-input">
+                        <button type="button" id="password_show_hide"
+                                class="p-login__password-toggle js-password-show-hide"
+                                aria-label="{{ 'password' | trans }}">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <path class="block" d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+                                <circle class="block" cx="12" cy="12" r="3"></circle>
+                            </svg>
+                        </button>
                     </div>
-                    <div class="card col-6">
-                        <div class="card-body p-2">
-                            <h4 class="card-title">{{ 'signupnow' | trans }}</h4>
-                            <p class="u:text-18 u:mt-24">{{ 'login.signup.info'|trans|raw }}</p>
-                        </div>
-                        <div class="u:flex u:justify-center u:items-center"><a href="{{ url('signup') }}" class="o-button o-button--full" role="button">
-                                {{ 'signup'|trans }}</a>
-                        </div>
+                </div>
+
+                <div class="p-login__row">
+                    <div class="o-checkbox">
+                        <input type="checkbox" id="login-r" class="o-checkbox__input" value="1" name="_remember_me">
+                        <label class="o-checkbox__label" for="login-r">{{ 'stayloggedin' | trans }}</label>
                     </div>
+                    <a class="p-login__forgot" href="{{ url('member_request_reset_password') }}">
+                        {{ 'login.password.getnew' | trans }}
+                    </a>
                 </div>
-            </div>
-        </div>
+
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
+
+                <button type="submit" class="o-button o-button--l o-button--full p-login__submit">
+                    {{ 'indexpageloginsubmit' | trans }}
+                </button>
+
+                {% if error %}
+                    <div class="p-login__help">
+                        {% if error.messageKey == 'Invalid credentials.' %}
+                            <p>{{ 'login.forgot.password' | trans }}
+                                <a href="{{ url('member_request_reset_password') }}">{{ 'login.password.getnew' | trans }}</a>
+                            </p>
+                            <p>{{ 'login.forgot.username' | trans }}</p>
+                        {% endif %}
+                        {% if error.messageKey == 'login.mail.not_confirmed' %}
+                            <p>{{ 'login.mail.not_confirmed' | trans }}
+                                <a href="{{ url('resend_confirmation_email', { 'username': last_username}) }}">{{ 'login.resend.confirmation' | trans }}</a>
+                            </p>
+                        {% endif %}
+                        {% if error.messageKey == 'member_banned' %}
+                            <p>{{ 'login.account.banned' | trans }}</p>
+                        {% endif %}
+                        {% if error.messageKey == 'member_expired' %}
+                            <p>{{ 'login.account.expired' | trans }}</p>
+                        {% endif %}
+                        {% if error.messageKey == 'member_not_allowed_to_login' %}
+                            <p>{{ 'login.account.no_login' | trans }}</p>
+                        {% endif %}
+                        <p>
+                            <a href="{{ url('feedback', { 'IdCategory': 3}) }}">{{ 'login.contact.support' | trans }}</a>
+                        </p>
+                    </div>
+                {% endif %}
+            </form>
+
+            <div class="p-login__separator" aria-hidden="true"><span>{{ 'menu.not.a.member.yet' | trans }}</span></div>
+
+            <a href="{{ url('signup') }}" class="o-button o-button--outline o-button--full p-login__signup">
+                {{ 'signupnow' | trans }}
+            </a>
+        </section>
     </div>
 </main>
 {% endblock content %}
-{% include 'footer.html.twig' %}
+
 {{ encore_entry_script_tags('bewelcome') }}
 {{ encore_entry_script_tags('password/showhide') }}
 </body>

From a00ad2971984b7a9179e476b8ea599ba7b244c91 Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Tue, 12 May 2026 15:13:44 +0200
Subject: [PATCH 08/13] no more bullet on profile

---
 assets/tailwindcss/layouts/_layouts.general.css | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/assets/tailwindcss/layouts/_layouts.general.css b/assets/tailwindcss/layouts/_layouts.general.css
index e51049fccf..265c3693da 100644
--- a/assets/tailwindcss/layouts/_layouts.general.css
+++ b/assets/tailwindcss/layouts/_layouts.general.css
@@ -1423,18 +1423,6 @@ main:has(.p-hero) {
   color: #f37000;
   margin-top: 1.1rem;
   margin-bottom: 0.3rem;
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-.p-profile-main .h5::before {
-  content: '';
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: #f37000;
-  border-radius: 50%;
-  flex-shrink: 0;
 }
 
 /* ── Accommodation stats ────────────────────────────────── */

From 24605191d6e84d5681c099eff4462ff17d027d39 Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Tue, 12 May 2026 15:27:10 +0200
Subject: [PATCH 09/13] better ration on gallery on profile page

---
 .../tailwindcss/layouts/_layouts.general.css  | 33 ++++++++++---------
 templates/profile/content.html.twig           | 12 ++++---
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/assets/tailwindcss/layouts/_layouts.general.css b/assets/tailwindcss/layouts/_layouts.general.css
index 265c3693da..efa1c5f90d 100644
--- a/assets/tailwindcss/layouts/_layouts.general.css
+++ b/assets/tailwindcss/layouts/_layouts.general.css
@@ -1627,33 +1627,30 @@ main:has(.p-hero) {
   grid-template-columns: 2fr 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 3px;
-  height: 210px;
+  aspect-ratio: 2 / 1;
+  max-height: 360px;
   border-radius: 0.75rem;
   overflow: hidden;
 }
 
 .p-gallery-cell:first-child {
   grid-row: 1 / 3;
-  aspect-ratio: unset;
 }
 
 .p-gallery-cell {
   position: relative;
-  aspect-ratio: 1;
+  min-width: 0;
+  min-height: 0;
   overflow: hidden;
   display: block;
   background: #f1f5f9;
-}
-
-.p-gallery-cell img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
   transition: transform 0.25s ease;
 }
 
-.p-gallery-cell:hover img {
+.p-gallery-cell:hover {
   transform: scale(1.06);
 }
 
@@ -1669,12 +1666,18 @@ main:has(.p-hero) {
   background: rgba(0,0,0,0.12);
 }
 
-.p-gallery-cell--more img {
-  filter: brightness(0.45);
+.p-gallery-cell--more {
+  position: relative;
+}
+
+.p-gallery-cell--more::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
 }
 
-.p-gallery-cell--more:hover img {
-  filter: brightness(0.45);
+.p-gallery-cell--more:hover {
   transform: none;
 }
 
diff --git a/templates/profile/content.html.twig b/templates/profile/content.html.twig
index d1a1ee7046..93988dd8ab 100644
--- a/templates/profile/content.html.twig
+++ b/templates/profile/content.html.twig
@@ -339,19 +339,21 @@
           {% for picture in pictures|slice(0, 5) %}
             {% set isLast = loop.last and pictures|length > 5 %}
             {% if isLast %}
-              <a href="{{ url('gallery', {username: member.username}) }}" class="p-gallery-cell p-gallery-cell--more">
-                <img src="{{ url('gallery_thumbnail', {id: picture.id, t: 1}) }}" alt="{{ picture.title }}">
+              <a href="{{ url('gallery', {username: member.username}) }}"
+                 class="p-gallery-cell p-gallery-cell--more"
+                 style="background-image: url('{{ url('gallery_thumbnail', {id: picture.id, t: 2}) }}')"
+                 aria-label="{{ picture.title }}">
                 <span class="p-gallery-cell__more-label">+{{ pictures|length - 4 }}</span>
               </a>
             {% else %}
               <a href="{{ url('gallery_image', {id: picture.id}) }}"
                  class="p-gallery-cell"
+                 style="background-image: url('{{ url('gallery_thumbnail', {id: picture.id, t: 2}) }}')"
                  data-toggle="lightbox"
                  data-gallery="profile-gallery"
                  data-type="image"
-                 data-title="{{ picture.title }}">
-                <img src="{{ url('gallery_thumbnail', {id: picture.id, t: 1}) }}" alt="{{ picture.title }}">
-              </a>
+                 data-title="{{ picture.title }}"
+                 aria-label="{{ picture.title }}"></a>
             {% endif %}
           {% endfor %}
         </div>

From b9cab2165f1263281b30a5d437133abe18d57e56 Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Tue, 12 May 2026 16:01:39 +0200
Subject: [PATCH 10/13] profile edit

---
 assets/js/gallery.js                          |   21 +-
 assets/js/lightbox.js                         |   10 +-
 assets/js/profile/edit.js                     |    8 +-
 assets/js/profile/edit_languages.js           |    4 +-
 assets/js/profile/preference.js               |    2 -
 assets/scss/_gallery.scss                     |  274 +-
 assets/scss/_home-landing.scss                |   36 -
 assets/scss/_lightbox.scss                    |   56 +
 assets/scss/_navbar.scss                      |   36 +
 .../tailwindcss/layouts/_layouts.general.css  | 3706 ++++++++++++++---
 assets/tailwindcss/layouts/_layouts.login.css |   62 -
 build/gallery/gallery.model.php               |    2 +-
 build/gallery/pages/gallerymanage.page.php    |   14 +
 .../templates/gallerymanage.column_col3.php   |  595 ++-
 .../templates/galleryset.column_col3.php      |    2 +-
 .../templates/imagefixedcolumns.list.php      |    2 +-
 build/gallery/templates/overview.php          |    8 +-
 bun.lock                                      |   24 +-
 package.json                                  |    2 -
 src/Controller/GalleryController.php          |   65 +-
 src/Controller/ProfileController.php          |    4 +-
 src/Form/AboutMeFormType.php                  |   19 +-
 src/Form/AccommodationFormType.php            |   49 +-
 src/Form/AccountEditFormType.php              |    5 +
 src/Form/GalleryEditImageFormType.php         |   15 +-
 src/Form/MyInterestsFormType.php              |   31 +-
 src/Form/TravelExperiencesFormType.php        |   16 +-
 templates/gallery/edit.image.html.twig        |   92 +-
 templates/gallery/upload.image.html.twig      |  239 +-
 templates/loginbar.html.twig                  |   10 +-
 templates/macros.twig                         |    4 +-
 .../member/request.password.reset.html.twig   |  100 +-
 templates/member/reset.password.html.twig     |  121 +-
 templates/preference/preference.html.twig     |   77 +-
 templates/private/download.html.twig          |   21 +-
 templates/private/gallery.html.twig           |    2 +-
 templates/private/password.html.twig          |   34 +-
 templates/private/pictures.html.twig          |    2 +-
 templates/profile/account.edit.html.twig      |  138 +-
 templates/profile/add.language.html.twig      |   47 +-
 templates/profile/content.html.twig           |   80 +-
 templates/profile/edit.header.html.twig       |   74 +-
 templates/profile/edit.html.twig              |   19 +-
 templates/profile/edit/about_me.html.twig     |   47 +-
 .../profile/edit/accommodation.html.twig      |  140 +-
 templates/profile/edit/avatar.html.twig       |   54 +-
 templates/profile/edit/languages.html.twig    |  117 +-
 templates/profile/edit/my_interests.html.twig |   51 +-
 .../profile/edit/travel_experiences.html.twig |   45 +-
 templates/profile/edit_subpage.html.twig      |   28 +
 templates/profile/header.html.twig            |    6 +-
 templates/profile/set.location.html.twig      |   63 +-
 templates/security/login.html.twig            |   13 +-
 translations/messages.en.yaml                 |    4 +
 translations/messages.fr.yaml                 |    4 +
 translations/missing/gallery.yaml             |   36 +
 translations/missing/password.yaml            |   21 +
 57 files changed, 5291 insertions(+), 1466 deletions(-)
 create mode 100644 assets/scss/_lightbox.scss
 create mode 100644 templates/profile/edit_subpage.html.twig
 create mode 100644 translations/messages.en.yaml
 create mode 100644 translations/messages.fr.yaml

diff --git a/assets/js/gallery.js b/assets/js/gallery.js
index e50c87e428..8b8d346f45 100644
--- a/assets/js/gallery.js
+++ b/assets/js/gallery.js
@@ -1,19 +1,2 @@
-let Masonry = require('masonry-layout');
-let imagesLoaded = require('imagesloaded');
-
-document.addEventListener('DOMContentLoaded', function () {
-    // init Masonry
-    let grid = document.getElementById('masonry-grid');
-
-    if (grid !== null)
-    {
-        var msnry = new Masonry( grid, {
-            percentPosition: true
-        });
-
-        imagesLoaded( grid ).on( 'progress', function() {
-            // layout Masonry after each image loads
-            msnry.layout();
-        });
-    }
-});
+// Gallery layout is handled entirely via CSS Grid (see #masonry-grid in _layouts.general.css).
+// This entry file is kept so existing pages that include `gallery.js` continue to work without changes.
diff --git a/assets/js/lightbox.js b/assets/js/lightbox.js
index aba8d9dbce..c37829431b 100644
--- a/assets/js/lightbox.js
+++ b/assets/js/lightbox.js
@@ -1,6 +1,8 @@
+import '../scss/_lightbox.scss';
 import Lightbox from 'bs5-lightbox';
 
-document.querySelectorAll('[data-toggle="lightbox"]')
-    .forEach(
-        el => el.addEventListener('click', Lightbox.initialize)
-    );
+// bs5-lightbox registers `[data-toggle="lightbox"]` when this module loads.
+// Only bind `[data-bs-toggle="lightbox"]` here — binding both would run two handlers on the same link.
+document.querySelectorAll('[data-bs-toggle="lightbox"]').forEach((el) => {
+  el.addEventListener('click', Lightbox.initialize);
+});
diff --git a/assets/js/profile/edit.js b/assets/js/profile/edit.js
index 7a922fdbfb..9afec3900e 100644
--- a/assets/js/profile/edit.js
+++ b/assets/js/profile/edit.js
@@ -7,6 +7,8 @@ editLanguages.forEach(editLanguage => {
         editLanguages.forEach(editLanguage => {
             editLanguage.classList.add('btn-outline-primary')
             editLanguage.classList.remove('btn-primary')
+            editLanguage.classList.remove('p-edit-header__lang-tab--active')
+            editLanguage.setAttribute('aria-selected', 'false')
         })
 
         const languages = document.querySelectorAll('[id^=profile-language-]')
@@ -14,13 +16,15 @@ editLanguages.forEach(editLanguage => {
             language.classList.add('u:hidden!')
         })
 
-        const language = e.target.dataset.editLanguage
+        const language = e.currentTarget.dataset.editLanguage
         const activeLanguage = document.getElementById("profile-language-" + language)
-        const editLanguageButton = document.querySelector("[data-edit-language=" + language + "]")
+        const editLanguageButton = e.currentTarget
 
         activeLanguage.classList.remove('u:hidden!')
         editLanguageButton.classList.add("btn-primary")
         editLanguageButton.classList.remove("btn-outline-primary")
+        editLanguageButton.classList.add("p-edit-header__lang-tab--active")
+        editLanguageButton.setAttribute('aria-selected', 'true')
     })
 })
 
diff --git a/assets/js/profile/edit_languages.js b/assets/js/profile/edit_languages.js
index 02d5a22b09..6e6222d599 100644
--- a/assets/js/profile/edit_languages.js
+++ b/assets/js/profile/edit_languages.js
@@ -1,4 +1,4 @@
-import {initializeTomSelects, destroyTomSelects} from "../tom-select";
+import {initializeTomSelects} from "../tom-select";
 
 document
     .querySelectorAll('.js-add-language')
@@ -20,7 +20,6 @@ function addFormToCollection(e) {
         );
 
     collectionHolder.insertAdjacentHTML('beforeend', html)
-    collectionHolder.insertAdjacentHTML('beforeend', '<hr class="u:bg-bewelcome" style="margin-top:0">')
     collectionHolder.dataset.index++
 
     addDeleteLanguageEventListener()
@@ -29,7 +28,6 @@ function addFormToCollection(e) {
 
 function deleteFormFromCollection(e) {
     const current  = document.getElementById(e.currentTarget.dataset.related);
-    console.log(current)
     current.remove()
 
     const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);
diff --git a/assets/js/profile/preference.js b/assets/js/profile/preference.js
index 551536e7fb..f7ccc3226c 100644
--- a/assets/js/profile/preference.js
+++ b/assets/js/profile/preference.js
@@ -18,8 +18,6 @@ preferences.forEach(
 
             await fetch("/members/update/preference", { method: 'POST', body: form })
                 .then(() => { /* Nothing to do here */ })
-
-            console.log(form)
         })
     }
 )
diff --git a/assets/scss/_gallery.scss b/assets/scss/_gallery.scss
index cf5d05bb9b..bedca449d9 100644
--- a/assets/scss/_gallery.scss
+++ b/assets/scss/_gallery.scss
@@ -57,4 +57,276 @@
     width: 100px;
   }
 
-}
\ No newline at end of file
+  // gallery/edit.image.html.twig
+  .p-gallery-edit {
+    max-width: 56rem;
+    margin-inline: auto;
+    padding: 0 0.5rem;
+
+    @media (min-width: 576px) {
+      padding: 0;
+    }
+
+    &__hero {
+      margin-bottom: 1.75rem;
+      padding: 1.25rem 1.35rem 1.35rem;
+      background: #fff;
+      border: 1px solid #e8ecf1;
+      border-radius: 0.875rem;
+      box-shadow:
+        0 1px 2px rgba(15, 23, 42, 0.04),
+        0 4px 24px rgba(15, 23, 42, 0.06);
+    }
+
+    &__toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    &__back-btn {
+      font-weight: 600;
+    }
+
+    &__intro {
+      margin: 0;
+    }
+
+    &__title {
+      margin: 0;
+      font-size: clamp(1.25rem, 4vw, 1.65rem);
+      font-weight: 700;
+      letter-spacing: -0.03em;
+      line-height: 1.25;
+      color: #0f172a;
+      word-break: break-word;
+    }
+
+    &__preview {
+      max-width: 100%;
+      overflow: hidden;
+      text-align: center;
+      border-radius: 0.75rem;
+      border: 1px solid #e8ecf1;
+      background: #f8fafc;
+      padding: 0.75rem;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+
+      .p-gallery-edit__preview-link {
+        display: inline-block;
+        max-width: 100%;
+      }
+
+      img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 100%;
+        width: auto;
+        height: auto;
+        max-height: min(75vh, 640px);
+        object-fit: contain;
+      }
+    }
+
+    &__full-link-wrap {
+      margin: 0.75rem 0 0;
+      font-size: 0.8125rem;
+      text-align: center;
+
+      @media (min-width: 992px) {
+        text-align: left;
+      }
+    }
+
+    &__full-link {
+      color: #64748b;
+      font-weight: 500;
+      text-decoration: none;
+      transition: color 0.15s ease;
+
+      &:hover {
+        color: #f37000;
+        text-decoration: underline;
+        text-underline-offset: 0.15em;
+      }
+    }
+
+    &__card {
+      border-radius: 0.875rem;
+      border: 1px solid #e8ecf1 !important;
+      box-shadow:
+        0 1px 2px rgba(15, 23, 42, 0.04),
+        0 6px 28px rgba(15, 23, 42, 0.07);
+    }
+
+    &__form {
+      label {
+        display: block;
+        font-weight: 600;
+        margin-bottom: 0.375rem;
+        color: var(--bs-body-color);
+      }
+    }
+
+    &__title-input {
+      font-size: 1.0625rem;
+    }
+
+    &__textarea {
+      line-height: 1.45;
+      resize: vertical;
+      min-height: 9rem;
+    }
+
+    &__actions {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 1.5rem;
+      padding-top: 1.25rem;
+      border-top: 1px solid #f1f5f9;
+    }
+
+    &__submit {
+      width: 100%;
+
+      @media (min-width: 576px) {
+        width: auto;
+        min-width: 12rem;
+      }
+    }
+  }
+
+  .p-gallery-manage__pagehead-heading {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  /*
+   * Legacy /gallery/manage — header is PHP-only and loads bewelcome.css before tailwind.css.
+   * Keep back + title + upload styles here so the back control stays visible even with an old tailwind build.
+   */
+  .p-gallery-manage__pagehead {
+    max-width: 1100px;
+    margin: 0.5rem auto 1rem;
+    padding: 0 1rem;
+    color: #1f2937;
+  }
+
+  .p-gallery-manage__pagehead-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  .p-gallery-manage__pagehead-copy {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .p-gallery-manage__pagehead-eyebrow {
+    margin: 0 0 0.15rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #f37000;
+  }
+
+  .p-gallery-manage__pagehead-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #0f172a;
+    line-height: 1.2;
+    word-break: break-word;
+  }
+
+  .p-gallery-manage__pagehead-cta {
+    flex: 0 0 auto;
+    margin-left: auto;
+    align-self: center;
+  }
+
+  .p-gallery-manage__subtitle {
+    margin: 0.35rem 0 0;
+    font-size: 0.85rem;
+    color: #64748b;
+  }
+
+  .p-gallery-manage__upload-cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.65rem 1.25rem;
+    border-radius: 999px;
+    background: #f37000;
+    color: #fff !important;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-decoration: none !important;
+    box-shadow: 0 2px 6px rgba(243, 112, 0, 0.25);
+    transition:
+      background-color 0.15s ease,
+      box-shadow 0.15s ease,
+      transform 0.15s ease;
+
+    &:hover,
+    &:focus-visible {
+      background: #d96400;
+      box-shadow: 0 4px 12px rgba(243, 112, 0, 0.35);
+      transform: translateY(-1px);
+      outline: none;
+      color: #fff !important;
+    }
+
+    i {
+      font-size: 1rem;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .p-gallery-manage__pagehead-row {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .p-gallery-manage__pagehead-cta {
+      margin-left: 0;
+      width: 100%;
+    }
+
+    .p-gallery-manage__pagehead-cta .p-gallery-manage__upload-cta {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
+  // legacy class kept for any other use; edit page uses .p-gallery-edit__preview
+  .gallery-edit-preview {
+    max-width: 100%;
+    overflow: hidden;
+    text-align: center;
+
+    a {
+      display: inline-block;
+      max-width: 100%;
+    }
+
+    img {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 100%;
+      width: auto;
+      height: auto;
+      max-height: min(75vh, 640px);
+      object-fit: contain;
+    }
+  }
+
+}
diff --git a/assets/scss/_home-landing.scss b/assets/scss/_home-landing.scss
index 20feea2ac5..a23c965139 100644
--- a/assets/scss/_home-landing.scss
+++ b/assets/scss/_home-landing.scss
@@ -1052,42 +1052,6 @@
   }
 }
 
-.loginbar--slim {
-  .loginbar-slim__cta {
-    line-height: 1.35;
-
-    a {
-      &:hover,
-      &:focus {
-        color: #fff;
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .loginbar-slim__sep {
-    font-weight: 300;
-    user-select: none;
-  }
-
-  .loginbar-slim__lang-toggle {
-    &:hover,
-    &:focus,
-    &:active {
-      color: #fff !important;
-      background: transparent !important;
-      border: none !important;
-      box-shadow: none !important;
-      text-decoration: none;
-    }
-
-    &:focus-visible {
-      outline: 2px solid rgba(255, 255, 255, 0.45);
-      outline-offset: 2px;
-    }
-  }
-}
-
 /* Cookie consent: bottom full-width banner */
 .cc-window.cc-banner {
   left: 0;
diff --git a/assets/scss/_lightbox.scss b/assets/scss/_lightbox.scss
new file mode 100644
index 0000000000..45f0004158
--- /dev/null
+++ b/assets/scss/_lightbox.scss
@@ -0,0 +1,56 @@
+// bs5-lightbox sets inline background-color: #000 on .ratio — use transparent so only the image reads.
+.modal.lightbox {
+  .modal-content {
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  .modal-body {
+    background-color: transparent;
+  }
+
+  .carousel-inner {
+    background-color: transparent;
+  }
+
+  .carousel-item .ratio {
+    background-color: transparent !important;
+  }
+
+  .carousel-item {
+    background-color: transparent;
+  }
+}
+
+// bs5-lightbox uses a 16:9 ratio wrapper; for still images that wastes space for portraits.
+.modal.lightbox .carousel-item .ratio:has(> img) {
+  &::before {
+    display: none !important;
+  }
+
+  min-height: min(72vh, 900px);
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > img {
+    position: static !important;
+    z-index: 1;
+    max-height: min(88vh, 100%);
+    max-width: 100%;
+    width: auto !important;
+    height: auto !important;
+    object-fit: contain;
+  }
+}
+
+.modal.lightbox.modal-fullscreen .carousel-item .ratio:has(> img) {
+  min-height: 100vh;
+  max-height: 100vh;
+
+  > img {
+    max-height: min(96vh, 100%);
+  }
+}
diff --git a/assets/scss/_navbar.scss b/assets/scss/_navbar.scss
index 1cd86ff6a6..27fbaeb13d 100644
--- a/assets/scss/_navbar.scss
+++ b/assets/scss/_navbar.scss
@@ -42,6 +42,42 @@
   }
 }
 
+.loginbar--slim {
+  .loginbar-slim__cta {
+    line-height: 1.35;
+
+    a {
+      &:hover,
+      &:focus {
+        color: #fff;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .loginbar-slim__sep {
+    font-weight: 300;
+    user-select: none;
+  }
+
+  .loginbar-slim__lang-toggle {
+    &:hover,
+    &:focus,
+    &:active {
+      color: #fff !important;
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      text-decoration: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgba(255, 255, 255, 0.45);
+      outline-offset: 2px;
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   #main_menu .bw-header-logo__text {
     height: 38px;
diff --git a/assets/tailwindcss/layouts/_layouts.general.css b/assets/tailwindcss/layouts/_layouts.general.css
index efa1c5f90d..542cebc791 100644
--- a/assets/tailwindcss/layouts/_layouts.general.css
+++ b/assets/tailwindcss/layouts/_layouts.general.css
@@ -1010,713 +1010,3433 @@ main:has(.p-hero) {
   padding-top: 1.5rem;
 }
 
+/* Edit mode: single column, all cards full width */
+.p-profile-layout--edit {
+  grid-template-columns: 1fr;
+}
+
+.p-profile-layout--edit .p-profile-secondary {
+  position: static;
+  top: auto;
+}
+
 .p-profile-main { min-width: 0; }
 
-.p-profile-secondary {
-  min-width: 0;
-  align-self: start;
-  position: sticky;
-  top: 80px;
+/* ── Profile edit header ──────────────────────────────── */
+.p-edit-header {
+  background: #fff;
+  border-radius: 1rem;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 16px rgba(15, 23, 42, 0.06);
+  margin: 1rem 0 1.5rem;
+  overflow: hidden;
+}
+
+.p-edit-header__top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 1.25rem 1.5rem;
+}
+
+.p-edit-header__avatar {
+  position: relative;
+  flex-shrink: 0;
+  width: 88px;
+  height: 88px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid #fff;
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
+  display: block;
+}
+
+.p-edit-header__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.p-edit-header__avatar-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.55);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+
+.p-edit-header__avatar:hover .p-edit-header__avatar-overlay,
+.p-edit-header__avatar:focus-visible .p-edit-header__avatar-overlay {
+  opacity: 1;
+}
+
+.p-edit-header__identity {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.p-edit-header__eyebrow {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #f37000;
+  margin: 0 0 0.2rem;
+}
+
+.p-edit-header__name {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0;
+  line-height: 1.2;
+  word-break: break-word;
+}
+
+.p-edit-header__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.p-edit-header__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.5rem 1rem;
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none !important;
+  cursor: pointer;
+  transition: filter 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  line-height: 1.2;
+}
+
+.p-edit-header__btn i { font-size: 0.875rem; }
+
+.p-edit-header__btn--primary {
+  background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%);
+  color: #fff !important;
+  box-shadow: 0 2px 8px rgba(243, 112, 0, 0.25);
+}
+
+.p-edit-header__btn--primary:hover {
+  filter: brightness(1.07);
+  box-shadow: 0 4px 14px rgba(243, 112, 0, 0.35);
+}
+
+.p-edit-header__btn--secondary {
+  background: #f8fafc;
+  color: #475569 !important;
+  border-color: #e2e8f0;
+}
+
+.p-edit-header__btn--secondary:hover {
+  background: #f1f5f9;
+  color: #0f172a !important;
+  border-color: #cbd5e1;
+}
+
+/* Language tabs row */
+.p-edit-header__langs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1.5rem 1rem;
+  border-top: 1px solid #f1f5f9;
+  background: #fafbfc;
+}
+
+.p-edit-header__lang-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.p-edit-header__lang-tab {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #64748b;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  line-height: 1.3;
+}
+
+.p-edit-header__lang-tab:hover {
+  border-color: #f37000;
+  color: #f37000;
+}
+
+.p-edit-header__lang-tab--active {
+  background: #f37000;
+  border-color: #f37000;
+  color: #fff;
+}
+
+.p-edit-header__lang-tab--active:hover {
+  background: #c25a00;
+  border-color: #c25a00;
+  color: #fff;
+}
+
+.p-edit-header__add-lang {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
+  border: 1px dashed #cbd5e1;
+  background: transparent;
+  color: #475569;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-decoration: none !important;
+  white-space: nowrap;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.p-edit-header__add-lang:hover {
+  background: #fff7ed;
+  border-color: #f37000;
+  color: #f37000;
+}
+
+/* Quick secondary links row */
+.p-edit-header__quicklinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+  padding: 0.6rem 1.5rem 0.75rem;
+  border-top: 1px solid #f1f5f9;
+  background: #fff;
+}
+
+.p-edit-header__quicklink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #64748b !important;
+  text-decoration: none !important;
+  transition: color 0.15s ease;
+}
+
+.p-edit-header__quicklink i {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  transition: color 0.15s ease;
+}
+
+.p-edit-header__quicklink:hover,
+.p-edit-header__quicklink:focus-visible {
+  color: #f37000 !important;
+}
+
+.p-edit-header__quicklink:hover i,
+.p-edit-header__quicklink:focus-visible i {
+  color: #f37000;
+}
+
+@media (max-width: 540px) {
+  .p-edit-header__top { padding: 1rem; gap: 1rem; }
+  .p-edit-header__avatar { width: 72px; height: 72px; }
+  .p-edit-header__name { font-size: 1.25rem; }
+  .p-edit-header__actions {
+    flex-basis: 100%;
+    justify-content: flex-start;
+  }
+  .p-edit-header__langs { padding: 0.75rem 1rem; }
+  .p-edit-header__quicklinks { padding: 0.6rem 1rem 0.75rem; gap: 0.25rem 1rem; }
+}
+
+/* ── Profile edit subpages (About me, Accommodation, Preferences, …) ── */
+.p-edit-subpage {
+  max-width: 880px;
+  margin: 1.5rem auto;
+  padding: 0;
+}
+
+.p-edit-subpage__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1.25rem;
+  flex-wrap: nowrap;
+  margin-bottom: 1.25rem;
+}
+
+.p-edit-subpage__back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  background: #f3f4f6;
+  border: none;
+  color: #6b7280;
+  text-decoration: none !important;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.p-edit-subpage__back i {
+  font-size: 0.75rem;
+}
+
+.p-edit-subpage__back:hover,
+.p-edit-subpage__back:focus-visible {
+  background: #e5e7eb;
+  color: #111827;
+  outline: none;
+}
+
+.p-edit-subpage__back:active {
+  background: #d1d5db;
+}
+
+.p-edit-subpage__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.p-edit-subpage__eyebrow {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #f37000;
+  margin: 0 0 0.15rem;
+}
+
+.p-edit-subpage__title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0;
+  line-height: 1.2;
+  word-break: break-word;
+}
+
+.p-edit-subpage__card {
+  background: #fff;
+  border-radius: 1rem;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 16px rgba(15, 23, 42, 0.06);
+  padding: 1.5rem;
+  color: #334155;
+  line-height: 1.6;
+}
+
+/* Compact spacing between Symfony form rows inside the card */
+.p-edit-subpage__card .mb-3,
+.p-edit-subpage__card .form-group {
+  margin-bottom: 1.1rem;
+}
+
+.p-edit-subpage__card .form-label,
+.p-edit-subpage__card legend.o-label,
+.p-edit-subpage__card .o-label {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: #475569;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 0.4rem;
+}
+
+.p-edit-subpage__card h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0 0 0.5rem;
+}
+
+.p-edit-subpage__card h2 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 1.25rem 0 0.5rem;
+}
+
+.p-edit-subpage__card h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 1rem 0 0.4rem;
+}
+
+.p-edit-subpage__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid #f1f5f9;
+}
+
+.p-edit-subpage__actions .o-button,
+.p-edit-subpage__actions button[type="submit"],
+.p-edit-subpage__actions input[type="submit"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  padding: 0.7rem 1.35rem;
+  border: 1px solid #f37000;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%, #e06000 100%);
+  color: #fff;
+  font-family: inherit;
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.2;
+  text-decoration: none !important;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(243, 112, 0, 0.24);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    filter 0.15s ease;
+}
+
+.p-edit-subpage__actions .o-button:hover,
+.p-edit-subpage__actions .o-button:focus-visible,
+.p-edit-subpage__actions button[type="submit"]:hover,
+.p-edit-subpage__actions button[type="submit"]:focus-visible,
+.p-edit-subpage__actions input[type="submit"]:hover,
+.p-edit-subpage__actions input[type="submit"]:focus-visible {
+  color: #fff;
+  filter: brightness(1.03);
+  box-shadow: 0 6px 18px rgba(243, 112, 0, 0.32);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.p-edit-subpage__actions--split {
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 640px) {
+  .p-edit-subpage { margin: 1rem auto; padding: 0 0.75rem; }
+  .p-edit-subpage__card { padding: 1.1rem; }
+  .p-edit-subpage__title { font-size: 1.25rem; }
+
+  .p-edit-subpage__header {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .p-edit-subpage__heading {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .p-edit-subpage__actions { justify-content: stretch; }
+  .p-edit-subpage__actions .o-button,
+  .p-edit-subpage__actions button[type="submit"],
+  .p-edit-subpage__actions input[type="submit"] {
+    width: 100%;
+  }
+}
+
+/* ── Translation field label (used by macros.field_translation) ── */
+.o-field-translation__label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #475569;
+}
+
+.p-edit-subpage__card .o-field-translation + .o-field-translation {
+  margin-top: 1.25rem;
+}
+
+/* ── Profile edit textareas (plain, no rich editor) ── */
+.p-edit-subpage__card textarea.o-input,
+.p-edit-subpage__card input.o-input {
+  width: 100%;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 0.65rem 0.85rem;
+  font-size: 0.95rem;
+  color: #1f2937;
+  line-height: 1.55;
+  font-family: inherit;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.p-edit-subpage__card textarea.o-input {
+  resize: vertical;
+  min-height: 5rem;
+}
+
+.p-edit-subpage__card textarea.o-input:hover,
+.p-edit-subpage__card input.o-input:hover {
+  border-color: #cbd5e1;
+}
+
+.p-edit-subpage__card textarea.o-input:focus,
+.p-edit-subpage__card input.o-input:focus {
+  outline: none;
+  border-color: #f37000;
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.15);
+}
+
+.p-edit-subpage__card textarea.o-input::placeholder,
+.p-edit-subpage__card input.o-input::placeholder {
+  color: #94a3b8;
+  font-style: italic;
+}
+
+/* ── Account edit form ── */
+.p-account-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.p-account-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  padding: 1rem;
+  border: 1px solid #f1f5f9;
+  border-radius: 0.875rem;
+  background: #f8fafc;
+}
+
+.p-account-section__label {
+  margin: 0;
+  color: #0f172a;
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.p-account-section__help {
+  display: block;
+  margin: 0;
+  color: #64748b;
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+
+.p-account-section .invalid-feedback,
+.p-account-section .form-error-message {
+  color: #dc2626;
+  font-size: 0.85rem;
+  margin: 0;
+}
+
+.p-account-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin: 0.4rem 0 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.p-account-toggle__label {
+  color: #475569;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+/* ── Profile language forms ── */
+.p-language-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.p-language-form__group {
+  min-width: 0;
+}
+
+.p-language-form__label {
+  display: block;
+  margin-bottom: 0.45rem;
+  color: #475569;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.p-language-form__control,
+.p-language-form select,
+.p-language-form .ts-control {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.65rem 0.85rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  background: #fff;
+  color: #1f2937;
+  font-family: inherit;
+  font-size: 0.95rem;
+  line-height: 1.35;
+  box-shadow: none;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.p-language-form select {
+  appearance: none;
+  background-image:
+    linear-gradient(45deg, transparent 50%, #94a3b8 50%),
+    linear-gradient(135deg, #94a3b8 50%, transparent 50%);
+  background-position:
+    calc(100% - 1.1rem) 50%,
+    calc(100% - 0.8rem) 50%;
+  background-size: 0.32rem 0.32rem;
+  background-repeat: no-repeat;
+  padding-right: 2.25rem;
+}
+
+.p-language-form .ts-wrapper {
+  width: 100%;
+}
+
+.p-language-form .ts-control {
+  display: flex;
+  align-items: center;
+}
+
+.p-language-form .ts-control > input {
+  color: #1f2937;
+  font-size: 0.95rem;
+}
+
+.p-language-form select:hover,
+.p-language-form .ts-control:hover {
+  border-color: #cbd5e1;
+}
+
+.p-language-form select:focus,
+.p-language-form .ts-wrapper.focus .ts-control {
+  border-color: #f37000;
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.15);
+  outline: none;
+}
+
+.p-language-panel {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+  align-items: start;
+  padding: 1rem;
+  border: 1px solid #f1f5f9;
+  border-radius: 0.875rem;
+  background: #f8fafc;
+}
+
+.p-language-panel__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 999px;
+  background: rgba(243, 112, 0, 0.12);
+  color: #f37000;
+}
+
+.p-language-panel__content {
+  min-width: 0;
+}
+
+.collection-languages {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.p-language-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: end;
+  padding: 1rem;
+  border: 1px solid #f1f5f9;
+  border-radius: 0.875rem;
+  background: #f8fafc;
+}
+
+.p-language-row__fields {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 0.875rem;
+  min-width: 0;
+}
+
+.p-language-row__delete,
+.p-language-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  border: none;
+  font-family: inherit;
+  font-weight: 700;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.p-language-row__delete {
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.75rem;
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+.p-language-row__delete:hover,
+.p-language-row__delete:focus-visible {
+  background: #e11d48;
+  color: #fff;
+}
+
+.p-language-add {
+  min-height: 2.75rem;
+  padding: 0 1rem;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #f37000;
+}
+
+.p-language-add:hover,
+.p-language-add:focus-visible {
+  background: #f37000;
+  color: #fff;
+  transform: translateY(-1px);
+}
+
+@media (max-width: 640px) {
+  .p-language-panel,
+  .p-language-row {
+    grid-template-columns: 1fr;
+    padding: 0.875rem;
+  }
+
+  .p-language-row__fields {
+    grid-template-columns: 1fr;
+  }
+
+  .p-language-row__delete {
+    width: 100%;
+  }
+}
+
+/* ── Profile location edit ── */
+.p-location-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.p-location-panel {
+  padding: 1rem;
+  border: 1px solid #f1f5f9;
+  border-radius: 0.875rem;
+  background: #f8fafc;
+}
+
+.p-location-search {
+  position: relative;
+  width: 100%;
+}
+
+.p-location-search__icon {
+  position: absolute;
+  top: 50%;
+  left: 0.85rem;
+  transform: translateY(-50%);
+  color: #94a3b8;
+  font-size: 0.9rem;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.p-location-search .o-input {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.65rem 0.85rem 0.65rem 2.35rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  color: #1f2937;
+  font-size: 0.95rem;
+  line-height: 1.35;
+  box-shadow: none;
+}
+
+.p-location-search:focus-within .p-location-search__icon {
+  color: #f37000;
+}
+
+.p-location-search .o-input:hover {
+  border-color: #cbd5e1;
+}
+
+.p-location-search .o-input:focus {
+  border-color: #f37000;
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.15);
+  outline: none;
+}
+
+.p-location-form__errors {
+  margin-top: 0.5rem;
+  color: #dc2626;
+  font-size: 0.875rem;
+}
+
+.p-location-map {
+  width: 100%;
+  height: 440px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  border-radius: 1rem;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 16px rgba(15, 23, 42, 0.06);
+}
+
+@media (max-width: 640px) {
+  .p-location-panel {
+    padding: 0.875rem;
+  }
+
+  .p-location-map {
+    height: 320px;
+  }
+}
+
+/* ── Profile preferences ── */
+.p-preferences-form {
+  display: block;
+}
+
+.p-preferences-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.p-preference-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem;
+  border: 1px solid #f1f5f9;
+  border-radius: 0.875rem;
+  background: #f8fafc;
+}
+
+.p-preference-card__copy {
+  min-width: 0;
+}
+
+.p-preference-card__title {
+  margin: 0;
+  color: #0f172a;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.p-preference-card__help {
+  display: block;
+  margin-top: 0.35rem;
+  color: #64748b;
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
+.p-preference-card__control {
+  display: flex;
+  justify-content: flex-end;
+  min-width: min(100%, 16rem);
+}
+
+.p-preference-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.p-preference-toggle__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.p-preference-toggle__label {
+  color: #64748b;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.p-preference-toggle__label--active {
+  color: #475569;
+}
+
+.p-preference-toggle__track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 3.25rem;
+  height: 1.75rem;
+  padding: 0.18rem;
+  border-radius: 999px;
+  background: #cbd5e1;
+  transition:
+    background 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.p-preference-toggle__thumb {
+  width: 1.38rem;
+  height: 1.38rem;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
+  transform: translateX(0);
+  transition: transform 0.15s ease;
+}
+
+.p-preference-toggle__input:checked + .p-preference-toggle__track {
+  background: #f37000;
+}
+
+.p-preference-toggle__input:checked + .p-preference-toggle__track .p-preference-toggle__thumb {
+  transform: translateX(1.5rem);
+}
+
+.p-preference-toggle__input:focus-visible + .p-preference-toggle__track {
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.2);
+}
+
+.p-preference-select {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.65rem 2.25rem 0.65rem 0.85rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  appearance: none;
+  background:
+    linear-gradient(45deg, transparent 50%, #94a3b8 50%) calc(100% - 1.1rem) 50% / 0.32rem 0.32rem no-repeat,
+    linear-gradient(135deg, #94a3b8 50%, transparent 50%) calc(100% - 0.8rem) 50% / 0.32rem 0.32rem no-repeat,
+    #fff;
+  color: #1f2937;
+  font-family: inherit;
+  font-size: 0.95rem;
+  line-height: 1.35;
+  box-shadow: none;
+}
+
+.p-preference-select:hover {
+  border-color: #cbd5e1;
+}
+
+.p-preference-select:focus {
+  border-color: #f37000;
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.15);
+  outline: none;
+}
+
+@media (max-width: 720px) {
+  .p-preference-card {
+    grid-template-columns: 1fr;
+    align-items: start;
+  }
+
+  .p-preference-card__control {
+    justify-content: flex-start;
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+.p-profile-secondary {
+  min-width: 0;
+  align-self: start;
+  position: sticky;
+  top: 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.p-profile-secondary .card {
+  border-radius: 1rem;
+  border: none;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 16px rgba(15, 23, 42, 0.06);
+  margin-bottom: 0;
+}
+
+.p-profile-secondary .card-header {
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #1e293b;
+  background: #fff;
+  border-bottom: none;
+  padding: 0.9rem 1.25rem 1.15rem;
+  border-radius: 1rem 1rem 0 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  position: relative;
+}
+
+.p-profile-secondary .card-header::after {
+  content: '';
+  position: absolute;
+  left: 1.25rem;
+  bottom: 0.55rem;
+  width: 2rem;
+  height: 3px;
+  background: #f37000;
+  border-radius: 2px;
+}
+
+.p-profile-secondary .card-body {
+  padding: 0.75rem 1.25rem 1rem !important;
+  font-size: 0.9375rem;
+  color: #334155;
+  line-height: 1.6;
+}
+
+/* ── Toasts ─────────────────────────────────────────────── */
+.p-toast {
+  min-width: 280px;
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 20px rgba(15,23,42,0.15);
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+.p-toast--success { background: #16a34a; color: #fff; }
+.p-toast--danger, .p-toast--error { background: #dc2626; color: #fff; }
+.p-toast--warning { background: #d97706; color: #fff; }
+.p-toast--info { background: #2563eb; color: #fff; }
+
+/* ── Global toast notifications (bw-toast) ──────────────── */
+@keyframes bw-toast-in {
+  from { opacity: 0; transform: translateX(1.5rem) scale(0.95); }
+  to   { opacity: 1; transform: translateX(0)       scale(1);    }
+}
+
+.bw-toast {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 0.875rem 0.875rem 1rem;
+  min-width: 280px;
+  max-width: 360px;
+  border-radius: 0.875rem;
+  background: #fff;
+  color: #334155;
+  box-shadow:
+    0 0 0 1px rgba(15, 23, 42, 0.07),
+    0 8px 32px rgba(15, 23, 42, 0.12),
+    0 2px 8px  rgba(15, 23, 42, 0.06);
+  margin-bottom: 0.5rem;
+  border: none !important;
+  animation: bw-toast-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+.bw-toast__icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  font-size: 0.85rem;
+}
+
+.bw-toast__body {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: #334155;
+}
+
+.bw-toast__close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  color: #94a3b8;
+  font-size: 0.75rem;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.bw-toast__close:hover {
+  color: #475569;
+  background: #f1f5f9;
+}
+
+/* Variants — tinted background + matching icon bubble */
+.bw-toast--notice  { background: #eef4fd; }
+.bw-toast--success { background: #f0fdf4; }
+.bw-toast--error   { background: #fef2f2; }
+.bw-toast--warning { background: #fffbeb; }
+
+.bw-toast--notice .bw-toast__icon  { background: rgba(55, 129, 235, 0.14); color: #3781eb; }
+.bw-toast--success .bw-toast__icon { background: rgba( 22, 163,  74, 0.15); color: #16a34a; }
+.bw-toast--error .bw-toast__icon   { background: rgba(220,  38,  38, 0.15); color: #dc2626; }
+.bw-toast--warning .bw-toast__icon { background: rgba(217, 119,   6, 0.15); color: #d97706; }
+
+.bw-toast--notice .bw-toast__body  { color: #1a4d9e; }
+.bw-toast--success .bw-toast__body { color: #15803d; }
+.bw-toast--error .bw-toast__body   { color: #b91c1c; }
+.bw-toast--warning .bw-toast__body { color: #92400e; }
+
+.bw-toast--notice .bw-toast__close  { color: #3781eb; }
+.bw-toast--success .bw-toast__close { color: #16a34a; }
+.bw-toast--error .bw-toast__close   { color: #dc2626; }
+.bw-toast--warning .bw-toast__close { color: #d97706; }
+
+.bw-toast--notice .bw-toast__close:hover  { background: rgba(55, 129, 235, 0.1); }
+.bw-toast--success .bw-toast__close:hover { background: rgba( 22, 163,  74, 0.1); }
+.bw-toast--error .bw-toast__close:hover   { background: rgba(220,  38,  38, 0.1); }
+.bw-toast--warning .bw-toast__close:hover { background: rgba(217, 119,   6, 0.1); }
+
+/* ── About Me: full-bleed flush below hero ──────────────── */
+.p-about-hero {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+  margin-top: 0;
+  margin-bottom: 1.5rem !important;
+}
+.p-about-hero > .card {
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
+}
+.p-about-hero > .card > .card-body {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.p-about-hero > .card > .card-header {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+/* ── Language switcher ──────────────────────────────────── */
+.p-lang-pills {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.p-hero__body-wrap {
+  position: relative;
+}
+
+.p-lang-pills--overlay {
+  position: absolute;
+  top: -38px;
+  right: 0;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(6px);
+  border-radius: 999px;
+  padding: 0.2rem 0.5rem;
+}
+
+.p-lang-pills__globe {
+  font-size: 0.7rem;
+  color: #64748b;
+  margin-right: 0.15rem;
+}
+
+.p-lang-pill {
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #94a3b8;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  line-height: 1.4;
+}
+
+.p-lang-pill:hover {
+  border-color: #f37000;
+  color: #f37000;
+}
+
+.p-lang-pill--active {
+  background: #f37000;
+  border-color: #f37000;
+  color: #fff;
+}
+
+/* ── Sidebar cards ──────────────────────────────────────── */
+
+.p-sidebar-card {
+  background: #fff;
+  border-radius: 1rem;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 16px rgba(15, 23, 42, 0.06);
+  overflow: hidden;
+}
+
+.p-sidebar-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 0.875rem;
+  border-bottom: 1px solid #f8fafc;
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #94a3b8;
+}
+
+.p-sidebar-card__header a {
+  color: #94a3b8;
+  text-decoration: none;
+}
+
+.p-sidebar-card__header a:hover {
+  color: #f37000;
+}
+
+.p-sidebar-card__body {
+  padding: 0.75rem 0.875rem;
+  font-size: 0.875rem;
+  color: #475569;
+  line-height: 1.6;
+}
+
+.p-sidebar-card__lang-level {
+  font-size: 0.625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #94a3b8;
+  margin: 0.625rem 0 0.15rem;
+}
+
+.p-sidebar-card__lang-level:first-child {
+  margin-top: 0;
+}
+
+.p-sidebar-card__lang-list {
+  color: #334155;
+  margin: 0 0 0.2rem;
+  font-size: 0.875rem;
+}
+
+.p-sidebar-card__empty {
+  color: #94a3b8;
+  font-style: italic;
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.p-sidebar-card__group-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
+.p-sidebar-card__group-item:last-of-type {
+  margin-bottom: 0;
+}
+
+.p-sidebar-card__group-item img {
+  width: 38px;
+  height: 38px;
+  border-radius: 0.5rem;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.p-sidebar-card__group-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #334155;
+  text-decoration: none;
+  line-height: 1.3;
+  display: block;
+}
+
+.p-sidebar-card__group-name:hover {
+  color: #f37000;
+}
+
+.p-sidebar-card__more-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8125rem;
+  color: #f37000;
+  text-decoration: none;
+  font-weight: 500;
+  margin-top: 0.5rem;
+}
+
+.p-sidebar-card__count-badge {
+  background: rgba(243, 112, 0, 0.1);
+  color: #f37000;
+  border-radius: 999px;
+  padding: 0.1rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+/* ── Main content cards override ────────────────────────── */
+
+.p-profile-main .card {
+  border-radius: 1rem;
+  border: none;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 16px rgba(15, 23, 42, 0.06);
+  margin-bottom: 1rem;
+}
+
+.p-profile-main .card-header {
+  font-size: 0.8rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  background: #fff;
+  color: #1e293b;
+  border-bottom: none;
+  padding: 0.9rem 1.25rem 1.15rem !important;
+  border-left: none;
+  border-radius: 1rem 1rem 0 0;
+  flex-direction: row !important;
+  flex-wrap: wrap;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 0.5rem;
+  position: relative;
+}
+.p-profile-main .card-header::after {
+  content: '';
+  position: absolute;
+  left: 1.25rem;
+  bottom: 0.55rem;
+  width: 2rem;
+  height: 3px;
+  background: #f37000;
+  border-radius: 2px;
+}
+
+.p-profile-main .card-header a,
+.p-profile-secondary .card-header a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: #f37000;
+  color: #fff !important;
+  font-size: 0.875rem;
+  border: 1px solid #f37000;
+  box-shadow: 0 2px 6px rgba(243, 112, 0, 0.2);
+  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
+}
+
+.p-profile-main .card-header a:hover,
+.p-profile-main .card-header a:focus-visible,
+.p-profile-secondary .card-header a:hover,
+.p-profile-secondary .card-header a:focus-visible {
+  filter: brightness(1.07);
+  box-shadow: 0 4px 12px rgba(243, 112, 0, 0.3);
+}
+
+.p-profile-main .card-body {
+  padding: 0.75rem 1.25rem 1rem !important;
+  font-size: 0.9375rem;
+  color: #334155;
+  line-height: 1.6;
+}
+
+/* Same horizontal inset as .card-header; first subsection lines up with section title */
+.p-profile-main .card-body > .card-text > :first-child,
+.p-profile-main .card-body > :first-child {
+  margin-top: 0 !important;
+}
+
+.p-profile-main .card-body > .card-text > .h5:first-child {
+  margin-top: 0 !important;
+}
+
+.p-profile-main .h5 {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #f37000;
+  margin-top: 1.1rem;
+  margin-bottom: 0.3rem;
+}
+
+/* ── Accommodation location summary ─────────────────────── */
+.p-accom-summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
+  gap: 1.25rem;
+  align-items: stretch;
+  margin-bottom: 1.25rem;
+  padding: 1rem;
+  border: 1px solid #eef2f7;
+  border-radius: 1rem;
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+}
+
+.p-accom-summary__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.p-accom-summary__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #f37000;
+}
+
+.p-accom-summary__eyebrow i { font-size: 0.75rem; }
+
+.p-accom-summary__city {
+  margin: 0;
+  font-size: 1.35rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #0f172a;
+  letter-spacing: -0.01em;
+}
+
+.p-accom-summary__region {
+  margin: 0 0 0.6rem;
+  font-size: 0.9rem;
+  color: #64748b;
+}
+
+.p-accom-summary__change {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: auto;
+  padding: 0.5rem 0.95rem;
+  border: 1px solid #fed7aa;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #c2410c;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-decoration: none !important;
+  transition:
+    background-color 0.16s ease,
+    border-color 0.16s ease,
+    color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+
+.p-accom-summary__change:hover,
+.p-accom-summary__change:focus-visible {
+  background: #f37000;
+  border-color: #f37000;
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(243, 112, 0, 0.25);
+  outline: none;
+}
+
+.p-accom-summary__change i { font-size: 0.75rem; }
+
+.p-accom-summary__map {
+  min-height: 12rem;
+  border-radius: 0.85rem;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+}
+
+@media (max-width: 768px) {
+  .p-accom-summary {
+    grid-template-columns: 1fr;
+    padding: 0.85rem;
+  }
+  .p-accom-summary__map {
+    min-height: 10rem;
+    aspect-ratio: 16 / 9;
+  }
+}
+
+/* ── Accommodation stats ────────────────────────────────── */
+.p-accom-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.6rem;
+}
+.p-accom-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8125rem;
+  color: #475569;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  padding: 0.3rem 0.75rem;
+}
+.p-accom-chip i { color: #f37000; font-size: 0.7rem; }
+.p-accom-chip strong { color: #1e293b; }
+.p-accom-chip--access { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; }
+.p-accom-chip--access i { color: #2563eb; }
+.p-accom-updated {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.p-accom-cta {
+  margin-top: 1.25rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 768px) {
+  .p-accom-cta { justify-content: center; }
+}
+
+/* ── Comments ───────────────────────────────────────────── */
+.p-comments-counts {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.p-comments-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 0.3rem 0.75rem;
+  text-decoration: none !important;
+  border: 1px solid;
+}
+.p-comments-count--positive { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
+.p-comments-count--positive:hover { background: #dcfce7; }
+.p-comments-count--neutral  { color: #64748b; background: #f8fafc; border-color: #e2e8f0; }
+.p-comments-count--neutral:hover  { background: #f1f5f9; }
+.p-comments-count--negative { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
+.p-comments-count--negative:hover { background: #fee2e2; }
+
+.p-no-comments {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.5rem 1rem;
+  color: #94a3b8;
+  text-align: center;
+}
+.p-no-comments i { font-size: 1.75rem; opacity: 0.4; }
+.p-no-comments p { margin: 0; font-size: 0.9rem; }
+
+/* ── Responsive ─────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .p-profile-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .p-profile-secondary {
+    position: static;
+  }
+
+  .p-hero__banner { height: 150px; }
+  .p-hero__body { padding: 0 1.25rem 1.25rem; gap: 1.25rem; }
+  .p-hero__avatar-col { margin-top: -75px; }
+  .p-hero__avatar-wrap { width: 175px; height: 175px; }
+}
+
+@media (max-width: 540px) {
+  .p-hero__banner { height: 130px; }
+
+  .p-hero__body {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0 1rem 1.25rem;
+    gap: 0;
+  }
+
+  .p-hero__avatar-col {
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 0.75rem;
+    margin-top: -70px;
+    margin-bottom: 0.5rem;
+  }
+
+  .p-hero__avatar-wrap {
+    width: 150px;
+    height: 150px;
+    border-width: 3px;
+  }
+
+  .p-hero__activity-below {
+    font-size: 0.6875rem;
+    padding: 0.2rem 0.5rem;
+  }
+
+  .p-hero__name { font-size: 1.375rem; }
+
+  /* Single column: actions flow after meta chips, above tabs */
+  .p-hero__info {
+    grid-template-columns: 1fr;
+  }
+
+  .p-hero__top-row,
+  .p-hero__location,
+  .p-hero__location--empty,
+  .p-hero__occupation,
+  .p-hero__meta,
+  .p-hero__actions {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .p-hero__actions {
+    padding: 0.75rem 0 0.25rem;
+    flex-wrap: wrap;
+  }
+
+}
+
+/* ── Photo strip (top of profile content) ──────────────── */
+.p-photo-strip {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  margin-bottom: 1rem;
+  border-radius: 0.75rem;
+  overflow-y: hidden;
+}
+
+.p-photo-strip::-webkit-scrollbar { display: none; }
+
+.p-photo-strip__item {
+  flex-shrink: 0;
+  width: 72px;
+  height: 72px;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  scroll-snap-align: start;
+  display: block;
+  background: #f1f5f9;
+}
+
+.p-photo-strip__item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+.p-photo-strip__item:hover img {
+  transform: scale(1.08);
+}
+
+/* ── Profile gallery grid ───────────────────────────────── */
+.p-gallery-card {
+  overflow: hidden;
+}
+
+.p-gallery-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 1rem;
+}
+
+.p-gallery-empty__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 1.25rem;
+  border-radius: 999px;
+  background: #f37000;
+  color: #fff !important;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none !important;
+  transition: background 0.15s ease;
+}
+
+.p-gallery-empty__btn:hover {
+  background: #ea580c;
+}
+
+
+.p-gallery-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 3px;
+  aspect-ratio: 2 / 1;
+  max-height: 360px;
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.p-gallery-cell:first-child {
+  grid-row: 1 / 3;
+}
+
+.p-gallery-cell {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: block;
+  background: #f1f5f9;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  transition: transform 0.25s ease;
+}
+
+.p-gallery-cell:hover {
+  transform: scale(1.06);
+}
+
+.p-gallery-cell::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,0);
+  transition: background 0.2s ease;
+}
+
+.p-gallery-cell:hover::after {
+  background: rgba(0,0,0,0.12);
+}
+
+.p-gallery-cell--more {
+  position: relative;
+}
+
+.p-gallery-cell--more::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
+}
+
+.p-gallery-cell--more:hover {
+  transform: none;
+}
+
+.p-gallery-cell--more::after { display: none; }
+
+.p-gallery-cell__more-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.p-gallery-footer {
+  padding: 0.6rem 1rem;
+  border-top: 1px solid #f1f5f9;
+  font-size: 0.8125rem;
+}
+
+.p-gallery-footer a {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #64748b;
+  text-decoration: none !important;
+  font-weight: 500;
+}
+
+.p-gallery-footer a:hover { color: #334155; }
+
+.p-gallery-footer__count {
+  background: #f1f5f9;
+  color: #64748b;
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+/* ── Pill option groups (checkbox / radio) ── */
+.p-pill-group {
+  margin-bottom: 1.25rem;
+}
+
+.p-pill-group__label {
+  display: block;
+  margin-bottom: 0.55rem;
+  color: #1f2937;
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.p-pill-group__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.p-pill-option {
+  position: relative;
+  margin: 0;
+}
+
+.p-pill-option__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.p-pill-option__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.4rem;
+  padding: 0.45rem 1rem;
+  border: 1px solid #dbe2ea;
+  border-radius: 999px;
+  background: #f8fafc;
+  color: #475569;
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.2;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 0.16s ease,
+    border-color 0.16s ease,
+    color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+
+.p-pill-option__label:hover {
+  background: #f1f5f9;
+  border-color: #cbd5e1;
+}
+
+.p-pill-option__input:checked + .p-pill-option__label {
+  color: #fff;
+  border-color: #f37000;
+  background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%, #e06000 100%);
+  box-shadow: 0 2px 8px rgba(243, 112, 0, 0.3);
+}
+
+.p-pill-option__input:focus-visible + .p-pill-option__label {
+  outline: 2px solid rgba(243, 112, 0, 0.35);
+  outline-offset: 2px;
+}
+
+.p-pill-option__input:disabled + .p-pill-option__label {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* ── Gallery manage page ────────────────────────────────── */
+.p-gallery-manage {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 0 auto 1.25rem;
+  max-width: 1100px;
+  padding: 0 1rem;
+  color: #1f2937;
+}
+
+/* Title row + upload (legacy manage header markup lives in bewelcome _gallery.scss) */
+.p-gallery-manage__header {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1rem;
+  max-width: 1100px;
+  margin: 0.75rem auto 1rem;
+  padding: 0 1rem;
+}
+
+.p-gallery-manage__header-back {
+  width: 100%;
+  justify-content: center;
+  font-weight: 600;
+}
+
+@media (min-width: 576px) {
+  .p-gallery-manage__header-back {
+    width: auto;
+    max-width: 22rem;
+    justify-content: flex-start;
+  }
+}
+
+.p-gallery-manage__header-main {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.p-gallery-manage__header-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.p-gallery-manage__title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #0f172a;
+  line-height: 1.2;
+}
+
+.p-gallery-manage__subtitle {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #64748b;
+}
+
+.p-gallery-manage__upload-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 1.25rem;
+  border-radius: 999px;
+  background: #f37000;
+  color: #fff !important;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none !important;
+  box-shadow: 0 2px 6px rgba(243, 112, 0, 0.25);
+  transition:
+    background-color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+}
+
+.p-gallery-manage__upload-cta:hover,
+.p-gallery-manage__upload-cta:focus-visible {
+  background: #d96400;
+  box-shadow: 0 4px 12px rgba(243, 112, 0, 0.35);
+  transform: translateY(-1px);
+  outline: none;
+}
+
+.p-gallery-manage__upload-cta i {
+  font-size: 1rem;
+}
+
+/* Empty state */
+.p-gallery-manage__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 3rem 1.5rem;
+  border: 1px dashed #e2e8f0;
+  border-radius: 1.25rem;
+  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+  text-align: center;
+}
+
+.p-gallery-manage__empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #f37000;
+  font-size: 1.75rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-gallery-manage__empty-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.p-gallery-manage__empty-text {
+  margin: 0;
+  max-width: 32rem;
+  color: #64748b;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.p-gallery-manage__empty-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: 999px;
+  border: none;
+  background: #f37000;
+  color: #fff !important;
+  font-size: 0.95rem;
+  font-weight: 600;
+  font-family: inherit;
+  text-decoration: none !important;
+  box-shadow: 0 2px 8px rgba(243, 112, 0, 0.3);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+}
+
+.p-gallery-manage__empty-btn:hover,
+.p-gallery-manage__empty-btn:focus-visible {
+  background: #d96400;
+  box-shadow: 0 4px 14px rgba(243, 112, 0, 0.4);
+  transform: translateY(-1px);
+  outline: none;
+}
+
+/* ── Gallery upload page ────────────────────────────────── */
+.p-upload-page {
+  max-width: 880px;
+  margin: 0 auto 2rem;
+}
+
+.p-upload {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.5rem;
+  padding: 0 1rem;
+  color: #1f2937;
 }
 
-.p-profile-secondary .card {
-  border-radius: 1rem;
-  border: none;
+.p-upload__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.p-upload__card {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  background: #fff;
+  border-radius: 1.25rem;
+  border: 1px solid #e5e7eb;
+  padding: 1.75rem;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
+}
+
+.p-upload__abstract {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+  line-height: 1.6;
+  padding-bottom: 0.25rem;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+
+/* Album field */
+.p-upload__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.p-upload__label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #64748b;
+  margin: 0;
+}
+
+.p-upload__select {
+  width: 100%;
+  appearance: none;
+  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 0.65rem 2.5rem 0.65rem 0.85rem;
+  font-size: 0.95rem;
+  font-family: inherit;
+  color: #1f2937;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.p-upload__select:hover {
+  border-color: #cbd5e1;
+}
+
+.p-upload__select:focus {
+  outline: none;
+  border-color: #f37000;
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.15);
+}
+
+/* Dropzone */
+.p-upload__dropzone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 12rem;
+  padding: 2.5rem 1.5rem;
+  border: 2px dashed #e2e8f0;
+  border-radius: 1.25rem;
+  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+  text-align: center;
+  cursor: pointer;
+  transition:
+    border-color 0.18s ease,
+    background-color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.p-upload__dropzone:hover,
+.p-upload__dropzone:focus-visible {
+  border-color: #fed7aa;
+  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
+  outline: none;
+}
+
+.p-upload__dropzone--active {
+  border-color: #f37000 !important;
+  background: linear-gradient(135deg, #ffedd5 0%, #ffe4cc 100%) !important;
+  box-shadow: 0 0 0 6px rgba(243, 112, 0, 0.1);
+}
+
+.p-upload__dropzone-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #f37000;
+  font-size: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-upload__dropzone-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.p-upload__dropzone-subtitle {
+  font-size: 0.875rem;
+  color: #64748b;
+}
+
+.p-upload__file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.p-upload__dropzone-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.4rem 0.45rem 0.4rem 0.85rem;
+  border-radius: 999px;
+  background: #fff;
+  border: 1px solid #fed7aa;
+  color: #9a3412;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.p-upload__dropzone-summary i {
+  color: #f37000;
+}
+
+.p-upload__dropzone-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: #fef3e6;
+  color: #c2410c;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.p-upload__dropzone-clear:hover,
+.p-upload__dropzone-clear:focus-visible {
+  background: #f37000;
+  color: #fff;
+  outline: none;
+}
+
+/* Action buttons */
+.p-upload__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.p-upload__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  padding: 0.7rem 1.5rem;
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none !important;
+  border: 1px solid transparent;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.p-upload__btn--primary {
+  background: #f37000;
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(243, 112, 0, 0.28);
+}
+
+.p-upload__btn--primary:hover:not(:disabled),
+.p-upload__btn--primary:focus-visible:not(:disabled) {
+  background: #d96400;
+  box-shadow: 0 4px 14px rgba(243, 112, 0, 0.38);
+  transform: translateY(-1px);
+  outline: none;
+}
+
+.p-upload__btn--ghost {
+  background: #fff;
+  color: #475569;
+  border-color: #e2e8f0;
+}
+
+.p-upload__btn--ghost:hover:not(:disabled),
+.p-upload__btn--ghost:focus-visible:not(:disabled) {
+  border-color: #cbd5e1;
+  background: #f8fafc;
+  color: #1f2937;
+  outline: none;
+}
+
+.p-upload__btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}
+
+/* Upload queue */
+.p-upload__queue {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1.25rem;
+  border: 1px solid #eef2f7;
+  border-radius: 1.25rem;
+  background: #fff;
   box-shadow:
     0 1px 3px rgba(15, 23, 42, 0.04),
-    0 4px 16px rgba(15, 23, 42, 0.06);
-  margin-bottom: 0;
+    0 4px 12px rgba(15, 23, 42, 0.05);
 }
 
-.p-profile-secondary .card-header {
-  font-size: 0.625rem;
+.p-upload__queue-title {
+  margin: 0;
+  font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: #94a3b8;
+  color: #64748b;
+}
+
+.p-upload__queue-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.p-upload__item {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  padding: 0.65rem 0.85rem;
+  border: 1px solid #eef2f7;
+  border-radius: 0.85rem;
   background: #fff;
-  border-bottom: 1px solid #f8fafc;
-  padding: 0.6rem 0.875rem;
-  border-radius: 1rem 1rem 0 0;
 }
 
-.p-profile-secondary .card-body {
-  padding: 0.75rem 0.875rem !important;
-  font-size: 0.875rem;
-  color: #475569;
-  line-height: 1.6;
+.p-upload__item-thumb {
+  flex-shrink: 0;
+  width: 56px;
+  height: 56px;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  background: #f1f5f9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-/* ── Toasts ─────────────────────────────────────────────── */
-.p-toast {
-  min-width: 280px;
-  border-radius: 0.75rem;
-  box-shadow: 0 4px 20px rgba(15,23,42,0.15);
-  margin-bottom: 0.5rem;
-  font-size: 0.9rem;
+.p-upload__item-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.p-upload__item-thumb--placeholder {
+  color: #94a3b8;
+  font-size: 1.25rem;
+}
+
+.p-upload__item-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.p-upload__item-filename {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #1f2937;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.p-upload__progress {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: #f1f5f9;
+  overflow: hidden;
+}
+
+.p-upload__progress-bar {
+  position: absolute;
+  inset: 0;
+  width: 0;
+  background: linear-gradient(90deg, #f37000 0%, #fb923c 100%);
+  transition: width 0.15s linear;
+}
+
+.p-upload__item-status {
+  flex: 1 1 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.35rem 0.65rem;
+  border-radius: 0.55rem;
+  font-size: 0.85rem;
   font-weight: 500;
+  word-break: break-word;
+}
+
+.p-upload__item-status--success {
+  background: #f0fdf4;
+  color: #15803d;
+}
+
+.p-upload__item-status--success i {
+  color: #16a34a;
+}
+
+.p-upload__item-status--error {
+  background: #fef2f2;
+  color: #b91c1c;
 }
-.p-toast--success { background: #16a34a; color: #fff; }
-.p-toast--danger, .p-toast--error { background: #dc2626; color: #fff; }
-.p-toast--warning { background: #d97706; color: #fff; }
-.p-toast--info { background: #2563eb; color: #fff; }
 
-/* ── Global toast notifications (bw-toast) ──────────────── */
-@keyframes bw-toast-in {
-  from { opacity: 0; transform: translateX(1.5rem) scale(0.95); }
-  to   { opacity: 1; transform: translateX(0)       scale(1);    }
+.p-upload__item-status--error i {
+  color: #dc2626;
 }
 
-.bw-toast {
+.p-upload__item--error {
+  border-color: #fecaca;
+  background: #fffafa;
+}
+
+@media (max-width: 720px) {
+  .p-upload__dropzone {
+    min-height: 9.5rem;
+    padding: 2rem 1rem;
+  }
+
+  .p-upload__dropzone-title {
+    font-size: 1rem;
+  }
+
+  .p-upload__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .p-upload__btn {
+    width: 100%;
+  }
+}
+
+.p-gallery-manage__panel {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.875rem 0.875rem 0.875rem 1rem;
-  min-width: 280px;
-  max-width: 360px;
-  border-radius: 0.875rem;
-  background: #fff;
-  color: #334155;
+  gap: 0.75rem 1.25rem;
+  padding: 1rem 1.1rem;
+  border: 1px solid #eef2f7;
+  border-radius: 1rem;
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
   box-shadow:
-    0 0 0 1px rgba(15, 23, 42, 0.07),
-    0 8px 32px rgba(15, 23, 42, 0.12),
-    0 2px 8px  rgba(15, 23, 42, 0.06);
-  margin-bottom: 0.5rem;
-  border: none !important;
-  animation: bw-toast-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.05);
 }
 
-.bw-toast__icon {
-  width: 32px;
-  height: 32px;
+.p-gallery-manage__panel-row {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  flex-shrink: 0;
+  gap: 0.5rem 0.75rem;
+}
+
+/* Select-all toggle (custom pill) */
+.p-gallery-manage__select-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.45rem 0.85rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  background: #fff;
+  color: #475569;
   font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
 }
 
-.bw-toast__body {
-  flex: 1;
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.4;
-  color: #334155;
+.p-gallery-manage__select-all:hover {
+  border-color: #cbd5e1;
+  background: #f8fafc;
 }
 
-.bw-toast__close {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0.25rem;
-  width: 26px;
-  height: 26px;
-  display: flex;
+.p-gallery-manage__select-all-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.p-gallery-manage__select-all-box {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  border-radius: 50%;
-  color: #94a3b8;
-  font-size: 0.75rem;
-  transition: color 0.15s ease, background 0.15s ease;
+  width: 1.15rem;
+  height: 1.15rem;
+  border: 1.5px solid #cbd5e1;
+  border-radius: 0.35rem;
+  background: #fff;
+  color: transparent;
+  font-size: 0.65rem;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
 }
 
-.bw-toast__close:hover {
-  color: #475569;
-  background: #f1f5f9;
+.p-gallery-manage__select-all-input:checked ~ .p-gallery-manage__select-all-box {
+  background: #f37000;
+  border-color: #f37000;
+  color: #fff;
 }
 
-/* Variants — tinted background + matching icon bubble */
-.bw-toast--notice  { background: #eef4fd; }
-.bw-toast--success { background: #f0fdf4; }
-.bw-toast--error   { background: #fef2f2; }
-.bw-toast--warning { background: #fffbeb; }
-
-.bw-toast--notice .bw-toast__icon  { background: rgba(55, 129, 235, 0.14); color: #3781eb; }
-.bw-toast--success .bw-toast__icon { background: rgba( 22, 163,  74, 0.15); color: #16a34a; }
-.bw-toast--error .bw-toast__icon   { background: rgba(220,  38,  38, 0.15); color: #dc2626; }
-.bw-toast--warning .bw-toast__icon { background: rgba(217, 119,   6, 0.15); color: #d97706; }
-
-.bw-toast--notice .bw-toast__body  { color: #1a4d9e; }
-.bw-toast--success .bw-toast__body { color: #15803d; }
-.bw-toast--error .bw-toast__body   { color: #b91c1c; }
-.bw-toast--warning .bw-toast__body { color: #92400e; }
-
-.bw-toast--notice .bw-toast__close  { color: #3781eb; }
-.bw-toast--success .bw-toast__close { color: #16a34a; }
-.bw-toast--error .bw-toast__close   { color: #dc2626; }
-.bw-toast--warning .bw-toast__close { color: #d97706; }
-
-.bw-toast--notice .bw-toast__close:hover  { background: rgba(55, 129, 235, 0.1); }
-.bw-toast--success .bw-toast__close:hover { background: rgba( 22, 163,  74, 0.1); }
-.bw-toast--error .bw-toast__close:hover   { background: rgba(220,  38,  38, 0.1); }
-.bw-toast--warning .bw-toast__close:hover { background: rgba(217, 119,   6, 0.1); }
-
-/* ── About Me: full-bleed flush below hero ──────────────── */
-.p-about-hero {
-  margin-left: -0.75rem;
-  margin-right: -0.75rem;
-  margin-top: 0;
-  margin-bottom: 1.5rem !important;
-}
-.p-about-hero > .card {
-  border-radius: 0;
-  border-left: none;
-  border-right: none;
-  border-top: none;
-  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
-}
-.p-about-hero > .card > .card-body {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-.p-about-hero > .card > .card-header {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
+.p-gallery-manage__select-all-input:focus-visible ~ .p-gallery-manage__select-all-box {
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.2);
 }
 
-/* ── Language switcher ──────────────────────────────────── */
-.p-lang-pills {
+/* Album selector group */
+.p-gallery-manage__album {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.5rem 0.75rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
-.p-hero__body-wrap {
+.p-gallery-manage__album-row {
   position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin: 0;
+  padding: 0.25rem 0.75rem 0.25rem 0.45rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  background: #fff;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
-.p-lang-pills--overlay {
-  position: absolute;
-  top: -38px;
-  right: 0;
-  z-index: 10;
-  background: rgba(255, 255, 255, 0.82);
-  backdrop-filter: blur(6px);
-  border-radius: 999px;
-  padding: 0.2rem 0.5rem;
+.p-gallery-manage__album-row:focus-within {
+  border-color: #f37000;
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.13);
 }
 
-.p-lang-pills__globe {
-  font-size: 0.7rem;
-  color: #64748b;
-  margin-right: 0.15rem;
+.p-gallery-manage__album-radio {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-.p-lang-pill {
-  padding: 0.2rem 0.55rem;
+.p-gallery-manage__album-radio-dot {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  border: 1.5px solid #cbd5e1;
   border-radius: 999px;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  border: 1px solid #e2e8f0;
   background: #fff;
-  color: #94a3b8;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  line-height: 1.4;
+  position: relative;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
-.p-lang-pill:hover {
+.p-gallery-manage__album-radio:checked ~ .p-gallery-manage__album-radio-dot {
   border-color: #f37000;
-  color: #f37000;
+  background:
+    radial-gradient(circle at center, #f37000 0 38%, #fff 42% 100%);
 }
 
-.p-lang-pill--active {
-  background: #f37000;
-  border-color: #f37000;
-  color: #fff;
+.p-gallery-manage__album-select,
+.p-gallery-manage__album-input {
+  flex: 1 1 0;
+  min-width: 8rem;
+  height: 2rem;
+  padding: 0.25rem 0.6rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #1f2937;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.2;
+  outline: none;
 }
 
-/* ── Sidebar cards ──────────────────────────────────────── */
+.p-gallery-manage__album-select {
+  appearance: none;
+  padding-right: 1.5rem;
+  background:
+    linear-gradient(45deg, transparent 50%, #94a3b8 50%) calc(100% - 0.75rem) 50% / 0.32rem 0.32rem no-repeat,
+    linear-gradient(135deg, #94a3b8 50%, transparent 50%) calc(100% - 0.45rem) 50% / 0.32rem 0.32rem no-repeat,
+    transparent;
+}
 
-.p-sidebar-card {
-  background: #fff;
-  border-radius: 1rem;
-  box-shadow:
-    0 1px 3px rgba(15, 23, 42, 0.04),
-    0 4px 16px rgba(15, 23, 42, 0.06);
-  overflow: hidden;
+.p-gallery-manage__album-input::placeholder {
+  color: #94a3b8;
+  font-style: italic;
 }
 
-.p-sidebar-card__header {
-  display: flex;
+/* Action buttons */
+.p-gallery-manage__buttons {
+  margin-left: auto;
+  gap: 0.5rem;
+}
+
+.p-gallery-manage__btn {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0.6rem 0.875rem;
-  border-bottom: 1px solid #f8fafc;
-  font-size: 0.625rem;
+  justify-content: center;
+  min-height: 2.5rem;
+  padding: 0.55rem 1.1rem;
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 0.875rem;
   font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #94a3b8;
+  line-height: 1.2;
+  cursor: pointer;
+  text-decoration: none !important;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease;
 }
 
-.p-sidebar-card__header a {
-  color: #94a3b8;
-  text-decoration: none;
+.p-gallery-manage__btn--primary {
+  background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%, #e06000 100%);
+  border: 1px solid #f37000;
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(243, 112, 0, 0.24);
 }
 
-.p-sidebar-card__header a:hover {
-  color: #f37000;
+.p-gallery-manage__btn--primary:hover,
+.p-gallery-manage__btn--primary:focus-visible {
+  filter: brightness(1.03);
+  box-shadow: 0 6px 18px rgba(243, 112, 0, 0.32);
+  transform: translateY(-1px);
+  outline: none;
+  color: #fff;
 }
 
-.p-sidebar-card__body {
-  padding: 0.75rem 0.875rem;
-  font-size: 0.875rem;
-  color: #475569;
-  line-height: 1.6;
+.p-gallery-manage__btn--danger {
+  background: #fff;
+  border: 1px solid #fecaca;
+  color: #b91c1c;
 }
 
-.p-sidebar-card__lang-level {
-  font-size: 0.625rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: #94a3b8;
-  margin: 0.625rem 0 0.15rem;
+.p-gallery-manage__btn--danger:hover,
+.p-gallery-manage__btn--danger:focus-visible {
+  background: #fef2f2;
+  border-color: #f87171;
+  color: #991b1b;
+  outline: none;
 }
 
-.p-sidebar-card__lang-level:first-child {
-  margin-top: 0;
+.p-gallery-manage__btn:disabled,
+.p-gallery-manage__btn[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  filter: none;
+  box-shadow: none;
+  transform: none;
+  pointer-events: none;
 }
 
-.p-sidebar-card__lang-list {
-  color: #334155;
-  margin: 0 0 0.2rem;
-  font-size: 0.875rem;
+/* Gallery grid — shared CSS replacement for Masonry */
+#masonry-grid {
+  --gallery-grid-gap: 0.875rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--gallery-grid-gap);
+  margin: 0 !important;
+  padding: 0 !important;
+  align-items: stretch;
+  align-content: start;
+  justify-content: start;
 }
 
-.p-sidebar-card__empty {
-  color: #94a3b8;
-  font-style: italic;
-  margin: 0;
-  font-size: 0.875rem;
+#masonry-grid > * {
+  width: auto !important;
+  max-width: none !important;
+  min-width: 0 !important;
+  flex: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
 }
 
-.p-sidebar-card__group-item {
+#masonry-grid .card {
+  position: relative;
   display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  margin-bottom: 0.625rem;
+  flex-direction: column;
+  height: 100%;
+  border: 1px solid #eef2f7;
+  border-radius: 0.85rem;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+  overflow: hidden;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    border-color 0.15s ease;
 }
 
-.p-sidebar-card__group-item:last-of-type {
-  margin-bottom: 0;
+#masonry-grid .card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
+  border-color: #e2e8f0;
 }
 
-.p-sidebar-card__group-item img {
-  width: 38px;
-  height: 38px;
-  border-radius: 0.5rem;
+#masonry-grid .card > a:first-of-type {
+  display: block;
+  aspect-ratio: 1;
+  overflow: hidden;
+  background: #f8fafc;
+  padding: 0 !important;
+}
+
+#masonry-grid .card img.img-thumbnail,
+#masonry-grid .card img.img-fluid {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  flex-shrink: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
 }
 
-.p-sidebar-card__group-name {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #334155;
-  text-decoration: none;
+/* Default card-body for public gallery views (title + optional album) */
+#masonry-grid .card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 0.55rem 0.7rem !important;
+  margin: 0 !important;
+  background: #fff;
+  border-top: 1px solid #f1f5f9;
   line-height: 1.3;
+}
+
+#masonry-grid .card-body .card-title { display: none; }
+
+#masonry-grid .card-body > a[href*="gallery/img"] {
   display: block;
+  font-size: 0.825rem;
+  font-weight: 600;
+  color: #1f2937;
+  text-decoration: none !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.15s ease;
 }
 
-.p-sidebar-card__group-name:hover {
+#masonry-grid .card-body > a[href*="gallery/img"]:hover {
   color: #f37000;
 }
 
-.p-sidebar-card__more-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 0.8125rem;
-  color: #f37000;
-  text-decoration: none;
-  font-weight: 500;
-  margin-top: 0.5rem;
+#masonry-grid .card-body > a[href*="gallery/show/sets"] {
+  display: inline-block;
+  font-size: 0.7rem;
+  color: #64748b;
+  text-decoration: none !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.p-sidebar-card__count-badge {
-  background: rgba(243, 112, 0, 0.1);
+#masonry-grid .card-body > a[href*="gallery/show/sets"]:hover {
   color: #f37000;
-  border-radius: 999px;
-  padding: 0.1rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
 }
 
-/* ── Main content cards override ────────────────────────── */
+/* Pagination shared with gallery pages */
+.p-gallery-manage__grid-wrap > .row {
+  display: flex;
+  justify-content: center;
+  margin: 0 !important;
+  padding: 0 !important;
+}
 
-.p-profile-main .card {
-  border-radius: 1rem;
-  border: none;
-  box-shadow:
-    0 1px 3px rgba(15, 23, 42, 0.04),
-    0 4px 16px rgba(15, 23, 42, 0.06);
-  margin-bottom: 1rem;
+.p-gallery-manage__grid-wrap .pagination {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none;
+  float: none !important;
 }
 
-.p-profile-main .card-header {
-  font-size: 0.8rem;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+.p-gallery-manage__grid-wrap .pagination .page-item {
+  display: inline-block;
+}
+
+.p-gallery-manage__grid-wrap .pagination .page-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.55rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
   background: #fff;
-  color: #1e293b;
-  border-bottom: none;
-  padding: 0.9rem 1.25rem 1.15rem !important;
-  border-left: none;
-  border-radius: 1rem 1rem 0 0;
-  flex-direction: row !important;
-  flex-wrap: wrap;
-  align-items: center !important;
-  justify-content: space-between !important;
-  gap: 0.5rem;
-  position: relative;
+  color: #475569;
+  font-size: 0.85rem;
+  text-decoration: none !important;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
 }
-.p-profile-main .card-header::after {
-  content: '';
-  position: absolute;
-  left: 1.25rem;
-  bottom: 0.55rem;
-  width: 2rem;
-  height: 3px;
+
+.p-gallery-manage__grid-wrap .pagination .page-item.active .page-link {
   background: #f37000;
-  border-radius: 2px;
+  border-color: #f37000;
+  color: #fff;
 }
 
-.p-profile-main .card-header a {
-  color: #94a3b8 !important;
+.p-gallery-manage__grid-wrap .pagination .page-item.disabled .page-link {
+  color: #cbd5e1;
+  background: #f8fafc;
+  cursor: not-allowed;
 }
 
-.p-profile-main .card-header a:hover {
-  color: #f37000 !important;
+.p-gallery-manage__grid-wrap .pagination .page-link:hover {
+  border-color: #cbd5e1;
+  background: #f1f5f9;
+  color: #1f2937;
 }
 
-.p-profile-main .card-body {
-  padding: 0.75rem 1.25rem 1rem !important;
-  font-size: 0.9375rem;
-  color: #334155;
-  line-height: 1.6;
+/* Manage page wrapper for vertical flow */
+.p-gallery-manage__grid-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
-/* Same horizontal inset as .card-header; first subsection lines up with section title */
-.p-profile-main .card-body > .card-text > :first-child,
-.p-profile-main .card-body > :first-child {
-  margin-top: 0 !important;
+/* Manage-specific: hide the standard card-body content and use a compact action footer */
+.p-gallery-manage__grid-wrap #masonry-grid .card-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0;
 }
 
-.p-profile-main .card-body > .card-text > .h5:first-child {
-  margin-top: 0 !important;
+.p-gallery-manage__grid-wrap #masonry-grid .card-body > h6,
+.p-gallery-manage__grid-wrap #masonry-grid .card-body > br,
+.p-gallery-manage__grid-wrap #masonry-grid .card-body > a[href*="gallery/show/sets"] {
+  display: none;
 }
 
-.p-profile-main .h5 {
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: #f37000;
-  margin-top: 1.1rem;
-  margin-bottom: 0.3rem;
+.p-gallery-manage__grid-wrap #masonry-grid .card-body > a[href*="gallery/img"] {
+  flex: 1 1 0;
+  min-width: 0;
 }
 
-/* ── Accommodation stats ────────────────────────────────── */
-.p-accom-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 0.6rem;
-}
-.p-accom-chip {
+/* Selection checkbox — top-left overlay on the photo */
+.p-gallery-manage__image-select {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
-  font-size: 0.8125rem;
-  color: #475569;
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 999px;
-  padding: 0.3rem 0.75rem;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  margin: 0 !important;
+  padding: 0;
+  border-radius: 0.7rem;
+  cursor: pointer;
+  z-index: 3;
 }
-.p-accom-chip i { color: #f37000; font-size: 0.7rem; }
-.p-accom-chip strong { color: #1e293b; }
-.p-accom-chip--access { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; }
-.p-accom-chip--access i { color: #2563eb; }
-.p-accom-updated {
-  font-size: 0.75rem;
-  color: #94a3b8;
+
+.p-gallery-manage__image-select-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
+  opacity: 0;
+  cursor: pointer;
 }
 
-.p-accom-cta {
-  margin-top: 1.25rem;
-  display: flex;
-  justify-content: flex-end;
+.p-gallery-manage__image-select-box {
+  position: relative;
+  width: 1.35rem;
+  height: 1.35rem;
+  border: 2px solid rgba(255, 255, 255, 0.95);
+  border-radius: 0.45rem;
+  background: rgba(15, 23, 42, 0.45);
+  box-shadow:
+    0 2px 8px rgba(15, 23, 42, 0.22),
+    inset 0 0 0 1px rgba(15, 23, 42, 0.08);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
 }
 
-@media (max-width: 768px) {
-  .p-accom-cta { justify-content: center; }
+.p-gallery-manage__image-select-box::after {
+  content: "";
+  position: absolute;
+  left: 0.38rem;
+  top: 0.18rem;
+  width: 0.42rem;
+  height: 0.72rem;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  opacity: 0;
+  transform: rotate(45deg) scale(0.8);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.p-gallery-manage__image-select:hover .p-gallery-manage__image-select-box,
+.p-gallery-manage__image-select-input:focus-visible + .p-gallery-manage__image-select-box {
+  background: rgba(15, 23, 42, 0.65);
+  box-shadow:
+    0 3px 10px rgba(15, 23, 42, 0.28),
+    0 0 0 3px rgba(243, 112, 0, 0.22);
 }
 
-/* ── Comments ───────────────────────────────────────────── */
-.p-comments-counts {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+.p-gallery-manage__image-select-input:checked + .p-gallery-manage__image-select-box {
+  border-color: #f37000;
+  background: #f37000;
+  box-shadow: 0 3px 10px rgba(243, 112, 0, 0.28);
+  transform: scale(1.03);
 }
-.p-comments-count {
+
+.p-gallery-manage__image-select-input:checked + .p-gallery-manage__image-select-box::after {
+  opacity: 1;
+  transform: rotate(45deg) scale(1);
+}
+
+/* Action group inline on the right of the footer */
+.p-gallery-manage__grid-wrap #masonry-grid .card-text {
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 999px;
-  padding: 0.3rem 0.75rem;
-  text-decoration: none !important;
-  border: 1px solid;
+  gap: 0.3rem;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent;
+  flex-shrink: 0;
 }
-.p-comments-count--positive { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
-.p-comments-count--positive:hover { background: #dcfce7; }
-.p-comments-count--neutral  { color: #64748b; background: #f8fafc; border-color: #e2e8f0; }
-.p-comments-count--neutral:hover  { background: #f1f5f9; }
-.p-comments-count--negative { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
-.p-comments-count--negative:hover { background: #fee2e2; }
 
-.p-no-comments {
-  display: flex;
-  flex-direction: column;
+.p-gallery-manage__grid-wrap #masonry-grid .card-text small.text-muted {
+  display: none;
+}
+
+.p-gallery-manage__grid-wrap #masonry-grid .card-text a {
+  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 1.5rem 1rem;
-  color: #94a3b8;
-  text-align: center;
+  justify-content: center;
+  width: 1.65rem;
+  height: 1.65rem;
+  margin: 0 !important;
+  padding: 0;
+  border-radius: 0.4rem;
+  font-size: 0.7rem;
+  text-decoration: none !important;
+  border: 1px solid transparent;
+  float: none !important;
+  background: transparent;
+  color: #64748b;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
 }
-.p-no-comments i { font-size: 1.75rem; opacity: 0.4; }
-.p-no-comments p { margin: 0; font-size: 0.9rem; }
-
-/* ── Responsive ─────────────────────────────────────────── */
-
-@media (max-width: 900px) {
-  .p-profile-layout {
-    grid-template-columns: 1fr;
-  }
 
-  .p-profile-secondary {
-    position: static;
-  }
+.p-gallery-manage__grid-wrap #masonry-grid .card-text a.btn-outline-primary:hover {
+  color: #f37000;
+  border-color: #fed7aa;
+  background: #fff7ed;
+}
 
-  .p-hero__banner { height: 150px; }
-  .p-hero__body { padding: 0 1.25rem 1.25rem; gap: 1.25rem; }
-  .p-hero__avatar-col { margin-top: -75px; }
-  .p-hero__avatar-wrap { width: 175px; height: 175px; }
+.p-gallery-manage__grid-wrap #masonry-grid .card-text a.btn-danger {
+  color: #94a3b8;
 }
 
-@media (max-width: 540px) {
-  .p-hero__banner { height: 130px; }
+.p-gallery-manage__grid-wrap #masonry-grid .card-text a.btn-danger:hover {
+  color: #fff;
+  background: #ef4444;
+  border-color: #ef4444;
+}
 
-  .p-hero__body {
+@media (max-width: 720px) {
+  .p-gallery-manage__header-main {
     flex-direction: column;
     align-items: stretch;
-    padding: 0 1rem 1.25rem;
-    gap: 0;
   }
 
-  .p-hero__avatar-col {
-    flex-direction: row;
-    align-items: flex-end;
-    gap: 0.75rem;
-    margin-top: -70px;
-    margin-bottom: 0.5rem;
+  .p-gallery-manage__upload-cta {
+    width: 100%;
+    justify-content: center;
   }
 
-  .p-hero__avatar-wrap {
-    width: 150px;
-    height: 150px;
-    border-width: 3px;
+  .p-gallery-manage__title {
+    font-size: 1.25rem;
   }
 
-  .p-hero__activity-below {
-    font-size: 0.6875rem;
-    padding: 0.2rem 0.5rem;
+  .p-gallery-manage__empty {
+    padding: 2.25rem 1rem;
   }
 
-  .p-hero__name { font-size: 1.375rem; }
+  .p-gallery-manage__empty-btn {
+    width: 100%;
+    justify-content: center;
+  }
 
-  /* Single column: actions flow after meta chips, above tabs */
-  .p-hero__info {
-    grid-template-columns: 1fr;
+  .p-gallery-manage__panel {
+    padding: 0.85rem;
   }
 
-  .p-hero__top-row,
-  .p-hero__location,
-  .p-hero__location--empty,
-  .p-hero__occupation,
-  .p-hero__meta,
-  .p-hero__actions {
-    grid-column: 1;
-    grid-row: auto;
+  .p-gallery-manage__buttons {
+    margin-left: 0;
+    width: 100%;
+    justify-content: stretch;
   }
 
-  .p-hero__actions {
-    padding: 0.75rem 0 0.25rem;
-    flex-wrap: wrap;
+  .p-gallery-manage__btn {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .p-gallery-manage__album {
+    width: 100%;
+  }
+
+  .p-gallery-manage__album-row {
+    width: 100%;
   }
 
+  .p-gallery-manage__grid-wrap #masonry-grid {
+    --gallery-grid-gap: 0.75rem;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
 }
 
-/* ── Photo strip (top of profile content) ──────────────── */
-.p-photo-strip {
+/* ────────────────────────────────────────────────────────────
+   Gallery consolidated page — tabs + per-tab content
+   ──────────────────────────────────────────────────────────── */
+
+/* Tab bar — aligned with pagehead */
+.p-gallery-tabs {
   display: flex;
-  gap: 4px;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-  margin-bottom: 1rem;
-  border-radius: 0.75rem;
-  overflow-y: hidden;
+  max-width: 1100px;
+  margin: 0 auto 1.25rem;
+  padding: 0 1rem;
+  border-bottom: 2px solid #e5e7eb;
+  gap: 0;
 }
 
-.p-photo-strip::-webkit-scrollbar { display: none; }
+.p-gallery-tab-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.75rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #94a3b8;
+  background: none;
+  border: none;
+  border-bottom: 2.5px solid transparent;
+  margin-bottom: -2px;
+  cursor: pointer;
+  transition: color 0.18s ease, border-color 0.18s ease;
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+}
 
-.p-photo-strip__item {
-  flex-shrink: 0;
-  width: 72px;
-  height: 72px;
-  border-radius: 0.5rem;
-  overflow: hidden;
-  scroll-snap-align: start;
-  display: block;
-  background: #f1f5f9;
+.p-gallery-tab-btn i {
+  font-size: 0.85rem;
+  opacity: 0.7;
+  transition: opacity 0.18s ease;
 }
 
-.p-photo-strip__item img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  transition: transform 0.2s ease;
+.p-gallery-tab-btn:hover {
+  color: #475569;
 }
 
-.p-photo-strip__item:hover img {
-  transform: scale(1.08);
+.p-gallery-tab-btn:hover i {
+  opacity: 1;
 }
 
-/* ── Profile gallery grid ───────────────────────────────── */
-.p-gallery-card {
-  overflow: hidden;
+.p-gallery-tab-btn--active {
+  color: #f37000;
+  border-bottom-color: #f37000;
 }
 
-.p-gallery-card .card-header {
-  padding-bottom: 0.75rem !important;
+.p-gallery-tab-btn--active i {
+  opacity: 1;
 }
 
-.p-gallery-card .card-header::after {
+/* Tab panels */
+.p-gallery-tab-panel {
   display: none;
 }
 
-.p-gallery-grid {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  gap: 3px;
-  aspect-ratio: 2 / 1;
-  max-height: 360px;
-  border-radius: 0.75rem;
-  overflow: hidden;
+.p-gallery-tab-panel--active {
+  display: block;
+  animation: galleryTabIn 0.18s ease;
 }
 
-.p-gallery-cell:first-child {
-  grid-row: 1 / 3;
+@keyframes galleryTabIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
 
-.p-gallery-cell {
+/* ── Albums tab ── */
+
+.p-gallery-albums-wrap {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 1rem 1.5rem;
+}
+
+/* Override Bootstrap's row/col grid with a modern CSS grid */
+.p-gallery-albums-wrap .row {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 1.1rem;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: auto !important;
+}
+
+/* Flatten the col-* wrappers */
+.p-gallery-albums-wrap .row > [class*="col-"] {
+  width: 100% !important;
+  max-width: none !important;
+  flex: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Album card */
+.p-gallery-albums-wrap .gallery_container {
   position: relative;
-  min-width: 0;
-  min-height: 0;
+  border-radius: 1rem;
   overflow: hidden;
+  background: #fff;
+  border: 1px solid #eef2f7;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.p-gallery-albums-wrap .gallery_container:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
+  border-color: #e2e8f0;
+}
+
+/* Thumbnail link — forces square aspect ratio */
+.p-gallery-albums-wrap .gallery_container > a:first-child {
   display: block;
+  position: relative;
+  aspect-ratio: 1;
+  overflow: hidden;
   background: #f1f5f9;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  transition: transform 0.25s ease;
+  text-decoration: none !important;
 }
 
-.p-gallery-cell:hover {
-  transform: scale(1.06);
+/* Override inline styles on the thumbnail img */
+.p-gallery-albums-wrap .gallery_container > a:first-child img {
+  width: 100% !important;
+  height: 100% !important;
+  max-width: none !important;
+  margin: 0 !important;
+  object-fit: cover !important;
+  display: block;
+  border: 0 !important;
 }
 
-.p-gallery-cell::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(0,0,0,0);
-  transition: background 0.2s ease;
+/* Photo count badge — override Bootstrap alert */
+.p-gallery-albums-wrap .gallery_container .alert.alert-info {
+  position: absolute !important;
+  top: 0.5rem !important;
+  right: 0.5rem !important;
+  left: auto !important;
+  bottom: auto !important;
+  display: inline-flex !important;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.2rem 0.5rem !important;
+  margin: 0 !important;
+  border-radius: 999px !important;
+  background: rgba(15, 23, 42, 0.55) !important;
+  backdrop-filter: blur(4px);
+  color: #fff !important;
+  font-size: 0.72rem !important;
+  font-weight: 700 !important;
+  border: none !important;
+  line-height: 1 !important;
+  box-shadow: none !important;
 }
 
-.p-gallery-cell:hover::after {
-  background: rgba(0,0,0,0.12);
+/* Album title row */
+.p-gallery-albums-wrap .gallery_container h4 {
+  margin: 0;
+  padding: 0.6rem 0.75rem 0.65rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #1f2937;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-top: 1px solid #f1f5f9;
 }
 
-.p-gallery-cell--more {
-  position: relative;
+.p-gallery-albums-wrap .gallery_container h4 a {
+  color: inherit !important;
+  text-decoration: none !important;
+  transition: color 0.15s ease;
 }
 
-.p-gallery-cell--more::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(0,0,0,0.55);
+.p-gallery-albums-wrap .gallery_container h4 a:hover {
+  color: #f37000 !important;
 }
 
-.p-gallery-cell--more:hover {
-  transform: none;
+/* No albums message */
+.p-gallery-albums-wrap > p {
+  color: #64748b;
+  font-size: 0.9rem;
+  text-align: center;
+  padding: 2rem 0;
 }
 
-.p-gallery-cell--more::after { display: none; }
+/* Pagination inside albums tab */
+.p-gallery-albums-wrap .w-100,
+.p-gallery-albums-wrap > .col-12 {
+  margin-top: 1.25rem;
+  padding: 0 !important;
+}
 
-.p-gallery-cell__more-label {
-  position: absolute;
-  inset: 0;
-  display: flex;
+.p-gallery-albums-wrap .pagination {
+  display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 1.5rem;
-  font-weight: 700;
-  letter-spacing: -0.01em;
+  gap: 0.25rem;
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none;
+  float: none !important;
 }
 
-.p-gallery-footer {
-  padding: 0.6rem 1rem;
-  border-top: 1px solid #f1f5f9;
-  font-size: 0.8125rem;
+.p-gallery-albums-wrap .pagination .page-item {
+  display: inline-block;
 }
 
-.p-gallery-footer a {
-  display: flex;
+.p-gallery-albums-wrap .pagination .page-link {
+  display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
-  color: #64748b;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.55rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  background: #fff;
+  color: #475569;
+  font-size: 0.85rem;
   text-decoration: none !important;
-  font-weight: 500;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
 
-.p-gallery-footer a:hover { color: #334155; }
+.p-gallery-albums-wrap .pagination .page-item.active .page-link {
+  background: #f37000;
+  border-color: #f37000;
+  color: #fff;
+}
 
-.p-gallery-footer__count {
+.p-gallery-albums-wrap .pagination .page-item.disabled .page-link {
+  color: #cbd5e1;
+  background: #f8fafc;
+  cursor: not-allowed;
+}
+
+.p-gallery-albums-wrap .pagination .page-link:hover {
+  border-color: #cbd5e1;
   background: #f1f5f9;
-  color: #64748b;
-  border-radius: 999px;
-  padding: 0.1rem 0.45rem;
-  font-size: 0.75rem;
-  font-weight: 600;
+  color: #1f2937;
+}
+
+/* ── Upload tab (inside manage page context) ── */
+
+#tab-upload .p-upload {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 0 1rem 1.5rem;
+}
+
+/* Flatten the card visual inside a tab — no heavy borders needed */
+#tab-upload .p-upload__card {
+  border-color: #eef2f7;
+  box-shadow: none;
+}
+
+/* ── Responsive ── */
+
+@media (max-width: 640px) {
+  .p-gallery-tabs {
+    padding: 0 0.5rem;
+  }
+
+  .p-gallery-tab-btn {
+    flex: 1 1 0;
+    justify-content: center;
+    padding: 0.65rem 0.5rem;
+    font-size: 0.8rem;
+    gap: 0.3rem;
+  }
+
+  .p-gallery-albums-wrap {
+    padding: 0 0.75rem 1.5rem;
+  }
+
+  .p-gallery-albums-wrap .row {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
+    gap: 0.75rem;
+  }
+
+  #tab-upload .p-upload {
+    padding: 0 0.75rem 1.5rem;
+  }
 }
diff --git a/assets/tailwindcss/layouts/_layouts.login.css b/assets/tailwindcss/layouts/_layouts.login.css
index b0772a85ce..f5088b4699 100644
--- a/assets/tailwindcss/layouts/_layouts.login.css
+++ b/assets/tailwindcss/layouts/_layouts.login.css
@@ -23,68 +23,6 @@
   pointer-events: none;
 }
 
-/* ── Top navigation (brand + signup CTA) ─────────────── */
-.p-login__nav {
-  position: relative;
-  z-index: 2;
-  padding: 0.75rem 0;
-}
-
-.p-login__nav-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.p-login__brand {
-  display: inline-flex;
-  align-items: center;
-  height: 40px;
-  text-decoration: none;
-}
-
-.p-login__brand-icon { height: 40px; width: auto; }
-.p-login__brand-text { height: 40px; width: auto; margin-left: 0.5rem; }
-
-.p-login__nav-cta {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.p-login__nav-prompt {
-  display: none;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.8125rem;
-}
-
-.p-login__nav-link {
-  display: inline-flex;
-  align-items: center;
-  height: 36px;
-  padding: 0 1rem;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.15);
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  color: #fff;
-  font-size: 0.875rem;
-  font-weight: 600;
-  text-decoration: none;
-  transition: background 0.15s ease, border-color 0.15s ease;
-}
-
-.p-login__nav-link:hover {
-  background: rgba(255, 255, 255, 0.25);
-  border-color: rgba(255, 255, 255, 0.4);
-  color: #fff;
-  text-decoration: none;
-}
-
-@media (min-width: 540px) {
-  .p-login__nav-prompt { display: inline; }
-}
-
 .p-login {
   position: relative;
   z-index: 1;
diff --git a/build/gallery/gallery.model.php b/build/gallery/gallery.model.php
index 56a594e8ea..c84082fcfe 100644
--- a/build/gallery/gallery.model.php
+++ b/build/gallery/gallery.model.php
@@ -389,7 +389,7 @@ public function getLatestItems($userId = false, $galleryId = false, $numRows = f
         }
         $query .= '1 = 1';
         $query .= '
-ORDER BY `created` DESC
+ORDER BY i.`created` DESC
         ';
 
         $s = $this->dao->query($query);
diff --git a/build/gallery/pages/gallerymanage.page.php b/build/gallery/pages/gallerymanage.page.php
index f70d17d90a..e2f3fd518a 100644
--- a/build/gallery/pages/gallerymanage.page.php
+++ b/build/gallery/pages/gallerymanage.page.php
@@ -29,6 +29,17 @@ protected function getSubmenuActiveItem()
         return 'manage';
     }
 
+    #[\Override]
+    protected function getSubmenuItems()
+    {
+        return [];
+    }
+
+    #[\Override]
+    protected function teaser()
+    {
+    }
+
     #[\Override]
     public function leftSidebar()
     {
@@ -44,6 +55,9 @@ protected function column_col3() {
         $words = $this->getWords();
         $member = $this->loggedInMember;
         $galleries = $this->galleries;
+$backToEditHref = ($this->loggedInMember && $this->loggedInMember->Username)
+            ? '/members/' . rawurlencode((string) $this->loggedInMember->Username) . '/edit'
+            : '#';
         $mem_redirect = $this->layoutkit->formkit->getMemFromRedirect();
         $page_url = PVars::getObj('env')->baseuri . implode('/', PRequest::get()->request);
         $formkit = $this->layoutkit->formkit;
diff --git a/build/gallery/templates/gallerymanage.column_col3.php b/build/gallery/templates/gallerymanage.column_col3.php
index 57391f480f..0ee76857c1 100644
--- a/build/gallery/templates/gallerymanage.column_col3.php
+++ b/build/gallery/templates/gallerymanage.column_col3.php
@@ -1,141 +1,544 @@
 <?php
 
-
 $member = $this->member;
-$picture_url = 'members/avatar/'.$member->Username.'/160';
+$words = $this->words;
+$cntPictures = (int) $this->cnt_pictures;
+$hasPhotos = $cntPictures > 0;
+$uploadUrl = 'gallery/upload_multiple';
+$backLabel = htmlspecialchars((string) $words->get('profile.back'), ENT_QUOTES, 'UTF-8');
+$backHrefEsc = htmlspecialchars($backToEditHref, ENT_QUOTES, 'UTF-8');
+
+$gmkToBytes = static fn (string $v): int => match (strtolower(substr($v, -1))) {
+    'g' => (int) $v * 1073741824,
+    'm' => (int) $v * 1048576,
+    'k' => (int) $v * 1024,
+    default => (int) $v,
+};
+$maxUploadBytes = min($gmkToBytes(ini_get('upload_max_filesize')), $gmkToBytes(ini_get('post_max_size')));
+$maxUploadMB = max(1, (int) round($maxUploadBytes / 1048576));
+
+$defaultTab = $hasPhotos ? 'photos' : 'upload';
 ?>
 
-<form id="manage" method="POST" class="mt-3">
-<div class="row">
-    <div class="col-12 order-sm-12 col-lg-3 order-lg-1 postleftcolumn">
-        <div class="u:w-full u:hidden u:p-8 d-lg-block">
-            <div class="o-avatar o-avatar--l o-avatar--shadow">
-                <div class="o-avatar__img-wrapper">
-                    <a href="members/<?=$member->Username?>"><img class="o-avatar__img" src="<?=$picture_url?>" alt="Picture of <?=$member->Username?>"/></a>
+<div class="p-gallery-manage__pagehead">
+    <div class="p-gallery-manage__pagehead-row">
+        <div class="p-gallery-manage__pagehead-copy">
+            <div class="p-gallery-manage__pagehead-heading">
+                <a href="<?= $backHrefEsc ?>"
+                   class="p-edit-subpage__back"
+                   aria-label="<?= $backLabel ?>">
+                    <i class="fas fa-chevron-left" aria-hidden="true"></i>
+                </a>
+                <div>
+                    <p class="p-gallery-manage__pagehead-eyebrow"><?= $words->get('Gallery') ?></p>
+                    <h1 class="p-gallery-manage__pagehead-title"><?= $words->get('GalleryManage') ?></h1>
+            <?php if ($hasPhotos):
+                $countKey = $cntPictures > 1
+                    ? 'gallery.manage.photo.count.many'
+                    : 'gallery.manage.photo.count.one';
+            ?>
+                <p class="p-gallery-manage__subtitle">
+                    <?= $words->get($countKey, $cntPictures) ?>
+                </p>
+            <?php endif; ?>
                 </div>
-                <a class="o-avatar__name u:break-all" href="members/<?=$member->Username ?>"><?=$member->Username ?></a>
             </div>
         </div>
+    </div>
+</div>
+
+<nav class="p-gallery-tabs" aria-label="Gallery sections">
+    <button class="p-gallery-tab-btn" data-tab="photos" type="button">
+        <i class="fas fa-images" aria-hidden="true"></i>
+        <span><?= $words->get('Photos') ?: 'Photos' ?></span>
+    </button>
+    <button class="p-gallery-tab-btn" data-tab="albums" type="button">
+        <i class="fas fa-layer-group" aria-hidden="true"></i>
+        <span><?= $words->get('GalleryTitleSets') ?: 'Albums' ?></span>
+    </button>
+    <button class="p-gallery-tab-btn" data-tab="upload" type="button">
+        <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
+        <span><?= $words->get('galleryupload') ?: 'Upload' ?></span>
+    </button>
+</nav>
 
+<?php /* ── PHOTOS TAB ── */ ?>
+<div id="tab-photos" class="p-gallery-tab-panel">
 
-        <?= $callback_tag; ?>
+<?php if (!$hasPhotos): ?>
 
-        <div class="o-checkbox mb-2">
-            <input type="checkbox" name="selectAll" id="selectAll" class="o-checkbox__input checker">&nbsp;&nbsp;
-            <label class="o-checkbox__label" for="selectAll"><?= $words->get('gallery.select.all'); ?></label>
+    <section class="p-gallery-manage__empty">
+        <div class="p-gallery-manage__empty-icon" aria-hidden="true">
+            <i class="fas fa-images"></i>
         </div>
-        <?php
-        if (isset($galleries) && $galleries) {
-            ?>
-            <div class="input-group mb-2">
-                <div class="input-group-prepend">
-                    <div class="input-group-text">
-                        <input type="radio" id="existingAlbum" name="newOrExistingAlbum" value="Existing" class="o-radiobutton__input" aria-label="<?= $words->get('gallery.use.existing.album') ?>">
-                    </div>
-                </div>
-                <select id="albums" name="gallery" size="1" class="o-input">
-                    <option value="">- <?= $words->get('gallery.use.existing.album') ?> -</option>
-                    <?php
-                    foreach ($galleries as $d) {
-                        echo '<option value="'.$d->id.'">'.$d->title.'</option>';
-                    }
-                    ?>
-                </select>
-            </div>
-            <?php
-        }
-        ?>
+        <h2 class="p-gallery-manage__empty-title"><?= $words->get('gallery.manage.empty.title') ?></h2>
+        <p class="p-gallery-manage__empty-text">
+            <?= $words->get('gallery.manage.empty.text') ?>
+        </p>
+        <button class="p-gallery-manage__empty-btn" type="button" data-goto-tab="upload">
+            <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
+            <span><?= $words->get('galleryupload') ?></span>
+        </button>
+    </section>
 
-        <div class="input-group mb-2">
-            <div class="input-group-prepend">
-                <div class="input-group-text">
-                    <input type="radio" id="newAlbum" name="newOrExistingAlbum" value="New" class="o-radiobutton__input" aria-label="<?= $words->get('gallery.create.new.album'); ?>">
-                </div>
-            </div>
-            <input class="o-input" id="newAlbumTitle" name="newAlbumTitle" maxlength="30" aria-label="<?= $words->get('gallery.create.new.album'); ?>" placeholder="<?= $words->get('gallery.create.new.album'); ?>">
+<?php else: ?>
+
+<form id="manage" method="POST" class="p-gallery-manage">
+
+    <?= $callback_tag; ?>
+
+    <section class="p-gallery-manage__panel">
+        <div class="p-gallery-manage__panel-row">
+            <label class="p-gallery-manage__select-all" for="selectAll">
+                <input type="checkbox" id="selectAll" name="selectAll" class="p-gallery-manage__select-all-input checker">
+                <span class="p-gallery-manage__select-all-box" aria-hidden="true">
+                    <i class="fas fa-check"></i>
+                </span>
+                <span class="p-gallery-manage__select-all-text"><?= $words->get('gallery.select.all'); ?></span>
+            </label>
         </div>
+
+        <fieldset class="p-gallery-manage__panel-row p-gallery-manage__album">
+            <legend class="visually-hidden"><?= $words->get('gallery.use.existing.album'); ?></legend>
+
+            <?php if (isset($galleries) && $galleries): ?>
+                <label class="p-gallery-manage__album-row" for="existingAlbum">
+                    <input type="radio" id="existingAlbum" name="newOrExistingAlbum" value="Existing"
+                           class="p-gallery-manage__album-radio"
+                           aria-label="<?= $words->get('gallery.use.existing.album'); ?>">
+                    <span class="p-gallery-manage__album-radio-dot" aria-hidden="true"></span>
+                    <select id="albums" name="gallery" size="1" class="p-gallery-manage__album-select">
+                        <option value="">- <?= $words->get('gallery.use.existing.album'); ?> -</option>
+                        <?php
+                        foreach ($galleries as $d) {
+                            echo '<option value="'.$d->id.'">'.$d->title.'</option>';
+                        }
+                        ?>
+                    </select>
+                </label>
+            <?php endif; ?>
+
+            <label class="p-gallery-manage__album-row" for="newAlbum">
+                <input type="radio" id="newAlbum" name="newOrExistingAlbum" value="New"
+                       class="p-gallery-manage__album-radio"
+                       aria-label="<?= $words->get('gallery.create.new.album'); ?>">
+                <span class="p-gallery-manage__album-radio-dot" aria-hidden="true"></span>
+                <input type="text"
+                       class="p-gallery-manage__album-input"
+                       id="newAlbumTitle" name="newAlbumTitle" maxlength="30"
+                       aria-label="<?= $words->get('gallery.create.new.album'); ?>"
+                       placeholder="<?= $words->get('gallery.create.new.album'); ?>">
+            </label>
+        </fieldset>
+
+        <div class="p-gallery-manage__panel-row p-gallery-manage__buttons">
+            <input type="submit"
+                   class="p-gallery-manage__btn p-gallery-manage__btn--primary"
+                   id="moveImages" name="moveImages"
+                   disabled
+                   value="<?= $words->getBuffered('Move images') ?>">
+            <input type="submit"
+                   class="p-gallery-manage__btn p-gallery-manage__btn--danger"
+                   id="deleteImages" name="deleteImages"
+                   disabled
+                   value="<?= $words->getBuffered('Delete images') ?>">
+        </div>
+
         <input name="deleteOrMove" id="deleteOrMove" type="hidden" value="Move">
         <input name="g-user" type="hidden" value="<?= $member->id ?>">
-        <input type="submit" class="btn btn-sm btn-primary btn-block mb-2" id="moveImages" name="moveImages" value="<?= $words->getBuffered('Move images') ?>">
-        <input type="submit" class="btn btn-sm btn-danger btn-block mb-2" id="deleteImages" name="deleteImages" value="<?= $words->getBuffered('Delete images') ?>">
-    </div>
-    <div class="col-12 order-sm-1 col-lg-9 order-lg-12">
+    </section>
+
+    <div class="p-gallery-manage__grid-wrap">
         <?php
             require SCRIPT_BASE . 'build/gallery/templates/overview.php';
         ?>
     </div>
-</div>
 </form>
+
+<?php endif; ?>
+</div>
+
+<?php /* ── ALBUMS TAB ── */ ?>
+<div id="tab-albums" class="p-gallery-tab-panel">
+    <div class="p-gallery-albums-wrap">
+        <?php
+            require SCRIPT_BASE . 'build/gallery/templates/galleries_overview.php';
+        ?>
+    </div>
+</div>
+
+<?php /* ── UPLOAD TAB ── */ ?>
+<div id="tab-upload" class="p-gallery-tab-panel">
+    <div class="p-upload">
+        <div class="p-upload__card">
+            <div class="p-upload__field">
+                <label class="p-upload__label" for="upload-album-input">
+                    <?= htmlspecialchars($words->get('gallery.upload_to_album') ?: 'Album (optional)', ENT_QUOTES, 'UTF-8') ?>
+                </label>
+                <input type="text"
+                       id="upload-album-input"
+                       class="p-upload__select"
+                       list="upload-albums-list"
+                       placeholder="<?= htmlspecialchars($words->get('gallery.upload_to_album') ?: 'Album name (optional)', ENT_QUOTES, 'UTF-8') ?>"
+                       autocomplete="off">
+                <datalist id="upload-albums-list">
+                    <?php if (isset($galleries) && $galleries): ?>
+                    <?php foreach ($galleries as $g): ?>
+                    <option value="<?= htmlspecialchars((string) $g->title, ENT_QUOTES, 'UTF-8') ?>">
+                    <?php endforeach; ?>
+                    <?php endif; ?>
+                </datalist>
+            </div>
+
+            <div id="upload-dropzone" class="p-upload__dropzone" role="button" tabindex="0" aria-label="Drop images here or click to select">
+                <div class="p-upload__dropzone-icon" aria-hidden="true">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                </div>
+                <div class="p-upload__dropzone-title"><?= htmlspecialchars($words->get('gallery.upload.dropzone.title') ?: 'Click or drag & drop images here', ENT_QUOTES, 'UTF-8') ?></div>
+                <div class="p-upload__dropzone-subtitle"><?= htmlspecialchars($words->get('gallery.upload.dropzone.subtitle') ?: 'Supported formats: JPEG, PNG, GIF', ENT_QUOTES, 'UTF-8') ?></div>
+                <input type="file" class="p-upload__file-input" multiple id="upload-file-input" accept="image/*">
+                <div id="upload-dropzone-summary" class="p-upload__dropzone-summary d-none">
+                    <i class="fas fa-images" aria-hidden="true"></i>
+                    <span id="upload-summary-text"></span>
+                    <button id="upload-dropzone-clear" type="button" class="p-upload__dropzone-clear" aria-label="Clear">
+                        <i class="fas fa-times" aria-hidden="true"></i>
+                    </button>
+                </div>
+            </div>
+
+            <div class="p-upload__actions">
+                <button id="upload-btn" class="p-upload__btn p-upload__btn--primary" type="button" disabled>
+                    <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
+                    <span><?= htmlspecialchars($words->get('upload') ?: 'Upload', ENT_QUOTES, 'UTF-8') ?></span>
+                </button>
+                <button id="upload-abort-btn" class="p-upload__btn p-upload__btn--ghost" type="button" disabled>
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                    <span><?= htmlspecialchars($words->get('abort') ?: 'Cancel', ENT_QUOTES, 'UTF-8') ?></span>
+                </button>
+            </div>
+        </div>
+
+        <section id="upload-queue" class="p-upload__queue d-none">
+            <h2 class="p-upload__queue-title"><?= htmlspecialchars($words->get('gallery.upload.queue.title') ?: 'Upload queue', ENT_QUOTES, 'UTF-8') ?></h2>
+
+            <div id="upload-image-progress-tpl" class="p-upload__item d-none">
+                <div class="p-upload__item-thumb"><img src="" alt=""></div>
+                <div class="p-upload__item-body">
+                    <div class="p-upload__item-filename">{filename}</div>
+                    <div class="p-upload__progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+                        <div class="p-upload__progress-bar" style="width: 0;"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="upload-size-error-tpl" class="p-upload__item p-upload__item--error d-none">
+                <div class="p-upload__item-thumb"><img src="" alt=""></div>
+                <div class="p-upload__item-status p-upload__item-status--error"></div>
+            </div>
+
+            <div id="upload-type-error-tpl" class="p-upload__item p-upload__item--error d-none">
+                <div class="p-upload__item-thumb p-upload__item-thumb--placeholder" aria-hidden="true">
+                    <i class="fas fa-file"></i>
+                </div>
+                <div class="p-upload__item-status p-upload__item-status--error"></div>
+            </div>
+
+            <div id="upload-progressbars" class="p-upload__queue-list"></div>
+        </section>
+    </div>
+</div>
+
 <script type="text/javascript">
-    const manageForm = document.getElementById("manage");
-    const deleteImages = document.getElementById("deleteImages");
-    const moveImages = document.getElementById("moveImages");
-    const selectAll = document.getElementById("selectAll");
-    const checkboxes = document.getElementsByName("imageId[]");
-    const deleteOrMove = document.getElementById("deleteOrMove");
-    const newOrExistingAlbum = document.getElementsByName("newOrExistingAlbum");
-    const newAlbumTitle = document.getElementById("newAlbumTitle");
-
-    newAlbumTitle.addEventListener("change", () => {
-        newOrExistingAlbum[0].checked = false;
-        newOrExistingAlbum[1].checked = true;
-    });
+(function () {
 
-    deleteImages.addEventListener("click", (e) => {
-        e.preventDefault();
+    /* ── Tab switching ── */
+    const tabs = document.querySelectorAll('.p-gallery-tab-btn');
+    const panels = document.querySelectorAll('.p-gallery-tab-panel');
+    const defaultTab = <?= json_encode($defaultTab) ?>;
 
-        const atLeastOneImageSelected = checkIfAtLeastOneImageSelected();
-        if (!atLeastOneImageSelected) {
-            alert(<?php echo json_encode($words->get('gallery.no.images.selected')); ?>);
-            return;
+    function activateTab(name) {
+        const valid = ['photos', 'albums', 'upload'];
+        const target = valid.includes(name) ? name : defaultTab;
+        tabs.forEach(t => t.classList.toggle('p-gallery-tab-btn--active', t.dataset.tab === target));
+        panels.forEach(p => p.classList.toggle('p-gallery-tab-panel--active', p.id === 'tab-' + target));
+        if (history.replaceState) {
+            history.replaceState(null, '', location.pathname + '#' + target);
         }
+    }
+
+    tabs.forEach(t => t.addEventListener('click', () => activateTab(t.dataset.tab)));
 
-        deleteOrMove.value = "Delete";
-        manageForm.submit();
+    document.querySelectorAll('[data-goto-tab]').forEach(btn => {
+        btn.addEventListener('click', () => activateTab(btn.dataset.gotoTab));
     });
 
-    moveImages.addEventListener("click", (e) => {
-        e.preventDefault();
+    const initialHash = location.hash.replace('#', '');
+    activateTab(initialHash || defaultTab);
+
+    /* ── Manage form (Photos tab) ── */
+    const manageForm = document.getElementById('manage');
+    if (manageForm) {
+        const deleteImages = document.getElementById('deleteImages');
+        const moveImages = document.getElementById('moveImages');
+        const selectAll = document.getElementById('selectAll');
+        const checkboxes = document.getElementsByName('imageId[]');
+        const deleteOrMove = document.getElementById('deleteOrMove');
+        const newOrExistingAlbum = document.getElementsByName('newOrExistingAlbum');
+        const newAlbumTitle = document.getElementById('newAlbumTitle');
 
-        const atLeastOneImageSelected = checkIfAtLeastOneImageSelected();
-        if (!atLeastOneImageSelected) {
-            alert(<?php echo json_encode($words->get('gallery.no.images.selected')); ?>);
-            return;
+        if (newAlbumTitle) {
+            newAlbumTitle.addEventListener('change', () => {
+                if (newOrExistingAlbum[0]) newOrExistingAlbum[0].checked = false;
+                if (newOrExistingAlbum[1]) newOrExistingAlbum[1].checked = true;
+            });
         }
 
-        if (!newOrExistingAlbum[0].checked && !newOrExistingAlbum[1].checked) {
-            alert(<?php echo json_encode($words->get('gallery.move.not.possible')); ?>);
-            return;
+        deleteImages && deleteImages.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (deleteImages.disabled) return;
+            deleteOrMove.value = 'Delete';
+            manageForm.submit();
+        });
+
+        moveImages && moveImages.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (moveImages.disabled) return;
+            if ((!newOrExistingAlbum[0] || !newOrExistingAlbum[0].checked) &&
+                (!newOrExistingAlbum[1] || !newOrExistingAlbum[1].checked)) {
+                alert(<?= json_encode($words->get('gallery.move.not.possible')) ?>);
+                return;
+            }
+            const albums = document.getElementById('albums');
+            if (newOrExistingAlbum[0] && newOrExistingAlbum[0].checked && albums && albums.value === '') {
+                alert(<?= json_encode($words->get('gallery.no.album.selected')) ?>);
+                return;
+            }
+            if (newOrExistingAlbum[1] && newOrExistingAlbum[1].checked && newAlbumTitle && newAlbumTitle.value === '') {
+                alert(<?= json_encode($words->get('gallery.no.album.given')) ?>);
+                return;
+            }
+            deleteOrMove.value = 'Move';
+            manageForm.submit();
+        });
+
+        if (selectAll) {
+            selectAll.addEventListener('change', () => {
+                checkboxes.forEach(cb => { cb.checked = selectAll.checked; });
+                updateManageButtons();
+            });
         }
 
-        const albums = document.getElementById("albums");
-        if (newOrExistingAlbum[0].checked && albums.value === "") {
-            alert(<?php echo json_encode($words->get('gallery.no.album.selected')); ?>);
-            return;
+        checkboxes.forEach(cb => cb.addEventListener('change', updateManageButtons));
+
+        function updateManageButtons() {
+            const hasSelection = Array.from(checkboxes).some(cb => cb.checked);
+            if (deleteImages) deleteImages.disabled = !hasSelection;
+            if (moveImages) moveImages.disabled = !hasSelection;
+            if (selectAll && checkboxes.length > 0) {
+                selectAll.checked = Array.from(checkboxes).every(cb => cb.checked);
+            }
         }
 
-        if (newOrExistingAlbum[1].checked && newAlbumTitle.value === "") {
-            alert(<?php echo json_encode($words->get('gallery.no.album.given')); ?>);
-            return;
+        updateManageButtons();
+    }
+
+    /* ── Upload (Upload tab) ── */
+    const imageType = /image.*/;
+    const maxSize = <?= $maxUploadBytes ?>;
+
+    const uploadBtn = document.getElementById('upload-btn');
+    const abortBtn = document.getElementById('upload-abort-btn');
+    const dropzone = document.getElementById('upload-dropzone');
+    const fileInput = document.getElementById('upload-file-input');
+    const dropzoneSummary = document.getElementById('upload-dropzone-summary');
+    const summaryText = document.getElementById('upload-summary-text');
+    const dropzoneClear = document.getElementById('upload-dropzone-clear');
+    const progressBars = document.getElementById('upload-progressbars');
+    const queueSection = document.getElementById('upload-queue');
+    const imageTpl = document.getElementById('upload-image-progress-tpl');
+    const sizeTpl = document.getElementById('upload-size-error-tpl');
+    const typeTpl = document.getElementById('upload-type-error-tpl');
+
+    let uploadClients = [];
+
+    function updateDropzoneSummary() {
+        const count = fileInput.files ? fileInput.files.length : 0;
+        if (count > 0) {
+            dropzoneSummary.classList.remove('d-none');
+            summaryText.textContent = count === 1 ? '1 file selected' : count + ' files selected';
+            uploadBtn.disabled = false;
+        } else {
+            dropzoneSummary.classList.add('d-none');
+            uploadBtn.disabled = true;
         }
+    }
 
-        deleteOrMove.value = "Move";
-        manageForm.submit();
+    dropzone.addEventListener('click', e => {
+        if (e.target.closest('#upload-dropzone-clear')) return;
+        fileInput.click();
     });
-
-    selectAll.addEventListener("change", (e) => {
-        checkboxes.forEach((checkbox) => {
-            checkbox.checked = selectAll.checked;
+    dropzone.addEventListener('keydown', e => {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.click(); }
+    });
+    ['dragenter', 'dragover'].forEach(evt => {
+        dropzone.addEventListener(evt, e => {
+            e.preventDefault(); e.stopPropagation();
+            dropzone.classList.add('p-upload__dropzone--active');
         });
-        e.preventDefault();
     });
+    ['dragleave', 'drop'].forEach(evt => {
+        dropzone.addEventListener(evt, e => {
+            e.preventDefault(); e.stopPropagation();
+            dropzone.classList.remove('p-upload__dropzone--active');
+        });
+    });
+    dropzone.addEventListener('drop', e => {
+        if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
+            fileInput.files = e.dataTransfer.files;
+            updateDropzoneSummary();
+        }
+    });
+    fileInput.addEventListener('change', updateDropzoneSummary);
+    dropzoneClear.addEventListener('click', e => {
+        e.preventDefault(); e.stopPropagation();
+        fileInput.value = '';
+        updateDropzoneSummary();
+    });
+
+    uploadBtn.addEventListener('click', uploadFiles);
+    abortBtn.addEventListener('click', uploadAbort);
+    updateDropzoneSummary();
+
+    function uploadFiles() {
+        if (progressBars.children.length !== 0) progressBars.replaceChildren();
+        const files = fileInput.files;
+        uploadBtn.disabled = true;
+        abortBtn.disabled = false;
+        let count = 0;
+
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            let tpl;
+            if (!file.type.match(imageType)) {
+                tpl = getTypeErrorTpl(i, file);
+            } else if (file.size > maxSize) {
+                tpl = getSizeErrorTpl(i, file);
+            } else {
+                tpl = getProgressTpl(i, file);
+            }
+            tpl.classList.remove('d-none');
+            progressBars.append(tpl);
+            const fnEl = document.getElementById('upload-fn-' + i);
+            if (!fnEl) continue;
+            count++;
+            fnEl.innerText = file.name;
+            doUploadFile(i, file);
+        }
+
+        progressBars.classList.remove('d-none');
+        queueSection.classList.remove('d-none');
+        if (count === 0) resetUploadForm();
+    }
+
+    function doUploadFile(i, file) {
+        const formData = new FormData();
+        const client = new XMLHttpRequest();
+        const album = document.getElementById('upload-album-input').value.trim();
+        uploadClients.push(client);
+
+        formData.append('file', file);
+        formData.append('album', album);
+
+        client.onerror = () => {
+            alert(<?= json_encode($words->get('gallery.upload.error') ?: 'An error occurred during upload.') ?>);
+            resetUploadForm();
+        };
+
+        client.onload = () => {
+            const row = document.getElementById('upload-item-' + i);
+            const progEl = document.getElementById('upload-prog-' + i);
+            if (progEl) progEl.remove();
+            let res;
+            try { res = JSON.parse(client.responseText); } catch(e) { res = {success: false, error: 'Parse error', filename: file.name}; }
+            const statusDiv = document.createElement('div');
+            statusDiv.classList.add('p-upload__item-status');
+            if (res.success) {
+                statusDiv.classList.add('p-upload__item-status--success');
+                statusDiv.innerHTML = '<i class="fas fa-circle-check" aria-hidden="true"></i> ' +
+                    res.filename + ' — <?= addslashes($words->get('gallery.upload.successful') ?: 'uploaded successfully') ?>';
+            } else {
+                statusDiv.classList.add('p-upload__item-status--error');
+                statusDiv.innerHTML = '<i class="fas fa-circle-exclamation" aria-hidden="true"></i> ' +
+                    res.filename + ' — ' + (res.error || 'Error');
+            }
+            row && row.append(statusDiv);
+            uploadClients = uploadClients.filter(c => c !== client);
+            if (uploadClients.length === 0) resetUploadForm();
+        };
+
+        client.upload.onprogress = e => {
+            const p = Math.round(100 / e.total * e.loaded);
+            const pct = document.getElementById('upload-pct-' + i);
+            if (pct) { pct.style.width = p + '%'; pct.setAttribute('aria-valuenow', p); }
+            const fn = document.getElementById('upload-fn-' + i);
+            if (fn) fn.innerText = file.name + ' — ' + p + '%';
+        };
 
-    function checkIfAtLeastOneImageSelected() {
-        let imageSelected = false;
-        checkboxes.forEach((checkbox) => {
-            imageSelected ||= checkbox.checked;
+        client.onabort = () => {
+            uploadClients = uploadClients.filter(c => c !== client);
+        };
+
+        client.open('POST', '/new/image/upload');
+        client.send(formData);
+    }
+
+    function uploadAbort() {
+        uploadClients.forEach((c, i) => {
+            const item = document.getElementById('upload-item-' + i);
+            if (item) item.remove();
+            c.abort();
         });
+        alert(<?= json_encode($words->get('upload.canceled') ?: 'Upload canceled.') ?>);
+        resetUploadForm();
+    }
 
-        return imageSelected;
+    function getProgressTpl(i, file) {
+        const el = imageTpl.cloneNode(true);
+        el.id = 'upload-item-' + i;
+        const body = el.children[1];
+        const prog = body.children[1];
+        prog.id = 'upload-prog-' + i;
+        prog.children[0].id = 'upload-pct-' + i;
+        body.children[0].id = 'upload-fn-' + i;
+        setThumb(el, file);
+        return el;
     }
+
+    function getSizeErrorTpl(i, file) {
+        const el = sizeTpl.cloneNode(true);
+        el.id = 'upload-item-' + i;
+        el.children[1].innerText = file.name + ' — <?= addslashes($words->get('gallery.upload.size.error') ?: 'File too large') ?>';
+        setThumb(el, file);
+        return el;
+    }
+
+    function getTypeErrorTpl(i, file) {
+        const el = typeTpl.cloneNode(true);
+        el.id = 'upload-item-' + i;
+        el.children[1].innerText = file.name + ' — <?= addslashes($words->get('gallery.upload.type.error') ?: 'Not an image') ?>';
+        return el;
+    }
+
+    function setThumb(el, file) {
+        el.children[0].firstChild.src = window.URL.createObjectURL(file);
+    }
+
+    function resetUploadForm() {
+        fileInput.value = '';
+        updateDropzoneSummary();
+        uploadBtn.disabled = true;
+        abortBtn.disabled = true;
+    }
+
+})();
 </script>
diff --git a/build/gallery/templates/galleryset.column_col3.php b/build/gallery/templates/galleryset.column_col3.php
index e629191609..564f404c5b 100755
--- a/build/gallery/templates/galleryset.column_col3.php
+++ b/build/gallery/templates/galleryset.column_col3.php
@@ -1,4 +1,4 @@
-<div id="masonry-grid" class="row" data-masonry='{"percentPosition": true }'>
+<div id="masonry-grid" class="row">
         <?php
 /* Template for showing the col3-content of a single gallery */
 
diff --git a/build/gallery/templates/imagefixedcolumns.list.php b/build/gallery/templates/imagefixedcolumns.list.php
index ae03361aba..d2094d5bd7 100644
--- a/build/gallery/templates/imagefixedcolumns.list.php
+++ b/build/gallery/templates/imagefixedcolumns.list.php
@@ -24,7 +24,7 @@
 $statement = $p[0];
 
 ?>
-<div id="masonry-grid" class="row" data-masonry='{"percentPosition": true }'>
+<div id="masonry-grid" class="row">
     <?php
     foreach ($statement as $d) {
         echo '<div class="col-sm-6 col-lg-4 mb-4">';
diff --git a/build/gallery/templates/overview.php b/build/gallery/templates/overview.php
index 4fe2caf3e9..5997ec2767 100644
--- a/build/gallery/templates/overview.php
+++ b/build/gallery/templates/overview.php
@@ -24,7 +24,7 @@
     require 'pages.php';
     $words = $this->words;
     ?>
-    <div id="masonry-grid" class="row" data-masonry='{"percentPosition": true }'>
+    <div id="masonry-grid" class="row">
         <?php
         foreach ($statement as $d) {
         echo '<div class="col-sm-6 col-lg-4 mb-4">';
@@ -38,7 +38,11 @@
         $edit = ($loggedmember && $loggedmember->Username == $d->user_handle);
         echo '<div class="card-body p-1">';
         if ($edit) {
-            echo '<div class="o-checkbox u:m-4"><input type="checkbox" class="o-checkbox__input mr-0" name="imageId[]" value="' . $d->id . '"></div> ';
+            $imageTitle = htmlspecialchars((string) $d->title, ENT_QUOTES, 'UTF-8');
+            echo '<label class="p-gallery-manage__image-select" aria-label="Select image ' . $imageTitle . '">';
+            echo '<input type="checkbox" class="p-gallery-manage__image-select-input" name="imageId[]" value="' . $d->id . '">';
+            echo '<span class="p-gallery-manage__image-select-box" aria-hidden="true"></span>';
+            echo '</label>';
         }
         echo '<h6 class="card-title text-truncate"></h6><a href="gallery/img?id='. $d->id .'" alt="'. $d->title .'">'. $title_short . '</a>';
         if (null !== $d->albumId) {
diff --git a/bun.lock b/bun.lock
index d487c3ff37..0bd4d9a626 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,7 +13,7 @@
       "devDependencies": {
         "@babel/core": "^7.29.0",
         "@babel/plugin-transform-runtime": "^7.29.0",
-        "@babel/preset-env": "^7.29.2",
+        "@babel/preset-env": "^7.29.5",
         "@babel/preset-react": "^7.28.5",
         "@fontsource/lato": "^5.2.7",
         "@fontsource/signika": "^5.2.8",
@@ -40,7 +40,6 @@
         "dayjs": "^1.11.20",
         "foundation-emails": "^2.5.1",
         "gsap": "^3.15.0",
-        "imagesloaded": "^4.1.4",
         "improved-yarn-audit": "^2.3.3",
         "intl-messageformat": "^10.7.18",
         "jarallax": "^1.12.8",
@@ -53,14 +52,13 @@
         "leaflet.markercluster.webpack": "^1.0.2",
         "litepicker": "^2.0.12",
         "mark.js": "^8.11.1",
-        "masonry-layout": "^4.2.2",
         "micromodal": "^0.4.10",
         "minimatch": "3.1.3",
         "moment": "^2.30.1",
         "moment-timezone": "^0.5.48",
         "move-js": "^0.5.0",
         "path": "^0.12.7",
-        "postcss": "^8.5.10",
+        "postcss": "^8.5.14",
         "postcss-import": "^15.1.0",
         "postcss-loader": "^7.3.4",
         "postcss-nesting": "^11.3.0",
@@ -74,7 +72,7 @@
         "regenerator-runtime": "^0.13.11",
         "respond.js": "^1.4.2",
         "sass": "^1.99.0",
-        "sass-loader": "^16.0.7",
+        "sass-loader": "^16.0.8",
         "scrolling-tabs-bootstrap-5": "^1.1.1",
         "scrollmagic": "^2.0.9",
         "show-more-read": "tomik23/show-more",
@@ -87,7 +85,7 @@
         "vanilla-calendar-pro": "^3.1.0",
         "webpack": "^5.106.2",
         "webpack-cli": "^5.1.4",
-        "workbox-webpack-plugin": "^7.4.0",
+        "workbox-webpack-plugin": "^7.4.1",
       },
     },
   },
@@ -1129,8 +1127,6 @@
 
     "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
 
-    "desandro-matches-selector": ["desandro-matches-selector@2.0.2", "", {}, "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg=="],
-
     "destroy": ["destroy@1.2.0", "", {}, "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="],
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
@@ -1217,8 +1213,6 @@
 
     "etag": ["etag@1.8.1", "", {}, "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="],
 
-    "ev-emitter": ["ev-emitter@1.1.1", "", {}, "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="],
-
     "event-component": ["event-component@0.1.0", "", {}, "sha512-nDko83zL1Sfl4gbYJAsFnyla0Ok+llczIyZ9X+lkCIm5yW/hggS9gbYPxhZW1JD8K5VKaFmgeIZvnGE/DQnh2w=="],
 
     "eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
@@ -1253,8 +1247,6 @@
 
     "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
 
-    "fizzy-ui-utils": ["fizzy-ui-utils@2.0.7", "", { "dependencies": { "desandro-matches-selector": "^2.0.0" } }, "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg=="],
-
     "flat": ["flat@5.0.2", "", { "bin": { "flat": "cli.js" } }, "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ=="],
 
     "follow-redirects": ["follow-redirects@1.16.0", "", {}, "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw=="],
@@ -1295,8 +1287,6 @@
 
     "get-proto": ["get-proto@1.0.1", "", { "dependencies": { "dunder-proto": "^1.0.1", "es-object-atoms": "^1.0.0" } }, "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g=="],
 
-    "get-size": ["get-size@2.0.3", "", {}, "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q=="],
-
     "get-symbol-description": ["get-symbol-description@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6" } }, "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg=="],
 
     "get-tsconfig": ["get-tsconfig@4.14.0", "", { "dependencies": { "resolve-pkg-maps": "^1.0.0" } }, "sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA=="],
@@ -1397,8 +1387,6 @@
 
     "idb": ["idb@7.1.1", "", {}, "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="],
 
-    "imagesloaded": ["imagesloaded@4.1.4", "", { "dependencies": { "ev-emitter": "^1.0.0" } }, "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA=="],
-
     "immutable": ["immutable@5.1.5", "", {}, "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A=="],
 
     "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
@@ -1625,8 +1613,6 @@
 
     "markdown-table": ["markdown-table@3.0.4", "", {}, "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw=="],
 
-    "masonry-layout": ["masonry-layout@4.2.2", "", { "dependencies": { "get-size": "^2.0.2", "outlayer": "^2.1.0" } }, "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA=="],
-
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
 
     "mdast-util-find-and-replace": ["mdast-util-find-and-replace@3.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "escape-string-regexp": "^5.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg=="],
@@ -1793,8 +1779,6 @@
 
     "open": ["open@10.2.0", "", { "dependencies": { "default-browser": "^5.2.1", "define-lazy-prop": "^3.0.0", "is-inside-container": "^1.0.0", "wsl-utils": "^0.1.0" } }, "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA=="],
 
-    "outlayer": ["outlayer@2.1.1", "", { "dependencies": { "ev-emitter": "^1.0.0", "fizzy-ui-utils": "^2.0.0", "get-size": "^2.0.2" } }, "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw=="],
-
     "own-keys": ["own-keys@1.0.1", "", { "dependencies": { "get-intrinsic": "^1.2.6", "object-keys": "^1.1.1", "safe-push-apply": "^1.0.0" } }, "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg=="],
 
     "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
diff --git a/package.json b/package.json
index afba52b766..3b4368d7bf 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
     "dayjs": "^1.11.20",
     "foundation-emails": "^2.5.1",
     "gsap": "^3.15.0",
-    "imagesloaded": "^4.1.4",
     "improved-yarn-audit": "^2.3.3",
     "intl-messageformat": "^10.7.18",
     "jarallax": "^1.12.8",
@@ -53,7 +52,6 @@
     "leaflet.markercluster.webpack": "^1.0.2",
     "litepicker": "^2.0.12",
     "mark.js": "^8.11.1",
-    "masonry-layout": "^4.2.2",
     "micromodal": "^0.4.10",
     "minimatch": "3.1.3",
     "moment": "^2.30.1",
diff --git a/src/Controller/GalleryController.php b/src/Controller/GalleryController.php
index a471d6925e..cf48d82bd5 100644
--- a/src/Controller/GalleryController.php
+++ b/src/Controller/GalleryController.php
@@ -8,7 +8,6 @@
 use App\Entity\UploadedImage;
 use App\Form\CustomDataClass\GalleryImageEditRequest;
 use App\Form\GalleryEditImageFormType;
-use App\Form\GalleryUploadForm;
 use App\Logger\Logger;
 use App\Model\GalleryModel;
 use App\Utilities\TranslatedFlashTrait;
@@ -53,7 +52,7 @@ public function editImage(Request $request, GalleryImage $image): Response
     {
         $user = $this->getUser();
         if ($user !== $image->getOwner()) {
-            $this->createAccessDeniedException('Not your image!');
+            throw $this->createAccessDeniedException('Not your image!');
         }
 
         $editImageRequest = new GalleryImageEditRequest($image);
@@ -198,39 +197,9 @@ public function handleImageUploadToGallery(Request $request, ValidatorInterface
      * @return Response
      */
     #[Route(path: '/gallery/upload_multiple', name: 'gallery_upload_multiple')]
-    public function uploadImagesToGallery(Request $request)
+    public function uploadImagesToGallery(): Response
     {
-        /** @var Member $member */
-        $member = $this->getUser();
-
-        $galleryRepository = $this->entityManager->getRepository(Gallery::class);
-        $galleries = $galleryRepository->findBy(['owner' => $member]);
-
-        $albumTitles = [];
-        if ($galleries) {
-            $albumTitles[0] = '';
-            foreach ($galleries as $gallery) {
-                $albumTitles[$gallery->getId()] = $gallery->getTitle();
-            }
-        }
-        $uploadImageForm = $this->createForm(GalleryUploadForm::class, null, ['albums' => $albumTitles]);
-        $uploadImageForm->handleRequest($request);
-        if ($uploadImageForm->isSubmitted() && $uploadImageForm->isValid()) {
-            // if this is called someone tries to hack the system as the Javascript on the upload page
-            // takes care of uploading the files so we return a 403 error
-            return new Response(403);
-        }
-
-        return $this->render('gallery/upload.image.html.twig', [
-            'form' => $uploadImageForm->createView(),
-            'submenu' => [
-                'active' => 'upload',
-                'items' => $this->getSubmenuItems(),
-            ],
-            'constraints' => [
-                'size' => $this->getMaxUploadSizeInMegaBytes(),
-            ],
-        ]);
+        return $this->redirectToRoute('gallery_manage', [], 301);
     }
 
     /**
@@ -348,32 +317,4 @@ public function showUploadedImage(UploadedImage $image, string $fileInfo): Binar
         return $response;
     }
 
-    /**
-     * @return array
-     */
-    private function getSubmenuItems()
-    {
-        $member = $this->getUser();
-        $submenuItems = [
-            'manage' => [
-                'key' => 'GalleryManage',
-                'url' => $this->generateUrl('gallery_manage'),
-            ],
-            'upload' => [
-                'key' => 'GalleryUpload',
-                'url' => $this->generateUrl('gallery_upload_multiple'),
-            ],
-            'albums' => [
-                'key' => 'GalleryTitleSets',
-                'url' => $this->generateUrl('gallery_show_user_albums', ['username' => $member->getUsername()]),
-            ],
-        ];
-
-        return $submenuItems;
-    }
-
-    private function getMaxUploadSizeInMegaBytes()
-    {
-        return UploadedFile::getMaxFilesize() / 1024 / 1024;
-    }
 }
diff --git a/src/Controller/ProfileController.php b/src/Controller/ProfileController.php
index de5fed3ba0..d83db274f2 100644
--- a/src/Controller/ProfileController.php
+++ b/src/Controller/ProfileController.php
@@ -680,9 +680,7 @@ private function renderProfile(Member $member, Member $loggedInMember, ?string $
             'submenu' => $this->profileSubmenu->getSubmenu($loggedInMember, $member),
         ];
 
-        if (!$editMode) {
-            $params['hide_sidebar'] = true;
-        }
+        $params['hide_sidebar'] = true;
 
         return $this->render($template, $params);
     }
diff --git a/src/Form/AboutMeFormType.php b/src/Form/AboutMeFormType.php
index 55b242699f..2e26e85e66 100644
--- a/src/Form/AboutMeFormType.php
+++ b/src/Form/AboutMeFormType.php
@@ -4,30 +4,31 @@
 
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\FormBuilderInterface;
 
 class AboutMeFormType extends AbstractType
 {
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
+        $textareaOptions = [
+            'required' => false,
+            'attr' => ['class' => 'o-input', 'rows' => 6],
+        ];
+
         $builder
-            ->add('about_me', CkEditorType::class, [
+            ->add('about_me', TextareaType::class, $textareaOptions + [
                 'label' => 'profile.about.me',
                 'help' => 'help.about.me',
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'required' => false,
             ])
-            ->add('occupation', CkEditorType::class, [
+            ->add('occupation', TextareaType::class, $textareaOptions + [
                 'label' => 'profile.occupation',
                 'help' => 'help.occupation',
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'required' => false,
+                'attr' => ['class' => 'o-input', 'rows' => 2],
             ])
-            ->add('offer_hosts', CkEditorType::class, [
+            ->add('offer_hosts', TextareaType::class, $textareaOptions + [
                 'label' => 'profile.offer.hosts',
                 'help' => 'help.offer.hosts',
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'required' => false,
             ])
             ->add('language', HiddenType::class)
         ;
diff --git a/src/Form/AccommodationFormType.php b/src/Form/AccommodationFormType.php
index 8c34e4d4e8..819edc547b 100644
--- a/src/Form/AccommodationFormType.php
+++ b/src/Form/AccommodationFormType.php
@@ -11,6 +11,7 @@
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\Extension\Core\Type\IntegerType;
 use Symfony\Component\Form\Extension\Core\Type\RangeType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\Validator\Constraints\NotNull;
 
@@ -77,69 +78,53 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 'label' => 'profile.wheelchair.accessible',
                 'help' => 'help.profile.wheelchair.accessible',
             ])
-            ->add('length_of_stay', CkEditorType::class, [
+            ->add('length_of_stay', TextareaType::class, [
                 'label' => 'profile.max.length.of.stay',
                 'help' => 'help.profile.length.of.stay',
-                'async' => true,
                 'required' => false,
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'image_upload' => false,
+                'attr' => ['class' => 'o-input', 'rows' => 3],
             ])
-            ->add('i_live_with', CkEditorType::class, [
+            ->add('i_live_with', TextareaType::class, [
                 'label' => 'profile.i.live.with',
                 'help' => 'help.profile.i.live.with',
-                'async' => true,
                 'required' => false,
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'image_upload' => false,
+                'attr' => ['class' => 'o-input', 'rows' => 3],
             ])
-            ->add('please_bring', CkEditorType::class, [
+            ->add('please_bring', TextareaType::class, [
                 'label' => 'profile.please.bring',
                 'help' => 'help.profile.please.bring',
-                'async' => true,
                 'required' => false,
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'image_upload' => false,
+                'attr' => ['class' => 'o-input', 'rows' => 3],
             ])
-            ->add('where_you_sleep', CkEditorType::class, [
+            ->add('where_you_sleep', TextareaType::class, [
                 'label' => 'profile.where.you.sleep',
                 'help' => 'help.profile.where.you.sleep',
-                'async' => true,
                 'required' => false,
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'image_upload' => false,
+                'attr' => ['class' => 'o-input', 'rows' => 4],
             ])
-            ->add('offer_guests', CkEditorType::class, [
+            ->add('offer_guests', TextareaType::class, [
                 'label' => 'profile.offer.guests',
                 'help' => 'help.profile.offer.guests',
-                'async' => true,
                 'required' => false,
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'image_upload' => false,
+                'attr' => ['class' => 'o-input', 'rows' => 4],
             ])
-            ->add('additional_info', CkEditorType::class, [
+            ->add('additional_info', TextareaType::class, [
                 'label' => 'profile.additional.information.for.guests',
                 'help' => 'help.profile.additional.information.for.guests',
-                'async' => true,
                 'required' => false,
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'image_upload' => false,
+                'attr' => ['class' => 'o-input', 'rows' => 4],
             ])
-            ->add('getting_there', CkEditorType::class, [
+            ->add('getting_there', TextareaType::class, [
                 'label' => 'profile.getting.there',
                 'help' => 'help.profile.getting.there',
-                'async' => true,
                 'required' => false,
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'image_upload' => false,
+                'attr' => ['class' => 'o-input', 'rows' => 4],
             ])
-            ->add('house_rules', CkEditorType::class, [
+            ->add('house_rules', TextareaType::class, [
                 'label' => 'profile.house.rules',
                 'help' => 'help.profile.house.rules',
-                'async' => true,
                 'required' => false,
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'image_upload' => false,
+                'attr' => ['class' => 'o-input', 'rows' => 4],
             ])
             ->add('language', HiddenType::class)
         ;
diff --git a/src/Form/AccountEditFormType.php b/src/Form/AccountEditFormType.php
index 0e2bb066fd..deed6d920f 100644
--- a/src/Form/AccountEditFormType.php
+++ b/src/Form/AccountEditFormType.php
@@ -23,6 +23,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ->add('name', TextType::class, [
                 'label' => 'label.name',
                 'attr' => [
+                    'class' => 'o-input',
                     'placeholder' => 'placeholder.name',
                 ],
                 'help' => 'help.name',
@@ -38,6 +39,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ->add('short_name', TextType::class, [
                 'label' => 'label.shortname',
                 'attr' => [
+                    'class' => 'o-input',
                     'placeholder' => 'placeholder.shortname',
                 ],
                 'help' => 'help.shortname',
@@ -84,6 +86,9 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ])
             ->add('email', EmailType::class, [
                 'label' => 'label.email.change',
+                'attr' => [
+                    'class' => 'o-input',
+                ],
                 'help' => 'help.email.change',
                 'required' => false,
                 'constraints' => [
diff --git a/src/Form/GalleryEditImageFormType.php b/src/Form/GalleryEditImageFormType.php
index 89d3202b1a..5d078d5ea2 100644
--- a/src/Form/GalleryEditImageFormType.php
+++ b/src/Form/GalleryEditImageFormType.php
@@ -5,6 +5,7 @@
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormBuilderInterface;
 
@@ -20,16 +21,26 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 'label' => 'label.gallery.title',
                 'attr' => [
                     'placeholder' => 'placeholder.gallery.title',
+                    'class' => 'p-gallery-edit__title-input',
+                    'autocomplete' => 'off',
                 ],
             ])
-            ->add('description', TextType::class, [
+            ->add('description', TextareaType::class, [
                 'label' => 'label.gallery.description',
+                'required' => true,
                 'attr' => [
                     'placeholder' => 'placeholder.gallery.description',
+                    'rows' => 6,
+                    'class' => 'p-gallery-edit__textarea',
                 ],
             ])
             ->add('id', HiddenType::class)
-            ->add('submit', SubmitType::class)
+            ->add('submit', SubmitType::class, [
+                'label' => 'gallery.image.edit.save',
+                'attr' => [
+                    'class' => 'o-button o-button--l p-gallery-edit__submit',
+                ],
+            ])
         ;
     }
 }
diff --git a/src/Form/MyInterestsFormType.php b/src/Form/MyInterestsFormType.php
index c2000d8205..8484a8cc5f 100644
--- a/src/Form/MyInterestsFormType.php
+++ b/src/Form/MyInterestsFormType.php
@@ -4,47 +4,38 @@
 
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\FormBuilderInterface;
 
 class MyInterestsFormType extends AbstractType
 {
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
+        $textareaOptions = [
+            'required' => false,
+            'attr' => ['class' => 'o-input', 'rows' => 4],
+        ];
+
         $builder
-            ->add('hobbies', CkEditorType::class, [
+            ->add('hobbies', TextareaType::class, $textareaOptions + [
                 'label' => 'profile.hobbies',
                 'help' => 'help.profile.hobbies',
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'required' => false,
-                'image_upload' => false,
             ])
-            ->add('books', CkEditorType::class, [
+            ->add('books', TextareaType::class, $textareaOptions + [
                 'label' => 'profile.books',
                 'help' => 'help.profile.books',
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'required' => false,
-                'image_upload' => false,
             ])
-            ->add('music', CkEditorType::class, [
+            ->add('music', TextareaType::class, $textareaOptions + [
                 'label' => 'profile.music',
                 'help' => 'help.profile.music',
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'required' => false,
-                'image_upload' => false,
             ])
-            ->add('movies', CkEditorType::class, [
+            ->add('movies', TextareaType::class, $textareaOptions + [
                 'label' => 'profile.movies',
                 'help' => 'help.profile.movies',
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'required' => false,
-                'image_upload' => false,
             ])
-            ->add('organizations', CkEditorType::class, [
+            ->add('organizations', TextareaType::class, $textareaOptions + [
                 'label' => 'profile.organizations',
                 'help' => 'help.profile.organizations',
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'required' => false,
-                'image_upload' => false,
             ])
             ->add('language', HiddenType::class)
         ;
diff --git a/src/Form/TravelExperiencesFormType.php b/src/Form/TravelExperiencesFormType.php
index 00e5866f70..0dcec297d2 100644
--- a/src/Form/TravelExperiencesFormType.php
+++ b/src/Form/TravelExperiencesFormType.php
@@ -4,26 +4,26 @@
 
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\FormBuilderInterface;
 
 class TravelExperiencesFormType extends AbstractType
 {
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
+        $textareaOptions = [
+            'required' => false,
+            'attr' => ['class' => 'o-input', 'rows' => 6],
+        ];
+
         $builder
-            ->add('past', CkEditorType::class, [
+            ->add('past', TextareaType::class, $textareaOptions + [
                 'label' => 'profile.past.trips',
                 'help' => 'help.profile.past.trips',
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'required' => false,
-                'image_upload' => false,
             ])
-            ->add('planned', CkEditorType::class, [
+            ->add('planned', TextareaType::class, $textareaOptions + [
                 'label' => 'profile.planned.trips',
                 'help' => 'help.profile.planned.trips',
-                'editor_type' => CkEditorType::EDITOR_TYPE_INLINE,
-                'required' => false,
-                'image_upload' => false,
             ])
             ->add('language', HiddenType::class)
         ;
diff --git a/templates/gallery/edit.image.html.twig b/templates/gallery/edit.image.html.twig
index d1f75ff115..5c14317a55 100644
--- a/templates/gallery/edit.image.html.twig
+++ b/templates/gallery/edit.image.html.twig
@@ -1,21 +1,71 @@
-{% extends 'base.html.twig' %}
-{% import 'macros.twig' as macros %}
-
-{% block javascripts %}
-{% endblock javascripts %}
-
-{% block stylesheets %}
-{% endblock stylesheets %}
-
-{% block content %}
-    <div class="row">
-        <div class="col-12 col-md-6 text-center">
-            <a href="/gallery/img?id={{ image.id }}" class="w-100" title="{{ image.title }}" rel="image">
-                <img src="/gallery/thumbimg?id={{ image.id}}&amp;t=2" class="framed big" alt="image">
-            </a>
-        </div>
-        <div class="col-12 col-md-6">
-            {{ form(form) }}
-        </div>
-    </div>
-{% endblock content %}
\ No newline at end of file
+{% extends 'base.html.twig' %}
+
+{% block title %}{{ image.title|e }} — {{ 'gallery.image.edit.page_title'|trans }}{% endblock %}
+
+{% block content %}
+  <div class="p-gallery-edit">
+    <div class="p-gallery-edit__toolbar mb-3">
+      <a href="{{ url('gallery_manage') }}"
+         class="btn btn-outline-secondary d-inline-flex align-items-center gap-2 p-gallery-edit__back-btn">
+        <i class="fas fa-arrow-left" aria-hidden="true"></i>
+        <span>{{ 'gallery.image.edit.back'|trans }}</span>
+      </a>
+    </div>
+
+    <div class="p-gallery-edit__hero">
+      <header class="p-gallery-edit__intro">
+        <h1 class="p-gallery-edit__title">{{ image.title|e }}</h1>
+      </header>
+    </div>
+
+    <div class="row g-4 g-lg-5 align-items-start">
+      <div class="col-12 col-lg-5">
+        <div class="gallery-edit-preview p-gallery-edit__preview">
+          <a href="{{ url('gallery_image', {id: image.id}) }}"
+             class="p-gallery-edit__preview-link"
+             title="{{ image.title|e('html_attr') }}"
+             rel="image">
+            <img src="{{ url('gallery_thumbnail', {id: image.id, t: 2}) }}"
+                 class="img-fluid framed"
+                 alt="{{ image.title|e }}">
+          </a>
+        </div>
+        <p class="p-gallery-edit__full-link-wrap">
+          <a href="{{ url('gallery_image', {id: image.id}) }}" class="p-gallery-edit__full-link">
+            {{ 'gallery.image.edit.view_full'|trans }}
+            <i class="fas fa-external-link-alt fa-xs ms-1" aria-hidden="true"></i>
+          </a>
+        </p>
+      </div>
+
+      <div class="col-12 col-lg-7">
+        <div class="card border-0 p-gallery-edit__card">
+          <div class="card-body p-4 p-md-5">
+            {{ form_start(form, { attr: { class: 'p-gallery-edit__form', novalidate: 'novalidate' } }) }}
+            {{ form_errors(form) }}
+
+            <div class="mb-4">
+              {{ form_label(form.title) }}
+              {{ form_widget(form.title) }}
+              {{ form_errors(form.title) }}
+            </div>
+
+            <div class="mb-2">
+              {{ form_label(form.description) }}
+              {{ form_widget(form.description) }}
+              {{ form_errors(form.description) }}
+            </div>
+
+            {{ form_widget(form.id) }}
+
+            <div class="p-gallery-edit__actions">
+              {{ form_widget(form.submit) }}
+            </div>
+
+            {{ form_end(form) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock content %}
diff --git a/templates/gallery/upload.image.html.twig b/templates/gallery/upload.image.html.twig
index cea0530e4a..b77924bc1c 100644
--- a/templates/gallery/upload.image.html.twig
+++ b/templates/gallery/upload.image.html.twig
@@ -10,19 +10,79 @@
         const imageSizeErrorTemplate = document.getElementById("image-size-error");
         const imageTypeErrorTemplate = document.getElementById("image-type-error");
         const progressBars = document.getElementById("progressbars");
+        const queueSection = document.getElementById("upload-queue");
 
         const upload = document.getElementById("upload");
         const abort = document.getElementById("abort");
+        const dropzone = document.getElementById("dropzone");
+        const fileInput = document.getElementById("form_files");
+        const dropzoneSummary = document.getElementById("dropzone-summary");
+        const dropzoneSummaryText = document.getElementById("dropzone-summary-text");
+        const dropzoneClear = document.getElementById("dropzone-clear");
+
         upload.addEventListener("click", uploadFiles);
         abort.addEventListener("click", uploadAbort);
 
         let clients = [];
 
+        dropzone.addEventListener("click", (e) => {
+            if (e.target.closest('#dropzone-clear')) return;
+            fileInput.click();
+        });
+        dropzone.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                fileInput.click();
+            }
+        });
+
+        ["dragenter", "dragover"].forEach(evt => {
+            dropzone.addEventListener(evt, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                dropzone.classList.add("p-upload__dropzone--active");
+            });
+        });
+        ["dragleave", "drop"].forEach(evt => {
+            dropzone.addEventListener(evt, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                dropzone.classList.remove("p-upload__dropzone--active");
+            });
+        });
+        dropzone.addEventListener("drop", (e) => {
+            if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
+                fileInput.files = e.dataTransfer.files;
+                updateDropzoneSummary();
+            }
+        });
+        fileInput.addEventListener("change", updateDropzoneSummary);
+        dropzoneClear.addEventListener("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            fileInput.value = "";
+            updateDropzoneSummary();
+        });
+
+        function updateDropzoneSummary() {
+            const count = fileInput.files ? fileInput.files.length : 0;
+            if (count > 0) {
+                dropzoneSummary.classList.remove("d-none");
+                dropzoneSummaryText.textContent =
+                    count === 1 ? "1 file selected" : count + " files selected";
+                upload.disabled = false;
+            } else {
+                dropzoneSummary.classList.add("d-none");
+                upload.disabled = true;
+            }
+        }
+        updateDropzoneSummary();
+
         function uploadFiles() {
             if (progressBars.children.length !== 0) {
                 progressBars.replaceChildren();
             }
-            let files = document.getElementById("form_files").files;
+            let files = fileInput.files;
 
             upload.disabled = true;
             abort.disabled = false;
@@ -56,6 +116,7 @@
             }
 
             progressBars.classList.remove('d-none');
+            queueSection.classList.remove("d-none");
 
             if (count === 0) {
                 resetForm();
@@ -80,17 +141,22 @@
 
             client.onload = function(e) {
                 const imageProgress = document.getElementById('image-progress-' + index);
-                imageProgress.children[1].remove();
+                const progressEl = document.getElementById('progress-' + index);
+                if (progressEl) progressEl.remove();
 
-                const infoDiv = document.createElement('div');
-                infoDiv.classList.add('u:p-8');
                 let response = JSON.parse(client.responseText);
+                const statusDiv = document.createElement('div');
+                statusDiv.classList.add('p-upload__item-status');
                 if (response.success) {
-                    infoDiv.innerText = response.filename + " - {{ 'gallery.upload.successful'|trans }}";
+                    statusDiv.classList.add('p-upload__item-status--success');
+                    statusDiv.innerHTML = '<i class="fas fa-circle-check" aria-hidden="true"></i> ' +
+                        response.filename + ' — {{ 'gallery.upload.successful'|trans }}';
                 } else {
-                    infoDiv.innerText = response.filename + " - " + response.error;
+                    statusDiv.classList.add('p-upload__item-status--error');
+                    statusDiv.innerHTML = '<i class="fas fa-circle-exclamation" aria-hidden="true"></i> ' +
+                        response.filename + ' — ' + response.error;
                 }
-                imageProgress.append(infoDiv);
+                imageProgress.append(statusDiv);
                 clients = clients.filter((value)=>value!==client);
                 if (clients.length === 0) {
                     resetForm();
@@ -104,7 +170,7 @@
                 percent.setAttribute('aria-value-now', p);
 
                 const filename = document.getElementById('filename-' + index);
-                filename.innerText = file.name + " - " + p + "%";
+                filename.innerText = file.name + " — " + p + "%";
             };
 
             client.onabort = function(e) {
@@ -117,7 +183,8 @@
 
         function uploadAbort() {
             for(let index = 0; index < clients.length; index++) {
-                document.getElementById('image-progress-' + index).remove();
+                const item = document.getElementById('image-progress-' + index);
+                if (item) item.remove();
                 clients[index].abort();
             }
             alert("{{ 'upload.canceled'|trans }}");
@@ -131,7 +198,7 @@
             const imageTypeError = imageTypeErrorTemplate.cloneNode(true);
             imageTypeError.id = 'image-progress-' + index;
             const error = imageTypeError.children[1];
-            error.innerText = file.name + " - {{ 'gallery.upload.type.error'|trans }}";
+            error.innerText = file.name + " — {{ 'gallery.upload.type.error'|trans }}";
 
             return imageTypeError;
         }
@@ -140,7 +207,7 @@
             const imageSizeError = imageSizeErrorTemplate.cloneNode(true);
             imageSizeError.id = 'image-progress-' + index;
             const error = imageSizeError.children[1];
-            error.innerText = file.name + " - {{ 'gallery.upload.size.error'|trans }}";
+            error.innerText = file.name + " — {{ 'gallery.upload.size.error'|trans }}";
 
             setImage(imageSizeError, index, file);
             return imageSizeError;
@@ -149,11 +216,11 @@
         function getImageProgressUpload(index, file) {
             const imageProgress = imageProgressTemplate.cloneNode(true);
             imageProgress.id = 'image-progress-' + index;
-            const flex = imageProgress.children[1];
-            const progress = flex.children[0];
+            const body = imageProgress.children[1];
+            const progress = body.children[1];
             progress.id = 'progress-' + index;
             progress.children[0].id = 'percent-' + index;
-            flex.children[1].id = 'filename-' + index;
+            body.children[0].id = 'filename-' + index;
 
             setImage(imageProgress, index, file);
             return imageProgress;
@@ -166,9 +233,9 @@
         }
 
         function resetForm() {
-            let form = document.querySelector('form');
-            form.reset()
-            upload.disabled = false;
+            fileInput.value = "";
+            updateDropzoneSummary();
+            upload.disabled = true;
             abort.disabled = true;
         }
     </script>
@@ -178,44 +245,104 @@
 {% endblock stylesheets %}
 
 {% block content %}
-   <div class="row g-0">
-       <div class="col-12"><h1><span class="d-none d-md-block">{{ 'gallery' | trans }} - </span>{{ 'upload' | trans }}</h1>
-       <p class="u:mb-8">{{ 'gallery.upload.abstract'|trans({'size': constraints.size})}}</p></div>
-       {{ form_start(form, {'attr': {'class': 'col-12'}}) }}
-       {{ form_row(form.albums) }}
-       <div class="col-12 u:mb-8">
-           <label class="form-label" id="form_files_label" for="form_files">{{ 'choosefile'|trans }}</label>
-           <input type="file" class="form-control" multiple="multiple" id="form_files" data-browse="{{ 'browsefile'|trans }}">
-       </div>
-
-       <button id="upload" class="btn btn-primary u:mb-8 u:me-8" type="button">{{ 'upload'|trans }}</button>
-       <button id="abort" class="btn btn-danger u:mb-8" type="button" disabled="disabled" onclick="uploadAbort()">{{ 'abort'|trans }}</button>
-
-       <div id="image-progress" class="d-none u:flex u:items-center">
-           <div><img src="" style="width: 100px; object-fit: fill; padding:8px;"></div>
-           <div class="u:flex u:flex-col u:w-full">
-               <div class="progress u:w-full">
-                   <div class="progress-bar u:h-16" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-               </div>
-               <small class="justify-content-center white d-flex position-absolute w-100">{filename}</small>
-           </div>
-       </div>
-
-       <div id="image-size-error" class="d-none u:flex u:flex-row u:items-center">
-           <div><img src="" style="max-height:100px; min-height: 40px; width: 100px; object-fit: fill; padding:8px;"></div>
-           <div class="alert-danger u:rounded-4 u:p-8"></div>
-       </div>
-
-       <div id="image-type-error" class="d-none u:flex u:flex-row u:items-center">
-           <div style="height: 60px; width: 100px; padding:8px;"></div>
-           <div class="alert-danger u:rounded-4 u:p-8"></div>
-       </div>
-
-       <div id="progressbars"></div>
-
-       {% do form.files.setRendered %}
-       {% do form.upload.setRendered %}
-       {% do form.abort.setRendered %}
-       {{ form_end(form) }}
+    <div class="p-upload-page">
+
+        {# ── Header ── #}
+        <div class="p-gallery-manage__pagehead">
+            <div class="p-gallery-manage__pagehead-row">
+                <div class="p-gallery-manage__pagehead-copy">
+                    <div class="p-gallery-manage__pagehead-heading">
+                        <a href="{{ path('gallery_manage') }}"
+                           class="p-edit-subpage__back"
+                           aria-label="{{ 'gallery.upload.back.to.gallery'|trans }}">
+                            <i class="fas fa-chevron-left" aria-hidden="true"></i>
+                        </a>
+                        <div>
+                            <p class="p-gallery-manage__pagehead-eyebrow">{{ 'Gallery'|trans }}</p>
+                            <h1 class="p-gallery-manage__pagehead-title">{{ 'galleryupload'|trans }}</h1>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {# ── Form card ── #}
+        <div class="p-upload">
+            {{ form_start(form, {'attr': {'class': 'p-upload__form', 'novalidate': 'novalidate'}}) }}
+
+            <div class="p-upload__card">
+                <p class="p-upload__abstract">{{ 'gallery.upload.abstract'|trans({'size': constraints.size}) }}</p>
+
+                <div class="p-upload__field">
+                    {{ form_label(form.albums, null, {'label_attr': {'class': 'p-upload__label'}}) }}
+                    {{ form_widget(form.albums, {'attr': {'class': 'p-upload__select'}}) }}
+                    {{ form_help(form.albums) }}
+                    {{ form_errors(form.albums) }}
+                </div>
+
+                <div id="dropzone" class="p-upload__dropzone" role="button" tabindex="0" aria-label="{{ 'gallery.upload.dropzone.title'|trans }}">
+                    <div class="p-upload__dropzone-icon" aria-hidden="true">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </div>
+                    <div class="p-upload__dropzone-title">{{ 'gallery.upload.dropzone.title'|trans }}</div>
+                    <div class="p-upload__dropzone-subtitle">{{ 'gallery.upload.dropzone.subtitle'|trans }}</div>
+                    <input type="file" class="p-upload__file-input" multiple="multiple" id="form_files"
+                           accept="image/*"
+                           data-browse="{{ 'browsefile'|trans }}">
+                    <div id="dropzone-summary" class="p-upload__dropzone-summary d-none">
+                        <i class="fas fa-images" aria-hidden="true"></i>
+                        <span id="dropzone-summary-text"></span>
+                        <button id="dropzone-clear" type="button" class="p-upload__dropzone-clear" aria-label="{{ 'cancel'|trans }}">
+                            <i class="fas fa-times" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="p-upload__actions">
+                    <button id="upload" class="p-upload__btn p-upload__btn--primary" type="button" disabled>
+                        <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
+                        <span>{{ 'upload'|trans }}</span>
+                    </button>
+                    <button id="abort" class="p-upload__btn p-upload__btn--ghost" type="button" disabled="disabled">
+                        <i class="fas fa-times" aria-hidden="true"></i>
+                        <span>{{ 'abort'|trans }}</span>
+                    </button>
+                </div>
+            </div>
+
+            <section id="upload-queue" class="p-upload__queue d-none">
+                <h2 class="p-upload__queue-title">{{ 'gallery.upload.queue.title'|trans }}</h2>
+
+                <div id="image-progress" class="p-upload__item d-none">
+                    <div class="p-upload__item-thumb"><img src="" alt=""></div>
+                    <div class="p-upload__item-body">
+                        <div class="p-upload__item-filename">{filename}</div>
+                        <div class="p-upload__progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+                            <div class="p-upload__progress-bar" style="width: 0;"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="image-size-error" class="p-upload__item p-upload__item--error d-none">
+                    <div class="p-upload__item-thumb"><img src="" alt=""></div>
+                    <div class="p-upload__item-status p-upload__item-status--error"></div>
+                </div>
+
+                <div id="image-type-error" class="p-upload__item p-upload__item--error d-none">
+                    <div class="p-upload__item-thumb p-upload__item-thumb--placeholder" aria-hidden="true">
+                        <i class="fas fa-file"></i>
+                    </div>
+                    <div class="p-upload__item-status p-upload__item-status--error"></div>
+                </div>
+
+                <div id="progressbars" class="p-upload__queue-list"></div>
+            </section>
+
+            {% do form.files.setRendered %}
+            {% do form.upload.setRendered %}
+            {% do form.abort.setRendered %}
+            {{ form_end(form) }}
+        </div>
+
     </div>
 {% endblock content %}
diff --git a/templates/loginbar.html.twig b/templates/loginbar.html.twig
index 8ae63619d8..688820fe36 100644
--- a/templates/loginbar.html.twig
+++ b/templates/loginbar.html.twig
@@ -1,5 +1,6 @@
 {% import 'macros.twig' as macros %}
 {% set slim_nav = slim_nav|default(false) %}
+{% set slim_cta = slim_cta|default('login') %}
 <nav id="main_menu" class="navbar sticky-top navbar-dark navbar-expand bg-primary justify-content-between{% if slim_nav %} loginbar--slim{% endif %}">
     <div class="container-lg bw-topbar__container">
         <ul id="collapsing_menu" class="navbar navbar-nav">
@@ -18,8 +19,13 @@
             {% endif %}
             {% if slim_nav %}
                 <li class="nav-item d-flex align-items-center flex-wrap justify-content-end loginbar-slim__cta text-right px-1 px-sm-2">
-                    <span class="small text-white-50 mr-1 d-none d-sm-inline">{{ 'menu.already.a.member' | trans }}</span>
-                    <a class="small font-weight-bold text-white text-nowrap" href="{{ url('security_login') }}">{{ 'login' | trans }}</a>
+                    {% if slim_cta == 'signup' %}
+                        <span class="small text-white-50 mr-1 d-none d-sm-inline">{{ 'menu.not.a.member.yet' | trans }}</span>
+                        <a class="small font-weight-bold text-white text-nowrap" href="{{ url('signup') }}">{{ 'navbar.button.signup' | trans }}</a>
+                    {% else %}
+                        <span class="small text-white-50 mr-1 d-none d-sm-inline">{{ 'menu.already.a.member' | trans }}</span>
+                        <a class="small font-weight-bold text-white text-nowrap" href="{{ url('security_login') }}">{{ 'login' | trans }}</a>
+                    {% endif %}
                 </li>
             {% endif %}
             {% if slim_nav %}
diff --git a/templates/macros.twig b/templates/macros.twig
index 131b4ec47f..53896fa99f 100644
--- a/templates/macros.twig
+++ b/templates/macros.twig
@@ -212,8 +212,8 @@
 
 {% macro field_translation(form, uiLanguage, language, field, username, translations) %}
   {% import _self as macros %}
-  <div class="u:mb-16">
-    <div class="u:inline-block u:mb-8">{{ form.vars.label|trans({}, 'messages', language) }}</div>
+  <div class="u:mb-16 o-field-translation">
+    <label class="o-field-translation__label" for="{{ form.vars.id }}">{{ form.vars.label|trans({}, 'messages', language) }}</label>
     <div class="u:flex u:flex-col u:md:flex-row u:gap-16 u:items-stretch">
       {% set attr = form.vars.attr|merge({'data-language': language}) %}
       {% set attr = attr|merge({'data-field': field}) %}
diff --git a/templates/member/request.password.reset.html.twig b/templates/member/request.password.reset.html.twig
index 2896ffcea1..3c44e792e7 100644
--- a/templates/member/request.password.reset.html.twig
+++ b/templates/member/request.password.reset.html.twig
@@ -1,14 +1,94 @@
-{% extends 'base-lite.html.twig' %}
+{% import 'macros.twig' as macros %}
+<!doctype html>
+<html lang="{{ app.request.locale }}">
+<head>
+    <base href="/">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="{{ asset('/images/favicon-96x96.png') }}" sizes="96x96"/>
+    <link rel="icon" type="image/svg+xml" href="{{ asset('/images/favicon.svg') }}"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('/images/apple-touch-icon.png') }}"/>
+    <meta name="apple-mobile-web-app-title" content="beWelcome"/>
 
-{% block stylesheets %}
-    {{ encore_entry_link_tags('tailwind')  }}
-{% endblock stylesheets %}
+    <title>{{ 'reset.password' | trans }} | BeWelcome</title>
 
-{% block content %}
-    <h1>{{ 'reset.password' | trans }}</h1>
-    <div class="row">
-        <div class="col-12">
-            {{ form(form, {'attr': {'novalidate': 'novalidate'}}) }}
+    <meta name="description" content="{{ 'default_meta_description' | trans }}">
+    <meta name="keywords" content="{{ 'default_meta_keyword' | trans }}">
+    <meta name="robots" content="{{ 'robots' | trans }}">
+
+    {% include 'webpreview.html.twig' %}
+
+    {{ encore_entry_link_tags('bewelcome') }}
+    {{ encore_entry_link_tags('tailwind') }}
+
+    <base id="baseuri" href="{{ app.request.schemeAndHttpHost ~ app.request.baseUrl }}">
+
+    <link rel="manifest" href="{{ asset('manifest.webmanifest') }}">
+</head>
+<body class="p-login__body" style="background-image:url('{{ asset('images/homepicture-big-1.jpg') }}')">
+<div class="p-login__overlay" aria-hidden="true"></div>
+
+{% include 'loginbar.html.twig' with { slim_nav: true, slim_cta: 'signup' } %}
+
+<main role="main" class="p-login">
+    <noscript>
+        <div class="container-lg">
+            <div class="alert alert-danger u:mt-16">
+                <p class="h5">You need to activate Javascript for bewelcome.org</p>
+                <small>Without it some functions won't work.</small>
+            </div>
         </div>
+    </noscript>
+
+    <div class="container-lg">
+        {% for label, messages in app.flashes %}
+            {% for message in messages %}
+                <div class="alert alert-{{ label }} p-login__flash">{{ message }}</div>
+            {% endfor %}
+        {% endfor %}
+    </div>
+
+    <div class="p-login__shell">
+        <header class="p-login__intro">
+            <h1 class="p-login__title">{{ 'password.request.headline' | trans }}</h1>
+            <p class="p-login__subtitle">{{ 'password.request.subtitle' | trans }}</p>
+        </header>
+
+        <section class="p-login__card" aria-labelledby="reset-card-title">
+            <h2 id="reset-card-title" class="p-login__card-title">{{ 'reset.password' | trans }}</h2>
+
+            {% if not form.vars.valid %}
+                {% for error in form.vars.errors %}
+                    <div class="p-login__error alert alert-danger u:mb-16" role="alert">{{ error.message }}</div>
+                {% endfor %}
+            {% endif %}
+
+            {{ form_start(form, {'attr': {'novalidate': 'novalidate', 'class': 'p-login__form', 'id': 'reset-password-form'}}) }}
+                <div class="o-form-group">
+                    <label for="{{ form.username.vars.id }}">{{ 'login.username.or.email' | trans }}</label>
+                    {{ form_widget(form.username, {'attr': {'class': 'o-input', 'autofocus': 'autofocus', 'autocomplete': 'username', 'required': 'required'}}) }}
+                    {% if not form.username.vars.valid %}
+                        {% for error in form.username.vars.errors %}
+                            <small class="text-danger d-block u:mt-4">{{ error.message }}</small>
+                        {% endfor %}
+                    {% endif %}
+                </div>
+
+                <button type="submit" name="{{ form.reset_password.vars.full_name }}" class="o-button o-button--l o-button--full p-login__submit">
+                    {{ 'password.request.submit' | trans }}
+                </button>
+            {{ form_end(form, {'render_rest': false}) }}
+
+            <div class="p-login__separator" aria-hidden="true"><span>{{ 'menu.already.a.member' | trans }}</span></div>
+
+            <a href="{{ url('security_login') }}" class="o-button o-button--outline o-button--full p-login__signup">
+                {{ 'password.request.back.login' | trans }}
+            </a>
+        </section>
     </div>
-{% endblock %}
+</main>
+
+{{ encore_entry_script_tags('bewelcome') }}
+</body>
+</html>
diff --git a/templates/member/reset.password.html.twig b/templates/member/reset.password.html.twig
index bf1d2aea3b..3e12d3cec0 100644
--- a/templates/member/reset.password.html.twig
+++ b/templates/member/reset.password.html.twig
@@ -1,17 +1,108 @@
-{% extends 'base-lite.html.twig' %}
-
-{% block stylesheets %}
-    {{ encore_entry_link_tags('tailwind')  }}
-{% endblock stylesheets %}
-
-{% block content %}
-    <h1>{{ 'reset.password' | trans }}</h1>
-    <div class="row">
-        <div class="col-12">
-            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
-            {{ form_widget(form) }}
-            <button type="submit" class="o-button u:float-right">{{ 'reset.password' | trans }}</button>
-            {{ form_end(form) }}
+{% import 'macros.twig' as macros %}
+<!doctype html>
+<html lang="{{ app.request.locale }}">
+<head>
+    <base href="/">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="{{ asset('/images/favicon-96x96.png') }}" sizes="96x96"/>
+    <link rel="icon" type="image/svg+xml" href="{{ asset('/images/favicon.svg') }}"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('/images/apple-touch-icon.png') }}"/>
+    <meta name="apple-mobile-web-app-title" content="beWelcome"/>
+
+    <title>{{ 'reset.password' | trans }} | BeWelcome</title>
+
+    <meta name="description" content="{{ 'default_meta_description' | trans }}">
+    <meta name="keywords" content="{{ 'default_meta_keyword' | trans }}">
+    <meta name="robots" content="{{ 'robots' | trans }}">
+
+    {% include 'webpreview.html.twig' %}
+
+    {{ encore_entry_link_tags('bewelcome') }}
+    {{ encore_entry_link_tags('tailwind') }}
+
+    <base id="baseuri" href="{{ app.request.schemeAndHttpHost ~ app.request.baseUrl }}">
+
+    <link rel="manifest" href="{{ asset('manifest.webmanifest') }}">
+</head>
+<body class="p-login__body" style="background-image:url('{{ asset('images/homepicture-big-1.jpg') }}')">
+<div class="p-login__overlay" aria-hidden="true"></div>
+
+{% include 'loginbar.html.twig' with { slim_nav: true, slim_cta: 'signup' } %}
+
+<main role="main" class="p-login">
+    <noscript>
+        <div class="container-lg">
+            <div class="alert alert-danger u:mt-16">
+                <p class="h5">You need to activate Javascript for bewelcome.org</p>
+                <small>Without it some functions won't work.</small>
+            </div>
         </div>
+    </noscript>
+
+    <div class="container-lg">
+        {% for label, messages in app.flashes %}
+            {% for message in messages %}
+                <div class="alert alert-{{ label }} p-login__flash">{{ message }}</div>
+            {% endfor %}
+        {% endfor %}
     </div>
-{% endblock %}
+
+    <div class="p-login__shell">
+        <header class="p-login__intro">
+            <h1 class="p-login__title">{{ 'password.reset.headline' | trans }}</h1>
+            <p class="p-login__subtitle">{{ 'password.reset.subtitle' | trans }}</p>
+        </header>
+
+        <section class="p-login__card" aria-labelledby="reset-card-title">
+            <h2 id="reset-card-title" class="p-login__card-title">{{ 'reset.password' | trans }}</h2>
+
+            {% if not form.vars.valid %}
+                {% for error in form.vars.errors %}
+                    <div class="p-login__error alert alert-danger u:mb-16" role="alert">{{ error.message }}</div>
+                {% endfor %}
+            {% endif %}
+
+            {{ form_start(form, {'attr': {'novalidate': 'novalidate', 'class': 'p-login__form', 'id': 'reset-password-form'}}) }}
+                <div class="o-form-group">
+                    <label for="{{ form.password.first.vars.id }}">{{ 'password' | trans }}</label>
+                    <div class="p-login__password">
+                        {{ form_widget(form.password.first, {'attr': {'class': 'o-input js-password-input', 'autofocus': 'autofocus', 'autocomplete': 'new-password', 'required': 'required'}}) }}
+                    </div>
+                    {% if not form.password.first.vars.valid %}
+                        {% for error in form.password.first.vars.errors %}
+                            <small class="text-danger d-block u:mt-4">{{ error.message }}</small>
+                        {% endfor %}
+                    {% endif %}
+                </div>
+
+                <div class="o-form-group">
+                    <label for="{{ form.password.second.vars.id }}">{{ 'password.repeat' | trans }}</label>
+                    <div class="p-login__password">
+                        {{ form_widget(form.password.second, {'attr': {'class': 'o-input js-password-input', 'autocomplete': 'new-password', 'required': 'required'}}) }}
+                    </div>
+                    {% if not form.password.second.vars.valid %}
+                        {% for error in form.password.second.vars.errors %}
+                            <small class="text-danger d-block u:mt-4">{{ error.message }}</small>
+                        {% endfor %}
+                    {% endif %}
+                </div>
+
+                <button type="submit" class="o-button o-button--l o-button--full p-login__submit">
+                    {{ 'password.reset.submit' | trans }}
+                </button>
+            {{ form_end(form, {'render_rest': false}) }}
+
+            <div class="p-login__separator" aria-hidden="true"><span>{{ 'menu.already.a.member' | trans }}</span></div>
+
+            <a href="{{ url('security_login') }}" class="o-button o-button--outline o-button--full p-login__signup">
+                {{ 'password.request.back.login' | trans }}
+            </a>
+        </section>
+    </div>
+</main>
+
+{{ encore_entry_script_tags('bewelcome') }}
+</body>
+</html>
diff --git a/templates/preference/preference.html.twig b/templates/preference/preference.html.twig
index 3df7674b04..09153fab8e 100644
--- a/templates/preference/preference.html.twig
+++ b/templates/preference/preference.html.twig
@@ -1,39 +1,54 @@
-{% extends 'profile/profile.html.twig' %}
+{% extends 'profile/edit_subpage.html.twig' %}
 
 {% block javascripts %}
   {{ parent() }}
   {{ encore_entry_script_tags('profile/preference') }}
 {% endblock javascripts %}
 
-{% block page_content %}
-    <h1>{{ 'profile.preferences'|trans }}</h1>
-    {{ form_start(form) }}
-    <input type="hidden" id="member" value="{{ member.username }}">
+{% block subpage_title -%}
+  {{ 'profile.preferences'|trans }}
+{%- endblock %}
+
+{% block subpage_body %}
+  {{ form_start(form, {attr: {class: 'p-preferences-form'}}) }}
+  <input type="hidden" id="member" value="{{ member.username }}">
+
+  <div class="p-preferences-list">
     {% for name, child in form.children %}
-        {% if not (name starts with '_') %}
-            <div class="u:mb-16">
-                <legend class="o-label" aria-label="{{ child.vars.label|trans }}">{{ child.vars.label|trans }}</legend>
-              {% if child.vars.choices|length == 2 %}
-                <label class="u:inline-flex u:items-center u:cursor-pointer" style="display: inline-flex;">
-                  <span class="u:select-none u:font-medium u:text-heading switch">{{ child.vars.choices|keys|first|trans }}</span>
-                  <input id="{{ child.vars.id }}" name="{{ child.vars.full_name }}" type="checkbox" class="u:sr-only u:peer preference" value="{{ child.vars.choices|last }}" {% if child.vars.data == child.vars.choices|last %}checked="checked"{% endif %}>
-                  <div class="u:relative u:mx-9 u:w-24 u:h-12 u:bg-bewelcome u:peer-focus:outline-none u:peer-focus:ring-1 u:peer-focus:ring-bewelcome-light
-                              u:rounded-6 u:peer u:peer-checked:after:translate-x-12 u:rtl:peer-checked:after:-translate-x-full u:peer-checked:after:border-buffer
-                              u:after:content-[''] u:after:absolute after:top-[2px] u:after:bg-white u:after:rounded-6 u:after:h-12
-                              u:after:w-12 u:after:transition-all u:peer-checked:bg-bewelcome"></div>
-                  <span class="u:select-none u:text-sm u:font-medium u:text-heading">{{ child.vars.choices|keys|last|trans }}</span>
-                </label>
-                {% do child.setRendered %}
-              {% else %}
-                <div class="u:grid u:grid-cols-1">{{ form_widget(child) }}</div>
-                  {% endif %}
-                {{ form_help(child) }}
-            </div>
-        {% endif %}
+      {% if not (name starts with '_') %}
+        <section class="p-preference-card">
+          <div class="p-preference-card__copy">
+            <h2 class="p-preference-card__title">{{ child.vars.label|trans }}</h2>
+            {{ form_help(child, {help_attr: {class: 'p-preference-card__help'}}) }}
+          </div>
+
+          <div class="p-preference-card__control">
+            {% if child.vars.choices|length == 2 %}
+              <label class="p-preference-toggle" for="{{ child.vars.id }}">
+                <span class="p-preference-toggle__label">{{ child.vars.choices|keys|first|trans }}</span>
+                <input id="{{ child.vars.id }}"
+                       name="{{ child.vars.full_name }}"
+                       type="checkbox"
+                       class="p-preference-toggle__input preference"
+                       value="{{ child.vars.choices|last }}"
+                       {% if child.vars.data == child.vars.choices|last %}checked="checked"{% endif %}>
+                <span class="p-preference-toggle__track" aria-hidden="true">
+                  <span class="p-preference-toggle__thumb"></span>
+                </span>
+                <span class="p-preference-toggle__label p-preference-toggle__label--active">{{ child.vars.choices|keys|last|trans }}</span>
+              </label>
+              {% do child.setRendered %}
+            {% else %}
+              {% set control_class = (child.vars.attr.class|default('') ~ ' p-preference-select')|trim %}
+              {{ form_widget(child, {attr: child.vars.attr|merge({class: control_class})}) }}
+            {% endif %}
+            {{ form_errors(child) }}
+          </div>
+        </section>
+      {% endif %}
     {% endfor %}
-    {{ form_rest(form) }}
-    <div class="u:flex u:justify-end">
-        <a href="{{ url('members_profile', {username: member.username}) }}" class="o-button">{{ 'profile.back'|trans }}</a>
-    </div>
-    {{ form_end(form) }}
-{% endblock %}
+  </div>
+
+  {{ form_rest(form) }}
+  {{ form_end(form) }}
+{% endblock subpage_body %}
diff --git a/templates/private/download.html.twig b/templates/private/download.html.twig
index 20dc8790ac..fc0dec19e2 100644
--- a/templates/private/download.html.twig
+++ b/templates/private/download.html.twig
@@ -1,14 +1,11 @@
-{% extends 'profile/profile.html.twig' %}
+{% extends 'profile/edit_subpage.html.twig' %}
 
-{% block redirect %}<meta
-    http-equiv="refresh"
-    content="1; URL='{{url}}'">{% endblock %}
+{% block redirect %}<meta http-equiv="refresh" content="1; URL='{{ url }}'">{% endblock %}
 
-{% block page_content %}
-    <h1>{{ 'mydata.headline.download'|trans }}</h1>
-    <p>{{ 'mydata.download.start'|trans }}
-        <br>
-        <br>
-        <a class="btn btn-primary" href="{{ url('members_profile', {username: username}) }}">{{ 'profile.back'|trans }}</a>
-    </p>
-{% endblock page_content %}
+{% block subpage_title -%}
+  {{ 'mydata.headline.download'|trans }}
+{%- endblock %}
+
+{% block subpage_body %}
+  <p>{{ 'mydata.download.start'|trans }}</p>
+{% endblock subpage_body %}
diff --git a/templates/private/gallery.html.twig b/templates/private/gallery.html.twig
index 357a3dcb7b..48e548baed 100644
--- a/templates/private/gallery.html.twig
+++ b/templates/private/gallery.html.twig
@@ -12,7 +12,7 @@
     {% if hrefs|length == 0 %}
         <p>{{ 'mydata.gallery.no.images'|trans }}</p>
     {% else %}
-        <div id="masonry-grid" class="row mb-2" data-masonry='{"percentPosition": true }'>
+        <div id="masonry-grid" class="row mb-2">
         {% for href in hrefs %}
             <div class="col-12 col-md-4">
                 <a href="{{ href }}"><img class="img-thumbnail" src="{{ href }}"></a>
diff --git a/templates/private/password.html.twig b/templates/private/password.html.twig
index 2d1858fb4f..5f41a32c3a 100644
--- a/templates/private/password.html.twig
+++ b/templates/private/password.html.twig
@@ -1,8 +1,26 @@
-{% import 'macros.twig' as macros %}
-{% extends 'profile/profile.html.twig' %}
-
-{% block page_content %}
-    <h1>{{ 'mydata.headline.download'|trans }}</h1>
-    <p>{{ 'mydata.abstract.download'|trans }}</p>
-    {{ form(form) }}
-{% endblock page_content %}
+{% extends 'profile/edit_subpage.html.twig' %}
+
+{% block subpage_title -%}
+  {{ 'mydata.headline.download'|trans }}
+{%- endblock %}
+
+{% block subpage_body %}
+  <p class="p-account-section__help u:mb-16">{{ 'mydata.abstract.download'|trans }}</p>
+
+  {{ form_start(form, {attr: {class: 'p-account-form'}}) }}
+  {{ form_errors(form) }}
+
+  <section class="p-account-section">
+    <label class="p-account-section__label" for="{{ form.password.vars.id }}">{{ form.password.vars.label|trans }}</label>
+    {{ form_widget(form.password, {attr: {class: 'o-input'}}) }}
+    {{ form_errors(form.password) }}
+    {{ form_help(form.password, {help_attr: {class: 'p-account-section__help'}}) }}
+  </section>
+
+  <div class="p-edit-subpage__actions">
+    <input type="submit" class="o-button" value="{{ form.submit.vars.label|trans }}">
+  </div>
+  {% do form.submit.setRendered %}
+
+  {{ form_end(form) }}
+{% endblock subpage_body %}
diff --git a/templates/private/pictures.html.twig b/templates/private/pictures.html.twig
index 11da00be89..b6b8daa2a7 100644
--- a/templates/private/pictures.html.twig
+++ b/templates/private/pictures.html.twig
@@ -12,7 +12,7 @@
     {% if pictures|length == 0 %}
         <p>{{ 'mydata.pictures.no.images'|trans }}</p>
     {% else %}
-        <div id="masonry-grid" class="row mb-2" data-masonry='{"percentPosition": true }'>
+        <div id="masonry-grid" class="row mb-2">
         {% for picture in pictures %}
             <div class="col-12 col-md-4">
                 <a href="pictures/{{ picture }}"><img class="img-thumbnail" src="pictures/{{ picture }}"></a>
diff --git a/templates/profile/account.edit.html.twig b/templates/profile/account.edit.html.twig
index 8c6e46793c..5a94e7f96f 100644
--- a/templates/profile/account.edit.html.twig
+++ b/templates/profile/account.edit.html.twig
@@ -1,4 +1,4 @@
-{% extends 'profile/profile.html.twig' %}
+{% extends 'profile/edit_subpage.html.twig' %}
 
 {% block javascripts %}
   {{ parent() }}
@@ -10,59 +10,101 @@
   {{ encore_entry_link_tags('profile/account') }}
 {% endblock %}
 
-{% block page_content %}
-  <div class="u:w-full">
-    <div class="card">
-      <div class="card-header">
-        {{ 'account.edit'|trans }}
-      </div>
-      <div class="card-block p-2">
-        <div class="card-text">
-
-          {{ form_start(form) }}
-          {{ form_errors(form) }}
+{% block subpage_title -%}
+  {{ 'account.edit'|trans }}
+{%- endblock %}
 
-          {{ form_label(form.name) }}
-          {{ form_widget(form.name) }}
-          {{ form_errors(form.name) }}
-          {{ form_help(form.name) }}
+{% block subpage_body %}
+  {{ form_start(form, {attr: {class: 'p-account-form'}}) }}
+  {{ form_errors(form) }}
 
-          {{ form_row(form.show_name) }}
-          {{ form_row(form.short_name) }}
-
-          <label class="form-label">{{ form.gender.vars.label|trans }}</label>
-          <div class="u:flex u:flex-row u:justify-between">
-            {% for child in form.gender %}
-              <div class="o-radio">
-                <input type="radio" class="o-radio__input"
-                       id="{{ child.vars.id }}" name="{{ child.vars.full_name }}"
-                       value="{{ child.vars.value }}"
-                       {% if child.vars.checked %}checked="checked"{% endif %}
-                >
-                <label class="o-radio__label">{{ child.vars.label|trans }}</label></div>
-              {% do child.setRendered %}
-            {% endfor %}
-          </div>
-          {{ form_row(form.show_gender) }}
+  {# Display name #}
+  <section class="p-account-section">
+    <label class="p-account-section__label" for="{{ form.name.vars.id }}">{{ form.name.vars.label|trans }}</label>
+    {{ form_widget(form.name) }}
+    {{ form_errors(form.name) }}
+    {{ form_help(form.name, {help_attr: {class: 'p-account-section__help'}}) }}
+    <label class="p-account-toggle" for="{{ form.show_name.vars.id }}">
+      <input type="checkbox" id="{{ form.show_name.vars.id }}" name="{{ form.show_name.vars.full_name }}"
+             class="p-preference-toggle__input"
+             {% if form.show_name.vars.checked %}checked{% endif %}>
+      <span class="p-preference-toggle__track" aria-hidden="true">
+        <span class="p-preference-toggle__thumb"></span>
+      </span>
+      <span class="p-account-toggle__label">{{ form.show_name.vars.label|trans }}</span>
+    </label>
+    {% do form.show_name.setRendered %}
+  </section>
 
-          {{ form_label(form.birthdate) }}
-          {{ form_widget(form.birthdate) }}
-          {{ form_errors(form.birthdate) }}
-          {{ form_help(form.birthdate) }}
+  {# Short name (username) #}
+  <section class="p-account-section">
+    <label class="p-account-section__label" for="{{ form.short_name.vars.id }}">{{ form.short_name.vars.label|trans }}</label>
+    {{ form_widget(form.short_name) }}
+    {{ form_errors(form.short_name) }}
+    {{ form_help(form.short_name, {help_attr: {class: 'p-account-section__help'}}) }}
+  </section>
 
-          {{ form_row(form.show_age) }}
+  {# Birthdate #}
+  <section class="p-account-section">
+    <label class="p-account-section__label" for="{{ form.birthdate.vars.id }}">{{ form.birthdate.vars.label|trans }}</label>
+    {{ form_widget(form.birthdate) }}
+    {{ form_errors(form.birthdate) }}
+    {{ form_help(form.birthdate, {help_attr: {class: 'p-account-section__help'}}) }}
+    <label class="p-account-toggle" for="{{ form.show_age.vars.id }}">
+      <input type="checkbox" id="{{ form.show_age.vars.id }}" name="{{ form.show_age.vars.full_name }}"
+             class="p-preference-toggle__input"
+             {% if form.show_age.vars.checked %}checked{% endif %}>
+      <span class="p-preference-toggle__track" aria-hidden="true">
+        <span class="p-preference-toggle__thumb"></span>
+      </span>
+      <span class="p-account-toggle__label">{{ form.show_age.vars.label|trans }}</span>
+    </label>
+    {% do form.show_age.setRendered %}
+  </section>
 
-          {{ form_label(form.email) }}
-          {{ form_widget(form.email) }}
-          {{ form_errors(form.email) }}
-          {{ form_help(form.email) }}
-
-          <div class="u:flex u:justify-end u:my-8">
-            <input type="submit" class="o-button" value="{{ 'account.update'|trans }}">
+  {# Gender #}
+  <section class="p-account-section">
+    <div class="p-pill-group">
+      <span class="p-pill-group__label">{{ form.gender.vars.label|trans }}</span>
+      <div class="p-pill-group__options">
+        {% for child in form.gender %}
+          <div class="p-pill-option">
+            <input type="radio" class="p-pill-option__input"
+                   id="{{ child.vars.id }}" name="{{ child.vars.full_name }}"
+                   value="{{ child.vars.value }}"
+                   {% if child.vars.checked %}checked="checked"{% endif %}>
+            <label class="p-pill-option__label" for="{{ child.vars.id }}">{{ child.vars.label|trans }}</label>
           </div>
-          {{ form_end(form) }}
-        </div>
+          {% do child.setRendered %}
+        {% endfor %}
       </div>
     </div>
+    {{ form_errors(form.gender) }}
+    {% if form.gender.vars.help %}
+      <small class="p-account-section__help">{{ form.gender.vars.help|trans }}</small>
+    {% endif %}
+    <label class="p-account-toggle" for="{{ form.show_gender.vars.id }}">
+      <input type="checkbox" id="{{ form.show_gender.vars.id }}" name="{{ form.show_gender.vars.full_name }}"
+             class="p-preference-toggle__input"
+             {% if form.show_gender.vars.checked %}checked{% endif %}>
+      <span class="p-preference-toggle__track" aria-hidden="true">
+        <span class="p-preference-toggle__thumb"></span>
+      </span>
+      <span class="p-account-toggle__label">{{ form.show_gender.vars.label|trans }}</span>
+    </label>
+    {% do form.show_gender.setRendered %}
+  </section>
+
+  {# Email #}
+  <section class="p-account-section">
+    <label class="p-account-section__label" for="{{ form.email.vars.id }}">{{ form.email.vars.label|trans }}</label>
+    {{ form_widget(form.email) }}
+    {{ form_errors(form.email) }}
+    {{ form_help(form.email, {help_attr: {class: 'p-account-section__help'}}) }}
+  </section>
+
+  <div class="p-edit-subpage__actions">
+    <input type="submit" class="o-button" value="{{ 'account.update'|trans }}">
   </div>
-{% endblock page_content %}
+  {{ form_end(form) }}
+{% endblock subpage_body %}
diff --git a/templates/profile/add.language.html.twig b/templates/profile/add.language.html.twig
index cb5408a1c8..f0791f81a9 100644
--- a/templates/profile/add.language.html.twig
+++ b/templates/profile/add.language.html.twig
@@ -1,24 +1,29 @@
-{% extends 'profile/profile.html.twig' %}
-{% import 'macros.twig' as macros %}
+{% extends 'profile/edit_subpage.html.twig' %}
 
-{% block page_content %}
-  <div class="u:w-full">
-    <div class="card">
-      <div class="card-header u:flex u:flex-row u:justify-between">
-        {{ 'profile.languages'|trans|raw }}
-      </div>
-      <div class="card-block p-2">
-        <div class="card-text m-0">
-          {{ form_start(form) }}
-          {{ form_errors(form) }}
-          {{ form_row(form.language) }}
-          <div class="u:flex u:justify-between u:my-8">
-            <input type="submit" class="o-button" value="{{ 'profile.update'|trans }}">
-          </div>
-          {{ form_rest(form) }}
-          {{ form_end(form) }}
-        </div>
-      </div>
+{% block subpage_title -%}
+  Add language
+{%- endblock %}
+
+{% block subpage_body %}
+  {{ form_start(form, {attr: {class: 'p-language-form'}}) }}
+  {{ form_errors(form) }}
+
+  <div class="p-language-panel">
+    <div class="p-language-panel__icon" aria-hidden="true">
+      <i class="fas fa-language"></i>
+    </div>
+    <div class="p-language-panel__content">
+      {{ form_label(form.language, null, {label_attr: {class: 'p-language-form__label'}}) }}
+      {{ form_widget(form.language) }}
+      {{ form_help(form.language) }}
+      {{ form_errors(form.language) }}
     </div>
   </div>
-{% endblock page_content %}
+
+  <div class="p-edit-subpage__actions">
+    <input type="submit" class="o-button" value="{{ 'save'|trans }}">
+  </div>
+
+  {{ form_rest(form) }}
+  {{ form_end(form) }}
+{% endblock subpage_body %}
diff --git a/templates/profile/content.html.twig b/templates/profile/content.html.twig
index 93988dd8ab..855cabeb38 100644
--- a/templates/profile/content.html.twig
+++ b/templates/profile/content.html.twig
@@ -26,7 +26,7 @@
 
 <div id="profile-language-{{ profile_language }}"
      class="{% if profile_language != active_locale %}u:hidden! {% endif %}">
-  <div class="p-profile-layout">
+  <div class="p-profile-layout{% if edit %} p-profile-layout--edit{% endif %}">
 
     {# ═══════════════════════════════════════════
        MAIN — About Me · Accommodation · Comments
@@ -41,7 +41,7 @@
           {%- if edit -%}
             {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'aboutme'}) %}
             {% set edit_text = 'profile.edit.about.me'|trans({}, 'messages', profile_language) %}
-            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
+            <div><a href="{{ edit_link }}"><i class="fas fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
         <div class="card-body">
@@ -71,22 +71,28 @@
           {%- if edit -%}
             {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'accommodation'}) %}
             {% set edit_text = 'profile.edit.accommodation'|trans({}, 'messages', profile_language) %}
-            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
+            <div><a href="{{ edit_link }}"><i class="fas fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
         <div class="card-body">
           <div class="card-text m-0">
             {% if not member.accommodation is null or edit %}
               {% if edit and not address is same as(false) %}
-                <div class="u:flex u:flex-row u:justify-between align-items-center u:mb-8 u:gap-8">
-                  <div>
-                    <p class="h5">{{ 'profile.location'|trans({}, 'messages', profile_language) }}</p>
-                    <p class="u:font-700">{{ address.location.name }}</p>
-                    <p>{{ address.location.admin1.name }} - {{ address.location.country.name }}</p>
-                    <a href="{{ url('profile_set_location', {username: member.username}) }}" class="o-button o-button--outline">{{ 'profile.change.location'|trans({}, 'messages', profile_language) }}</a>
+                <section class="p-accom-summary">
+                  <div class="p-accom-summary__info">
+                    <span class="p-accom-summary__eyebrow">
+                      <i class="fas fa-map-marker-alt" aria-hidden="true"></i>
+                      {{ 'profile.location'|trans({}, 'messages', profile_language) }}
+                    </span>
+                    <h3 class="p-accom-summary__city">{{ address.location.name }}</h3>
+                    <p class="p-accom-summary__region">{{ address.location.admin1.name }} · {{ address.location.country.name }}</p>
+                    <a href="{{ url('profile_set_location', {username: member.username}) }}" class="p-accom-summary__change">
+                      <i class="fas fa-location-arrow" aria-hidden="true"></i>
+                      {{ 'profile.change.location'|trans({}, 'messages', profile_language) }}
+                    </a>
                   </div>
-                  <div id="location-map-{{ profile_language }}" class="u:w-[40%] u:aspect-3/2 u:border-1 u:border-bewelcome"></div>
-                </div>
+                  <div id="location-map-{{ profile_language }}" class="p-accom-summary__map" aria-label="{{ 'profile.location'|trans({}, 'messages', profile_language) }}"></div>
+                </section>
               {% endif %}
               <div class="p-accom-stats u:mb-8">
                 {% if edit or (member.maxGuests != 0 and member.accommodation == constant('App\\Doctrine\\AccommodationType::YES')) %}
@@ -170,15 +176,11 @@
         </div>
       </div>
 
-      {# ── Comments ────────────────────────────── #}
+      {# ── Comments (hidden in edit mode: not editable content) ── #}
+      {% if not edit %}
       <div class="card">
         <div class="card-header u:flex u:flex-row u:justify-between">
           {{ 'profile.comments'|trans({}, "messages", profile_language) }}
-          {%- if edit and comments|slice(0,10)|length > 0 -%}
-            {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'comments'}) %}
-            {% set edit_text = 'profile.edit.comments'|trans({}, 'messages', profile_language) %}
-            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
-          {%- endif -%}
         </div>
         <div class="card-body">
           {% if comments|length > 0 %}
@@ -222,6 +224,7 @@
           {% endif %}
         </div>
       </div>
+      {% endif %}
 
     </div>{# /.p-profile-main #}
 
@@ -237,7 +240,7 @@
           {%- if edit -%}
             {% set edit_link = url('profile_edit_languages', {username: member.username, language: profile_language}) %}
             {% set edit_text = 'profile.edit.languages'|trans({}, 'messages', profile_language) %}
-            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
+            <div><a href="{{ edit_link }}"><i class="fas fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
         <div class="card-body">
@@ -262,9 +265,10 @@
           {%- if edit -%}
             {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'interests'}) %}
             {% set edit_text = 'profile.edit.interests'|trans({}, 'messages', profile_language) %}
-            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
+            <div><a href="{{ edit_link }}"><i class="fas fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {% endif %}
         </div>
+        {% if interests %}
         <div class="card-body">
           <div class="card-text m-0">
             {% if hobbies|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.hobbies'|trans({}, "messages", profile_language) }}</div><div>{{ hobbies|purify }}</div>{% endif %}
@@ -274,6 +278,7 @@
             {% if organizations|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.organizations'|trans({}, "messages", profile_language) }}</div><div>{{ organizations|purify }}</div>{% endif %}
           </div>
         </div>
+        {% endif %}
       </div>
       {% endif %}
 
@@ -285,15 +290,17 @@
           {%- if edit -%}
             {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'travels'}) %}
             {% set edit_text = 'profile.edit.travel.experience'|trans({}, 'messages', profile_language) %}
-            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
+            <div><a href="{{ edit_link }}"><i class="fas fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
+        {% if pastTrips|length > 0 or plannedTrips|length > 0 %}
         <div class="card-body">
           <div class="card-text m-0">
             {% if pastTrips|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.past.trips'|trans({}, "messages", profile_language)|raw }}</div><div>{{ pastTrips|purify }}</div>{% endif %}
             {% if plannedTrips|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.planned.trips'|trans({}, "messages", profile_language)|raw }}</div><div>{{ plannedTrips|purify }}</div>{% endif %}
           </div>
         </div>
+        {% endif %}
       </div>
       {% endif %}
 
@@ -305,9 +312,10 @@
           {%- if edit -%}
             {% set edit_link = url('groups_mygroups') %}
             {% set edit_text = 'profile.edit.groups'|trans({}, 'messages', profile_language) %}
-            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
+            <div><a href="{{ edit_link }}"><i class="fas fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
+        {% if member.groups|length > 0 %}
         <div class="card-body">
           {% for group in member.groups|slice(0, 5) %}
             <div class="p-sidebar-card__group-item">
@@ -324,17 +332,28 @@
             </a>
           {% endif %}
         </div>
+        {% endif %}
       </div>
       {% endif %}
 
       {# ── Gallery ─────────────────────────────── #}
       {% if pictures|length > 0 or edit %}
       <div class="card p-gallery-card">
-        {%- if edit -%}
-          <div class="card-header u:flex u:flex-row u:justify-end">
-            <a href="{{ url('gallery_manage') }}"><i class="fa fa-edit" title="{{ 'profile.edit.images'|trans({}, 'messages', profile_language) }}" aria-hidden="true"></i></a>
+        <div class="card-header u:flex u:flex-row u:justify-between">
+          {{ 'profile.menu.images'|trans({}, "messages", profile_language)|raw }}
+          {%- if edit -%}
+            {% set edit_text = 'profile.edit.images'|trans({}, 'messages', profile_language) %}
+            <div><a href="{{ url('gallery_manage') }}"><i class="fas fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
+          {%- endif -%}
+        </div>
+        {% if pictures|length == 0 and edit %}
+          <div class="p-gallery-empty">
+            <a href="{{ url('gallery_manage') }}" class="p-gallery-empty__btn">
+              <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
+              <span>{{ 'galleryupload'|trans({}, 'messages', profile_language) }}</span>
+            </a>
           </div>
-        {%- endif -%}
+        {% else %}
         <div class="p-gallery-grid">
           {% for picture in pictures|slice(0, 5) %}
             {% set isLast = loop.last and pictures|length > 5 %}
@@ -342,7 +361,7 @@
               <a href="{{ url('gallery', {username: member.username}) }}"
                  class="p-gallery-cell p-gallery-cell--more"
                  style="background-image: url('{{ url('gallery_thumbnail', {id: picture.id, t: 2}) }}')"
-                 aria-label="{{ picture.title }}">
+                 aria-label="{{ picture.title|e('html_attr') }}">
                 <span class="p-gallery-cell__more-label">+{{ pictures|length - 4 }}</span>
               </a>
             {% else %}
@@ -352,11 +371,12 @@
                  data-toggle="lightbox"
                  data-gallery="profile-gallery"
                  data-type="image"
-                 data-title="{{ picture.title }}"
-                 aria-label="{{ picture.title }}"></a>
+                 data-caption="{{ picture.title|e('html_attr') }}"
+                 aria-label="{{ picture.title|e('html_attr') }}"></a>
             {% endif %}
           {% endfor %}
         </div>
+        {% endif %}
         {% if pictures|length > 5 %}
           <div class="p-gallery-footer">
             <a href="{{ url('gallery', {username: member.username}) }}">
@@ -376,9 +396,10 @@
           {%- if edit -%}
             {% set edit_link = url('profile_edit_section', {username: member.username, language: profile_language, section: 'relations'}) %}
             {% set edit_text = 'profile.edit.family.and.friends'|trans({}, 'messages', profile_language) %}
-            <div><a href="{{ edit_link }}"><i class="fa fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
+            <div><a href="{{ edit_link }}"><i class="fas fa-edit" title="{{ edit_text }}" aria-hidden="true"></i><span class="visually-hidden">{{ edit_text }}</span></a></div>
           {%- endif -%}
         </div>
+        {% if friends|length > 0 %}
         <div class="card-body">
           <div class="u:grid u:grid-cols-3 u:gap-8 u:mb-8">
             {% for friend in friends|slice(0, 9) %}
@@ -395,6 +416,7 @@
             </a>
           {% endif %}
         </div>
+        {% endif %}
       </div>
       {% endif %}
 
diff --git a/templates/profile/edit.header.html.twig b/templates/profile/edit.header.html.twig
index 5d705a4c0f..08a36a69d5 100644
--- a/templates/profile/edit.header.html.twig
+++ b/templates/profile/edit.header.html.twig
@@ -1,11 +1,65 @@
-<div class="u:flex u:flex-col u:md:flex-row u:justify-between u:gap-4">
-    <div class="btn-group u:bg-white">
-    {% for profile_language in profile_languages %}
-        {% set active = profile_language is same as(active_locale) %}
-        <button class="btn {% if active %}btn-primary{% else %}btn-outline-primary{% endif %}" data-edit-language="{{ profile_language }}">{{ ('lang_' ~ profile_language)|lower|trans({}, 'messages', profile_language) }}</button>
-    {% endfor %}
+<header class="p-edit-header">
+    <div class="p-edit-header__top">
+        <a href="{{ url('profile_edit_avatar', {username: member.username}) }}"
+           class="p-edit-header__avatar"
+           title="{{ 'profile.change.avatar'|trans }}">
+            <img src="{{ url('avatar', {username: member.username, size: 160}) }}" alt="{{ member.username }}">
+            <span class="p-edit-header__avatar-overlay" aria-hidden="true">
+                <i class="fas fa-camera"></i>
+            </span>
+        </a>
+
+        <div class="p-edit-header__identity">
+            <p class="p-edit-header__eyebrow">{{ 'profile.edit'|trans }}</p>
+            <h1 class="p-edit-header__name">{{ member.username }}</h1>
+        </div>
+
+        <div class="p-edit-header__actions">
+            <a href="{{ url('profile_edit_avatar', {username: member.username}) }}"
+               class="p-edit-header__btn p-edit-header__btn--primary">
+                <i class="fas fa-camera"></i>
+                <span>{{ 'profile.change.avatar'|trans }}</span>
+            </a>
+            <a href="{{ url('account_edit', {username: member.username}) }}"
+               class="p-edit-header__btn p-edit-header__btn--secondary">
+                <i class="fas fa-cog"></i>
+                <span>{{ 'account.edit'|trans }}</span>
+            </a>
+        </div>
     </div>
-    <div class="u:ms-auto"><div class="u:bg-white"><a href="{{ url('profile_add_language', {username: member.username}) }}" class="btn btn-outline-primary"><i class="fa fa-plus u:bg-bewelcome u:text-white "></i> {{ 'profile.add.language'|trans }}</a></div></div>
-</div>
-{#  add modal here #}
-<hr class="u:border-0 u:px-8 u:h-2 u:bg-bewelcome">
+
+    <div class="p-edit-header__langs">
+        <div class="p-edit-header__lang-tabs" role="tablist">
+            {% for profile_language in profile_languages %}
+                {% set active = profile_language is same as(active_locale) %}
+                <button type="button"
+                        role="tab"
+                        class="p-edit-header__lang-tab{% if active %} p-edit-header__lang-tab--active{% endif %}"
+                        data-edit-language="{{ profile_language }}"
+                        aria-selected="{{ active ? 'true' : 'false' }}">
+                    {{ ('lang_' ~ profile_language)|lower|trans({}, 'messages', profile_language) }}
+                </button>
+            {% endfor %}
+        </div>
+        <a href="{{ url('profile_add_language', {username: member.username}) }}"
+           class="p-edit-header__add-lang">
+            <i class="fas fa-plus"></i>
+            <span>{{ 'profile.add.language'|trans }}</span>
+        </a>
+    </div>
+
+    <div class="p-edit-header__quicklinks">
+        <a href="{{ url('members_profile', {username: member.username}) }}" class="p-edit-header__quicklink">
+            <i class="fas fa-eye"></i>
+            <span>{{ 'profile.menu.profile'|trans }}</span>
+        </a>
+        <a href="{{ url('preferences', {username: member.username}) }}" class="p-edit-header__quicklink">
+            <i class="fas fa-cogs"></i>
+            <span>{{ 'profile.menu.preferences'|trans }}</span>
+        </a>
+        <a href="{{ url('profile_personal_data', {username: member.username}) }}" class="p-edit-header__quicklink">
+            <i class="fas fa-database"></i>
+            <span>{{ 'profile.menu.my.data'|trans }}</span>
+        </a>
+    </div>
+</header>
diff --git a/templates/profile/edit.html.twig b/templates/profile/edit.html.twig
index 5b3f587b6b..5bd99fb8bc 100644
--- a/templates/profile/edit.html.twig
+++ b/templates/profile/edit.html.twig
@@ -28,28 +28,13 @@
         {% set active_locale = locale in profile_languages ? locale : 'en' %}
     {% endif %}
 
-    <div class="u:flex u:flex-col u:md:flex-row u:justify-between u:mb-16">
-      <span class="u:text-[2rem] u:font-700 u:font-signika">{{ member.username }}</span>
-      <div class="u:ms-auto">
-        <div class="u:bg-white">{% set edit_link = url('account_edit', {username: member.username}) %}
-        {% set edit_text = 'account.edit'|trans %}
-        <a href="{{ edit_link }}" class="btn btn-outline-primary">
-            <i class="fa fa-edit u:text-bewelcome" title="{{ edit_text }}" aria-hidden="true"></i>
-            {{ edit_text }}
-        </a></div>
-      </div>
-    </div>
-
-    {% include 'profile/edit.header.html.twig' with {profile_languages: profile_languages, active_locale: active_locale} %}
-
-
-    {% set language_levels = member.languageLevels %}
-
     {% set address = member.activeAddress %}
     {% if not address is same as(false) %}
       <input type="hidden" id="latitude" value="{{ address.latitude }}"><input type="hidden" id="longitude" value="{{ address.longitude }}">
     {% endif %}
 
+    {% include 'profile/edit.header.html.twig' with {profile_languages: profile_languages, active_locale: active_locale} %}
+
     {% for profile_language in profile_languages %}
         {% include 'profile/content.html.twig' with {profile_language: profile_language, translated_fields: translated_fields, active_locale:active_locale, edit:true} %}
     {% endfor %}
diff --git a/templates/profile/edit/about_me.html.twig b/templates/profile/edit/about_me.html.twig
index 1cd086417d..c21f3f4252 100644
--- a/templates/profile/edit/about_me.html.twig
+++ b/templates/profile/edit/about_me.html.twig
@@ -1,38 +1,21 @@
-{% extends 'profile/profile.html.twig' %}
+{% extends 'profile/edit_subpage.html.twig' %}
 {% import 'macros.twig' as macros %}
 
-{% block javascripts %}
-  {{ parent() }}
-  {{ encore_entry_script_tags('roxeditor') }}
-{% endblock %}
+{% block subpage_title -%}
+  {{ 'profile.about.me'|trans({}, 'messages', language)|raw }} · {{ ('lang_' ~ language)|lower|trans({}, 'messages', language) }}
+{%- endblock %}
 
-{% block stylesheets %}
-  {{ parent() }}
-  {{ encore_entry_link_tags('roxeditor') }}
-{% endblock %}
+{% block subpage_body %}
+  {{ form_start(form) }}
 
-{% block page_content %}
-  <div class="u:w-full">
-    <div class="card">
-      <div class="card-header u:flex u:flex-row u:justify-between">
-        {{ 'profile.about.me'|trans({}, "messages", language)|raw }} - {{ ('lang_' ~ language)|lower|trans({}, "messages", language) }}
-      </div>
-      <div class="card-block p-2">
-        <div class="card-text m-0">
-          {{ form_start(form) }}
+  {% set username = member.username %}
+  {% set translations = member.translations %}
+  {{ macros.field_translation(form.about_me, locale, language, 'AboutMe', username, translations) }}
+  {{ macros.field_translation(form.occupation, locale, language, 'Occupation', username, translations) }}
+  {{ macros.field_translation(form.offer_hosts, locale, language, 'OfferHosts', username, translations) }}
 
-          {% set username = member.username %}
-          {% set translations = member.translations %}
-          {{ macros.field_translation(form.about_me, locale, language, 'AboutMe', username, translations) }}
-          {{ macros.field_translation(form.occupation, locale, language, 'Occupation', username, translations) }}
-          {{ macros.field_translation(form.offer_hosts, locale, language, 'OfferHosts', username, translations) }}
-
-          <div class="u:flex u:justify-end u:my-8">
-            <a href="{{ url('profile_edit', {username: username, language: language}) }}" class="o-button">{{ 'profile.back'|trans({}, "messages", language) }} - {{ ('lang_' ~ language)|trans({}, "messages", language) }}</a>
-          </div>
-          {{ form_end(form) }}
-        </div>
-      </div>
-    </div>
+  <div class="p-edit-subpage__actions">
+    <input type="submit" class="o-button" value="{{ 'save'|trans({}, 'messages', language) }}">
   </div>
-{% endblock page_content %}
+  {{ form_end(form) }}
+{% endblock subpage_body %}
diff --git a/templates/profile/edit/accommodation.html.twig b/templates/profile/edit/accommodation.html.twig
index cb59c05da2..fa42084929 100644
--- a/templates/profile/edit/accommodation.html.twig
+++ b/templates/profile/edit/accommodation.html.twig
@@ -1,90 +1,84 @@
-{% extends 'profile/profile.html.twig' %}
+{% extends 'profile/edit_subpage.html.twig' %}
 {% import 'macros.twig' as macros %}
 
 {% block javascripts %}
   {{ parent() }}
-  {{ encore_entry_script_tags('roxeditor') }}
   {{ encore_entry_script_tags('profile/edit_accommodation') }}
 {% endblock %}
 
-{% block stylesheets %}
-  {{ parent() }}
-  {{ encore_entry_link_tags('roxeditor') }}
-{% endblock %}
-
-{% block page_content %}
-  <div class="u:w-full">
-    <div class="card">
-      <div class="card-header u:flex u:flex-row u:justify-between">
-        {{ 'profilesummary'|trans({}, "messages", language)|raw }}
-      </div>
-      <div class="card-block p-2">
-        <div class="card-text">
-          {{ form_start(form) }}
-          {{ form_errors(form) }}
+{% block subpage_title -%}
+  {{ 'profilesummary'|trans({}, 'messages', language)|raw }}
+{%- endblock %}
 
-          {% include 'profile/accommodation_widget.html.twig' %}
+{% block subpage_body %}
+  {{ form_start(form) }}
+  {{ form_errors(form) }}
 
-          {{ form_row(form.max_guests) }}
+  {% include 'profile/accommodation_widget.html.twig' %}
 
-          {% set username = member.username %}
-          {% set translations = member.translations %}
-          {{ macros.field_translation(form.length_of_stay, locale, language, 'MaxLengthOfStay', username, translations) }}
-          {{ macros.field_translation(form.i_live_with, locale, language, 'ILiveWith', username, translations) }}
-          {{ macros.field_translation(form.please_bring, locale, language, 'PleaseBring', username, translations) }}
+  {{ form_row(form.max_guests) }}
 
-          <span class="form-check-label">{{ form.offers.vars.label|trans }}</span>
-          <div class="u:flex u:flex-row u:justify-between">
-            {% for child in form.offers.children %}
-              <div class="o-checkbox">
-                <input type="checkbox" class="o-checkbox__input"
-                       id="{{ child.vars.id }}" name="{{ child.vars.full_name }}"
-                       value="{{ child.vars.value }}"
-                       data-offer="{{ child.vars.value }}"
-                       {% if child.vars.checked %}checked="checked"{% endif %}
-                >
-                <label class="o-checkbox__label" for="{{ child.vars.id }}">{{ child.vars.label|trans({}, "messages", language) }}</label></div>
-              {% do child.setRendered %}
-            {% endfor %}
-            <div class="o-checkbox">
-              <input type="checkbox" class="o-checkbox__input"
-                     id="{{ form.wheelchair_accessible.vars.id }}"
-                     name="{{ form.wheelchair_accessible.vars.full_name }}"
-                     data-offer="accessible"
-                    {% if form.wheelchair_accessible.vars.checked %}checked="checked"{% endif %}
-              >
-              <label class="o-checkbox__label" for="{{ form.wheelchair_accessible.vars.id }}">{{ form.wheelchair_accessible.vars.label|trans({}, "messages", language) }}</label>
-            </div>
-            {% do form.wheelchair_accessible.setRendered %}
-          </div>
+  {% set username = member.username %}
+  {% set translations = member.translations %}
+  {{ macros.field_translation(form.length_of_stay, locale, language, 'MaxLengthOfStay', username, translations) }}
+  {{ macros.field_translation(form.i_live_with, locale, language, 'ILiveWith', username, translations) }}
+  {{ macros.field_translation(form.please_bring, locale, language, 'PleaseBring', username, translations) }}
 
-          {{ macros.field_translation(form.offer_guests, locale, language, 'OfferGuests', username, translations) }}
-          {{ macros.field_translation(form.where_you_sleep, locale, language, 'WhereYouSleep', username, translations) }}
-          {{ macros.field_translation(form.additional_info, locale, language, 'AdditionalAccommodationInfo', username, translations) }}
-
-          <span class="form-check-label">{{ form.restrictions.vars.label|trans }}</span>
-          <div class="u:flex u:flex-row u:justify-between">
-            {% for child in form.restrictions.children %}
-              <div class="o-checkbox">
-                <input type="checkbox" class="o-checkbox__input"
-                       id="{{ child.vars.id }}" name="{{ child.vars.full_name }}"
-                       value="{{ child.vars.value }}"
-                       data-restrictions="{{ child.vars.value }}"
-                       {% if child.vars.checked %}checked="checked"{% endif %}
-                ><label class="o-checkbox__label" for="{{ child.vars.id }}">{{ child.vars.label|trans({}, "messages", language) }}</label></div>
-              {% do child.setRendered %}
-            {% endfor %}
-          </div>
+  <div class="p-pill-group">
+    <span class="p-pill-group__label">{{ form.offers.vars.label|trans }}</span>
+    <div class="p-pill-group__options">
+      {% for child in form.offers.children %}
+        <div class="p-pill-option">
+          <input type="checkbox" class="p-pill-option__input"
+                 id="{{ child.vars.id }}" name="{{ child.vars.full_name }}"
+                 value="{{ child.vars.value }}"
+                 data-offer="{{ child.vars.value }}"
+                 {% if child.vars.checked %}checked="checked"{% endif %}
+          >
+          <label class="p-pill-option__label" for="{{ child.vars.id }}">{{ child.vars.label|trans({}, "messages", language) }}</label>
+        </div>
+        {% do child.setRendered %}
+      {% endfor %}
+      <div class="p-pill-option">
+        <input type="checkbox" class="p-pill-option__input"
+               id="{{ form.wheelchair_accessible.vars.id }}"
+               name="{{ form.wheelchair_accessible.vars.full_name }}"
+               data-offer="accessible"
+              {% if form.wheelchair_accessible.vars.checked %}checked="checked"{% endif %}
+        >
+        <label class="p-pill-option__label" for="{{ form.wheelchair_accessible.vars.id }}">{{ form.wheelchair_accessible.vars.label|trans({}, "messages", language) }}</label>
+      </div>
+      {% do form.wheelchair_accessible.setRendered %}
+    </div>
+  </div>
 
-          {{ macros.field_translation(form.house_rules, locale, language, 'HouseRules', username, translations) }}
-          {{ macros.field_translation(form.getting_there, locale, language, 'GettingThere', username, translations) }}
+  {{ macros.field_translation(form.offer_guests, locale, language, 'OfferGuests', username, translations) }}
+  {{ macros.field_translation(form.where_you_sleep, locale, language, 'WhereYouSleep', username, translations) }}
+  {{ macros.field_translation(form.additional_info, locale, language, 'AdditionalAccommodationInfo', username, translations) }}
 
-          <div class="u:flex u:justify-end u:my-8">
-            <a href="{{ url('profile_edit', {username: username, language: language}) }}" class="o-button">{{ 'profile.back'|trans({}, "messages", language) }} - {{ ('lang_' ~ language)|trans({}, "messages", language) }}</a>
-          </div>
-          {{ form_end(form) }}
+  <div class="p-pill-group">
+    <span class="p-pill-group__label">{{ form.restrictions.vars.label|trans }}</span>
+    <div class="p-pill-group__options">
+      {% for child in form.restrictions.children %}
+        <div class="p-pill-option">
+          <input type="checkbox" class="p-pill-option__input"
+                 id="{{ child.vars.id }}" name="{{ child.vars.full_name }}"
+                 value="{{ child.vars.value }}"
+                 data-restrictions="{{ child.vars.value }}"
+                 {% if child.vars.checked %}checked="checked"{% endif %}
+          >
+          <label class="p-pill-option__label" for="{{ child.vars.id }}">{{ child.vars.label|trans({}, "messages", language) }}</label>
         </div>
-      </div>
+        {% do child.setRendered %}
+      {% endfor %}
     </div>
   </div>
-{% endblock page_content %}
+
+  {{ macros.field_translation(form.house_rules, locale, language, 'HouseRules', username, translations) }}
+  {{ macros.field_translation(form.getting_there, locale, language, 'GettingThere', username, translations) }}
+
+  <div class="p-edit-subpage__actions">
+    <input type="submit" class="o-button" value="{{ 'save'|trans({}, 'messages', language) }}">
+  </div>
+  {{ form_end(form) }}
+{% endblock subpage_body %}
diff --git a/templates/profile/edit/avatar.html.twig b/templates/profile/edit/avatar.html.twig
index fc3e341fbd..2f852340c3 100644
--- a/templates/profile/edit/avatar.html.twig
+++ b/templates/profile/edit/avatar.html.twig
@@ -1,11 +1,8 @@
-{% extends 'profile/profile.html.twig' %}
-{% import 'macros.twig' as macros %}
+{% extends 'profile/edit_subpage.html.twig' %}
 
 {% block javascripts %}
   {{ parent() }}
   {{ encore_entry_script_tags('avatar') }}
-  <script type="application/javascript">
-  </script>
 {% endblock %}
 
 {% block stylesheets %}
@@ -13,34 +10,27 @@
   {{ encore_entry_link_tags('avatar') }}
 {% endblock %}
 
-{% block page_content %}
-  <div class="u:w-full">
-    <div class="card">
-      <div class="card-header u:flex u:flex-row u:justify-between">
-        {{ 'profile.avatar.picture'|trans|raw }}
-      </div>
-      <div class="card-block p-2">
-        <div class="card-text m-0">
-          <div class="u:flex u:flex-col">
-            <div class="u:w-full u:nd:min-w-500 u:max-w-500 u:aspect-square u:mx-auto u:mb-50">
-              <input id="member" name="member" type="hidden" value="{{ member.username }}">
-              <div id="avatar_container" class="u:w-full u:h-full"></div>
-            </div>
-            <div class="u:flex u:flex-row u:h-100 u:w-full u:overflow-x-auto">
-              {% for picture in pictures %}
-                <img class="img-thumbnail u:mr-20" loading="lazy" data-image-id="{{ picture.id }}" src="gallery/thumbimg?id={{ picture.id }}" alt="{{ picture.title }}">
-              {% endfor %}
-            </div>
-            <div class="u:flex u:justify-between u:my-8">
-              <div class="u:relative">
-                <button id="avatar-new" class="o-button">{{ 'profile.avatar.new'|trans }}</button>
-                <input id="avatar-file" class="u:absolute u:top-0 u:left-0 u:w-full u:h-full u:opacity-0" type="file" accept="image/*">
-              </div>
-              <button id="avatar-update" class="o-button">{{ 'profile.avatar.update'|trans }}</button>
-            </div>
-          </div>
-        </div>
+{% block subpage_title -%}
+  {{ 'profile.avatar.picture'|trans|raw }}
+{%- endblock %}
+
+{% block subpage_body %}
+  <div class="u:flex u:flex-col">
+    <div class="u:w-full u:nd:min-w-500 u:max-w-500 u:aspect-square u:mx-auto u:mb-50">
+      <input id="member" name="member" type="hidden" value="{{ member.username }}">
+      <div id="avatar_container" class="u:w-full u:h-full"></div>
+    </div>
+    <div class="u:flex u:flex-row u:h-100 u:w-full u:overflow-x-auto">
+      {% for picture in pictures %}
+        <img class="img-thumbnail u:mr-20" loading="lazy" data-image-id="{{ picture.id }}" src="gallery/thumbimg?id={{ picture.id }}" alt="{{ picture.title }}">
+      {% endfor %}
+    </div>
+    <div class="p-edit-subpage__actions" style="justify-content: space-between;">
+      <div class="u:relative">
+        <button id="avatar-new" class="o-button">{{ 'profile.avatar.new'|trans }}</button>
+        <input id="avatar-file" class="u:absolute u:top-0 u:left-0 u:w-full u:h-full u:opacity-0" type="file" accept="image/*">
       </div>
+      <button id="avatar-update" class="o-button">{{ 'profile.avatar.update'|trans }}</button>
     </div>
   </div>
-{% endblock page_content %}
+{% endblock subpage_body %}
diff --git a/templates/profile/edit/languages.html.twig b/templates/profile/edit/languages.html.twig
index eb6ef82a28..27b57ac19f 100644
--- a/templates/profile/edit/languages.html.twig
+++ b/templates/profile/edit/languages.html.twig
@@ -1,11 +1,9 @@
-{% extends 'profile/profile.html.twig' %}
+{% extends 'profile/edit_subpage.html.twig' %}
 {% import 'macros.twig' as macros %}
 
 {% block javascripts %}
   {{ parent() }}
   {{ encore_entry_script_tags('profile/edit_languages') }}
-  <script type="application/javascript">
-  </script>
 {% endblock %}
 
 {% block stylesheets %}
@@ -17,68 +15,71 @@
   {% set form = widget %}
   {% set name = widget.vars.full_name %}
   {% set currentLanguage = name %}
-  <div class="u:grid u:md:grid-cols-2 u:items-bottom u:gap-8" id="{{ currentLanguage }}">
-    <div class="form-group u:grid u:auto-rows-min">
-      {{ form_label(form.language) }}
-      {{ form_widget(form.language) }}
-      {{ form_errors(form.language) }}
-    </div>
-    {# force error display #}
-    <div class="form-group u:grid u:auto-rows-min {% if form.level.vars.errors|length != 0 %}is-invalid{% endif %}">
-      {{ form_label(form.level) }}
-      <div class="u:grid u:grid-cols-[auto_min-content] u:gap-8">
+  <div class="p-language-row" id="{{ currentLanguage }}">
+    <div class="p-language-row__fields">
+      <div class="p-language-form__group">
+        {{ form_label(form.language, null, {label_attr: {class: 'p-language-form__label'}}) }}
+        {{ form_widget(form.language) }}
+        {{ form_errors(form.language) }}
+      </div>
+      <div class="p-language-form__group {% if form.level.vars.errors|length != 0 %}is-invalid{% endif %}">
+        {{ form_label(form.level, null, {label_attr: {class: 'p-language-form__label'}}) }}
         {{ form_widget(form.level) }}
-        <button type="button" class="o-button u:self-end js-delete-language"
-                data-collection-holder-class="collection-languages"
-                data-related="{{ currentLanguage }}"><i class="fa fa-fw fa-trash" aria-label="{{ 'language.delete'|trans }}"></i><span class="sr-only">{{ 'language.delete'|trans }}</span></button></div>
-      {{ form_errors(form.level) }}
+        {{ form_errors(form.level) }}
+      </div>
     </div>
+    <button type="button" class="p-language-row__delete js-delete-language"
+            data-collection-holder-class="collection-languages"
+            data-related="{{ currentLanguage }}"
+            aria-label="Delete language">
+      <i class="fas fa-fw fa-trash" aria-hidden="true"></i>
+    </button>
   </div>
 {% endmacro %}
 
-{% block page_content %}
-  <div class="u:w-full">
-    <div class="card">
-      <div class="card-header u:flex u:flex-row u:justify-between">
-        {{ 'profile.languages'|trans|raw }}
-      </div>
-      <div class="card-block p-2">
-        <div class="card-text m-0">
-          {{ form_start(form) }}
-          {{ form_errors(form) }}
-          <div class="collection-languages"
-               data-index="{{ form.language_levels|length > 0 ? form.language_levels|last.vars.name + 1 : 0 }}"
-               data-prototype="{{ _self.widget_prototype(form.language_levels.vars.prototype)|e('html_attr') }}">
-            {% for language_level in form.language_levels %}
-              {% set currentLanguage = language_level.vars.full_name %}
-              <div class="u:grid u:md:grid-cols-2 u:items-bottom u:gap-8" id="{{ currentLanguage }}">
-                <div class="form-group u:grid u:auto-rows-min">
-                  {{ form_label(language_level.language) }}
-                  {{ form_widget(language_level.language) }}
-                  {{ form_errors(language_level.language) }}
-                </div>
-                  {# force error display #}
-                  <div class="form-group u:grid u:auto-rows-min {% if language_level.level.vars.errors|length != 0 %}is-invalid{% endif %}">
-                    {{ form_label(language_level.level) }}
-                    <div class="u:grid u:grid-cols-[auto_min-content] u:gap-8">
-                    {{ form_widget(language_level.level) }}
-                    <button type="button" class="o-button u:self-end js-delete-language"
-                          data-collection-holder-class="collection-languages"
-                            data-related="{{ currentLanguage }}"><i class="fa fa-fw fa-trash" aria-label="{{ 'language.delete'|trans }}"></i><span class="sr-only">{{ 'language.delete'|trans }}</span></button></div>
-                    {{ form_errors(language_level.level) }}
-                </div>
-              </div>
-            {% endfor %}
+{% block subpage_title -%}
+  {{ 'profile.languages'|trans|raw }}
+{%- endblock %}
+
+{% block subpage_body %}
+  {{ form_start(form, {attr: {class: 'p-language-form'}}) }}
+  {{ form_errors(form) }}
+  <div class="collection-languages"
+       data-index="{{ form.language_levels|length > 0 ? form.language_levels|last.vars.name + 1 : 0 }}"
+       data-prototype="{{ _self.widget_prototype(form.language_levels.vars.prototype)|e('html_attr') }}">
+    {% for language_level in form.language_levels %}
+      {% set currentLanguage = language_level.vars.full_name %}
+      <div class="p-language-row" id="{{ currentLanguage }}">
+        <div class="p-language-row__fields">
+          <div class="p-language-form__group">
+            {{ form_label(language_level.language, null, {label_attr: {class: 'p-language-form__label'}}) }}
+            {{ form_widget(language_level.language) }}
+            {{ form_errors(language_level.language) }}
           </div>
-          <div class="u:flex u:justify-between u:my-8">
-            <button type="button" class="o-button js-add-language"
-                    data-collection-holder-class="collection-languages"><i class="fa fa-fw fa-add" aria-label="{{ 'language.add'|trans }}"></i><span class="sr-only">{{ 'language.add'|trans }}</span></button></button>
-            <input type="submit" class="o-button" value="{{ 'profile.update'|trans }}">
+          <div class="p-language-form__group {% if language_level.level.vars.errors|length != 0 %}is-invalid{% endif %}">
+            {{ form_label(language_level.level, null, {label_attr: {class: 'p-language-form__label'}}) }}
+            {{ form_widget(language_level.level) }}
+            {{ form_errors(language_level.level) }}
           </div>
-          {{ form_rest(form) }}
-          {{ form_end(form) }}
         </div>
+        <button type="button" class="p-language-row__delete js-delete-language"
+                data-collection-holder-class="collection-languages"
+                data-related="{{ currentLanguage }}"
+                aria-label="Delete language">
+          <i class="fas fa-fw fa-trash" aria-hidden="true"></i>
+        </button>
       </div>
-    </div>
+    {% endfor %}
+  </div>
+
+  <div class="p-edit-subpage__actions p-edit-subpage__actions--split">
+    <button type="button" class="p-language-add js-add-language"
+            data-collection-holder-class="collection-languages">
+      <i class="fas fa-fw fa-plus" aria-hidden="true"></i>
+      <span>Add language</span>
+    </button>
+    <input type="submit" class="o-button" value="{{ 'save'|trans }}">
   </div>
-{% endblock page_content %}
+  {{ form_rest(form) }}
+  {{ form_end(form) }}
+{% endblock subpage_body %}
diff --git a/templates/profile/edit/my_interests.html.twig b/templates/profile/edit/my_interests.html.twig
index e59f00af22..30fd8195f8 100644
--- a/templates/profile/edit/my_interests.html.twig
+++ b/templates/profile/edit/my_interests.html.twig
@@ -1,40 +1,23 @@
-{% extends 'profile/profile.html.twig' %}
+{% extends 'profile/edit_subpage.html.twig' %}
 {% import 'macros.twig' as macros %}
 
-{% block javascripts %}
-  {{ parent() }}
-  {{ encore_entry_script_tags('roxeditor') }}
-{% endblock %}
+{% block subpage_title -%}
+  {{ 'profile.interests'|trans({}, 'messages', language)|raw }} · {{ ('lang_' ~ language)|lower|trans({}, 'messages', language) }}
+{%- endblock %}
 
-{% block stylesheets %}
-  {{ parent() }}
-  {{ encore_entry_link_tags('roxeditor') }}
-{% endblock %}
+{% block subpage_body %}
+  {{ form_start(form) }}
 
-{% block page_content %}
-  <div class="u:w-full">
-    <div class="card">
-      <div class="card-header u:flex u:flex-row u:justify-between">
-        {{ 'profile.interests'|trans({}, "messages", language)|raw }}
-      </div>
-      <div class="card-block p-2">
-        <div class="card-text">
-          {{ form_start(form) }}
+  {% set username = member.username %}
+  {% set translations = member.translations %}
+  {{ macros.field_translation(form.hobbies, locale, language, 'Hobbies', username, translations) }}
+  {{ macros.field_translation(form.books, locale, language, 'Books', username, translations) }}
+  {{ macros.field_translation(form.music, locale, language, 'Music', username, translations) }}
+  {{ macros.field_translation(form.movies, locale, language, 'Movies', username, translations) }}
+  {{ macros.field_translation(form.organizations, locale, language, 'Organizations', username, translations) }}
 
-          {% set username = member.username %}
-          {% set translations = member.translations %}
-          {{ macros.field_translation(form.hobbies, locale, language, 'Hobbies', username, translations) }}
-          {{ macros.field_translation(form.books, locale, language, 'Books', username, translations) }}
-          {{ macros.field_translation(form.music, locale, language, 'Music', username, translations) }}
-          {{ macros.field_translation(form.movies, locale, language, 'Movies', username, translations) }}
-          {{ macros.field_translation(form.organizations, locale, language, 'Organizations', username, translations) }}
-
-          <div class="u:flex u:justify-end u:my-8">
-            <a href="{{ url('profile_edit', {username: username, language: language}) }}" class="o-button">{{ 'profile.back'|trans({}, "messages", language) }} - {{ ('lang_' ~ language)|trans({}, "messages", language) }}</a>
-          </div>
-          {{ form_end(form) }}
-        </div>
-      </div>
-    </div>
+  <div class="p-edit-subpage__actions">
+    <input type="submit" class="o-button" value="{{ 'save'|trans({}, 'messages', language) }}">
   </div>
-{% endblock page_content %}
+  {{ form_end(form) }}
+{% endblock subpage_body %}
diff --git a/templates/profile/edit/travel_experiences.html.twig b/templates/profile/edit/travel_experiences.html.twig
index db5301aaca..455e278b43 100644
--- a/templates/profile/edit/travel_experiences.html.twig
+++ b/templates/profile/edit/travel_experiences.html.twig
@@ -1,37 +1,20 @@
-{% extends 'profile/profile.html.twig' %}
+{% extends 'profile/edit_subpage.html.twig' %}
 {% import 'macros.twig' as macros %}
 
-{% block javascripts %}
-  {{ parent() }}
-  {{ encore_entry_script_tags('roxeditor') }}
-{% endblock %}
+{% block subpage_title -%}
+  {{ 'profile.travel.experience'|trans({}, 'messages', language)|raw }} · {{ ('lang_' ~ language)|lower|trans({}, 'messages', language) }}
+{%- endblock %}
 
-{% block stylesheets %}
-  {{ parent() }}
-  {{ encore_entry_link_tags('roxeditor') }}
-{% endblock %}
+{% block subpage_body %}
+  {{ form_start(form) }}
 
-{% block page_content %}
-  <div class="u:w-full">
-    <div class="card">
-      <div class="card-header u:flex u:flex-row u:justify-between">
-        {{ 'profile.travel.experience'|trans({}, "messages", language)|raw }}
-      </div>
-      <div class="card-block p-2">
-        <div class="card-text">
-          {{ form_start(form) }}
+  {% set username = member.username %}
+  {% set translations = member.translations %}
+  {{ macros.field_translation(form.past, locale, language, 'PastTrips', username, translations) }}
+  {{ macros.field_translation(form.planned, locale, language, 'PlannedTrips', username, translations) }}
 
-          {% set username = member.username %}
-          {% set translations = member.translations %}
-          {{ macros.field_translation(form.past, locale, language, 'PastTrips', username, translations) }}
-          {{ macros.field_translation(form.planned, locale, language, 'PlannedTrips', username, translations) }}
-
-          <div class="u:flex u:justify-end u:my-8">
-            <a href="{{ url('profile_edit', {username: username, language: language}) }}" class="o-button">{{ 'profile.back'|trans({}, "messages", language) }} - {{ ('lang_' ~ language)|trans({}, "messages", language) }}</a>
-          </div>
-          {{ form_end(form) }}
-        </div>
-      </div>
-    </div>
+  <div class="p-edit-subpage__actions">
+    <input type="submit" class="o-button" value="{{ 'save'|trans({}, 'messages', language) }}">
   </div>
-{% endblock page_content %}
+  {{ form_end(form) }}
+{% endblock subpage_body %}
diff --git a/templates/profile/edit_subpage.html.twig b/templates/profile/edit_subpage.html.twig
new file mode 100644
index 0000000000..4a49903892
--- /dev/null
+++ b/templates/profile/edit_subpage.html.twig
@@ -0,0 +1,28 @@
+{% extends 'base.html.twig' %}
+
+{% set hide_sidebar = true %}
+
+{% block title %}
+  {%- block subpage_title %}{% endblock -%}
+  {{ ' · ' ~ 'profile.edit'|trans }}
+{% endblock %}
+
+{% block content %}
+  <section class="p-edit-subpage">
+    <header class="p-edit-subpage__header">
+      <a href="{{ url('profile_edit', {username: member.username}) }}"
+         class="p-edit-subpage__back"
+aria-label="{{ 'profile.back'|trans }}">
+        <i class="fas fa-chevron-left" aria-hidden="true"></i>
+      </a>
+      <div class="p-edit-subpage__heading">
+        <p class="p-edit-subpage__eyebrow">{{ 'profile.edit'|trans }}</p>
+        <h1 class="p-edit-subpage__title">{{ block('subpage_title') }}</h1>
+      </div>
+    </header>
+
+    <div class="p-edit-subpage__card">
+      {% block subpage_body %}{% endblock %}
+    </div>
+  </section>
+{% endblock content %}
diff --git a/templates/profile/header.html.twig b/templates/profile/header.html.twig
index e6ba6ee35a..f3ca1986f5 100644
--- a/templates/profile/header.html.twig
+++ b/templates/profile/header.html.twig
@@ -51,10 +51,10 @@
           {% if use_lightbox is defined %}
             <a class="js-profile-picture"
                href="{{ url('avatar', {username: member.Username, size: 'original'}) }}"
-               data-bs-toggle="lightbox"
-               data-always-show-close="true"
+               data-toggle="lightbox"
                data-type="image"
-               data-title="{{ 'profile.picture.title'|trans }}">
+               data-size="fullscreen"
+               data-caption="{{ 'profile.picture.title'|trans|e('html_attr') }}">
               <img class="p-hero__avatar-img js-profile-picture"
                    src="{{ url('avatar', {username: member.Username, size: 320}) }}"
                    alt="{{ 'profile.picture.title'|trans }}">
diff --git a/templates/profile/set.location.html.twig b/templates/profile/set.location.html.twig
index c8e92dd8b6..8fbee6aea2 100644
--- a/templates/profile/set.location.html.twig
+++ b/templates/profile/set.location.html.twig
@@ -1,8 +1,4 @@
-{% extends 'profile/profile.html.twig' %}
-
-{% block title %}
-    {{ 'profile.set.location' | trans }}
-{% endblock %}
+{% extends 'profile/edit_subpage.html.twig' %}
 
 {% block stylesheets %}
     {{ parent() }}
@@ -15,33 +11,48 @@
     {{ encore_entry_script_tags('profile/setlocation') }}
 {% endblock javascripts %}
 
-{% block page_content %}
-    <h1>{{ 'profile.set.location' | trans }}</h1>
-    {{ form_start(form) }}
-    <div class="u:w-full u:mb-8 u:md:width-auto">
-        <div class="auto-search-wrapper max-height loupe">
-            <input type="text" id="{{ form.fullname.vars.id}}" name="{{ form.fullname.vars.full_name }}"
-                   class="o-input js-location-picker" autocomplete="off"
+{% block subpage_title -%}
+    {{ 'profile.set.location' | trans }}
+{%- endblock %}
+
+{% block subpage_body %}
+    {{ form_start(form, {attr: {class: 'p-location-form'}}) }}
+    <div class="p-location-panel">
+        <label class="p-language-form__label" for="{{ form.fullname.vars.id }}">
+            {{ 'trip.leg.location'|trans }}
+        </label>
+        <div class="auto-search-wrapper max-height p-location-search">
+            <i class="fas fa-search p-location-search__icon" aria-hidden="true"></i>
+            <input type="text"
+                   id="{{ form.fullname.vars.id}}"
+                   name="{{ form.fullname.vars.full_name }}"
+                   class="o-input js-location-picker"
+                   autocomplete="off"
                    placeholder="{{ 'trip.leg.location'|trans }}"
                    aria-label="{{ 'trip.leg.location'|trans }}"
-                   {% if form.fullname.vars.value %}value="{{ form.fullname.vars.value }}"{% endif %}
-            >
+                   {% if form.fullname.vars.value %}value="{{ form.fullname.vars.value }}"{% endif %}>
+        </div>
+        <div class="p-location-form__errors">
+            {{ form_errors(form.fullname) }}
+            {{ form_errors(form.geoname_id) }}
         </div>
-        <div class="u:block">{{ form_errors(form.fullname) }}{{ form_errors(form.geoname_id) }}</div>
-        {% do form.fullname.setRendered %}
-        {{ form_widget(form.geoname_id) }}
-        {{ form_widget(form.latitude) }}
-        {{ form_widget(form.longitude) }}
-        {% set address = member.activeAddress %}
-        <input type="hidden" id="original_latitude" value="{{ address.latitude }}">
-        <input type="hidden" id="original_longitude" value="{{ address.longitude }}">
     </div>
+
+    {% do form.fullname.setRendered %}
+    {{ form_widget(form.geoname_id) }}
+    {{ form_widget(form.latitude) }}
+    {{ form_widget(form.longitude) }}
+    {% set address = member.activeAddress %}
+    <input type="hidden" id="original_latitude" value="{{ address.latitude }}">
+    <input type="hidden" id="original_longitude" value="{{ address.longitude }}">
+
     <input type="hidden" id="marker_label_text" value="{{ 'profile.setlocation.marker'|trans }}">
-    <div id="map" style="width: 100%; height: 440px; border: 1px solid rgb(170, 170, 170);">
+    <div class="p-location-map" id="map">
     </div>
-    <div class="u:flex u:justify-end u:mt-8">
+
+    <div class="p-edit-subpage__actions">
         <input type="submit" class="o-button" value="{{ 'save location'|trans }}">
     </div>
-    {{ form_end(form) }}
 
-{% endblock %}
+    {{ form_end(form) }}
+{% endblock subpage_body %}
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index f36acef282..4b55f91a32 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -36,18 +36,7 @@
 <body class="p-login__body" style="background-image:url('{{ asset('images/homepicture-big-1.jpg') }}')">
 <div class="p-login__overlay" aria-hidden="true"></div>
 
-<nav class="p-login__nav">
-    <div class="container-lg p-login__nav-inner">
-        <a class="p-login__brand" href="{{ url('homepage') }}">
-            <img class="p-login__brand-icon" src="{{ asset('images/logo_icon_2025.svg') }}" alt="BeWelcome logo"/>
-            <img class="p-login__brand-text" src="{{ asset('images/logo_text_2025.svg') }}" alt="BeWelcome"/>
-        </a>
-        <div class="p-login__nav-cta">
-            <span class="p-login__nav-prompt">{{ 'menu.not.a.member.yet' | trans }}</span>
-            <a class="p-login__nav-link" href="{{ url('signup') }}">{{ 'navbar.button.signup' | trans }}</a>
-        </div>
-    </div>
-</nav>
+{% include 'loginbar.html.twig' with { slim_nav: true, slim_cta: 'signup' } %}
 
 {% block content %}
 <main role="main" class="p-login">
diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml
new file mode 100644
index 0000000000..3ea8dc14b8
--- /dev/null
+++ b/translations/messages.en.yaml
@@ -0,0 +1,4 @@
+gallery.image.edit.page_title: 'Edit photo'
+gallery.image.edit.back: 'Back to gallery'
+gallery.image.edit.view_full: 'Open full size'
+gallery.image.edit.save: 'Save changes'
diff --git a/translations/messages.fr.yaml b/translations/messages.fr.yaml
new file mode 100644
index 0000000000..0a5924b45d
--- /dev/null
+++ b/translations/messages.fr.yaml
@@ -0,0 +1,4 @@
+gallery.image.edit.page_title: 'Modifier la photo'
+gallery.image.edit.back: 'Retour à la galerie'
+gallery.image.edit.view_full: 'Voir en taille réelle'
+gallery.image.edit.save: 'Enregistrer'
diff --git a/translations/missing/gallery.yaml b/translations/missing/gallery.yaml
index c8bae2b08c..afba0fc7fe 100644
--- a/translations/missing/gallery.yaml
+++ b/translations/missing/gallery.yaml
@@ -41,3 +41,39 @@ gallery.create.new.album:
     - '@GalleryCreateNewPhotoset'
 gallery.use.existing.album:
     - '@GalleryAddToPhotoset'
+gallery.manage.empty.title:
+    - 'No photos yet'
+    - Shown as the title of the empty state on the gallery manage page when the member has not uploaded any photo.
+gallery.manage.empty.text:
+    - 'Share your travels and memories with the community by uploading your first photos.'
+    - Shown as the description in the empty state on the gallery manage page, inviting the member to upload their first photos.
+gallery.manage.photo.count.one:
+    - '%d photo'
+    - Shown next to the page title on the gallery manage page when the member has exactly one photo. The %d placeholder is the photo count.
+gallery.manage.photo.count.many:
+    - '%d photos'
+    - Shown next to the page title on the gallery manage page when the member has more than one photo. The %d placeholder is the photo count.
+gallery.upload.dropzone.title:
+    - 'Drop your photos here'
+    - Title of the drag-and-drop area on the gallery upload page, inviting the member to drag image files.
+gallery.upload.dropzone.subtitle:
+    - 'or click to browse from your computer'
+    - Subtitle below the drag-and-drop area on the gallery upload page, indicating the area can also be clicked to open the file picker.
+gallery.upload.queue.title:
+    - 'Upload queue'
+    - Heading shown above the list of files being uploaded on the gallery upload page.
+gallery.upload.back.to.gallery:
+    - 'Back to my gallery'
+    - Link shown on the gallery upload page that takes the member back to their gallery management page.
+gallery.image.edit.page_title:
+    - 'Edit photo'
+    - Browser tab title suffix on the gallery image edit page (after the image title).
+gallery.image.edit.back:
+    - 'Back to gallery'
+    - Link from the gallery image edit page to the gallery management page (/gallery/manage).
+gallery.image.edit.view_full:
+    - 'Open full size'
+    - Link under the preview on the gallery image edit page to the legacy full image URL.
+gallery.image.edit.save:
+    - 'Save changes'
+    - Primary submit button on the gallery image edit form.
diff --git a/translations/missing/password.yaml b/translations/missing/password.yaml
index 33c4515a64..1421de585f 100644
--- a/translations/missing/password.yaml
+++ b/translations/missing/password.yaml
@@ -3,3 +3,24 @@ reset.password.error:
 reset.password.too.fast:
     - 'The last request for a password reset is less than 5 days old. Please check your spam folder.'
     - Error message shown if an user asked for a password reset already and didn't follow through with it.
+password.request.headline:
+    - 'Forgot your password?'
+    - Headline on the request password reset page /resetpassword.
+password.request.subtitle:
+    - "Enter your username or email and we'll send you a link to set a new password."
+    - Subtitle on the request password reset page /resetpassword.
+password.request.submit:
+    - 'Send reset link'
+    - Submit button label on the request password reset page /resetpassword.
+password.request.back.login:
+    - 'Back to log in'
+    - Link back to the login page from /resetpassword.
+password.reset.headline:
+    - 'Set a new password'
+    - Headline on the reset password page after clicking the email link.
+password.reset.subtitle:
+    - 'Choose a strong new password to secure your account.'
+    - Subtitle on the reset password page after clicking the email link.
+password.reset.submit:
+    - 'Save new password'
+    - Submit button label on the reset password page after clicking the email link.

From 9be05ab34374a7791742e0ccef106b458821e1dd Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Wed, 13 May 2026 19:17:08 +0200
Subject: [PATCH 11/13] fix minor things

---
 assets/js/profile/profile.js                  |   7 +-
 .../tailwindcss/layouts/_layouts.general.css  | 122 +++++++++++-------
 .../templates/gallerymanage.column_col3.php   |  52 +++++---
 src/Controller/ProfileController.php          |   9 +-
 templates/gallery/upload.image.html.twig      |  48 ++++---
 templates/profile/account.edit.html.twig      |   6 +-
 templates/profile/content.html.twig           |  64 ++++++---
 templates/profile/edit_subpage.html.twig      |   2 +-
 templates/profile/set.location.html.twig      |   4 +-
 templates/signup/finalize.html.twig           |   6 +-
 translations/missing/profile.yaml             |   3 +
 11 files changed, 211 insertions(+), 112 deletions(-)

diff --git a/assets/js/profile/profile.js b/assets/js/profile/profile.js
index f782257cd6..13b03ac02f 100644
--- a/assets/js/profile/profile.js
+++ b/assets/js/profile/profile.js
@@ -11,7 +11,12 @@ locationMaps.forEach( locationMap => {
 
     const map = L.map(locationMap, {
         zoomControl: false,
-        boxZoom: false
+        boxZoom: false,
+        dragging: false,
+        scrollWheelZoom: false,
+        touchZoom: false,
+        doubleClickZoom: false,
+        keyboard: false,
     }).setView([latitude, longitude], 10)
 
     map.attributionControl.setPrefix(false)
diff --git a/assets/tailwindcss/layouts/_layouts.general.css b/assets/tailwindcss/layouts/_layouts.general.css
index 542cebc791..bad730dca2 100644
--- a/assets/tailwindcss/layouts/_layouts.general.css
+++ b/assets/tailwindcss/layouts/_layouts.general.css
@@ -1013,6 +1013,7 @@ main:has(.p-hero) {
 /* Edit mode: single column, all cards full width */
 .p-profile-layout--edit {
   grid-template-columns: 1fr;
+  padding-top: 0;
 }
 
 .p-profile-layout--edit .p-profile-secondary {
@@ -1268,7 +1269,27 @@ main:has(.p-hero) {
     justify-content: flex-start;
   }
   .p-edit-header__langs { padding: 0.75rem 1rem; }
-  .p-edit-header__quicklinks { padding: 0.6rem 1rem 0.75rem; gap: 0.25rem 1rem; }
+  .p-edit-header__quicklinks {
+    padding: 0.5rem 1rem 0.65rem;
+    gap: 0.5rem;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+  .p-edit-header__quicklinks::-webkit-scrollbar { display: none; }
+  .p-edit-header__quicklink {
+    flex: 0 0 auto;
+    padding: 0.35rem 0.75rem;
+    background: #f1f5f9;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+  }
+  .p-edit-header__quicklink:hover,
+  .p-edit-header__quicklink:focus-visible {
+    background: #fee8d6;
+  }
 }
 
 /* ── Profile edit subpages (About me, Accommodation, Preferences, …) ── */
@@ -1549,7 +1570,7 @@ main:has(.p-hero) {
 
 .p-account-section__help {
   display: block;
-  margin: 0;
+  margin: 0.25rem 0 0.75rem;
   color: #64748b;
   font-size: 0.8125rem;
   line-height: 1.45;
@@ -1563,8 +1584,8 @@ main:has(.p-hero) {
 }
 
 .p-account-toggle {
-  display: inline-flex;
-  align-items: center;
+  display: flex;
+  align-items: flex-start;
   gap: 0.55rem;
   margin: 0.4rem 0 0;
   cursor: pointer;
@@ -1575,7 +1596,8 @@ main:has(.p-hero) {
   color: #475569;
   font-size: 0.875rem;
   font-weight: 600;
-  line-height: 1;
+  line-height: 1.45;
+  padding-top: 0.2rem;
 }
 
 /* ── Profile language forms ── */
@@ -1798,7 +1820,8 @@ main:has(.p-hero) {
   z-index: 1;
 }
 
-.p-location-search .o-input {
+.p-location-search .o-input,
+.p-edit-subpage__card .p-location-search .o-input {
   width: 100%;
   min-height: 2.75rem;
   padding: 0.65rem 0.85rem 0.65rem 2.35rem;
@@ -1932,11 +1955,13 @@ main:has(.p-hero) {
   position: relative;
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
   width: 3.25rem;
   height: 1.75rem;
   padding: 0.18rem;
   border-radius: 999px;
   background: #cbd5e1;
+  overflow: hidden;
   transition:
     background 0.15s ease,
     box-shadow 0.15s ease;
@@ -2032,14 +2057,8 @@ main:has(.p-hero) {
   color: #1e293b;
   background: #fff;
   border-bottom: none;
-  padding: 0.9rem 1.25rem 1.15rem;
+  padding: 0.9rem 3.5rem 1.15rem 1.25rem;
   border-radius: 1rem 1rem 0 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
   position: relative;
 }
 
@@ -2380,14 +2399,9 @@ main:has(.p-hero) {
   background: #fff;
   color: #1e293b;
   border-bottom: none;
-  padding: 0.9rem 1.25rem 1.15rem !important;
+  padding: 0.9rem 3.5rem 1.15rem 1.25rem !important;
   border-left: none;
   border-radius: 1rem 1rem 0 0;
-  flex-direction: row !important;
-  flex-wrap: wrap;
-  align-items: center !important;
-  justify-content: space-between !important;
-  gap: 0.5rem;
   position: relative;
 }
 .p-profile-main .card-header::after {
@@ -2401,6 +2415,14 @@ main:has(.p-hero) {
   border-radius: 2px;
 }
 
+.p-profile-main .card-header > div,
+.p-profile-secondary .card-header > div {
+  position: absolute;
+  top: 50%;
+  right: 1rem;
+  transform: translateY(-50%);
+}
+
 .p-profile-main .card-header a,
 .p-profile-secondary .card-header a {
   display: inline-flex;
@@ -2765,6 +2787,16 @@ main:has(.p-hero) {
   background: #ea580c;
 }
 
+.p-profile-empty-hint {
+  margin: 0.35rem 0 0;
+  padding: 0.45rem 0.75rem;
+  background: #f8fafc;
+  border: 1px dashed #cbd5e1;
+  border-radius: 6px;
+  color: #94a3b8;
+  font-size: 0.8rem;
+  font-style: italic;
+}
 
 .p-gallery-grid {
   display: grid;
@@ -3272,15 +3304,15 @@ main:has(.p-hero) {
   margin-top: 0.5rem;
   padding: 0.4rem 0.45rem 0.4rem 0.85rem;
   border-radius: 999px;
-  background: #fff;
-  border: 1px solid #fed7aa;
-  color: #9a3412;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  color: #1d4ed8;
   font-size: 0.85rem;
   font-weight: 600;
 }
 
 .p-upload__dropzone-summary i {
-  color: #f37000;
+  color: #2563eb;
 }
 
 .p-upload__dropzone-clear {
@@ -3293,15 +3325,15 @@ main:has(.p-hero) {
   padding: 0;
   border: 0;
   border-radius: 999px;
-  background: #fef3e6;
-  color: #c2410c;
+  background: #dbeafe;
+  color: #1d4ed8;
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
 }
 
 .p-upload__dropzone-clear:hover,
 .p-upload__dropzone-clear:focus-visible {
-  background: #f37000;
+  background: #2563eb;
   color: #fff;
   outline: none;
 }
@@ -3411,6 +3443,7 @@ main:has(.p-hero) {
 }
 
 .p-upload__item-thumb {
+  position: relative;
   flex-shrink: 0;
   width: 56px;
   height: 56px;
@@ -3422,6 +3455,17 @@ main:has(.p-hero) {
   justify-content: center;
 }
 
+.p-upload__item-thumb-check {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.38);
+  color: #4ade80;
+  font-size: 1.4rem;
+}
+
 .p-upload__item-thumb img {
   width: 100%;
   height: 100%;
@@ -3467,36 +3511,20 @@ main:has(.p-hero) {
   transition: width 0.15s linear;
 }
 
-.p-upload__item-status {
-  flex: 1 1 auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  padding: 0.35rem 0.65rem;
-  border-radius: 0.55rem;
-  font-size: 0.85rem;
+.p-upload__item-message {
+  font-size: 0.8rem;
   font-weight: 500;
-  word-break: break-word;
+  margin: 0;
 }
 
-.p-upload__item-status--success {
-  background: #f0fdf4;
+.p-upload__item-message--success {
   color: #15803d;
 }
 
-.p-upload__item-status--success i {
-  color: #16a34a;
-}
-
-.p-upload__item-status--error {
-  background: #fef2f2;
+.p-upload__item-message--error {
   color: #b91c1c;
 }
 
-.p-upload__item-status--error i {
-  color: #dc2626;
-}
-
 .p-upload__item--error {
   border-color: #fecaca;
   background: #fffafa;
diff --git a/build/gallery/templates/gallerymanage.column_col3.php b/build/gallery/templates/gallerymanage.column_col3.php
index 0ee76857c1..cdec8a4a3f 100644
--- a/build/gallery/templates/gallerymanage.column_col3.php
+++ b/build/gallery/templates/gallerymanage.column_col3.php
@@ -71,9 +71,9 @@ class="p-edit-subpage__back"
         <div class="p-gallery-manage__empty-icon" aria-hidden="true">
             <i class="fas fa-images"></i>
         </div>
-        <h2 class="p-gallery-manage__empty-title"><?= $words->get('gallery.manage.empty.title') ?></h2>
+        <h2 class="p-gallery-manage__empty-title"><?= $words->get('gallery.manage.empty.title') ?: 'No photos yet' ?></h2>
         <p class="p-gallery-manage__empty-text">
-            <?= $words->get('gallery.manage.empty.text') ?>
+            <?= $words->get('gallery.manage.empty.text') ?: 'Share your travels and memories with the community by uploading your first photos.' ?>
         </p>
         <button class="p-gallery-manage__empty-btn" type="button" data-goto-tab="upload">
             <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
@@ -233,14 +233,18 @@ class="p-upload__select"
 
             <div id="upload-size-error-tpl" class="p-upload__item p-upload__item--error d-none">
                 <div class="p-upload__item-thumb"><img src="" alt=""></div>
-                <div class="p-upload__item-status p-upload__item-status--error"></div>
+                <div class="p-upload__item-body">
+                    <div class="p-upload__item-message p-upload__item-message--error"></div>
+                </div>
             </div>
 
             <div id="upload-type-error-tpl" class="p-upload__item p-upload__item--error d-none">
                 <div class="p-upload__item-thumb p-upload__item-thumb--placeholder" aria-hidden="true">
                     <i class="fas fa-file"></i>
                 </div>
-                <div class="p-upload__item-status p-upload__item-status--error"></div>
+                <div class="p-upload__item-body">
+                    <div class="p-upload__item-message p-upload__item-message--error"></div>
+                </div>
             </div>
 
             <div id="upload-progressbars" class="p-upload__queue-list"></div>
@@ -259,6 +263,11 @@ class="p-upload__select"
     function activateTab(name) {
         const valid = ['photos', 'albums', 'upload'];
         const target = valid.includes(name) ? name : defaultTab;
+        if (hadUploads && target !== 'upload') {
+            location.href = location.pathname + '#' + target;
+            location.reload();
+            return;
+        }
         tabs.forEach(t => t.classList.toggle('p-gallery-tab-btn--active', t.dataset.tab === target));
         panels.forEach(p => p.classList.toggle('p-gallery-tab-panel--active', p.id === 'tab-' + target));
         if (history.replaceState) {
@@ -360,6 +369,7 @@ function updateManageButtons() {
     const typeTpl = document.getElementById('upload-type-error-tpl');
 
     let uploadClients = [];
+    let hadUploads = false;
 
     function updateDropzoneSummary() {
         const count = fileInput.files ? fileInput.files.length : 0;
@@ -460,18 +470,26 @@ function doUploadFile(i, file) {
             if (progEl) progEl.remove();
             let res;
             try { res = JSON.parse(client.responseText); } catch(e) { res = {success: false, error: 'Parse error', filename: file.name}; }
-            const statusDiv = document.createElement('div');
-            statusDiv.classList.add('p-upload__item-status');
+            const body = row && row.querySelector('.p-upload__item-body');
+            const msg = document.createElement('div');
+            msg.classList.add('p-upload__item-message');
             if (res.success) {
-                statusDiv.classList.add('p-upload__item-status--success');
-                statusDiv.innerHTML = '<i class="fas fa-circle-check" aria-hidden="true"></i> ' +
-                    res.filename + ' — <?= addslashes($words->get('gallery.upload.successful') ?: 'uploaded successfully') ?>';
+                const thumb = row.querySelector('.p-upload__item-thumb');
+                const check = document.createElement('div');
+                check.className = 'p-upload__item-thumb-check';
+                check.innerHTML = '<i class="fas fa-circle-check" aria-hidden="true"></i>';
+                thumb && thumb.appendChild(check);
+                const fnEl = row.querySelector('.p-upload__item-filename');
+                if (fnEl) fnEl.textContent = res.filename;
+                msg.classList.add('p-upload__item-message--success');
+                msg.textContent = <?= json_encode($words->get('gallery.upload.successful') ?: 'Image uploaded successfully.') ?>;
+                hadUploads = true;
             } else {
-                statusDiv.classList.add('p-upload__item-status--error');
-                statusDiv.innerHTML = '<i class="fas fa-circle-exclamation" aria-hidden="true"></i> ' +
+                msg.classList.add('p-upload__item-message--error');
+                msg.innerHTML = '<i class="fas fa-circle-exclamation" aria-hidden="true"></i> ' +
                     res.filename + ' — ' + (res.error || 'Error');
             }
-            row && row.append(statusDiv);
+            body && body.appendChild(msg);
             uploadClients = uploadClients.filter(c => c !== client);
             if (uploadClients.length === 0) resetUploadForm();
         };
@@ -480,8 +498,6 @@ function doUploadFile(i, file) {
             const p = Math.round(100 / e.total * e.loaded);
             const pct = document.getElementById('upload-pct-' + i);
             if (pct) { pct.style.width = p + '%'; pct.setAttribute('aria-valuenow', p); }
-            const fn = document.getElementById('upload-fn-' + i);
-            if (fn) fn.innerText = file.name + ' — ' + p + '%';
         };
 
         client.onabort = () => {
@@ -517,7 +533,9 @@ function getProgressTpl(i, file) {
     function getSizeErrorTpl(i, file) {
         const el = sizeTpl.cloneNode(true);
         el.id = 'upload-item-' + i;
-        el.children[1].innerText = file.name + ' — <?= addslashes($words->get('gallery.upload.size.error') ?: 'File too large') ?>';
+        const err = el.querySelector('.p-upload__item-message');
+        if (err) err.innerHTML = '<i class="fas fa-circle-exclamation" aria-hidden="true"></i> ' +
+            file.name + ' — <?= addslashes($words->get('gallery.upload.size.error') ?: 'File too large') ?>';
         setThumb(el, file);
         return el;
     }
@@ -525,7 +543,9 @@ function getSizeErrorTpl(i, file) {
     function getTypeErrorTpl(i, file) {
         const el = typeTpl.cloneNode(true);
         el.id = 'upload-item-' + i;
-        el.children[1].innerText = file.name + ' — <?= addslashes($words->get('gallery.upload.type.error') ?: 'Not an image') ?>';
+        const err = el.querySelector('.p-upload__item-message');
+        if (err) err.innerHTML = '<i class="fas fa-circle-exclamation" aria-hidden="true"></i> ' +
+            file.name + ' — <?= addslashes($words->get('gallery.upload.type.error') ?: 'Not an image') ?>';
         return el;
     }
 
diff --git a/src/Controller/ProfileController.php b/src/Controller/ProfileController.php
index d83db274f2..89369bcd74 100644
--- a/src/Controller/ProfileController.php
+++ b/src/Controller/ProfileController.php
@@ -164,13 +164,13 @@ public function setLocation(
 
         $address = $member->getActiveAddress();
 
-        $setLocationForm = $this->createForm(SetLocationType::class, [
+        $setLocationForm = $this->createForm(SetLocationType::class, $address ? [
             'fullname' => $address->getLocation()->getFullname(),
             'name' => $address->getLocation()->getName(),
             'geoname_id' => $address->getLocation()->getGeonameId(),
             'latitude' => $address->getLatitude(),
             'longitude' => $address->getLongitude(),
-        ]);
+        ] : []);
         $setLocationForm->handleRequest($request);
 
         if ($setLocationForm->isSubmitted() && $setLocationForm->isValid()) {
@@ -180,6 +180,11 @@ public function setLocation(
             /** @var Location $location */
             $location = $locationRepository->find($data['geoname_id']);
             if (null !== $location) {
+                if (!$address) {
+                    $address = new \App\Entity\Address();
+                    $address->setMember($member);
+                    $address->setActive(true);
+                }
                 $address->setLocation($location);
                 $address->setLatitude($data['latitude']);
                 $address->setLongitude($data['longitude']);
diff --git a/templates/gallery/upload.image.html.twig b/templates/gallery/upload.image.html.twig
index b77924bc1c..cbe48b27b3 100644
--- a/templates/gallery/upload.image.html.twig
+++ b/templates/gallery/upload.image.html.twig
@@ -145,18 +145,29 @@
                 if (progressEl) progressEl.remove();
 
                 let response = JSON.parse(client.responseText);
-                const statusDiv = document.createElement('div');
-                statusDiv.classList.add('p-upload__item-status');
+                const body = imageProgress.querySelector('.p-upload__item-body');
+                const msg = document.createElement('div');
+                msg.className = 'p-upload__item-message';
+
                 if (response.success) {
-                    statusDiv.classList.add('p-upload__item-status--success');
-                    statusDiv.innerHTML = '<i class="fas fa-circle-check" aria-hidden="true"></i> ' +
-                        response.filename + ' — {{ 'gallery.upload.successful'|trans }}';
+                    const thumb = imageProgress.querySelector('.p-upload__item-thumb');
+                    const check = document.createElement('div');
+                    check.className = 'p-upload__item-thumb-check';
+                    check.innerHTML = '<i class="fas fa-circle-check" aria-hidden="true"></i>';
+                    thumb.appendChild(check);
+
+                    const filenameEl = body.querySelector('.p-upload__item-filename');
+                    if (filenameEl) filenameEl.textContent = response.filename;
+
+                    msg.classList.add('p-upload__item-message--success');
+                    msg.textContent = '{{ 'gallery.upload.successful'|trans }}';
                 } else {
-                    statusDiv.classList.add('p-upload__item-status--error');
-                    statusDiv.innerHTML = '<i class="fas fa-circle-exclamation" aria-hidden="true"></i> ' +
+                    msg.classList.add('p-upload__item-message--error');
+                    msg.innerHTML = '<i class="fas fa-circle-exclamation" aria-hidden="true"></i> ' +
                         response.filename + ' — ' + response.error;
                 }
-                imageProgress.append(statusDiv);
+                body.appendChild(msg);
+
                 clients = clients.filter((value)=>value!==client);
                 if (clients.length === 0) {
                     resetForm();
@@ -168,9 +179,6 @@
                 const percent = document.getElementById('percent-' + index);
                 percent.style.width = p + "%";
                 percent.setAttribute('aria-value-now', p);
-
-                const filename = document.getElementById('filename-' + index);
-                filename.innerText = file.name + " — " + p + "%";
             };
 
             client.onabort = function(e) {
@@ -197,8 +205,9 @@
         function getFileTypeError(index, file) {
             const imageTypeError = imageTypeErrorTemplate.cloneNode(true);
             imageTypeError.id = 'image-progress-' + index;
-            const error = imageTypeError.children[1];
-            error.innerText = file.name + " — {{ 'gallery.upload.type.error'|trans }}";
+            const error = imageTypeError.querySelector('.p-upload__item-message');
+            error.innerHTML = '<i class="fas fa-circle-exclamation" aria-hidden="true"></i> ' +
+                file.name + " — {{ 'gallery.upload.type.error'|trans }}";
 
             return imageTypeError;
         }
@@ -206,8 +215,9 @@
         function getFileSizeErrorImage(index, file) {
             const imageSizeError = imageSizeErrorTemplate.cloneNode(true);
             imageSizeError.id = 'image-progress-' + index;
-            const error = imageSizeError.children[1];
-            error.innerText = file.name + " — {{ 'gallery.upload.size.error'|trans }}";
+            const error = imageSizeError.querySelector('.p-upload__item-message');
+            error.innerHTML = '<i class="fas fa-circle-exclamation" aria-hidden="true"></i> ' +
+                file.name + " — {{ 'gallery.upload.size.error'|trans }}";
 
             setImage(imageSizeError, index, file);
             return imageSizeError;
@@ -325,14 +335,18 @@
 
                 <div id="image-size-error" class="p-upload__item p-upload__item--error d-none">
                     <div class="p-upload__item-thumb"><img src="" alt=""></div>
-                    <div class="p-upload__item-status p-upload__item-status--error"></div>
+                    <div class="p-upload__item-body">
+                        <div class="p-upload__item-message p-upload__item-message--error"></div>
+                    </div>
                 </div>
 
                 <div id="image-type-error" class="p-upload__item p-upload__item--error d-none">
                     <div class="p-upload__item-thumb p-upload__item-thumb--placeholder" aria-hidden="true">
                         <i class="fas fa-file"></i>
                     </div>
-                    <div class="p-upload__item-status p-upload__item-status--error"></div>
+                    <div class="p-upload__item-body">
+                        <div class="p-upload__item-message p-upload__item-message--error"></div>
+                    </div>
                 </div>
 
                 <div id="progressbars" class="p-upload__queue-list"></div>
diff --git a/templates/profile/account.edit.html.twig b/templates/profile/account.edit.html.twig
index 5a94e7f96f..2a9c22a514 100644
--- a/templates/profile/account.edit.html.twig
+++ b/templates/profile/account.edit.html.twig
@@ -66,6 +66,9 @@
   <section class="p-account-section">
     <div class="p-pill-group">
       <span class="p-pill-group__label">{{ form.gender.vars.label|trans }}</span>
+      {% if form.gender.vars.help %}
+        <small class="p-account-section__help">{{ form.gender.vars.help|trans }}</small>
+      {% endif %}
       <div class="p-pill-group__options">
         {% for child in form.gender %}
           <div class="p-pill-option">
@@ -80,9 +83,6 @@
       </div>
     </div>
     {{ form_errors(form.gender) }}
-    {% if form.gender.vars.help %}
-      <small class="p-account-section__help">{{ form.gender.vars.help|trans }}</small>
-    {% endif %}
     <label class="p-account-toggle" for="{{ form.show_gender.vars.id }}">
       <input type="checkbox" id="{{ form.show_gender.vars.id }}" name="{{ form.show_gender.vars.full_name }}"
              class="p-preference-toggle__input"
diff --git a/templates/profile/content.html.twig b/templates/profile/content.html.twig
index 855cabeb38..63701f5d67 100644
--- a/templates/profile/content.html.twig
+++ b/templates/profile/content.html.twig
@@ -49,16 +49,16 @@
             {% if aboutMe|length != 0 %}
               {{ aboutMe|purify|nl2br }}
             {% elseif edit %}
-              <div class="h5 u:mt-8 u:mb-0">{{ 'profile.about.me'|trans({}, "messages", profile_language)|raw }}</div>
+              <p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>
             {% endif %}
             {% if edit %}
               <div class="h5 u:mt-8 u:mb-0">{{ 'profile.occupation'|trans({}, "messages", profile_language)|raw }}</div>
-              <div>{% if occupation|length != 0 %}{{ occupation|purify|nl2br }}{% endif %}</div>
+              {% if occupation|length != 0 %}<div>{{ occupation|purify|nl2br }}</div>{% else %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}
             {% endif %}
           </div>
           {% if offerHosts|length > 0 or edit %}
             <div class="stay h5 u:mt-8 u:mb-0">{{ 'profile.offer.hosts'|trans({}, "messages", profile_language)|raw }}</div>
-            {% if offerHosts|length > 0 %}<div>{{ profileTranslation['OfferHosts']|purify }}</div>{% endif %}
+            {% if offerHosts|length > 0 %}<div>{{ profileTranslation['OfferHosts']|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}
           {% endif %}
         </div>
       </div>
@@ -77,21 +77,25 @@
         <div class="card-body">
           <div class="card-text m-0">
             {% if not member.accommodation is null or edit %}
-              {% if edit and not address is same as(false) %}
+              {% if edit %}
                 <section class="p-accom-summary">
                   <div class="p-accom-summary__info">
                     <span class="p-accom-summary__eyebrow">
                       <i class="fas fa-map-marker-alt" aria-hidden="true"></i>
                       {{ 'profile.location'|trans({}, 'messages', profile_language) }}
                     </span>
-                    <h3 class="p-accom-summary__city">{{ address.location.name }}</h3>
-                    <p class="p-accom-summary__region">{{ address.location.admin1.name }} · {{ address.location.country.name }}</p>
+                    {% if not address is same as(false) %}
+                      <h3 class="p-accom-summary__city">{{ address.location.name }}</h3>
+                      <p class="p-accom-summary__region">{{ address.location.admin1.name }} · {{ address.location.country.name }}</p>
+                    {% endif %}
                     <a href="{{ url('profile_set_location', {username: member.username}) }}" class="p-accom-summary__change">
                       <i class="fas fa-location-arrow" aria-hidden="true"></i>
                       {{ 'profile.change.location'|trans({}, 'messages', profile_language) }}
                     </a>
                   </div>
-                  <div id="location-map-{{ profile_language }}" class="p-accom-summary__map" aria-label="{{ 'profile.location'|trans({}, 'messages', profile_language) }}"></div>
+                  {% if not address is same as(false) %}
+                    <div id="location-map-{{ profile_language }}" class="p-accom-summary__map" aria-label="{{ 'profile.location'|trans({}, 'messages', profile_language) }}"></div>
+                  {% endif %}
                 </section>
               {% endif %}
               <div class="p-accom-stats u:mb-8">
@@ -128,41 +132,45 @@
 
             {% if maxLengthOfStay|length != 0 or edit %}
               <div class="stay h5 u:mt-8 u:mb-0">{{ 'profile.max.length.of.stay'|trans({}, "messages", profile_language)|raw }}</div>
-              {% if maxLengthOfStay|length != 0 %}<div>{{ profileTranslation['MaxLengthOfStay']|purify }}</div>{% endif %}
+              {% if maxLengthOfStay|length != 0 %}<div>{{ profileTranslation['MaxLengthOfStay']|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}
             {% endif %}
             {% if iLiveWith|length > 0 or edit %}
               <div class="stay h5 u:mt-8 u:mb-0">{{ 'profile.i.live.with'|trans({}, "messages", profile_language)|raw }}</div>
-              {% if iLiveWith|length > 0 %}<div>{{ profileTranslation['ILiveWith']|purify }}</div>{% endif %}
+              {% if iLiveWith|length > 0 %}<div>{{ profileTranslation['ILiveWith']|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}
             {% endif %}
             {% if pleaseBring|length > 0 or edit %}
               <div class="stay h5 u:mt-8 u:mb-0">{{ 'profile.please.bring'|trans({}, "messages", profile_language)|raw }}</div>
-              {% if pleaseBring|length > 0 %}<div>{{ profileTranslation['PleaseBring']|purify }}</div>{% endif %}
+              {% if pleaseBring|length > 0 %}<div>{{ profileTranslation['PleaseBring']|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}
             {% endif %}
             {% if whereYouSleep|length > 0 or edit %}
               <div class="h5 u:mt-8 u:mb-0">{{ 'profile.where.you.sleep'|trans({}, "messages", profile_language)|raw }}</div>
-              <div>{% if whereYouSleep|length > 0 %}{{ whereYouSleep|purify }}{% endif %}</div>
+              {% if whereYouSleep|length > 0 %}<div>{{ whereYouSleep|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}
             {% endif %}
             {% if standardOffers|length > 0 or offerGuests|length > 0 or edit %}
               <div class="h5 u:mt-8 u:mb-0">{{ 'profile.offer.guests'|trans({}, "messages", profile_language)|raw }}</div>
+              {% if standardOffers|length > 0 or offerGuests|length > 0 %}
               <div>
                 {% for offer in standardOffers %}{{ ('ProfileTypicOffer_' ~ offer)|lower|trans({}, "messages", profile_language) }}<br>{% endfor %}
                 {% if offerGuests|length > 0 %}{{ offerGuests|purify }}{% endif %}
               </div>
+              {% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}
             {% endif %}
             {% if additionalInfo|length != 0 or edit %}
               <div class="h5 u:mt-8 u:mb-0">{{ 'profile.additional.information.for.guests'|trans({}, "messages", profile_language)|raw }}</div>
-              {% if additionalInfo|length != 0 %}{{ additionalInfo|purify }}{% endif %}
+              {% if additionalInfo|length != 0 %}{{ additionalInfo|purify }}{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}
             {% endif %}
             {% if gettingThere|length != 0 or edit %}
               <div class="stay h5 u:mt-8 u:mb-0">{{ 'profile.getting.there'|trans({}, "messages", profile_language)|raw }}</div>
-              {% if gettingThere|length != 0 %}<div>{{ profileTranslation['GettingThere']|purify }}</div>{% endif %}
+              {% if gettingThere|length != 0 %}<div>{{ profileTranslation['GettingThere']|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}
             {% endif %}
             {% if restrictions|length > 0 or houseRules|length > 0 or edit %}
               <div class="h5 u:mt-8">{{ 'profile.house.rules'|trans({}, "messages", profile_language)|raw }}</div>
+              {% if restrictions|length > 0 or houseRules|length > 0 %}
               <div>
                 {% for restriction in restrictions %}{{ ('restriction_' ~ restriction)|lower|trans({}, "messages", profile_language) }}<br>{% endfor %}
                 {% if houseRules|length > 0 %}{{ houseRules|purify }}{% endif %}
               </div>
+              {% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}
             {% endif %}
 
             {% if not edit and app.user != member and member.accommodation == constant('App\\Doctrine\\AccommodationType::YES') %}
@@ -271,13 +279,17 @@
         {% if interests %}
         <div class="card-body">
           <div class="card-text m-0">
-            {% if hobbies|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.hobbies'|trans({}, "messages", profile_language) }}</div><div>{{ hobbies|purify }}</div>{% endif %}
-            {% if books|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.books'|trans({}, "messages", profile_language) }}</div><div>{{ books|purify }}</div>{% endif %}
-            {% if music|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.music'|trans({}, "messages", profile_language) }}</div><div>{{ music|purify }}</div>{% endif %}
-            {% if movies|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.movies'|trans({}, "messages", profile_language) }}</div><div>{{ movies|purify }}</div>{% endif %}
-            {% if organizations|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.organizations'|trans({}, "messages", profile_language) }}</div><div>{{ organizations|purify }}</div>{% endif %}
+            {% if hobbies|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.hobbies'|trans({}, "messages", profile_language) }}</div>{% if hobbies|length != 0 %}<div>{{ hobbies|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}{% endif %}
+            {% if books|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.books'|trans({}, "messages", profile_language) }}</div>{% if books|length != 0 %}<div>{{ books|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}{% endif %}
+            {% if music|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.music'|trans({}, "messages", profile_language) }}</div>{% if music|length != 0 %}<div>{{ music|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}{% endif %}
+            {% if movies|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.movies'|trans({}, "messages", profile_language) }}</div>{% if movies|length != 0 %}<div>{{ movies|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}{% endif %}
+            {% if organizations|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.organizations'|trans({}, "messages", profile_language) }}</div>{% if organizations|length != 0 %}<div>{{ organizations|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}{% endif %}
           </div>
         </div>
+        {% elseif edit %}
+        <div class="card-body">
+          <p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>
+        </div>
         {% endif %}
       </div>
       {% endif %}
@@ -296,10 +308,14 @@
         {% if pastTrips|length > 0 or plannedTrips|length > 0 %}
         <div class="card-body">
           <div class="card-text m-0">
-            {% if pastTrips|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.past.trips'|trans({}, "messages", profile_language)|raw }}</div><div>{{ pastTrips|purify }}</div>{% endif %}
-            {% if plannedTrips|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.planned.trips'|trans({}, "messages", profile_language)|raw }}</div><div>{{ plannedTrips|purify }}</div>{% endif %}
+            {% if pastTrips|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.past.trips'|trans({}, "messages", profile_language)|raw }}</div>{% if pastTrips|length != 0 %}<div>{{ pastTrips|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}{% endif %}
+            {% if plannedTrips|length != 0 or edit %}<div class="h5 u:mt-8 u:mb-0">{{ 'profile.planned.trips'|trans({}, "messages", profile_language)|raw }}</div>{% if plannedTrips|length != 0 %}<div>{{ plannedTrips|purify }}</div>{% elseif edit %}<p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>{% endif %}{% endif %}
           </div>
         </div>
+        {% elseif edit %}
+        <div class="card-body">
+          <p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>
+        </div>
         {% endif %}
       </div>
       {% endif %}
@@ -332,6 +348,10 @@
             </a>
           {% endif %}
         </div>
+        {% elseif edit %}
+        <div class="card-body">
+          <p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>
+        </div>
         {% endif %}
       </div>
       {% endif %}
@@ -416,6 +436,10 @@
             </a>
           {% endif %}
         </div>
+        {% elseif edit %}
+        <div class="card-body">
+          <p class="p-profile-empty-hint">{{ 'profile.edit.section.empty'|trans }}</p>
+        </div>
         {% endif %}
       </div>
       {% endif %}
diff --git a/templates/profile/edit_subpage.html.twig b/templates/profile/edit_subpage.html.twig
index 4a49903892..d6058d3bfa 100644
--- a/templates/profile/edit_subpage.html.twig
+++ b/templates/profile/edit_subpage.html.twig
@@ -12,7 +12,7 @@
     <header class="p-edit-subpage__header">
       <a href="{{ url('profile_edit', {username: member.username}) }}"
          class="p-edit-subpage__back"
-aria-label="{{ 'profile.back'|trans }}">
+         aria-label="{{ 'profile.back'|trans }}">
         <i class="fas fa-chevron-left" aria-hidden="true"></i>
       </a>
       <div class="p-edit-subpage__heading">
diff --git a/templates/profile/set.location.html.twig b/templates/profile/set.location.html.twig
index 8fbee6aea2..c18d681e89 100644
--- a/templates/profile/set.location.html.twig
+++ b/templates/profile/set.location.html.twig
@@ -43,8 +43,8 @@
     {{ form_widget(form.latitude) }}
     {{ form_widget(form.longitude) }}
     {% set address = member.activeAddress %}
-    <input type="hidden" id="original_latitude" value="{{ address.latitude }}">
-    <input type="hidden" id="original_longitude" value="{{ address.longitude }}">
+    <input type="hidden" id="original_latitude" value="{{ address ? address.latitude : '' }}">
+    <input type="hidden" id="original_longitude" value="{{ address ? address.longitude : '' }}">
 
     <input type="hidden" id="marker_label_text" value="{{ 'profile.setlocation.marker'|trans }}">
     <div class="p-location-map" id="map">
diff --git a/templates/signup/finalize.html.twig b/templates/signup/finalize.html.twig
index 0ec5f9305e..fcaa705aa7 100644
--- a/templates/signup/finalize.html.twig
+++ b/templates/signup/finalize.html.twig
@@ -25,6 +25,9 @@
         <div class="o-form-group signup-finalize__gender">
         <div class="u:col-span-3"><label>{{ 'label.gender'|trans }}</label></div>
         <div class="u:col-span-3">{{ form_errors(finalize.gender) }}</div>
+        <div class="u:col-span-3">
+            <small id="{{ finalize.gender.vars.id }}_help" class="form-text text-muted">{{ finalize.gender.vars.help|trans }}</small>
+        </div>
         <div class="o-radio-button">
             <input type="radio" id="{{ finalize.gender.children[0].vars.id }}" name="{{ finalize.gender.children[0].vars.full_name }}"
                    class="o-radio-button__input" value="{{ finalize.gender.children[0].vars.value}}"
@@ -46,9 +49,6 @@
             >
             <label for="{{ finalize.gender.children[2].vars.id}}">{{ finalize.gender.children[2].vars.value}}</label>
         </div>
-        <div class="u:col-span-3">
-            <small id="{{ finalize.gender.vars.id }}_help" class="form-text text-muted">{{ finalize.gender.vars.help|trans }}</small>
-        </div>
         </div>
     </section>
     {% do finalize.gender.setRendered %}
diff --git a/translations/missing/profile.yaml b/translations/missing/profile.yaml
index 5147aa7f09..a972f22d82 100644
--- a/translations/missing/profile.yaml
+++ b/translations/missing/profile.yaml
@@ -406,3 +406,6 @@ help.email.change:
 profile.avatar.picture:
     - Profile picture
     - Headline on the profile picture update page
+profile.edit.section.empty:
+    - 'Nothing added yet. Click the edit button to add content.'
+    - Hint shown on the profile edit page when a subsection has no content yet.

From 6596544ca73073646e781dbf25c5316a812ca022 Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Wed, 13 May 2026 22:53:31 +0200
Subject: [PATCH 12/13] fix gallery

---
 assets/scss/_gallery.scss                     | 181 ++++++++++++
 .../components/_components.modals.css         | 232 +++++++++++++++
 .../tailwindcss/layouts/_layouts.general.css  |  80 ++++-
 assets/tailwindcss/layouts/_layouts.login.css | 135 ++++++---
 build/gallery/gallery.ctrl.php                |  20 +-
 build/gallery/pages/galleryset.page.php       |  43 +--
 .../pages/galleryusergalleries.page.php       |  33 ++-
 .../gallery/templates/galleries_overview.php  |  59 ++--
 .../templates/gallerymanage.column_col3.php   | 277 ++++++++++++++++--
 .../templates/galleryset.column_col3.php      | 106 +++++--
 10 files changed, 992 insertions(+), 174 deletions(-)

diff --git a/assets/scss/_gallery.scss b/assets/scss/_gallery.scss
index bedca449d9..6f964910dc 100644
--- a/assets/scss/_gallery.scss
+++ b/assets/scss/_gallery.scss
@@ -306,6 +306,187 @@
     }
   }
 
+  /* ── Gallery public show pages (show/user, show/sets) ── */
+  .p-gallery-show {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 1rem 2rem;
+  }
+
+  .p-gallery-manage__pagehead-actions {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: 0.5rem;
+  }
+
+  /* Album grid */
+  .p-gallery-albums {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 1rem;
+    margin-top: 1.25rem;
+  }
+
+  .p-gallery-album-card {
+    display: block;
+    text-decoration: none !important;
+    color: inherit;
+    border-radius: 0.85rem;
+    overflow: hidden;
+    border: 1px solid #eef2f7;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+    transition: box-shadow 0.15s ease;
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
+      color: inherit;
+    }
+  }
+
+  .p-gallery-album-card__thumb {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+    display: block;
+  }
+
+  .p-gallery-album-card__thumb-empty {
+    width: 100%;
+    aspect-ratio: 1;
+    background: #f1f5f9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #cbd5e1;
+    font-size: 2rem;
+  }
+
+  .p-gallery-album-card__info {
+    padding: 0.65rem 0.85rem;
+  }
+
+  .p-gallery-album-card__title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #1e293b;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .p-gallery-album-card__count {
+    font-size: 0.75rem;
+    color: #94a3b8;
+    margin: 0.2rem 0 0;
+  }
+
+  /* Photo grid inside an album */
+  .p-gallery-photo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 0.65rem;
+    margin-top: 1.25rem;
+  }
+
+  .p-gallery-photo-item {
+    position: relative;
+    aspect-ratio: 1;
+    border-radius: 0.65rem;
+    overflow: hidden;
+    background: #f1f5f9;
+
+    a.p-gallery-photo-item__link {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .p-gallery-photo-item__actions {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0.4rem 0.5rem;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
+    display: flex;
+    gap: 0.35rem;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+
+    .p-gallery-photo-item:hover & {
+      opacity: 1;
+    }
+  }
+
+  /* Persistent tap target — replaces hover-only actions on manage page */
+  .p-gallery-photo-item__menu-btn {
+    position: absolute;
+    top: 0.4rem;
+    right: 0.4rem;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    border-radius: 0.5rem;
+    background: rgba(15, 23, 42, 0.5);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    z-index: 2;
+    padding: 0;
+    transition: background 0.15s ease;
+    line-height: 1;
+
+    &:hover {
+      background: rgba(15, 23, 42, 0.75);
+    }
+  }
+
+  .p-gallery-photo-item__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 0.4rem;
+    font-size: 0.75rem;
+    border: 0;
+    cursor: pointer;
+    text-decoration: none !important;
+    padding: 0;
+    line-height: 1;
+
+    &--edit {
+      background: #f37000;
+      color: #fff !important;
+    }
+
+    &--remove {
+      background: rgba(255, 255, 255, 0.2);
+      color: #fff !important;
+      border: 1px solid rgba(255, 255, 255, 0.35);
+    }
+
+    &--danger {
+      background: #ef4444;
+      color: #fff !important;
+    }
+  }
+
   // legacy class kept for any other use; edit page uses .p-gallery-edit__preview
   .gallery-edit-preview {
     max-width: 100%;
diff --git a/assets/tailwindcss/components/_components.modals.css b/assets/tailwindcss/components/_components.modals.css
index 3395fd5a76..e3b855547b 100644
--- a/assets/tailwindcss/components/_components.modals.css
+++ b/assets/tailwindcss/components/_components.modals.css
@@ -1,3 +1,235 @@
+/* ── Photo action bottom sheet ── */
+
+.p-photo-sheet {
+  position: fixed;
+  inset: 0;
+  z-index: 9100;
+  display: flex;
+  align-items: flex-end;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.p-photo-sheet--open {
+  pointer-events: all;
+  visibility: visible;
+}
+
+.p-photo-sheet__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.28s ease;
+}
+
+.p-photo-sheet--open .p-photo-sheet__backdrop {
+  opacity: 1;
+}
+
+.p-photo-sheet__panel {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 480px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 1.5rem 1.5rem 0 0;
+  padding: 0.75rem 1.5rem 2.25rem;
+  transform: translateY(100%);
+  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
+  box-shadow: 0 -8px 48px rgba(15, 23, 42, 0.18);
+}
+
+.p-photo-sheet--open .p-photo-sheet__panel {
+  transform: translateY(0);
+}
+
+.p-photo-sheet__handle {
+  width: 3rem;
+  height: 4px;
+  background: #e2e8f0;
+  border-radius: 999px;
+  margin: 0 auto 1.25rem;
+}
+
+.p-photo-sheet__close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 2.1rem;
+  height: 2.1rem;
+  border: none;
+  background: #f1f5f9;
+  border-radius: 50%;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  transition: background 0.15s ease, color 0.15s ease;
+  padding: 0;
+}
+
+.p-photo-sheet__close:hover {
+  background: #e2e8f0;
+  color: #1e293b;
+}
+
+.p-photo-sheet__preview {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0.875rem;
+}
+
+.p-photo-sheet__img {
+  width: 90px;
+  height: 90px;
+  object-fit: cover;
+  border-radius: 0.85rem;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.14);
+}
+
+.p-photo-sheet__title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #1e293b;
+  text-align: center;
+  margin: 0 2rem 1.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.p-photo-sheet__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.p-photo-sheet__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.8rem 1rem;
+  border-radius: 0.85rem;
+  border: none;
+  font-family: inherit;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none !important;
+  transition: filter 0.15s ease, transform 0.1s ease;
+  line-height: 1;
+}
+
+.p-photo-sheet__btn:active {
+  transform: scale(0.97);
+}
+
+.p-photo-sheet__btn--primary {
+  background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%, #e06000 100%);
+  color: #fff !important;
+}
+
+.p-photo-sheet__btn--primary:hover {
+  filter: brightness(1.06);
+}
+
+.p-photo-sheet__btn--danger {
+  background: #fef2f2;
+  color: #dc2626 !important;
+  border: 1px solid #fecaca;
+}
+
+.p-photo-sheet__btn--danger:hover {
+  background: #fee2e2;
+}
+
+.p-photo-sheet__btn--danger-confirm {
+  background: #dc2626;
+  color: #fff !important;
+  border-color: #dc2626;
+}
+
+/* ── Confirm modal (reusable lightweight confirm dialog) ── */
+
+.c-confirm-modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.c-confirm-modal--open {
+  display: flex;
+}
+
+.c-confirm-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+
+.c-confirm-modal__dialog {
+  position: relative;
+  z-index: 1;
+  background: #fff;
+  border-radius: 1rem;
+  padding: 1.5rem 1.75rem;
+  max-width: 360px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.2);
+}
+
+.c-confirm-modal__text {
+  font-size: 0.9375rem;
+  color: #1e293b;
+  margin: 0 0 1.25rem;
+  line-height: 1.5;
+}
+
+.c-confirm-modal__actions {
+  display: flex;
+  gap: 0.625rem;
+  justify-content: flex-end;
+}
+
+.c-confirm-modal__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  border-radius: 999px;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+
+.c-confirm-modal__btn:hover { filter: brightness(0.93); }
+
+.c-confirm-modal__btn--cancel {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.c-confirm-modal__btn--danger {
+  background: #dc2626;
+  color: #fff;
+}
+
 /**************************
   Basic Modal Styles
 **************************/
diff --git a/assets/tailwindcss/layouts/_layouts.general.css b/assets/tailwindcss/layouts/_layouts.general.css
index bad730dca2..ae9163b39c 100644
--- a/assets/tailwindcss/layouts/_layouts.general.css
+++ b/assets/tailwindcss/layouts/_layouts.general.css
@@ -3555,13 +3555,7 @@ main:has(.p-hero) {
   flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem 1.25rem;
-  padding: 1rem 1.1rem;
-  border: 1px solid #eef2f7;
-  border-radius: 1rem;
-  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-  box-shadow:
-    0 1px 3px rgba(15, 23, 42, 0.04),
-    0 4px 12px rgba(15, 23, 42, 0.05);
+  padding: 0.5rem 0;
 }
 
 .p-gallery-manage__panel-row {
@@ -3802,7 +3796,7 @@ main:has(.p-hero) {
 #masonry-grid {
   --gallery-grid-gap: 0.875rem;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(6, 1fr);
   gap: var(--gallery-grid-gap);
   margin: 0 !important;
   padding: 0 !important;
@@ -4150,7 +4144,7 @@ main:has(.p-hero) {
   }
 
   .p-gallery-manage__panel {
-    padding: 0.85rem;
+    padding: 0.25rem 0;
   }
 
   .p-gallery-manage__buttons {
@@ -4173,8 +4167,8 @@ main:has(.p-hero) {
   }
 
   .p-gallery-manage__grid-wrap #masonry-grid {
-    --gallery-grid-gap: 0.75rem;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    --gallery-grid-gap: 0.5rem;
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
@@ -4248,6 +4242,70 @@ main:has(.p-hero) {
   to   { opacity: 1; transform: translateY(0); }
 }
 
+/* ── Album set sub-view (within Albums tab) ── */
+
+.p-gallery-set-view {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 1rem 1.5rem;
+}
+
+.p-gallery-set-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0 0.75rem;
+  font-size: 0.875rem;
+  color: #64748b;
+}
+
+.p-gallery-set-nav__back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #f37000;
+  font-weight: 600;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.p-gallery-set-nav__back:hover {
+  color: #d96400;
+}
+
+.p-gallery-set-nav__sep {
+  color: #cbd5e1;
+}
+
+.p-gallery-set-nav__title {
+  color: #1e293b;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.p-gallery-set-nav__delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: #94a3b8;
+  cursor: pointer;
+  margin-left: auto;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.p-gallery-set-nav__delete:hover {
+  background: #fef2f2;
+  color: #dc2626;
+}
+
 /* ── Albums tab ── */
 
 .p-gallery-albums-wrap {
diff --git a/assets/tailwindcss/layouts/_layouts.login.css b/assets/tailwindcss/layouts/_layouts.login.css
index f5088b4699..ead6629a0f 100644
--- a/assets/tailwindcss/layouts/_layouts.login.css
+++ b/assets/tailwindcss/layouts/_layouts.login.css
@@ -18,7 +18,9 @@
 .p-login__overlay {
   position: fixed;
   inset: 0;
-  background: linear-gradient(135deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.7) 100%);
+  background: rgba(5, 14, 28, 0.52);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
   z-index: 0;
   pointer-events: none;
 }
@@ -31,7 +33,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1.5rem 1rem 3rem;
+  padding: 5rem 1rem 3rem;
 }
 
 .p-login__flash {
@@ -41,10 +43,24 @@
 
 .p-login__shell {
   width: 100%;
-  max-width: 440px;
+  max-width: 460px;
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 1.5rem;
+  animation: loginShellIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes loginShellIn {
+  from { opacity: 0; transform: translateY(18px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Transparent navbar on login page ─────────────────── */
+.p-login__body #main_menu {
+  background: transparent !important;
+  box-shadow: none;
+  position: absolute;
+  width: 100%;
 }
 
 /* ── Intro (tagline above card) ────────────────────────── */
@@ -55,37 +71,45 @@
 }
 
 .p-login__title {
-  font-size: 1.625rem;
-  font-weight: 700;
-  line-height: 1.25;
-  margin: 0 0 0.5rem;
-  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+  font-size: 1.875rem;
+  font-weight: 800;
+  line-height: 1.2;
+  margin: 0 0 0.6rem;
+  letter-spacing: -0.02em;
 }
 
 .p-login__subtitle {
-  font-size: 0.9375rem;
-  color: rgba(255, 255, 255, 0.85);
-  line-height: 1.5;
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.55;
   margin: 0;
-  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
+  font-weight: 400;
 }
 
 /* ── Card ─────────────────────────────────────────────── */
 .p-login__card {
-  background: #fff;
-  border-radius: 1.25rem;
-  padding: 1.75rem 1.5rem;
+  background: rgba(255, 255, 255, 0.97);
+  border: 1px solid rgba(255, 255, 255, 0.75);
+  border-radius: 1.75rem;
+  padding: 2rem 1.85rem 1.75rem;
   box-shadow:
-    0 1px 3px rgba(15, 23, 42, 0.08),
-    0 12px 40px rgba(15, 23, 42, 0.25);
+    0 2px 4px rgba(15, 23, 42, 0.06),
+    0 32px 72px -8px rgba(15, 23, 42, 0.28);
+  backdrop-filter: blur(24px) saturate(180%);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+}
+
+@supports not (backdrop-filter: blur(1px)) {
+  .p-login__card { background: #fff; }
 }
 
 .p-login__card-title {
-  font-size: 1.375rem;
-  font-weight: 700;
-  color: #0f172a;
-  margin: 0 0 1.25rem;
-  text-align: center;
+  font-size: 1.3rem;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: #d97a2e;
+  margin: 0 0 1.15rem;
+  text-align: left;
 }
 
 /* ── Form ─────────────────────────────────────────────── */
@@ -106,15 +130,22 @@
 .p-login__form .o-input {
   height: 44px;
   font-size: 0.9375rem;
-  border-radius: 0.625rem;
-  border-color: #cbd5e1;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  border-radius: 0.875rem;
+  background: #f1f5f9;
+  border: 1.5px solid transparent;
+  color: #0f172a;
+  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.p-login__form .o-input::placeholder {
+  color: #94a3b8;
 }
 
 .p-login__form .o-input:focus {
-  border-color: #f37000;
-  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.15);
   outline: none;
+  background: #fff;
+  border-color: #f37000;
+  box-shadow: 0 0 0 4px rgba(243, 112, 0, 0.13);
 }
 
 /* Password field with toggle */
@@ -179,14 +210,30 @@
 /* Submit button */
 .p-login__submit {
   margin-top: 0.5rem;
-  border-radius: 0.75rem;
-  box-shadow: 0 2px 8px rgba(243, 112, 0, 0.25);
-  transition: filter 0.15s ease, box-shadow 0.15s ease;
+  border-radius: 999px;
+  border: none;
+  background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%, #e06000 100%);
+  box-shadow:
+    0 4px 14px rgba(243, 112, 0, 0.32),
+    0 1px 3px rgba(243, 112, 0, 0.15);
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: 0.01em;
+  transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
 
-.p-login__submit:hover {
-  filter: brightness(1.05);
-  box-shadow: 0 4px 14px rgba(243, 112, 0, 0.35);
+.p-login__submit:hover,
+.p-login__submit:focus {
+  filter: brightness(1.07);
+  box-shadow:
+    0 6px 20px rgba(243, 112, 0, 0.38),
+    0 2px 6px rgba(243, 112, 0, 0.18);
+  transform: translateY(-1px);
+}
+
+.p-login__submit:active {
+  transform: translateY(0);
+  filter: brightness(0.97);
 }
 
 /* ── Help / error messages ────────────────────────────── */
@@ -232,25 +279,25 @@
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  margin: 1.5rem 0 1rem;
-  color: #94a3b8;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  margin: 1.1rem 0 1rem;
+  padding-top: 0.9rem;
+  border-top: 1px solid rgba(15, 23, 42, 0.07);
+  color: #64748b;
+  font-size: 0.8125rem;
+  text-align: center;
+  justify-content: center;
 }
 
 .p-login__separator::before,
 .p-login__separator::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: #e2e8f0;
+  content: none;
 }
 
 .p-login__signup {
-  border-radius: 0.75rem;
+  border-radius: 999px;
   height: 44px;
   font-size: 0.9375rem;
+  font-weight: 700;
 }
 
 /* ── Responsive ───────────────────────────────────────── */
diff --git a/build/gallery/gallery.ctrl.php b/build/gallery/gallery.ctrl.php
index ccefbd26b5..8a03fbd5bf 100644
--- a/build/gallery/gallery.ctrl.php
+++ b/build/gallery/gallery.ctrl.php
@@ -319,6 +319,14 @@ public function manage()
         $page->statement = $this->_model->getLatestItems($this->member->id);
         $page->cnt_pictures = $page->statement ? $page->statement->numRows() : 0;
         $page->loggedInMember = $this->loggedInMember;
+        $setId = isset($_GET['set']) ? (int) $_GET['set'] : 0;
+        if ($setId > 0) {
+            $set = $this->_model->getGallery($setId);
+            if ($set && (int) $set->user_id_foreign === (int) $this->member->id) {
+                $page->activeSet = $set;
+                $page->setStatement = $this->_model->getLatestItems('', $setId);
+            }
+        }
         return $page;
     }
 
@@ -591,10 +599,18 @@ public function manageCallback($args, $action, $mem_redirect, $mem_resend)
             return false;
         }
         $vars = $args->post;
-        $request = $args->request;
         if (array_key_exists('imageId', $vars))
             $mem_redirect->message_gallery = count($vars['imageId']);
-        return $this->_model->updateGalleryProcess($vars);
+        $isDelete = isset($vars['deleteOrMove']) && $vars['deleteOrMove'] === 'Delete';
+        $result = $this->_model->updateGalleryProcess($vars);
+        if (!$isDelete && is_string($result)) {
+            // result is 'gallery/show/sets/{id}' — redirect to manage sub-view instead
+            $setId = (int) str_replace('gallery/show/sets/', '', $result);
+            if ($setId > 0) {
+                return 'gallery/manage?set=' . $setId;
+            }
+        }
+        return 'gallery/manage?tab=photos';
     }
 
     public function updateGalleryCallback($args, $action, $mem_redirect, $mem_resend)
diff --git a/build/gallery/pages/galleryset.page.php b/build/gallery/pages/galleryset.page.php
index 19d2ad8208..aa2a86391e 100644
--- a/build/gallery/pages/galleryset.page.php
+++ b/build/gallery/pages/galleryset.page.php
@@ -30,51 +30,18 @@ protected function teaserHeadline() {
     }
 
     #[\Override]
-    protected function teaser() {
-        ?>
-        <div>
-            <div>
-            <?=$this->breadcrumbs()?>
-            </div>
-            <div class="w-100">
-                <?=$this->teaserHeadline()?>
-            </div>
-        </div>
-        <?php
-    }
-
-    #[\Override]
-    protected function getTopmenuActiveItem()
-    {
-        return 'gallery';
-    }
+    protected function teaser() {}
 
     #[\Override]
-    protected function getSubmenuActiveItem()
+    protected function getSubmenuItems()
     {
-        if ($this->upload) return 'upload';
-        return 'thumbnails';
+        return [];
     }
 
     #[\Override]
-    protected function getSubmenuItems()
+    protected function getTopmenuActiveItem()
     {
-        $username = $this->member->Username;
-        $member = $this->member;
-        $gallery = $this->gallery;
-        $words = $this->getWords();
-        $ww = $this->ww;
-        $wwsilent = $this->wwsilent;
-
-        $tt = [];
-            $tt[]= ['albums', 'gallery/show/user/'. $username .'/sets', $ww->GalleryTitleSets];
-            // $tt[]= array('details', 'gallery/show/sets/'.$gallery->id.'/details/'.$this->page.'', $ww->GalleryDetails);
-        if ($this->myself) {
-            $tt[]= ["manage", 'gallery/manage', $ww->GalleryManage, 'manage'];
-            $tt[]= ["upload", 'gallery/upload_multiple', $ww->GalleryUpload, 'upload'];
-            $tt[]= ["delete", 'gallery/show/sets/'.$gallery->id.'/delete', $ww->GalleryDelete, 'delete'];
-        }
-        return($tt) ;
+        return 'gallery';
     }
 
     protected function column_col3() {
diff --git a/build/gallery/pages/galleryusergalleries.page.php b/build/gallery/pages/galleryusergalleries.page.php
index f9e398b011..5d9834595c 100644
--- a/build/gallery/pages/galleryusergalleries.page.php
+++ b/build/gallery/pages/galleryusergalleries.page.php
@@ -18,6 +18,9 @@ protected function init()
         $this->addLateLoadScriptFile('build/gallery.js');
     }
 
+    #[\Override]
+    protected function teaser() {}
+
     #[\Override]
     protected function getSubmenuActiveItem()
     {
@@ -42,13 +45,39 @@ public function leftSidebar()
 
     #[\Override]
     protected function column_col3() {
+        $member = $this->member;
         $statement = $this->statement;
         $galleries = $this->galleries;
         $words = new MOD_words();
         ?>
-        <h2><?php echo $words->getFormatted('GalleryTitleSets'); ?></h2>
+        <div class="p-gallery-show">
+            <div class="p-gallery-manage__pagehead">
+                <div class="p-gallery-manage__pagehead-row">
+                    <div class="p-gallery-manage__pagehead-copy">
+                        <div class="p-gallery-manage__pagehead-heading">
+                            <a href="members/<?= htmlspecialchars((string) $member->Username) ?>"
+                               class="p-edit-subpage__back"
+                               aria-label="Back to profile">
+                                <i class="fas fa-chevron-left" aria-hidden="true"></i>
+                            </a>
+                            <div>
+                                <p class="p-gallery-manage__pagehead-eyebrow"><?= htmlspecialchars((string) $member->Username) ?></p>
+                                <h1 class="p-gallery-manage__pagehead-title"><?= $words->get('Gallery') ?></h1>
+                            </div>
+                        </div>
+                    </div>
+                    <?php if ($this->myself): ?>
+                    <div class="p-gallery-manage__pagehead-actions">
+                        <a href="gallery/manage" class="o-button">
+                            <i class="fas fa-cog" aria-hidden="true"></i>
+                        </a>
+                    </div>
+                    <?php endif; ?>
+                </div>
+            </div>
+            <?php require SCRIPT_BASE . 'build/gallery/templates/galleries_overview.php'; ?>
+        </div>
         <?php
-        require SCRIPT_BASE . 'build/gallery/templates/galleries_overview.php';
     }
 
 }
diff --git a/build/gallery/templates/galleries_overview.php b/build/gallery/templates/galleries_overview.php
index 876afd382c..fcc126ef4f 100644
--- a/build/gallery/templates/galleries_overview.php
+++ b/build/gallery/templates/galleries_overview.php
@@ -2,7 +2,6 @@
 $words = new MOD_words();
 $Gallery = new GalleryModel;
 
-// Show the galleries/photosets
 if ($galleries) {
     $request = PRequest::get()->request;
     $requestStr = implode('/', $request);
@@ -13,47 +12,51 @@
     } else {
         $page = 1;
     }
-    if (!isset($itemsPerPage)) $itemsPerPage = 12;
+    if (!isset($itemsPerPage)) $itemsPerPage = 24;
     $p = PFunctions::paginate($galleries, $page, $itemsPerPage);
     $galleriesonpage = $p[0];
-
-    ?>
-<div class="row">
+?>
+<div class="p-gallery-albums">
     <?php foreach ($galleriesonpage as $g) {
-    	static $ii = 0;
         $d = $Gallery->getLatestGalleryItem($g->id);
-        $s = $Gallery->getGalleryItems($g->id,1);
+        $s = $Gallery->getGalleryItems($g->id, 1);
         $username = MOD_member::getUserHandle($g->user_id_foreign);
-        $this->myself = ($this->loggedInMember && $username == $this->loggedInMember->Username);
+        $isOwn = ($this->loggedInMember && $username == $this->loggedInMember->Username);
         $num_rows = $s ?: 0;
-        // Only show the galleries with pictures. The belonging user might see them anyway.
-    	if ($d || $this->myself) {
-    	?>
-        <div class="col-12 col-sm-6 col-md-3">
-            <div class="gallery_container d-block">
-                <a href="gallery/show/sets/<?=$g->id?>">
-                    <img class="mb-3 border-2" src="<?=($d) ? 'gallery/thumbimg?id='.$d : 'images/lightview/blank.gif'?>" alt="image" style="width:100px; height:100px; margin: auto; object-fit: cover;"/>
-                    <span class="alert alert-info p-1" style="position: absolute;"><i class="fa fa-image mr-1"></i><?=$num_rows?></span>
-                </a>
-            <h4 class="mb-0"><a href="gallery/show/sets/<?=$g->id?>"><?= htmlspecialchars((string) $g->title)?></a></h4>
+        $albumHref = (!empty($inManage) && $isOwn)
+            ? 'gallery/manage?set=' . $g->id
+            : 'gallery/show/sets/' . $g->id;
+        if ($d || $isOwn) { ?>
+    <a href="<?= $albumHref ?>" class="p-gallery-album-card">
+        <?php if ($d): ?>
+            <img class="p-gallery-album-card__thumb"
+                 src="gallery/thumbimg?id=<?= $d ?>&t=2"
+                 alt="<?= htmlspecialchars((string) $g->title) ?>"
+                 loading="lazy">
+        <?php else: ?>
+            <div class="p-gallery-album-card__thumb-empty">
+                <i class="fas fa-images" aria-hidden="true"></i>
             </div>
+        <?php endif; ?>
+        <div class="p-gallery-album-card__info">
+            <p class="p-gallery-album-card__title"><?= htmlspecialchars((string) $g->title) ?></p>
+            <p class="p-gallery-album-card__count">
+                <i class="fas fa-image" aria-hidden="true"></i> <?= $num_rows ?>
+            </p>
         </div>
-        <?php
-        }
-    }
-?>
+    </a>
+    <?php } } ?>
 </div>
-    <div class="w-100"></div>
-    <div class="col-12 mt-3">
-        <?php
+<div class="u:mt-16">
+    <?php
     if (isset($emptyPhotosets)) echo $emptyPhotosets;
     $pages = $p[1];
     $maxPage = $p[2];
     $currentPage = $page;
     if (isset($requestStrNew)) $requestStr = $requestStrNew;
-    $request = $requestStr.'/=page%d';
+    $request = $requestStr . '/=page%d';
     require 'pages.php'; ?>
-    </div>
+</div>
 <?php } else { ?>
-    <p><?= $words->get('gallery.no.albums'); ?></p>
+    <p class="p-profile-empty-hint"><?= $words->get('gallery.no.albums') ?></p>
 <?php } ?>
diff --git a/build/gallery/templates/gallerymanage.column_col3.php b/build/gallery/templates/gallerymanage.column_col3.php
index cdec8a4a3f..30e0b44b42 100644
--- a/build/gallery/templates/gallerymanage.column_col3.php
+++ b/build/gallery/templates/gallerymanage.column_col3.php
@@ -17,7 +17,10 @@
 $maxUploadBytes = min($gmkToBytes(ini_get('upload_max_filesize')), $gmkToBytes(ini_get('post_max_size')));
 $maxUploadMB = max(1, (int) round($maxUploadBytes / 1048576));
 
-$defaultTab = $hasPhotos ? 'photos' : 'upload';
+$activeSet = $this->activeSet ?? null;
+$setStatement = $this->setStatement ?? null;
+$forcedTab = isset($_GET['tab']) ? $_GET['tab'] : null;
+$defaultTab = $activeSet ? 'albums' : ($forcedTab ?? ($hasPhotos ? 'photos' : 'upload'));
 ?>
 
 <div class="p-gallery-manage__pagehead">
@@ -160,11 +163,106 @@ class="p-gallery-manage__btn p-gallery-manage__btn--danger"
 
 <?php /* ── ALBUMS TAB ── */ ?>
 <div id="tab-albums" class="p-gallery-tab-panel">
+<?php if ($activeSet): ?>
+    <div class="p-gallery-set-view">
+        <div class="p-gallery-set-nav">
+            <a href="/gallery/manage?tab=albums" class="p-gallery-set-nav__back">
+                <i class="fas fa-chevron-left" aria-hidden="true"></i>
+                <?= $words->get('GalleryTitleSets') ?: 'Albums' ?>
+            </a>
+            <span class="p-gallery-set-nav__sep" aria-hidden="true">/</span>
+            <span class="p-gallery-set-nav__title"><?= htmlspecialchars((string) $activeSet->title) ?></span>
+            <button type="button"
+                    class="p-gallery-set-nav__delete"
+                    data-set-id="<?= (int) $activeSet->id ?>"
+                    data-set-title="<?= htmlspecialchars((string) $activeSet->title, ENT_QUOTES, 'UTF-8') ?>">
+                <i class="fas fa-trash" aria-hidden="true"></i>
+            </button>
+        </div>
+
+        <!-- Delete album modal -->
+        <div id="delete-album-modal" class="c-confirm-modal" aria-hidden="true" role="dialog">
+            <div class="c-confirm-modal__backdrop"></div>
+            <div class="c-confirm-modal__dialog">
+                <p class="c-confirm-modal__text">
+                    <?= $words->get('gallery.album.delete.confirm') ?: 'Delete this album? Photos will not be deleted.' ?>
+                </p>
+                <div class="c-confirm-modal__actions">
+                    <button type="button" class="c-confirm-modal__btn c-confirm-modal__btn--cancel" id="delete-album-cancel">
+                        <?= $words->get('Cancel') ?: 'Cancel' ?>
+                    </button>
+                    <button type="button" class="c-confirm-modal__btn c-confirm-modal__btn--danger" id="delete-album-confirm">
+                        <i class="fas fa-trash" aria-hidden="true"></i>
+                        <?= $words->get('Delete') ?: 'Delete' ?>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <?php if ($setStatement): ?>
+        <div class="p-gallery-photo-grid" data-gallery="set-<?= $activeSet->id ?>">
+            <?php foreach ($setStatement as $d): ?>
+            <div class="p-gallery-photo-item"
+                 data-photo-id="<?= (int) $d->id ?>"
+                 data-photo-title="<?= htmlspecialchars((string) $d->title, ENT_QUOTES, 'UTF-8') ?>"
+                 data-photo-thumb="gallery/thumbimg?id=<?= $d->id ?>&t=2"
+                 data-photo-edit="gallery/show/image/<?= $d->id ?>/edit"
+                 data-photo-delete="gallery/show/image/<?= $d->id ?>/delete">
+                <a href="gallery/img?id=<?= $d->id ?>"
+                   class="p-gallery-photo-item__link"
+                   data-toggle="lightbox"
+                   data-type="image"
+                   data-title="<?= htmlspecialchars((string) $d->title) ?>"
+                   data-gallery="set-<?= $activeSet->id ?>">
+                    <img src="gallery/thumbimg?id=<?= $d->id ?>&t=2"
+                         alt="<?= htmlspecialchars((string) $d->title) ?>"
+                         loading="lazy">
+                </a>
+                <button type="button"
+                        class="p-gallery-photo-item__menu-btn"
+                        aria-label="<?= htmlspecialchars($words->get('Options') ?: 'Options', ENT_QUOTES, 'UTF-8') ?>">
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                </button>
+            </div>
+            <?php endforeach; ?>
+        </div>
+
+        <!-- Photo action sheet (single instance, shared across all photos) -->
+        <div id="photo-action-sheet" class="p-photo-sheet" aria-hidden="true" role="dialog" aria-modal="true"
+             aria-label="<?= htmlspecialchars($words->get('Options') ?: 'Photo options', ENT_QUOTES, 'UTF-8') ?>">
+            <div class="p-photo-sheet__backdrop"></div>
+            <div class="p-photo-sheet__panel">
+                <div class="p-photo-sheet__handle" aria-hidden="true"></div>
+                <button type="button" class="p-photo-sheet__close" aria-label="<?= htmlspecialchars($words->get('Close') ?: 'Close', ENT_QUOTES, 'UTF-8') ?>">
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                </button>
+                <div class="p-photo-sheet__preview">
+                    <img id="photo-sheet-thumb" src="" alt="" class="p-photo-sheet__img">
+                </div>
+                <p id="photo-sheet-title" class="p-photo-sheet__title"></p>
+                <div class="p-photo-sheet__actions">
+                    <a id="photo-sheet-edit" href="#" class="p-photo-sheet__btn p-photo-sheet__btn--primary">
+                        <i class="fas fa-edit" aria-hidden="true"></i>
+                        <span><?= htmlspecialchars($words->get('Edit') ?: 'Edit', ENT_QUOTES, 'UTF-8') ?></span>
+                    </a>
+                    <button type="button" id="photo-sheet-delete" class="p-photo-sheet__btn p-photo-sheet__btn--danger">
+                        <i class="fas fa-trash" aria-hidden="true"></i>
+                        <span><?= htmlspecialchars($words->get('Delete') ?: 'Delete', ENT_QUOTES, 'UTF-8') ?></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <?php else: ?>
+        <p class="p-profile-empty-hint" style="margin-top:1rem;"><?= $words->get('gallery.manage.empty.title') ?: 'No photos in this album yet.' ?></p>
+        <?php endif; ?>
+    </div>
+<?php else: ?>
     <div class="p-gallery-albums-wrap">
-        <?php
+        <?php $inManage = true;
             require SCRIPT_BASE . 'build/gallery/templates/galleries_overview.php';
         ?>
     </div>
+<?php endif; ?>
 </div>
 
 <?php /* ── UPLOAD TAB ── */ ?>
@@ -259,6 +357,7 @@ class="p-upload__select"
     const tabs = document.querySelectorAll('.p-gallery-tab-btn');
     const panels = document.querySelectorAll('.p-gallery-tab-panel');
     const defaultTab = <?= json_encode($defaultTab) ?>;
+    let hadUploads = false;
 
     function activateTab(name) {
         const valid = ['photos', 'albums', 'upload'];
@@ -284,21 +383,31 @@ function activateTab(name) {
     const initialHash = location.hash.replace('#', '');
     activateTab(initialHash || defaultTab);
 
+    /* Clean up ?tab= from URL after activation */
+    if (location.search.includes('tab=') && history.replaceState) {
+        history.replaceState(null, '', location.pathname + '#' + (initialHash || defaultTab));
+    }
+
+
     /* ── Manage form (Photos tab) ── */
     const manageForm = document.getElementById('manage');
     if (manageForm) {
-        const deleteImages = document.getElementById('deleteImages');
-        const moveImages = document.getElementById('moveImages');
-        const selectAll = document.getElementById('selectAll');
-        const checkboxes = document.getElementsByName('imageId[]');
-        const deleteOrMove = document.getElementById('deleteOrMove');
-        const newOrExistingAlbum = document.getElementsByName('newOrExistingAlbum');
+        const deleteImages  = document.getElementById('deleteImages');
+        const moveImages    = document.getElementById('moveImages');
+        const selectAll     = document.getElementById('selectAll');
+        const checkboxes    = document.getElementsByName('imageId[]');
+        const deleteOrMove  = document.getElementById('deleteOrMove');
+        const existingRadio = document.getElementById('existingAlbum');  // may be null (no albums yet)
+        const newRadio      = document.getElementById('newAlbum');
         const newAlbumTitle = document.getElementById('newAlbumTitle');
+        const albumSelect   = document.getElementById('albums');
 
+        /* Auto-select the "New" radio when user types in the text field */
         if (newAlbumTitle) {
-            newAlbumTitle.addEventListener('change', () => {
-                if (newOrExistingAlbum[0]) newOrExistingAlbum[0].checked = false;
-                if (newOrExistingAlbum[1]) newOrExistingAlbum[1].checked = true;
+            newAlbumTitle.addEventListener('input', () => {
+                if (newRadio) newRadio.checked = true;
+                if (existingRadio) existingRadio.checked = false;
+                updateManageButtons();
             });
         }
 
@@ -312,17 +421,17 @@ function activateTab(name) {
         moveImages && moveImages.addEventListener('click', (e) => {
             e.preventDefault();
             if (moveImages.disabled) return;
-            if ((!newOrExistingAlbum[0] || !newOrExistingAlbum[0].checked) &&
-                (!newOrExistingAlbum[1] || !newOrExistingAlbum[1].checked)) {
+            const existingChosen = existingRadio && existingRadio.checked;
+            const newChosen      = newRadio && newRadio.checked;
+            if (!existingChosen && !newChosen) {
                 alert(<?= json_encode($words->get('gallery.move.not.possible')) ?>);
                 return;
             }
-            const albums = document.getElementById('albums');
-            if (newOrExistingAlbum[0] && newOrExistingAlbum[0].checked && albums && albums.value === '') {
+            if (existingChosen && albumSelect && albumSelect.value === '') {
                 alert(<?= json_encode($words->get('gallery.no.album.selected')) ?>);
                 return;
             }
-            if (newOrExistingAlbum[1] && newOrExistingAlbum[1].checked && newAlbumTitle && newAlbumTitle.value === '') {
+            if (newChosen && newAlbumTitle && newAlbumTitle.value.trim() === '') {
                 alert(<?= json_encode($words->get('gallery.no.album.given')) ?>);
                 return;
             }
@@ -339,10 +448,29 @@ function activateTab(name) {
 
         checkboxes.forEach(cb => cb.addEventListener('change', updateManageButtons));
 
+        if (albumSelect) {
+            albumSelect.addEventListener('change', () => {
+                if (albumSelect.value !== '') {
+                    if (existingRadio) existingRadio.checked = true;
+                    if (newRadio) newRadio.checked = false;
+                }
+                updateManageButtons();
+            });
+        }
+
+        if (existingRadio) existingRadio.addEventListener('change', updateManageButtons);
+        if (newRadio)      newRadio.addEventListener('change', updateManageButtons);
+
         function updateManageButtons() {
-            const hasSelection = Array.from(checkboxes).some(cb => cb.checked);
+            const hasSelection      = Array.from(checkboxes).some(cb => cb.checked);
             if (deleteImages) deleteImages.disabled = !hasSelection;
-            if (moveImages) moveImages.disabled = !hasSelection;
+
+            const existingAlbumChosen = existingRadio && existingRadio.checked && albumSelect && albumSelect.value !== '';
+            const newAlbumChosen      = newRadio && newRadio.checked && newAlbumTitle && newAlbumTitle.value.trim() !== '';
+            const albumReady          = existingAlbumChosen || newAlbumChosen;
+
+            if (moveImages) moveImages.disabled = !(hasSelection && albumReady);
+
             if (selectAll && checkboxes.length > 0) {
                 selectAll.checked = Array.from(checkboxes).every(cb => cb.checked);
             }
@@ -369,7 +497,6 @@ function updateManageButtons() {
     const typeTpl = document.getElementById('upload-type-error-tpl');
 
     let uploadClients = [];
-    let hadUploads = false;
 
     function updateDropzoneSummary() {
         const count = fileInput.files ? fileInput.files.length : 0;
@@ -560,5 +687,117 @@ function resetUploadForm() {
         abortBtn.disabled = true;
     }
 
+    /* ── Photo action sheet ── */
+    const photoSheet = document.getElementById('photo-action-sheet');
+    if (photoSheet) {
+        const sheetPanel   = photoSheet.querySelector('.p-photo-sheet__panel');
+        const sheetBackdrop= photoSheet.querySelector('.p-photo-sheet__backdrop');
+        const sheetClose   = photoSheet.querySelector('.p-photo-sheet__close');
+        const sheetThumb   = document.getElementById('photo-sheet-thumb');
+        const sheetTitle   = document.getElementById('photo-sheet-title');
+        const sheetEdit    = document.getElementById('photo-sheet-edit');
+        const sheetDelete  = document.getElementById('photo-sheet-delete');
+        const lblDelete    = <?= json_encode($words->get('Delete') ?: 'Delete') ?>;
+        const lblConfirm   = <?= json_encode($words->get('gallery.photo.delete.confirm') ?: 'Confirm delete') ?>;
+        const lblDeleting  = <?= json_encode($words->get('gallery.photo.deleting') ?: 'Deleting…') ?>;
+
+        let currentItem = null;
+        let confirmPending = false;
+
+        function openSheet(item) {
+            currentItem = item;
+            confirmPending = false;
+            sheetDelete.disabled = false;
+            sheetDelete.classList.remove('p-photo-sheet__btn--danger-confirm');
+            sheetDelete.innerHTML = '<i class="fas fa-trash" aria-hidden="true"></i><span>' + lblDelete + '</span>';
+            sheetThumb.src  = item.dataset.photoThumb;
+            sheetThumb.alt  = item.dataset.photoTitle;
+            sheetTitle.textContent = item.dataset.photoTitle;
+            sheetEdit.href  = item.dataset.photoEdit;
+            photoSheet.setAttribute('aria-hidden', 'false');
+            photoSheet.classList.add('p-photo-sheet--open');
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeSheet() {
+            photoSheet.setAttribute('aria-hidden', 'true');
+            photoSheet.classList.remove('p-photo-sheet--open');
+            document.body.style.overflow = '';
+            confirmPending = false;
+            currentItem = null;
+        }
+
+        document.querySelectorAll('.p-gallery-photo-item__menu-btn').forEach(btn => {
+            btn.addEventListener('click', e => {
+                e.stopPropagation();
+                openSheet(btn.closest('.p-gallery-photo-item'));
+            });
+        });
+
+        sheetClose.addEventListener('click', closeSheet);
+        sheetBackdrop.addEventListener('click', closeSheet);
+
+        sheetDelete.addEventListener('click', () => {
+            if (!confirmPending) {
+                confirmPending = true;
+                sheetDelete.classList.add('p-photo-sheet__btn--danger-confirm');
+                sheetDelete.innerHTML = '<i class="fas fa-exclamation-triangle" aria-hidden="true"></i><span>' + lblConfirm + '</span>';
+                return;
+            }
+            const item = currentItem;
+            sheetDelete.disabled = true;
+            sheetDelete.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i><span>' + lblDeleting + '</span>';
+            fetch(item.dataset.photoDelete, { credentials: 'same-origin' })
+                .then(() => {
+                    item.style.transition = 'opacity 0.25s ease, transform 0.25s ease';
+                    item.style.opacity = '0';
+                    item.style.transform = 'scale(0.8)';
+                    setTimeout(() => item.remove(), 260);
+                    closeSheet();
+                })
+                .catch(() => {
+                    sheetDelete.disabled = false;
+                    sheetDelete.classList.remove('p-photo-sheet__btn--danger-confirm');
+                    sheetDelete.innerHTML = '<i class="fas fa-trash" aria-hidden="true"></i><span>' + lblDelete + '</span>';
+                    confirmPending = false;
+                });
+        });
+
+        /* Swipe down to dismiss */
+        let touchStartY = 0;
+        sheetPanel.addEventListener('touchstart', e => { touchStartY = e.touches[0].clientY; }, { passive: true });
+        sheetPanel.addEventListener('touchmove', e => { if (e.touches[0].clientY - touchStartY > 60) closeSheet(); }, { passive: true });
+    }
+
+    /* ── Delete album modal ── */
+    const deleteAlbumModal = document.getElementById('delete-album-modal');
+    const deleteAlbumConfirm = document.getElementById('delete-album-confirm');
+    const deleteAlbumCancel = document.getElementById('delete-album-cancel');
+    const deleteAlbumBtn = document.querySelector('.p-gallery-set-nav__delete');
+
+    if (deleteAlbumBtn && deleteAlbumModal) {
+        const openModal = () => {
+            deleteAlbumModal.setAttribute('aria-hidden', 'false');
+            deleteAlbumModal.classList.add('c-confirm-modal--open');
+        };
+        const closeModal = () => {
+            deleteAlbumModal.setAttribute('aria-hidden', 'true');
+            deleteAlbumModal.classList.remove('c-confirm-modal--open');
+        };
+
+        deleteAlbumBtn.addEventListener('click', openModal);
+        deleteAlbumCancel.addEventListener('click', closeModal);
+        deleteAlbumModal.querySelector('.c-confirm-modal__backdrop').addEventListener('click', closeModal);
+
+        deleteAlbumConfirm.addEventListener('click', () => {
+            const setId = deleteAlbumBtn.dataset.setId;
+            deleteAlbumConfirm.disabled = true;
+            deleteAlbumConfirm.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i>';
+            fetch('gallery/show/sets/' + setId + '/delete/true', { credentials: 'same-origin' })
+                .then(() => { window.location.href = '/gallery/manage?tab=albums'; })
+                .catch(() => { window.location.href = '/gallery/manage?tab=albums'; });
+        });
+    }
+
 })();
 </script>
diff --git a/build/gallery/templates/galleryset.column_col3.php b/build/gallery/templates/galleryset.column_col3.php
index 564f404c5b..7b8bfd907f 100755
--- a/build/gallery/templates/galleryset.column_col3.php
+++ b/build/gallery/templates/galleryset.column_col3.php
@@ -1,44 +1,90 @@
-<div id="masonry-grid" class="row">
-        <?php
-/* Template for showing the col3-content of a single gallery */
-
+<?php
 $g = $gallery;
 $g->user_handle = MOD_member::getUserHandle($g->user_id_foreign);
-$purifier = (new MOD_htmlpure())->getPurifier();
-// Set variable own (if own gallery)
 $Own = false;
 if ($this->myself) {
     $R = MOD_right::get();
-    $GalleryRight = $R->hasRight('Gallery');
     $Own = ($this->myself == $this->member->Username);
 }
 if (!isset($vars['errors'])) {
     $vars['errors'] = [];
 }
-if ($statement){
-foreach ($statement as $d) { ?>
-<div class="col-12 col-sm-6 col-md-4">
-        <div class="card p-2 mb-2">
-            <?php
-            $formkit = $this->layoutkit->formkit;
-            $callback_tag = $formkit->setPostCallback('GalleryController', 'updateGalleryCallback');
-            ?>
-            <form method="POST"><?= $callback_tag; ?>
-            <a href="gallery/img?id=<?= $d->id ?>" data-toggle="lightbox" data-type="image" data-title="<?= $d->title ?>">
-                <img class="img-fluid d-block mx-auto mb-1" src="gallery/thumbimg?id=<?= $d->id ?>&amp;t=1" alt="<?= $d->title ?>">
+$words = $words ?? new MOD_words();
+$formkit = $this->layoutkit->formkit;
+$callback_tag = $formkit->setPostCallback('GalleryController', 'updateGalleryCallback');
+?>
+<div class="p-gallery-show">
+
+    <div class="p-gallery-manage__pagehead">
+        <div class="p-gallery-manage__pagehead-row">
+            <div class="p-gallery-manage__pagehead-copy">
+                <div class="p-gallery-manage__pagehead-heading">
+                    <a href="gallery/show/user/<?= htmlspecialchars((string) $g->user_handle) ?>"
+                       class="p-edit-subpage__back"
+                       aria-label="Back to gallery">
+                        <i class="fas fa-chevron-left" aria-hidden="true"></i>
+                    </a>
+                    <div>
+                        <p class="p-gallery-manage__pagehead-eyebrow"><?= htmlspecialchars((string) $g->user_handle) ?></p>
+                        <h1 class="p-gallery-manage__pagehead-title"><?= htmlspecialchars((string) $g->title) ?></h1>
+                    </div>
+                </div>
+            </div>
+            <?php if ($this->myself): ?>
+            <div class="p-gallery-manage__pagehead-actions">
+                <a href="gallery/manage" class="o-button" title="<?= $words->get('GalleryManage') ?>">
+                    <i class="fas fa-cog" aria-hidden="true"></i>
+                </a>
+                <a href="gallery/show/sets/<?= $g->id ?>/delete"
+                   class="p-gallery-photo-item__btn p-gallery-photo-item__btn--danger"
+                   style="width:auto;padding:0 0.75rem;"
+                   onclick="return confirm('<?= addslashes($words->get('GalleryDelete') ?: 'Delete this album?') ?>')">
+                    <i class="fas fa-trash" aria-hidden="true"></i>
+                </a>
+            </div>
+            <?php endif; ?>
+        </div>
+    </div>
+
+    <?php if ($statement): ?>
+    <div class="p-gallery-photo-grid" data-gallery="set-<?= $g->id ?>">
+        <?php foreach ($statement as $d): ?>
+        <div class="p-gallery-photo-item">
+            <a href="gallery/img?id=<?= $d->id ?>"
+               class="p-gallery-photo-item__link"
+               data-toggle="lightbox"
+               data-type="image"
+               data-title="<?= htmlspecialchars((string) $d->title) ?>"
+               data-gallery="set-<?= $g->id ?>">
+                <img src="gallery/thumbimg?id=<?= $d->id ?>&t=2"
+                     alt="<?= htmlspecialchars((string) $d->title) ?>"
+                     loading="lazy">
             </a>
-            <?php if ($this->myself) { ?>
-             <a href="gallery/img?id=<?= $d->id ?>" class="btn btn-sm btn-primary"><i class="fa fa-edit mr-1"></i><?= $words->get('Edit'); ?></a>
-                <input type="submit" class="btn btn-sm btn-danger" name="button" value="<?= $words->getBuffered('GalleryRemoveImagesFromPhotoset') ?>">
-                <input type="checkbox" class="o-checkbox__input d-none" name="imageId[]" value="<?= $d->id ?>" checked>
-                <input name="gallery" type="hidden" value="<?= $g->id ?>">
-                <input name="removeOnly" type="hidden" value="1">
-            </form>
-            <?php } ?>
+            <?php if ($this->myself): ?>
+            <div class="p-gallery-photo-item__actions">
+                <a href="gallery/img?id=<?= $d->id ?>"
+                   class="p-gallery-photo-item__btn p-gallery-photo-item__btn--edit"
+                   title="<?= $words->get('Edit') ?>">
+                    <i class="fas fa-edit" aria-hidden="true"></i>
+                </a>
+                <form method="POST" style="display:contents">
+                    <?= $callback_tag ?>
+                    <input type="hidden" name="imageId[]" value="<?= $d->id ?>">
+                    <input type="hidden" name="gallery" value="<?= $g->id ?>">
+                    <input type="hidden" name="removeOnly" value="1">
+                    <button type="submit"
+                            class="p-gallery-photo-item__btn p-gallery-photo-item__btn--remove"
+                            title="<?= $words->get('GalleryRemoveImagesFromPhotoset') ?>">
+                        <i class="fas fa-times" aria-hidden="true"></i>
+                    </button>
+                </form>
+            </div>
+            <?php endif; ?>
         </div>
+        <?php endforeach; ?>
     </div>
-    <?php
-    }
-}
-?>
+    <?php else: ?>
+    <p class="p-profile-empty-hint u:mt-16"><?= $words->get('gallery.manage.empty.title') ?: 'No photos in this album yet.' ?></p>
+    <?php endif; ?>
+
 </div>

From 4cc4282d4a4dee63ca97e21f1b4af98411341fb0 Mon Sep 17 00:00:00 2001
From: stephane solida <stephane.solida@in-tact.fr>
Date: Thu, 14 May 2026 02:34:10 +0200
Subject: [PATCH 13/13] fix gallery, and changed design

---
 .../components/_components.modals.css         | 140 +++++++--
 .../tailwindcss/layouts/_layouts.general.css  | 278 ++++++++----------
 .../templates/gallerymanage.column_col3.php   | 232 ++++++++-------
 build/gallery/templates/overview.php          |  45 +--
 translations/missing/gallery.yaml             |  18 ++
 5 files changed, 416 insertions(+), 297 deletions(-)

diff --git a/assets/tailwindcss/components/_components.modals.css b/assets/tailwindcss/components/_components.modals.css
index e3b855547b..ff85e077bd 100644
--- a/assets/tailwindcss/components/_components.modals.css
+++ b/assets/tailwindcss/components/_components.modals.css
@@ -37,7 +37,8 @@
   margin: 0 auto;
   background: #fff;
   border-radius: 1.5rem 1.5rem 0 0;
-  padding: 0.75rem 1.5rem 2.25rem;
+  padding: 0;
+  overflow: hidden;
   transform: translateY(100%);
   transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
   box-shadow: 0 -8px 48px rgba(15, 23, 42, 0.18);
@@ -47,58 +48,88 @@
   transform: translateY(0);
 }
 
+/* Hero image — full width, edge-to-edge */
+.p-photo-sheet__preview {
+  position: relative;
+  width: 100%;
+  height: 220px;
+  overflow: hidden;
+  background: #0f172a;
+}
+
+.p-photo-sheet__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 0;
+}
+
+/* Gradient overlay so handle + close are readable on any photo */
+.p-photo-sheet__preview::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(15, 23, 42, 0.35) 0%,
+    transparent 45%,
+    rgba(15, 23, 42, 0.18) 100%
+  );
+  pointer-events: none;
+}
+
+/* Handle — overlaid on the hero image */
 .p-photo-sheet__handle {
+  position: absolute;
+  top: 0.65rem;
+  left: 50%;
+  transform: translateX(-50%);
   width: 3rem;
   height: 4px;
-  background: #e2e8f0;
+  background: rgba(255, 255, 255, 0.55);
   border-radius: 999px;
-  margin: 0 auto 1.25rem;
+  z-index: 2;
+  margin: 0;
 }
 
+/* Close button — overlaid on the hero image */
 .p-photo-sheet__close {
   position: absolute;
-  top: 1rem;
-  right: 1rem;
+  top: 0.75rem;
+  right: 0.75rem;
   width: 2.1rem;
   height: 2.1rem;
   border: none;
-  background: #f1f5f9;
+  background: rgba(15, 23, 42, 0.45);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
   border-radius: 50%;
-  color: #64748b;
+  color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.8rem;
-  transition: background 0.15s ease, color 0.15s ease;
+  transition: background 0.15s ease;
   padding: 0;
+  z-index: 2;
 }
 
 .p-photo-sheet__close:hover {
-  background: #e2e8f0;
-  color: #1e293b;
-}
-
-.p-photo-sheet__preview {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 0.875rem;
+  background: rgba(15, 23, 42, 0.7);
 }
 
-.p-photo-sheet__img {
-  width: 90px;
-  height: 90px;
-  object-fit: cover;
-  border-radius: 0.85rem;
-  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.14);
+/* Content below the hero */
+.p-photo-sheet__body {
+  padding: 1.1rem 1.5rem 2rem;
 }
 
 .p-photo-sheet__title {
   font-size: 1rem;
   font-weight: 700;
   color: #1e293b;
-  text-align: center;
-  margin: 0 2rem 1.5rem;
+  margin: 0 0 1.1rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -106,7 +137,8 @@
 
 .p-photo-sheet__actions {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: stretch;
   gap: 0.5rem;
 }
 
@@ -133,22 +165,27 @@
 }
 
 .p-photo-sheet__btn--primary {
+  flex: 1;
   background: linear-gradient(135deg, #ff9a2e 0%, #f37000 60%, #e06000 100%);
   color: #fff !important;
 }
 
+
 .p-photo-sheet__btn--primary:hover {
   filter: brightness(1.06);
 }
 
 .p-photo-sheet__btn--danger {
-  background: #fef2f2;
-  color: #dc2626 !important;
-  border: 1px solid #fecaca;
+  flex: 1;
+  width: auto;
+  background: transparent;
+  color: #ef4444 !important;
+  border: 1.5px solid #fca5a5;
 }
 
 .p-photo-sheet__btn--danger:hover {
-  background: #fee2e2;
+  background: #fef2f2;
+  border-color: #f87171;
 }
 
 .p-photo-sheet__btn--danger-confirm {
@@ -157,6 +194,51 @@
   border-color: #dc2626;
 }
 
+/* Form fields inside the sheet (edit title / description) */
+.p-photo-sheet__form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-bottom: 1.1rem;
+}
+
+.p-photo-sheet__label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-top: 0.5rem;
+}
+
+.p-photo-sheet__input,
+.p-photo-sheet__textarea {
+  width: 100%;
+  padding: 0.6rem 0.875rem;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 0.65rem;
+  font-family: inherit;
+  font-size: 0.9375rem;
+  color: #1e293b;
+  background: #f8fafc;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.p-photo-sheet__input:focus,
+.p-photo-sheet__textarea:focus {
+  border-color: #f37000;
+  background: #fff;
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.1);
+}
+
+.p-photo-sheet__textarea {
+  resize: vertical;
+  min-height: 4.5rem;
+  line-height: 1.5;
+}
+
 /* ── Confirm modal (reusable lightweight confirm dialog) ── */
 
 .c-confirm-modal {
diff --git a/assets/tailwindcss/layouts/_layouts.general.css b/assets/tailwindcss/layouts/_layouts.general.css
index ae9163b39c..d2fe711369 100644
--- a/assets/tailwindcss/layouts/_layouts.general.css
+++ b/assets/tailwindcss/layouts/_layouts.general.css
@@ -3552,53 +3552,52 @@ main:has(.p-hero) {
 
 .p-gallery-manage__panel {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 0.75rem 1.25rem;
-  padding: 0.5rem 0;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: #fff;
+  border: 1px solid #e8ecf1;
+  border-radius: 0.85rem;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap;
 }
 
+/* Make div wrappers transparent in the flex flow */
 .p-gallery-manage__panel-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem 0.75rem;
+  display: contents;
 }
 
-/* Select-all toggle (custom pill) */
+/* Select-all toggle */
 .p-gallery-manage__select-all {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
   margin: 0;
-  padding: 0.45rem 0.85rem;
-  border: 1px solid #e2e8f0;
+  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
+  border: 1.5px solid #e2e8f0;
   border-radius: 999px;
-  background: #fff;
+  background: #f8fafc;
   color: #475569;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   font-weight: 600;
   cursor: pointer;
   user-select: none;
-  transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease;
+  white-space: nowrap;
+  transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .p-gallery-manage__select-all:hover {
-  border-color: #cbd5e1;
-  background: #f8fafc;
+  border-color: #f37000;
+  background: #fff7ed;
 }
 
 .p-gallery-manage__select-all-input {
   position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
+  width: 1px; height: 1px;
+  margin: -1px; padding: 0;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(0,0,0,0);
   white-space: nowrap;
   border: 0;
 }
@@ -3607,17 +3606,14 @@ main:has(.p-hero) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.15rem;
-  height: 1.15rem;
+  width: 1.1rem; height: 1.1rem;
   border: 1.5px solid #cbd5e1;
-  border-radius: 0.35rem;
+  border-radius: 0.3rem;
   background: #fff;
   color: transparent;
-  font-size: 0.65rem;
-  transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease;
+  font-size: 0.6rem;
+  flex-shrink: 0;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
 
 .p-gallery-manage__select-all-input:checked ~ .p-gallery-manage__select-all-box {
@@ -3630,118 +3626,93 @@ main:has(.p-hero) {
   box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.2);
 }
 
-/* Album selector group */
+/* Album selector group — fieldset reset */
 .p-gallery-manage__album {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem 0.75rem;
-  margin: 0;
+  gap: 0.4rem;
   padding: 0;
   border: 0;
-  flex: 1 1 auto;
+  margin: 0;
+  flex: 1 1 0;
   min-width: 0;
 }
 
+/* Each album row = just the input, no border wrapper */
 .p-gallery-manage__album-row {
-  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 0.45rem;
+  flex: 1 1 0;
+  min-width: 0;
   margin: 0;
-  padding: 0.25rem 0.75rem 0.25rem 0.45rem;
-  border: 1px solid #e2e8f0;
-  border-radius: 999px;
-  background: #fff;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.p-gallery-manage__album-row:focus-within {
-  border-color: #f37000;
-  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.13);
-}
-
-.p-gallery-manage__album-radio {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
   padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
   border: 0;
+  background: transparent;
 }
 
+/* Radio buttons hidden — JS auto-selects on interaction */
+.p-gallery-manage__album-radio,
 .p-gallery-manage__album-radio-dot {
-  display: inline-flex;
-  width: 1rem;
-  height: 1rem;
-  border: 1.5px solid #cbd5e1;
-  border-radius: 999px;
-  background: #fff;
-  position: relative;
-  transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.p-gallery-manage__album-radio:checked ~ .p-gallery-manage__album-radio-dot {
-  border-color: #f37000;
-  background:
-    radial-gradient(circle at center, #f37000 0 38%, #fff 42% 100%);
+  display: none;
 }
 
 .p-gallery-manage__album-select,
 .p-gallery-manage__album-input {
-  flex: 1 1 0;
-  min-width: 8rem;
+  width: 100%;
   height: 2rem;
-  padding: 0.25rem 0.6rem;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
+  padding: 0 0.65rem;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 0.55rem;
+  background: #f8fafc;
   color: #1f2937;
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.2;
   outline: none;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.p-gallery-manage__album-select:focus,
+.p-gallery-manage__album-input:focus {
+  border-color: #f37000;
+  background: #fff;
+  box-shadow: 0 0 0 3px rgba(243, 112, 0, 0.1);
 }
 
 .p-gallery-manage__album-select {
   appearance: none;
-  padding-right: 1.5rem;
-  background:
-    linear-gradient(45deg, transparent 50%, #94a3b8 50%) calc(100% - 0.75rem) 50% / 0.32rem 0.32rem no-repeat,
-    linear-gradient(135deg, #94a3b8 50%, transparent 50%) calc(100% - 0.45rem) 50% / 0.32rem 0.32rem no-repeat,
-    transparent;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.6rem center;
+  padding-right: 1.75rem;
+  background-color: #f8fafc;
 }
 
 .p-gallery-manage__album-input::placeholder {
   color: #94a3b8;
-  font-style: italic;
 }
 
 /* Action buttons */
 .p-gallery-manage__buttons {
-  margin-left: auto;
-  gap: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex: 0 0 auto;
 }
 
 .p-gallery-manage__btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 2.5rem;
-  padding: 0.55rem 1.1rem;
-  border-radius: 999px;
+  height: 2rem;
+  padding: 0 0.9rem;
+  border-radius: 0.55rem;
   font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 700;
-  line-height: 1.2;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
   cursor: pointer;
   text-decoration: none !important;
   transition:
@@ -3769,17 +3740,19 @@ main:has(.p-hero) {
 }
 
 .p-gallery-manage__btn--danger {
-  background: #fff;
-  border: 1px solid #fecaca;
-  color: #b91c1c;
+  background: linear-gradient(135deg, #f87171 0%, #ef4444 60%, #dc2626 100%);
+  border: 1px solid #ef4444;
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.24);
 }
 
 .p-gallery-manage__btn--danger:hover,
 .p-gallery-manage__btn--danger:focus-visible {
-  background: #fef2f2;
-  border-color: #f87171;
-  color: #991b1b;
+  filter: brightness(1.06);
+  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.32);
+  transform: translateY(-1px);
   outline: none;
+  color: #fff;
 }
 
 .p-gallery-manage__btn:disabled,
@@ -3966,24 +3939,28 @@ main:has(.p-hero) {
   gap: 1rem;
 }
 
-/* Manage-specific: hide the standard card-body content and use a compact action footer */
-.p-gallery-manage__grid-wrap #masonry-grid .card-body {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.45rem;
-  font-size: 0;
+.p-gallery-manage__grid-wrap #masonry-grid {
+  --gallery-grid-gap: 3px;
 }
 
-.p-gallery-manage__grid-wrap #masonry-grid .card-body > h6,
-.p-gallery-manage__grid-wrap #masonry-grid .card-body > br,
-.p-gallery-manage__grid-wrap #masonry-grid .card-body > a[href*="gallery/show/sets"] {
-  display: none;
+.p-gallery-manage__grid-wrap #masonry-grid .card {
+  border: 0;
+  box-shadow: none;
+  border-radius: 0.5rem;
 }
 
-.p-gallery-manage__grid-wrap #masonry-grid .card-body > a[href*="gallery/img"] {
-  flex: 1 1 0;
-  min-width: 0;
+.p-gallery-manage__grid-wrap #masonry-grid .card:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.p-gallery-manage__grid-wrap #masonry-grid .card > a:first-of-type {
+  padding: 0 !important;
+}
+
+/* Hide title bar entirely — checkbox is absolutely positioned so it still shows */
+.p-gallery-manage__grid-wrap #masonry-grid .card-body {
+  display: none !important;
 }
 
 /* Selection checkbox — top-left overlay on the photo */
@@ -4066,16 +4043,14 @@ main:has(.p-hero) {
   transform: rotate(45deg) scale(1);
 }
 
-/* Action group inline on the right of the footer */
+/* Photo trigger — whole photo opens the edit sheet in manage mode */
+.p-gallery-manage__photo-trigger {
+  cursor: pointer;
+}
+
+/* Hide legacy action links — replaced by the sheet */
 .p-gallery-manage__grid-wrap #masonry-grid .card-text {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  margin: 0 !important;
-  padding: 0 !important;
-  border: 0 !important;
-  background: transparent;
-  flex-shrink: 0;
+  display: none !important;
 }
 
 .p-gallery-manage__grid-wrap #masonry-grid .card-text small.text-muted {
@@ -4144,26 +4119,27 @@ main:has(.p-hero) {
   }
 
   .p-gallery-manage__panel {
-    padding: 0.25rem 0;
+    padding: 0.5rem 0.6rem;
+    gap: 0.4rem;
   }
 
-  .p-gallery-manage__buttons {
-    margin-left: 0;
-    width: 100%;
-    justify-content: stretch;
+  .p-gallery-manage__album {
+    flex: 1 1 100%;
+    flex-wrap: wrap;
   }
 
-  .p-gallery-manage__btn {
+  .p-gallery-manage__album-row {
     flex: 1 1 0;
-    min-width: 0;
+    min-width: 8rem;
   }
 
-  .p-gallery-manage__album {
-    width: 100%;
+  .p-gallery-manage__buttons {
+    flex: 1 1 100%;
+    justify-content: stretch;
   }
 
-  .p-gallery-manage__album-row {
-    width: 100%;
+  .p-gallery-manage__btn {
+    flex: 1 1 0;
   }
 
   .p-gallery-manage__grid-wrap #masonry-grid {
@@ -4290,20 +4266,26 @@ main:has(.p-hero) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
-  border: none;
-  border-radius: 0.5rem;
-  background: transparent;
-  color: #94a3b8;
+  gap: 0.4rem;
+  height: 2.5rem;
+  padding: 0.55rem 1.1rem;
+  border: 1px solid #ef4444;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #f87171 0%, #ef4444 60%, #dc2626 100%);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 700;
   cursor: pointer;
   margin-left: auto;
-  transition: background 0.15s ease, color 0.15s ease;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.24);
+  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
 }
 
 .p-gallery-set-nav__delete:hover {
-  background: #fef2f2;
-  color: #dc2626;
+  filter: brightness(1.06);
+  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.32);
+  transform: translateY(-1px);
+  color: #fff;
 }
 
 /* ── Albums tab ── */
diff --git a/build/gallery/templates/gallerymanage.column_col3.php b/build/gallery/templates/gallerymanage.column_col3.php
index 30e0b44b42..54ace4292b 100644
--- a/build/gallery/templates/gallerymanage.column_col3.php
+++ b/build/gallery/templates/gallerymanage.column_col3.php
@@ -55,14 +55,14 @@ class="p-edit-subpage__back"
         <i class="fas fa-images" aria-hidden="true"></i>
         <span><?= $words->get('Photos') ?: 'Photos' ?></span>
     </button>
-    <button class="p-gallery-tab-btn" data-tab="albums" type="button">
-        <i class="fas fa-layer-group" aria-hidden="true"></i>
-        <span><?= $words->get('GalleryTitleSets') ?: 'Albums' ?></span>
-    </button>
     <button class="p-gallery-tab-btn" data-tab="upload" type="button">
         <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
         <span><?= $words->get('galleryupload') ?: 'Upload' ?></span>
     </button>
+    <button class="p-gallery-tab-btn" data-tab="albums" type="button">
+        <i class="fas fa-layer-group" aria-hidden="true"></i>
+        <span><?= $words->get('GalleryTitleSets') ?: 'Albums' ?></span>
+    </button>
 </nav>
 
 <?php /* ── PHOTOS TAB ── */ ?>
@@ -177,6 +177,7 @@ class="p-gallery-set-nav__delete"
                     data-set-id="<?= (int) $activeSet->id ?>"
                     data-set-title="<?= htmlspecialchars((string) $activeSet->title, ENT_QUOTES, 'UTF-8') ?>">
                 <i class="fas fa-trash" aria-hidden="true"></i>
+                <span><?= htmlspecialchars($words->get('Delete') ?: 'Delete', ENT_QUOTES, 'UTF-8') ?></span>
             </button>
         </div>
 
@@ -185,7 +186,7 @@ class="p-gallery-set-nav__delete"
             <div class="c-confirm-modal__backdrop"></div>
             <div class="c-confirm-modal__dialog">
                 <p class="c-confirm-modal__text">
-                    <?= $words->get('gallery.album.delete.confirm') ?: 'Delete this album? Photos will not be deleted.' ?>
+                    <?= $words->getSilent('gallery.album.delete.confirm') ?: 'Delete this album? Photos will not be deleted.' ?>
                 </p>
                 <div class="c-confirm-modal__actions">
                     <button type="button" class="c-confirm-modal__btn c-confirm-modal__btn--cancel" id="delete-album-cancel">
@@ -217,41 +218,10 @@ class="p-gallery-photo-item__link"
                          alt="<?= htmlspecialchars((string) $d->title) ?>"
                          loading="lazy">
                 </a>
-                <button type="button"
-                        class="p-gallery-photo-item__menu-btn"
-                        aria-label="<?= htmlspecialchars($words->get('Options') ?: 'Options', ENT_QUOTES, 'UTF-8') ?>">
-                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-                </button>
             </div>
             <?php endforeach; ?>
         </div>
 
-        <!-- Photo action sheet (single instance, shared across all photos) -->
-        <div id="photo-action-sheet" class="p-photo-sheet" aria-hidden="true" role="dialog" aria-modal="true"
-             aria-label="<?= htmlspecialchars($words->get('Options') ?: 'Photo options', ENT_QUOTES, 'UTF-8') ?>">
-            <div class="p-photo-sheet__backdrop"></div>
-            <div class="p-photo-sheet__panel">
-                <div class="p-photo-sheet__handle" aria-hidden="true"></div>
-                <button type="button" class="p-photo-sheet__close" aria-label="<?= htmlspecialchars($words->get('Close') ?: 'Close', ENT_QUOTES, 'UTF-8') ?>">
-                    <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
-                <div class="p-photo-sheet__preview">
-                    <img id="photo-sheet-thumb" src="" alt="" class="p-photo-sheet__img">
-                </div>
-                <p id="photo-sheet-title" class="p-photo-sheet__title"></p>
-                <div class="p-photo-sheet__actions">
-                    <a id="photo-sheet-edit" href="#" class="p-photo-sheet__btn p-photo-sheet__btn--primary">
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                        <span><?= htmlspecialchars($words->get('Edit') ?: 'Edit', ENT_QUOTES, 'UTF-8') ?></span>
-                    </a>
-                    <button type="button" id="photo-sheet-delete" class="p-photo-sheet__btn p-photo-sheet__btn--danger">
-                        <i class="fas fa-trash" aria-hidden="true"></i>
-                        <span><?= htmlspecialchars($words->get('Delete') ?: 'Delete', ENT_QUOTES, 'UTF-8') ?></span>
-                    </button>
-                </div>
-            </div>
-        </div>
-
         <?php else: ?>
         <p class="p-profile-empty-hint" style="margin-top:1rem;"><?= $words->get('gallery.manage.empty.title') ?: 'No photos in this album yet.' ?></p>
         <?php endif; ?>
@@ -271,13 +241,13 @@ class="p-gallery-photo-item__menu-btn"
         <div class="p-upload__card">
             <div class="p-upload__field">
                 <label class="p-upload__label" for="upload-album-input">
-                    <?= htmlspecialchars($words->get('gallery.upload_to_album') ?: 'Album (optional)', ENT_QUOTES, 'UTF-8') ?>
+                    <?= htmlspecialchars($words->getSilent('gallery.upload_to_album') ?: 'Album (optional)', ENT_QUOTES, 'UTF-8') ?>
                 </label>
                 <input type="text"
                        id="upload-album-input"
                        class="p-upload__select"
                        list="upload-albums-list"
-                       placeholder="<?= htmlspecialchars($words->get('gallery.upload_to_album') ?: 'Album name (optional)', ENT_QUOTES, 'UTF-8') ?>"
+                       placeholder="<?= htmlspecialchars($words->getSilent('gallery.upload_to_album') ?: 'Album name (optional)', ENT_QUOTES, 'UTF-8') ?>"
                        autocomplete="off">
                 <datalist id="upload-albums-list">
                     <?php if (isset($galleries) && $galleries): ?>
@@ -350,6 +320,46 @@ class="p-upload__select"
     </div>
 </div>
 
+<!-- ── Sheets (outside tab panels so display:none on parent never hides them) ── -->
+
+<div id="photos-action-sheet" class="p-photo-sheet" aria-hidden="true" role="dialog" aria-modal="true">
+    <div class="p-photo-sheet__backdrop"></div>
+    <div class="p-photo-sheet__panel">
+        <div class="p-photo-sheet__preview">
+            <div class="p-photo-sheet__handle" aria-hidden="true"></div>
+            <button type="button" class="p-photo-sheet__close" aria-label="<?= htmlspecialchars($words->get('Close') ?: 'Close', ENT_QUOTES, 'UTF-8') ?>">
+                <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
+            <img id="photos-sheet-thumb" src="" alt="" class="p-photo-sheet__img">
+        </div>
+        <div class="p-photo-sheet__body">
+            <div class="p-photo-sheet__form">
+                <label class="p-photo-sheet__label" for="photos-sheet-title-input">
+                    <?= htmlspecialchars($words->getSilent('GalleryTitle') ?: 'Title', ENT_QUOTES, 'UTF-8') ?>
+                </label>
+                <input type="text" id="photos-sheet-title-input" class="p-photo-sheet__input" maxlength="100"
+                       placeholder="<?= htmlspecialchars($words->getSilent('GalleryTitle') ?: 'Title', ENT_QUOTES, 'UTF-8') ?>">
+                <label class="p-photo-sheet__label" for="photos-sheet-desc-input">
+                    <?= htmlspecialchars($words->getSilent('GalleryDescription') ?: 'Description', ENT_QUOTES, 'UTF-8') ?>
+                </label>
+                <textarea id="photos-sheet-desc-input" class="p-photo-sheet__textarea" rows="3"
+                          placeholder="<?= htmlspecialchars($words->getSilent('gallery.photo.sheet.description.placeholder') ?: 'Add a description…', ENT_QUOTES, 'UTF-8') ?>"></textarea>
+            </div>
+            <div class="p-photo-sheet__actions">
+                <button type="button" id="photos-sheet-save" class="p-photo-sheet__btn p-photo-sheet__btn--primary">
+                    <i class="fas fa-save" aria-hidden="true"></i>
+                    <span><?= htmlspecialchars($words->get('Save') ?: 'Save', ENT_QUOTES, 'UTF-8') ?></span>
+                </button>
+                <button type="button" id="photos-sheet-delete" class="p-photo-sheet__btn p-photo-sheet__btn--danger">
+                    <i class="fas fa-trash" aria-hidden="true"></i>
+                    <span><?= htmlspecialchars($words->get('Delete') ?: 'Delete', ENT_QUOTES, 'UTF-8') ?></span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
 <script type="text/javascript">
 (function () {
 
@@ -687,86 +697,108 @@ function resetUploadForm() {
         abortBtn.disabled = true;
     }
 
-    /* ── Photo action sheet ── */
-    const photoSheet = document.getElementById('photo-action-sheet');
-    if (photoSheet) {
-        const sheetPanel   = photoSheet.querySelector('.p-photo-sheet__panel');
-        const sheetBackdrop= photoSheet.querySelector('.p-photo-sheet__backdrop');
-        const sheetClose   = photoSheet.querySelector('.p-photo-sheet__close');
-        const sheetThumb   = document.getElementById('photo-sheet-thumb');
-        const sheetTitle   = document.getElementById('photo-sheet-title');
-        const sheetEdit    = document.getElementById('photo-sheet-edit');
-        const sheetDelete  = document.getElementById('photo-sheet-delete');
-        const lblDelete    = <?= json_encode($words->get('Delete') ?: 'Delete') ?>;
-        const lblConfirm   = <?= json_encode($words->get('gallery.photo.delete.confirm') ?: 'Confirm delete') ?>;
-        const lblDeleting  = <?= json_encode($words->get('gallery.photo.deleting') ?: 'Deleting…') ?>;
-
-        let currentItem = null;
-        let confirmPending = false;
-
-        function openSheet(item) {
-            currentItem = item;
-            confirmPending = false;
-            sheetDelete.disabled = false;
-            sheetDelete.classList.remove('p-photo-sheet__btn--danger-confirm');
-            sheetDelete.innerHTML = '<i class="fas fa-trash" aria-hidden="true"></i><span>' + lblDelete + '</span>';
-            sheetThumb.src  = item.dataset.photoThumb;
-            sheetThumb.alt  = item.dataset.photoTitle;
-            sheetTitle.textContent = item.dataset.photoTitle;
-            sheetEdit.href  = item.dataset.photoEdit;
-            photoSheet.setAttribute('aria-hidden', 'false');
-            photoSheet.classList.add('p-photo-sheet--open');
+    /* ── Photos tab — edit/delete sheet ── */
+    const photosSheet = document.getElementById('photos-action-sheet');
+    if (photosSheet) {
+        const psPanel      = photosSheet.querySelector('.p-photo-sheet__panel');
+        const psBackdrop   = photosSheet.querySelector('.p-photo-sheet__backdrop');
+        const psCloseBtn   = photosSheet.querySelector('.p-photo-sheet__close');
+        const psThumb      = document.getElementById('photos-sheet-thumb');
+        const psTitleInput = document.getElementById('photos-sheet-title-input');
+        const psDescInput  = document.getElementById('photos-sheet-desc-input');
+        const psSave       = document.getElementById('photos-sheet-save');
+        const psDelete     = document.getElementById('photos-sheet-delete');
+        const lblSave      = <?= json_encode($words->getSilent('Save') ?: 'Save') ?>;
+        const lblSaving    = <?= json_encode($words->getSilent('gallery.photo.saving') ?: 'Saving…') ?>;
+        const lblSaved     = <?= json_encode($words->getSilent('gallery.photo.saved') ?: 'Saved') ?>;
+        const lblDelete    = <?= json_encode($words->getSilent('Delete') ?: 'Delete') ?>;
+        const lblDeleting  = <?= json_encode($words->getSilent('gallery.photo.deleting') ?: 'Deleting…') ?>;
+
+        let psCurrentItem = null;
+
+        function psOpen(item) {
+            psCurrentItem = item;
+            psDelete.disabled = false;
+            psDelete.innerHTML = '<i class="fas fa-trash" aria-hidden="true"></i><span>' + lblDelete + '</span>';
+            psSave.disabled = false;
+            psSave.innerHTML = '<i class="fas fa-save" aria-hidden="true"></i><span>' + lblSave + '</span>';
+            psThumb.src = item.dataset.photoThumb;
+            psThumb.alt = item.dataset.photoTitle;
+            psTitleInput.value = item.dataset.photoTitle || '';
+            psDescInput.value  = item.dataset.photoDesc  || '';
+            photosSheet.setAttribute('aria-hidden', 'false');
+            photosSheet.classList.add('p-photo-sheet--open');
             document.body.style.overflow = 'hidden';
         }
 
-        function closeSheet() {
-            photoSheet.setAttribute('aria-hidden', 'true');
-            photoSheet.classList.remove('p-photo-sheet--open');
+        function psClose() {
+            photosSheet.setAttribute('aria-hidden', 'true');
+            photosSheet.classList.remove('p-photo-sheet--open');
             document.body.style.overflow = '';
-            confirmPending = false;
-            currentItem = null;
+            psDeletePending = false;
+            psCurrentItem = null;
         }
 
-        document.querySelectorAll('.p-gallery-photo-item__menu-btn').forEach(btn => {
-            btn.addEventListener('click', e => {
+        document.querySelectorAll('.p-gallery-manage__photo-trigger').forEach(link => {
+            link.addEventListener('click', e => {
+                e.preventDefault();
                 e.stopPropagation();
-                openSheet(btn.closest('.p-gallery-photo-item'));
+                psOpen(link.closest('[data-photo-id]'));
             });
         });
 
-        sheetClose.addEventListener('click', closeSheet);
-        sheetBackdrop.addEventListener('click', closeSheet);
+        psCloseBtn.addEventListener('click', psClose);
+        psBackdrop.addEventListener('click', psClose);
 
-        sheetDelete.addEventListener('click', () => {
-            if (!confirmPending) {
-                confirmPending = true;
-                sheetDelete.classList.add('p-photo-sheet__btn--danger-confirm');
-                sheetDelete.innerHTML = '<i class="fas fa-exclamation-triangle" aria-hidden="true"></i><span>' + lblConfirm + '</span>';
-                return;
-            }
-            const item = currentItem;
-            sheetDelete.disabled = true;
-            sheetDelete.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i><span>' + lblDeleting + '</span>';
+        psSave.addEventListener('click', () => {
+            if (!psCurrentItem) return;
+            const id    = psCurrentItem.dataset.photoId;
+            const title = psTitleInput.value.trim();
+            const desc  = psDescInput.value.trim();
+            if (!title) { psTitleInput.focus(); return; }
+
+            psSave.disabled = true;
+            psSave.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i><span>' + lblSaving + '</span>';
+
+            const fetchTitle = fetch('gallery/ajax/image?item=' + encodeURIComponent(id) + '&title=' + encodeURIComponent(title), { credentials: 'same-origin' });
+            const fetchDesc  = fetch('gallery/ajax/image?item=' + encodeURIComponent(id) + '&text='  + encodeURIComponent(desc),  { credentials: 'same-origin' });
+
+            Promise.all([fetchTitle, fetchDesc])
+                .then(() => {
+                    psCurrentItem.dataset.photoTitle = title;
+                    psCurrentItem.dataset.photoDesc  = desc;
+                    psSave.innerHTML = '<i class="fas fa-check" aria-hidden="true"></i><span>' + lblSaved + '</span>';
+                    setTimeout(psClose, 900);
+                })
+                .catch(() => {
+                    psSave.disabled = false;
+                    psSave.innerHTML = '<i class="fas fa-save" aria-hidden="true"></i><span>' + lblSave + '</span>';
+                });
+        });
+
+        psDelete.addEventListener('click', () => {
+            if (!psCurrentItem) return;
+            const item = psCurrentItem;
+            psDelete.disabled = true;
+            psDelete.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i><span>' + lblDeleting + '</span>';
             fetch(item.dataset.photoDelete, { credentials: 'same-origin' })
                 .then(() => {
-                    item.style.transition = 'opacity 0.25s ease, transform 0.25s ease';
-                    item.style.opacity = '0';
-                    item.style.transform = 'scale(0.8)';
-                    setTimeout(() => item.remove(), 260);
-                    closeSheet();
+                    const col = item.closest('[data-photo-id]') || item;
+                    col.style.transition = 'opacity 0.25s ease, transform 0.25s ease';
+                    col.style.opacity = '0';
+                    col.style.transform = 'scale(0.85)';
+                    setTimeout(() => col.remove(), 260);
+                    psClose();
                 })
                 .catch(() => {
-                    sheetDelete.disabled = false;
-                    sheetDelete.classList.remove('p-photo-sheet__btn--danger-confirm');
-                    sheetDelete.innerHTML = '<i class="fas fa-trash" aria-hidden="true"></i><span>' + lblDelete + '</span>';
-                    confirmPending = false;
+                    psDelete.disabled = false;
+                    psDelete.innerHTML = '<i class="fas fa-trash" aria-hidden="true"></i><span>' + lblDelete + '</span>';
                 });
         });
 
-        /* Swipe down to dismiss */
-        let touchStartY = 0;
-        sheetPanel.addEventListener('touchstart', e => { touchStartY = e.touches[0].clientY; }, { passive: true });
-        sheetPanel.addEventListener('touchmove', e => { if (e.touches[0].clientY - touchStartY > 60) closeSheet(); }, { passive: true });
+        let psTouchStartY = 0;
+        psPanel.addEventListener('touchstart', e => { psTouchStartY = e.touches[0].clientY; }, { passive: true });
+        psPanel.addEventListener('touchmove',  e => { if (e.touches[0].clientY - psTouchStartY > 60) psClose(); }, { passive: true });
     }
 
     /* ── Delete album modal ── */
diff --git a/build/gallery/templates/overview.php b/build/gallery/templates/overview.php
index 5997ec2767..6c4f36998b 100644
--- a/build/gallery/templates/overview.php
+++ b/build/gallery/templates/overview.php
@@ -21,42 +21,47 @@
     $maxPage = $p[2];
     $currentPage = $page;
     $request = $requestStr.'/=page%d';
-    require 'pages.php';
     $words = $this->words;
     ?>
     <div id="masonry-grid" class="row">
         <?php
         foreach ($statement as $d) {
-        echo '<div class="col-sm-6 col-lg-4 mb-4">';
-        echo '<div class="card">';
-        echo '<a href="gallery/img?id='. $d->id .'" class="p-1" title="'. $d->title .'" data-toggle="lightbox" data-type="image" data-title="' . $d->title . '">';
-        echo '<img class="mx-auto d-block img-fluid img-thumbnail" src="gallery/thumbimg?id='.$d->id.
-            ($thumbsize ? '&t='.$thumbsize : '' ) . '" alt="' . $d->title . '">';
-        echo '</a>';
         $title_short = ((strlen((string) $d->title) >= 26) ? substr((string) $d->title,0,20).'...' : $d->title);
         $loggedmember = isset($this->model) ? $this->model->getLoggedInMember : $this->loggedInMember;
         $edit = ($loggedmember && $loggedmember->Username == $d->user_handle);
-        echo '<div class="card-body p-1">';
+        $photoTitle = htmlspecialchars((string) $d->title, ENT_QUOTES, 'UTF-8');
+        $photoDesc  = htmlspecialchars((string) ($d->description ?? ''), ENT_QUOTES, 'UTF-8');
+        $dataAttrs  = $edit
+            ? ' data-photo-id="'.(int)$d->id.'"'
+              .' data-photo-title="'.$photoTitle.'"'
+              .' data-photo-desc="'.$photoDesc.'"'
+              .' data-photo-thumb="gallery/thumbimg?id='.(int)$d->id.'&amp;t=2"'
+              .' data-photo-delete="gallery/show/image/'.(int)$d->id.'/delete"'
+            : '';
+        echo '<div class="col-sm-6 col-lg-4"'.$dataAttrs.'>';
+        echo '<div class="card">';
         if ($edit) {
-            $imageTitle = htmlspecialchars((string) $d->title, ENT_QUOTES, 'UTF-8');
-            echo '<label class="p-gallery-manage__image-select" aria-label="Select image ' . $imageTitle . '">';
+            echo '<label class="p-gallery-manage__image-select" aria-label="Select image ' . $photoTitle . '">';
             echo '<input type="checkbox" class="p-gallery-manage__image-select-input" name="imageId[]" value="' . $d->id . '">';
             echo '<span class="p-gallery-manage__image-select-box" aria-hidden="true"></span>';
             echo '</label>';
+            echo '<a href="gallery/img?id='. $d->id .'" class="p-gallery-manage__photo-trigger" title="'. $d->title .'">';
+        } else {
+            echo '<a href="gallery/img?id='. $d->id .'" class="p-1" title="'. $d->title .'" data-toggle="lightbox" data-type="image" data-title="' . $d->title . '">';
         }
-        echo '<h6 class="card-title text-truncate"></h6><a href="gallery/img?id='. $d->id .'" alt="'. $d->title .'">'. $title_short . '</a>';
-        if (null !== $d->albumId) {
-            echo $words->getSilent('album') . '<a href="gallery/show/sets/' . $d->albumId . '" alt="' . $d->album . '">' . $d->album . '</a>';
-        }
-
-        if ($edit) {
-            echo '<div class="card-text"><small class="text-muted">'.$layoutbits->ago(strtotime((string) $d->created)).'</small>';
-            echo '<a href="gallery/show/image/'.$d->id.'/edit" title="edit '. $d->title .'" class="btn btn-sm btn-outline-primary float-right"> <i class="fa fa-edit"></i></a>';
-            echo '<a href="gallery/show/image/'. $d->id .'/delete" title="delete '. $d->title .'" class="btn btn-sm btn-danger float-right mr-1"><i class="fa fa-trash"></i></a></div>';
+        echo '<img class="img-fluid" src="gallery/thumbimg?id='.$d->id.
+            ($thumbsize ? '&t='.$thumbsize : '' ) . '" alt="' . $d->title . '">';
+        echo '</a>';
+        if (!$edit) {
+            echo '<div class="card-body p-1">';
+            echo '<h6 class="card-title text-truncate"></h6><a href="gallery/img?id='. $d->id .'" alt="'. $d->title .'">'. $title_short . '</a>';
+            if (null !== $d->albumId) {
+                echo $words->getSilent('album') . '<a href="gallery/show/sets/' . $d->albumId . '" alt="' . $d->album . '">' . $d->album . '</a>';
+            }
+            echo '</div>';
         }
         echo '</div>';
         echo '</div>';
-        echo '</div>';
     }
     echo '</div>';
 
diff --git a/translations/missing/gallery.yaml b/translations/missing/gallery.yaml
index afba0fc7fe..8227d53dd0 100644
--- a/translations/missing/gallery.yaml
+++ b/translations/missing/gallery.yaml
@@ -77,3 +77,21 @@ gallery.image.edit.view_full:
 gallery.image.edit.save:
     - 'Save changes'
     - Primary submit button on the gallery image edit form.
+gallery.upload_to_album:
+    - 'Album (optional)'
+    - Placeholder/label for the album selector in the upload tab of the gallery manage page.
+gallery.album.delete.confirm:
+    - 'Delete this album? Photos will not be deleted.'
+    - Confirmation message shown in the modal when the member tries to delete an album.
+gallery.photo.saving:
+    - 'Saving…'
+    - Label on the save button in the photo edit sheet while the AJAX request is in progress.
+gallery.photo.saved:
+    - 'Saved'
+    - Label on the save button in the photo edit sheet after a successful save.
+gallery.photo.deleting:
+    - 'Deleting…'
+    - Label on the delete button in the photo edit sheet while the delete request is in progress.
+gallery.photo.sheet.description.placeholder:
+    - 'Add a description…'
+    - Placeholder text for the description textarea in the photo edit bottom sheet.