diff --git a/e2e/search.spec.ts b/e2e/search.spec.ts
index 9b931cd..9fd0fb4 100644
--- a/e2e/search.spec.ts
+++ b/e2e/search.spec.ts
@@ -38,7 +38,9 @@ test.describe('search', () => {
 
     test('should select a source', async ({ page }) => {
       await page.getByText('Fake-Collection').click();
-      await expect(page.getByText('fake collection x')).toBeVisible();
+      // selected pill + its remove (×) button, labelled "Effacer"
+      await expect(page.getByText('fake collection')).toBeVisible();
+      await expect(page.getByRole('button', { name: 'Effacer', exact: true })).toBeVisible();
       await expect(page.getByLabel('fake-collection').locator('span')).toBeChecked();
     });
   });
diff --git a/public/terms_en.md b/public/terms_en.md
index 46829c3..2d54f0f 100644
--- a/public/terms_en.md
+++ b/public/terms_en.md
@@ -1,4 +1,4 @@
-## **Privacy Policy – WeLearn**
+## **WeLearn Privacy Policy**
 
 ### **1\. Who are we?**
 
diff --git a/public/terms_fr.md b/public/terms_fr.md
index edc1c65..50cbb24 100644
--- a/public/terms_fr.md
+++ b/public/terms_fr.md
@@ -1,4 +1,4 @@
-## **Politique de confidentialité – WeLearn**
+## **Politique de confidentialité de WeLearn**
 
 ### **1\. Qui sommes-nous ?**
 
diff --git a/src/App.vue b/src/App.vue
index 86464fb..d4f522b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,5 +60,7 @@ onMounted(async () => {
 .fullscreen {
   width: 100vw;
   height: 100vh;
+  /* dvh = height actually visible on phones (address bar shown); 100vh is taller there and lets the page scroll the nav away */
+  height: 100dvh;
 }
 </style>
diff --git a/src/assets/base.css b/src/assets/base.css
index 93be93f..bdad0bc 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -144,6 +144,7 @@ tbody {
 }
 body {
   height: 100vh;
+  height: 100dvh;
   color: var(--neutral-100);
   background: var(--neutral-0);
 
diff --git a/src/assets/logo-symbol.png b/src/assets/logo-symbol.png
new file mode 100644
index 0000000..45f23f2
Binary files /dev/null and b/src/assets/logo-symbol.png differ
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 3d4e44a..85acb7e 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,7 +1,9 @@
 <template>
   <router-link class="app-header-link" to="/">
     <div class="app-header">
-      <img alt="App large logo" class="logo" src="@/assets/logo.png" />
+      <!-- both loaded up front and toggled by CSS: a <picture> swap lags behind the size change and flickers -->
+      <img alt="App large logo" class="logo logo-full" src="@/assets/logo.png" />
+      <img alt="App large logo" class="logo logo-symbol" src="@/assets/logo-symbol.png" />
 
       <span class="is-title has-text-weight-semibold has-text-success ml-1">Beta</span>
     </div>
@@ -10,11 +12,9 @@
 
 <style scoped>
 .app-header {
-  margin: 1rem 0 1em 1rem;
+  margin: 1rem 0 0 1rem;
   z-index: 1;
   display: flex;
-  margin-left: 2%;
-  margin-bottom: 0rem;
 }
 
 .app-header-link {
@@ -24,15 +24,38 @@
 .logo {
   height: 100%;
   width: auto;
-  max-height: clamp(24px, 5vw, 3.5em);
+  max-height: 3.5em;
+}
+.logo-symbol {
+  display: none;
 }
 
+/* 1330px = where full logo + labelled nav stop fitting (measured ~1280px in FR); below it the logo is
+   swapped for the symbol, nav labels become tooltips (BaseNavItem) and the nav loses its top space (NavComponent).
+   Keep the three breakpoints in sync */
 @media (max-width: 1330px) {
+  /* bottom-align with the nav: the 2.5rem logo's centre then sits 1.25rem up, same as the nav icons'
+     (1.5rem icon + 0.5rem padding under it), so they stay level whatever the nav's top padding */
   .app-header-link {
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+    align-self: flex-end;
+  }
+  .app-header {
+    margin: 0 0 0 1rem;
+  }
+  .logo {
+    height: 2.5rem;
+    max-height: none;
+  }
+  .logo-full {
+    display: none;
+  }
+  .logo-symbol {
+    display: block;
+  }
+  .app-header > span {
     display: none;
-    & > * {
-      display: none;
-    }
   }
 }
 </style>
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
index 001b828..ffe4044 100644
--- a/src/components/AppLayout.vue
+++ b/src/components/AppLayout.vue
@@ -1,39 +1,10 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const content = ref();
-
-const manageNavBarAnimations = () => {
-  if (document?.defaultView?.innerWidth && document.defaultView.innerWidth > 992) return;
-
-  const appHeaderName = document.getElementsByClassName('name-only')[0] as HTMLElement;
-  const appHeader = document.getElementsByClassName('app-header')[0] as HTMLElement;
-
-  const header = document.getElementsByClassName('appLayout')[0] as HTMLElement;
-
-  const scrollTop = content.value.scrollTop;
-
-  if (!header) return;
-
-  if (scrollTop > 0) {
-    if (!appHeaderName || !appHeader) return;
-    appHeaderName.style.display = 'flex';
-    appHeader.style.display = 'none';
-    header.style.gridTemplateRows = '3rem auto';
-  } else {
-    appHeaderName.style.display = 'none';
-    appHeader.style.display = 'flex';
-    header.style.gridTemplateRows = '6.5em auto';
-  }
-};
-</script>
 <template>
   <div class="appLayout">
     <div class="header">
       <slot name="header"></slot>
       <slot name="sidebar"> </slot>
     </div>
-    <div class="main" ref="content" @scroll="manageNavBarAnimations"><slot name="main"></slot></div>
+    <div class="main"><slot name="main"></slot></div>
     <div class="wl-footer">
       <slot name="footer"></slot>
     </div>
@@ -60,6 +31,7 @@ const manageNavBarAnimations = () => {
   width: 100%;
   height: 100%;
   overflow: auto;
+  overscroll-behavior: contain;
   scroll-behavior: smooth;
 }
 
diff --git a/src/components/ChatArea.vue b/src/components/ChatArea.vue
index a037581..7f3a0b6 100644
--- a/src/components/ChatArea.vue
+++ b/src/components/ChatArea.vue
@@ -71,13 +71,17 @@ const handleOnWheel = () => {
       </div>
       <slot name="queues"></slot>
     </div>
-  </div>
-  <div
-    class="scroll-arrow"
-    :class="displayArrow ? 'visible' : 'hidden'"
-    @click="() => scrollToBottom(true)"
-  >
-    <ChevronDownVue />
+    <!-- zero-height sticky anchor: the button floats at the bottom of the scroller without taking layout space -->
+    <div class="scroll-arrow-anchor">
+      <button
+        v-show="displayArrow"
+        class="scroll-arrow"
+        :aria-label="$t('goToBottom')"
+        @click="() => scrollToBottom(true)"
+      >
+        <ChevronDownVue />
+      </button>
+    </div>
   </div>
 </template>
 
@@ -107,31 +111,36 @@ const handleOnWheel = () => {
   margin-top: auto;
 }
 
-.scroll-arrow {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  z-index: 1;
-
-  margin: 1rem;
+.scroll-arrow-anchor {
+  position: sticky;
+  bottom: 0.75rem;
+  height: 0;
   display: flex;
   justify-content: center;
-  align-items: center;
-  opacity: 0;
 }
 
-.visible {
-  opacity: 1;
+.scroll-arrow {
+  all: unset;
+  box-sizing: border-box;
+  transform: translateY(-100%);
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0.4rem;
+  border-radius: 50%;
+  border: 1px solid var(--neutral-20);
+  background-color: var(--neutral-0);
+  color: var(--neutral-80);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
   cursor: pointer;
-  transition: opacity 0.1s ease-in-out;
-}
-.hidden {
-  opacity: 0;
-  cursor: default;
-  transition: opacity 0.3s ease-in-out;
-  width: 0;
-  height: 0;
-  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &:hover {
+    background-color: var(--neutral-10);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+  }
 }
 
 .empty-chat {
@@ -140,41 +149,4 @@ const handleOnWheel = () => {
   height: 50%;
   align-items: center;
 }
-
-@media (min-width: 768px) {
-  .bottom-wrapper {
-    width: 100%;
-    padding-bottom: 1rem;
-  }
-  .scroll-arrow {
-    all: unset;
-    position: absolute;
-    bottom: 10%;
-    right: 50%;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    border: 1px solid;
-    padding: 4px;
-    color: var(--neutral-80);
-    background-color: rgba(255, 255, 255, 0.5);
-
-    margin: 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-  }
-
-  .visible {
-    opacity: 1;
-    cursor: pointer;
-    transition: opacity 0.1s ease-in-out;
-  }
-  .hidden {
-    opacity: 0;
-    cursor: default;
-    transition: opacity 0.3s ease-in-out;
-  }
-}
 </style>
diff --git a/src/components/ChatBuble.vue b/src/components/ChatBuble.vue
index 306a37a..50b1c82 100644
--- a/src/components/ChatBuble.vue
+++ b/src/components/ChatBuble.vue
@@ -85,13 +85,14 @@ const copyMessage = (msg: string) => {
   color: var(--neutral-80);
   padding: 1.25rem 1rem;
   gap: 1rem;
-  text-align: justify;
+  text-align: left;
 }
 .chat-bubble.last-message {
   padding-bottom: 5rem;
 }
 
 .cahtAvatar {
+  flex-shrink: 0;
   height: 1.5rem;
   margin-bottom: 0.9rem;
 }
@@ -100,12 +101,17 @@ const copyMessage = (msg: string) => {
   overflow: visible;
   margin: auto 0;
   border-radius: 0;
-  margin-left: 0.5rem;
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   margin-left: 0;
   & > a {
     color: var(--primary);
   }
+  /* markdown comes in via v-html, so lists need :deep to get an indent; otherwise the numbers sit in the margin */
+  & :deep(ol),
+  & :deep(ul) {
+    padding-left: 1.5em;
+  }
 }
 
 @media (max-width: 1450px) {
@@ -122,29 +128,17 @@ const copyMessage = (msg: string) => {
 }
 
 @media (max-width: 992px) {
+  /* keep avatar beside the text; the copy button wraps under the message, aligned with the text */
   .chat-bubble {
-    font-size: 0.9em;
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  .chat-bubble-content {
-    width: 100%;
-    margin-left: 0;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.75rem;
+    padding: 1rem 0.5rem;
   }
 
   .details {
-    width: 10%;
-    height: 100%;
+    flex-basis: 100%;
     display: flex;
-    align-self: flex-end;
-    gap: 0.5rem;
-
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: flex-end;
+    padding-left: 2.75rem;
   }
 
   .chat-bubble.last-message {
diff --git a/src/components/ChatComponent.vue b/src/components/ChatComponent.vue
index b6cf96b..f74b8e5 100644
--- a/src/components/ChatComponent.vue
+++ b/src/components/ChatComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import ChatArea from '@/components/ChatArea.vue';
 import ChatBuble from '@/components/ChatBuble.vue';
 import ChatInput from '@/components/ChatInput.vue';
@@ -9,22 +9,43 @@ import ChatQueuesPills from '@/components/ChatQueuesPills.vue';
 import Loading from '@/components/LoadingComponent.vue';
 import { useChatStore, CHAT_STATUS } from '@/stores/chat';
 import DeleteButton from '@/components/DeleteButton.vue';
+import ModalComponent from '@/components/ModalComponent.vue';
 
 const store = useChatStore();
 
 onMounted(() => store.getRandomQuestionNumber());
 
 const computedStatus = computed(() => store.chatStatus);
+
+// plain hash jumps get lost in the nested scroll containers on phones, so scroll explicitly
+const scrollToSources = () =>
+  document.getElementById('sourcesAnchor')?.scrollIntoView({ behavior: 'smooth' });
+
+const confirmClear = ref(false);
+const clearChat = () => {
+  store.$reset();
+  confirmClear.value = false;
+};
 </script>
 <template>
   <div class="chat-template">
-    <div class="delete-button-wrapper">
-      <DeleteButton
-        v-if="computedStatus !== CHAT_STATUS.EMPTY"
-        :action="store.$reset"
-        :delText="$t('clearChat')"
-      />
+    <div class="chat-toolbar" v-if="computedStatus !== CHAT_STATUS.EMPTY">
+      <DeleteButton :action="() => (confirmClear = true)" :delText="$t('clearChat')" />
     </div>
+    <!-- v-if: ModalComponent only reads isOpen on mount -->
+    <ModalComponent
+      v-if="confirmClear"
+      isOpen
+      :title="$t('confirmClearChat')"
+      :onClose="() => (confirmClear = false)"
+    >
+      <template #actions>
+        <div class="buttons my-4">
+          <button class="button" @click="confirmClear = false">{{ $t('cancel') }}</button>
+          <button class="button is-danger" @click="clearChat">{{ $t('clearChat') }}</button>
+        </div>
+      </template>
+    </ModalComponent>
     <ChatArea :isEmpty="computedStatus === CHAT_STATUS.EMPTY">
       <template #message-list>
         <ChatEmptyContent
@@ -74,9 +95,10 @@ const computedStatus = computed(() => store.chatStatus);
       </template>
     </ChatArea>
     <a
-      v-if="computedStatus !== CHAT_STATUS.DONE"
+      v-if="computedStatus === CHAT_STATUS.DONE && store.sourcesList.length"
       class="sourcesListLink phone"
       href="#sourcesAnchor"
+      @click.prevent="scrollToSources"
       >{{ $t('goToSources') }}</a
     >
 
@@ -99,11 +121,12 @@ const computedStatus = computed(() => store.chatStatus);
   height: 100%;
 }
 
-.delete-button-wrapper {
-  position: absolute;
-  right: 10%;
-  top: 1rem;
-  z-index: 1;
+.chat-toolbar {
+  width: 80%;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.5rem 0;
+  margin-bottom: 0.5rem;
 }
 
 .trash-icon {
@@ -158,12 +181,9 @@ const computedStatus = computed(() => store.chatStatus);
 }
 
 @media (max-width: 950px) {
-  .delete-button-wrapper {
-    position: absolute;
-    right: 0.5rem;
-    top: auto;
-    bottom: 2rem;
-    z-index: 1;
+  .chat-toolbar {
+    width: 100%;
+    padding-inline: 0.5rem;
   }
 
   .queues-wrapper {
@@ -175,10 +195,10 @@ const computedStatus = computed(() => store.chatStatus);
   }
 
   .input-area {
-    width: 85%;
+    width: calc(100% - 1rem);
     padding: 0.25rem 0.25rem;
     border-radius: 0.375rem;
-    margin: 0 1.5rem 0 0;
+    margin: 0 0.5rem;
 
     line-height: 1;
     height: fit-content;
diff --git a/src/components/ChatError.vue b/src/components/ChatError.vue
index a2392af..8d360d9 100644
--- a/src/components/ChatError.vue
+++ b/src/components/ChatError.vue
@@ -8,7 +8,7 @@ const reload = () => {
 
 <template>
   <div class="chat-error">
-    <div>Oops something wrong hapened. Please try again later.</div>
+    <div>{{ $t('chatError') }}</div>
     <ButtonComponent color="secondary" @click="reload()">
       {{ $t('reload') }}
     </ButtonComponent>
@@ -23,6 +23,16 @@ const reload = () => {
   height: 100%;
   text-align: center;
   font-size: 1.125em;
-  color: var(--neutral-20);
+  color: var(--neutral-80);
+  width: 80%;
+  gap: 1rem;
+  margin: 2rem auto;
+}
+
+@media (max-width: 950px) {
+  .chat-error {
+    width: 100%;
+    padding-inline: 1rem;
+  }
 }
 </style>
diff --git a/src/components/ColumnTemplate.vue b/src/components/ColumnTemplate.vue
index bbbde1b..b83b527 100644
--- a/src/components/ColumnTemplate.vue
+++ b/src/components/ColumnTemplate.vue
@@ -4,6 +4,9 @@ import SidePanelIcon from '@/components/icons/SidePanelIcon.vue';
 
 import { ref, type VNodeRef } from 'vue';
 
+// filtersFirst: on narrow screens put the right panel above the content instead of below it
+defineProps<{ filtersFirst?: boolean }>();
+
 const scrollerRef = ref<VNodeRef | null>(null);
 const isOpen = ref(true);
 
@@ -12,7 +15,7 @@ const toggleOpen = () => {
 };
 </script>
 <template>
-  <div class="gridy-template">
+  <div class="gridy-template" :class="{ 'filters-first': filtersFirst }">
     <div class="panely left scroll">
       <slot name="left-panel"></slot>
     </div>
@@ -72,6 +75,10 @@ const toggleOpen = () => {
   .left {
     height: auto;
   }
+
+  .filters-first > .right {
+    order: -1;
+  }
 }
 
 @media (min-width: 992px) {
diff --git a/src/components/FiltersComponent.vue b/src/components/FiltersComponent.vue
index 69a2307..4a6d93f 100644
--- a/src/components/FiltersComponent.vue
+++ b/src/components/FiltersComponent.vue
@@ -8,7 +8,7 @@ import SourcesSelector from '@/components/dropdowns/SourcesSelector.vue';
 import LanguagesSelector from '@/components/dropdowns/LanguagesSelector.vue';
 import { useFiltersStore } from '@/stores/filters';
 import { useSourcesStore } from '@/stores/sources';
-import { ref, watch, toRefs } from 'vue';
+import { computed, watch, toRefs } from 'vue';
 
 const props = defineProps<{
   shouldClose?: boolean;
@@ -17,33 +17,54 @@ const props = defineProps<{
 const sourcesStore = useSourcesStore();
 const { shouldClose } = toRefs(props);
 
-const hideFilters = ref(false);
+const filters = useFiltersStore();
+const hideFilters = computed(() => !filters.panelOpen);
 watch(shouldClose, (close) => {
   if (close) {
-    hideFilters.value = close;
+    filters.panelOpen = false;
   }
 });
 
-const filters = useFiltersStore();
-const toggleFilters = () => (hideFilters.value = !hideFilters.value);
+const toggleFilters = () => (filters.panelOpen = !filters.panelOpen);
+const syncSection = (key: 'sources' | 'sdgs' | 'languages', e: Event) =>
+  (filters.openSections[key] = (e.target as HTMLDetailsElement).open);
+
+const activeCount = computed(
+  () => filters.sourcesFilters.length + filters.sdgFilters.length + filters.languageFilters.length
+);
 
 const clearFilters = () => {
   filters.handleResetFilters();
 };
 </script>
 <template>
-  <div
-    class="is-clickable is-flex is-align-items-center is-align-content-center mt-4 mb-5"
-    @click="toggleFilters"
-  >
-    <FilterSettingIcon class="mr-4" />
-    <span class="is-flex is-align-items-center is-size-6">{{ $t('searchFilters') }}</span>
-    <div class="chevron-icon">
-      <ChevronUpIcon class="ml-2" v-if="!hideFilters" />
-      <ChevronDownIcon class="ml-2" v-else />
-    </div>
+  <!-- two-line header (like a list item with a leading icon): the icon spans and centres on
+       title + status line; the status line stays outside the collapsible part so count + clear are always visible -->
+  <div class="filters-head">
+    <FilterSettingIcon class="head-icon" aria-hidden="true" @click="toggleFilters" />
+    <button
+      type="button"
+      class="filters-toggle"
+      :aria-expanded="!hideFilters"
+      @click="toggleFilters"
+    >
+      <span>{{ $t('searchFilters') }}</span>
+      <ChevronUpIcon class="chevron-icon" v-if="!hideFilters" />
+      <ChevronDownIcon class="chevron-icon" v-else />
+    </button>
+    <p class="status-line">
+      <template v-if="filters.hasFilters">
+        <span>{{ $t('filtersSelected', activeCount) }}</span>
+        <span aria-hidden="true">·</span>
+        <button class="remove-all" :aria-label="$t('clearFilters')" @click="clearFilters">
+          {{ $t('removeAll') }}
+        </button>
+      </template>
+      <span v-else class="has-text-grey">{{ $t('noFiltersSelected') }}</span>
+    </p>
   </div>
-  <div v-if="filters.hasFilters" class="is-flex">
+  <!-- phones: when the panel is collapsed the status line is the summary, the pills would eat the screen -->
+  <div v-if="filters.hasFilters" class="is-flex pills" :class="{ 'pills-collapsed': hideFilters }">
     <div class="is-flex is-flex-direction-column">
       <div class="is-flex flex-wrap selection mb-1" v-if="filters.sourcesFilters.length">
         <p>{{ $t('sources') }}{{ $t(':') }}</p>
@@ -55,7 +76,13 @@ const clearFilters = () => {
           :content="`${$t(`corpus.${filter}`, `${filter.replace('-', ' ')}`)}`"
         >
           <template #actions>
-            <span class="is-clickable" @click="filters.handleSourcesFilterChange(filter)"> x </span>
+            <button
+              class="remove-pill"
+              :aria-label="$t('removeSelection')"
+              @click="filters.handleSourcesFilterChange(filter)"
+            >
+              ×
+            </button>
           </template>
         </GenericPillComponent>
       </div>
@@ -69,7 +96,13 @@ const clearFilters = () => {
           :content="filter.toString()"
         >
           <template #actions>
-            <span class="is-clickable" @click="filters.handleSdgFilterChange(filter)"> x </span>
+            <button
+              class="remove-pill"
+              :aria-label="$t('removeSelection')"
+              @click="filters.handleSdgFilterChange(filter)"
+            >
+              ×
+            </button>
           </template>
         </GenericPillComponent>
       </div>
@@ -83,32 +116,44 @@ const clearFilters = () => {
           :content="$t(`lang.${filter}`, `${filter}`)"
         >
           <template #actions>
-            <span class="is-clickable" @click="filters.handleLanguageFilterChange(filter)">
-              x
-            </span>
+            <button
+              class="remove-pill"
+              :aria-label="$t('removeSelection')"
+              @click="filters.handleLanguageFilterChange(filter)"
+            >
+              ×
+            </button>
           </template>
         </GenericPillComponent>
       </div>
     </div>
-    <p class="ml-auto mr-6 remove-all" @click="clearFilters">{{ $t('removeAll') }}</p>
   </div>
-  <p v-else>
-    <span class="has-text-grey">{{ $t('noFiltersSelected') }}</span>
-  </p>
   <div :class="{ hide: hideFilters }" class="pr-5 filters">
-    <details class="filter-section" open>
+    <details
+      class="filter-section"
+      :open="filters.openSections.sources"
+      @toggle="syncSection('sources', $event)"
+    >
       <summary>{{ $t('sources') }}</summary>
       <div class="filter-options">
         <SourcesSelector :availableSources="sourcesStore.sourcesList || {}" />
       </div>
     </details>
-    <details class="filter-section" open>
+    <details
+      class="filter-section"
+      :open="filters.openSections.sdgs"
+      @toggle="syncSection('sdgs', $event)"
+    >
       <summary>{{ $t('sdgsAcronym') }}</summary>
       <div class="filter-options">
         <SDGSelector />
       </div>
     </details>
-    <details class="filter-section" open>
+    <details
+      class="filter-section"
+      :open="filters.openSections.languages"
+      @toggle="syncSection('languages', $event)"
+    >
       <summary>{{ $t('languages') }}</summary>
       <div class="filter-options">
         <LanguagesSelector :availableLanguages="filters.languageList" />
@@ -118,20 +163,79 @@ const clearFilters = () => {
 </template>
 
 <style scoped>
+.remove-pill {
+  all: unset;
+  cursor: pointer;
+  margin-left: 0.25rem;
+  font-size: 1rem;
+  line-height: 1;
+}
+.remove-pill:focus-visible {
+  outline: 2px solid currentColor;
+}
 .selection {
   flex-wrap: wrap;
 }
-.chevron-icon {
-  height: 1.5rem;
+.filters-head {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 0.75rem;
+  row-gap: 0.125rem;
+  align-items: center;
+  margin: 1rem 0;
+}
+.head-icon {
+  grid-row: 1 / span 2;
   width: 1.5rem;
+  height: 1.5rem;
+  cursor: pointer;
+}
+.filters-toggle {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+}
+/* desktop: keep clear of the sidebar open/close button pinned to the panel's top-right */
+@media (min-width: 992px) {
+  .filters-toggle {
+    max-width: calc(100% - 4rem);
+  }
+}
+.chevron-icon {
+  flex-shrink: 0;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 .remove-all {
+  all: unset;
   cursor: pointer;
-  color: var(--primary-60);
-  font-weight: bold;
+  color: var(--primary-dark);
   font-size: 0.875rem;
-  width: 6rem;
   white-space: nowrap;
+  &:hover,
+  &:focus-visible {
+    text-decoration: underline;
+  }
+}
+/* sits in the grid's second column, under the "Search filters" label, so it reads as its subtitle */
+.status-line {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+@media (max-width: 991px) {
+  .pills-collapsed {
+    display: none !important;
+  }
 }
 .filters {
   max-height: 90%;
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index a6fe1f9..08134f0 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="footer-wrapper">
     <div>
-      <a href="mailto:welearn@learningplanetinstitute.org">welearn@learningplanetinstitute.org</a>
+      <a
+        href="mailto:welearn@learningplanetinstitute.org"
+        title="welearn@learningplanetinstitute.org"
+        >{{ $t('contact') }}</a
+      >
       <router-link class="terms" to="/terms">
         <span class="item-name">{{ $t('terms') }}</span>
       </router-link>
diff --git a/src/components/TextAreaComponent.vue b/src/components/TextAreaComponent.vue
index 6e49eac..752dab2 100644
--- a/src/components/TextAreaComponent.vue
+++ b/src/components/TextAreaComponent.vue
@@ -26,11 +26,13 @@ defineEmits(['update:modelValue']);
   border: none;
   height: 100%;
   padding: 2rem;
+  /* room for the clear ⓧ in the top-right corner */
+  padding-right: 3rem;
 }
 
 @media (max-width: 768px) {
   .textarea {
-    padding: 1rem;
+    padding: 1rem 2.5rem 1rem 1rem;
     font-size: 0.875em;
   }
 }
diff --git a/src/components/TooltipComponent.vue b/src/components/TooltipComponent.vue
index 05268c0..d0155d3 100644
--- a/src/components/TooltipComponent.vue
+++ b/src/components/TooltipComponent.vue
@@ -4,11 +4,15 @@ defineProps<{
   isLeft?: boolean;
   isRight?: boolean;
   isOnTop?: boolean;
+  isBelow?: boolean;
 }>();
 </script>
 <template>
-  <div class="tooltip-wraper">
-    <div class="tooltip" :class="{ isleft: isLeft, isright: isRight, top: isOnTop }">
+  <div class="tooltip-wraper" :class="{ below: isBelow }">
+    <div
+      class="tooltip"
+      :class="{ isleft: isLeft, isright: isRight, top: isOnTop, below: isBelow }"
+    >
       {{ tooltipText }}
     </div>
   </div>
@@ -33,6 +37,19 @@ defineProps<{
   white-space: nowrap;
 }
 
+/* below: the wrapper overlays the parent (needs position: relative) so it takes no space in the
+   parent's layout (no flex gap), and the tooltip is centred under it */
+.tooltip-wraper.below {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.tooltip.below {
+  top: calc(100% + 0.5rem);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .top.isright {
   top: -60px;
   border-bottom-left-radius: 0;
diff --git a/src/components/__tests__/ChatError.test.ts b/src/components/__tests__/ChatError.test.ts
index 98d7be4..550e55f 100644
--- a/src/components/__tests__/ChatError.test.ts
+++ b/src/components/__tests__/ChatError.test.ts
@@ -7,6 +7,6 @@ describe('ChatError', () => {
   it('renders properly', () => {
     const wrapper = mount(ChatError);
     expect(wrapper.element).toMatchSnapshot();
-    expect(wrapper.text()).toContain('Oops something wrong hapened. Please try again later.');
+    expect(wrapper.text()).toContain('chatError');
   });
 });
diff --git a/src/components/__tests__/__snapshots__/ChatError.test.ts.snap b/src/components/__tests__/__snapshots__/ChatError.test.ts.snap
index 9612f7f..7f865f7 100644
--- a/src/components/__tests__/__snapshots__/ChatError.test.ts.snap
+++ b/src/components/__tests__/__snapshots__/ChatError.test.ts.snap
@@ -8,7 +8,7 @@ exports[`ChatError > renders properly 1`] = `
   <div
     data-v-9a0d2e9c=""
   >
-    Oops something wrong hapened. Please try again later.
+    chatError
   </div>
   <button
     class="button is-secondary"
diff --git a/src/components/__tests__/__snapshots__/QandA.spec.ts.snap b/src/components/__tests__/__snapshots__/QandA.spec.ts.snap
index 8d41cbc..9e0d900 100644
--- a/src/components/__tests__/__snapshots__/QandA.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/QandA.spec.ts.snap
@@ -16,16 +16,13 @@ exports[`QandA > renders properly 1`] = `
       data-v-8765cc6e=""
       data-v-dbbc9003=""
     >
-      <div
-        class="delete-button-wrapper"
-        data-v-8765cc6e=""
-      >
-        <!--v-if-->
-      </div>
-      
+      <!--v-if-->
+      <!-- v-if: ModalComponent only reads isOpen on mount -->
+      <!--v-if-->
       <div
         class="chat-component hidden-scroll"
         data-v-69ac69ea=""
+        data-v-8765cc6e=""
         style="scroll-behavior: auto;"
       >
         <div
@@ -74,31 +71,32 @@ exports[`QandA > renders properly 1`] = `
           
           
         </div>
-      </div>
-      <div
-        class="scroll-arrow hidden"
-        data-v-69ac69ea=""
-      >
-        <svg
+        <!-- zero-height sticky anchor: the button floats at the bottom of the scroller without taking layout space -->
+        <div
+          class="scroll-arrow-anchor"
           data-v-69ac69ea=""
-          viewBox="0 0 448 512"
-          xmlns="http://www.w3.org/2000/svg"
         >
-          <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-          <path
-            d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
-            fill="currentColor"
-          />
-        </svg>
+          <button
+            aria-label="goToBottom"
+            class="scroll-arrow"
+            data-v-69ac69ea=""
+            style="display: none;"
+          >
+            <svg
+              data-v-69ac69ea=""
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+              <path
+                d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
-      
-      <a
-        class="sourcesListLink phone"
-        data-v-8765cc6e=""
-        href="#sourcesAnchor"
-      >
-        goToSources
-      </a>
+      <!--v-if-->
       <div
         class="input-area"
         data-v-8765cc6e=""
@@ -192,12 +190,15 @@ exports[`QandA > renders properly 1`] = `
   >
     
     
+    <!-- two-line header (like a list item with a leading icon): the icon spans and centres on
+       title + status line; the status line stays outside the collapsible part so count + clear are always visible -->
     <div
-      class="is-clickable is-flex is-align-items-center is-align-content-center mt-4 mb-5"
+      class="filters-head"
       data-v-e843c1dd=""
     >
       <svg
-        class="mr-4"
+        aria-hidden="true"
+        class="head-icon"
         data-v-e843c1dd=""
         fill="none"
         height="24"
@@ -233,18 +234,19 @@ exports[`QandA > renders properly 1`] = `
           </clippath>
         </defs>
       </svg>
-      <span
-        class="is-flex is-align-items-center is-size-6"
-        data-v-e843c1dd=""
-      >
-        searchFilters
-      </span>
-      <div
-        class="chevron-icon"
+      <button
+        aria-expanded="true"
+        class="filters-toggle"
         data-v-e843c1dd=""
+        type="button"
       >
+        <span
+          data-v-e843c1dd=""
+        >
+          searchFilters
+        </span>
         <svg
-          class="ml-2"
+          class="chevron-icon"
           data-v-e843c1dd=""
           viewBox="0 0 448 512"
           xmlns="http://www.w3.org/2000/svg"
@@ -255,18 +257,21 @@ exports[`QandA > renders properly 1`] = `
             fill="currentColor"
           />
         </svg>
-      </div>
-    </div>
-    <p
-      data-v-e843c1dd=""
-    >
-      <span
-        class="has-text-grey"
+      </button>
+      <p
+        class="status-line"
         data-v-e843c1dd=""
       >
-        noFiltersSelected
-      </span>
-    </p>
+        <span
+          class="has-text-grey"
+          data-v-e843c1dd=""
+        >
+          noFiltersSelected
+        </span>
+      </p>
+    </div>
+    <!-- phones: when the panel is collapsed the status line is the summary, the pills would eat the screen -->
+    <!--v-if-->
     <div
       class="pr-5 filters"
       data-v-e843c1dd=""
diff --git a/src/components/dropdowns/SourcesSelector.vue b/src/components/dropdowns/SourcesSelector.vue
index c012393..6670b37 100644
--- a/src/components/dropdowns/SourcesSelector.vue
+++ b/src/components/dropdowns/SourcesSelector.vue
@@ -4,7 +4,6 @@ import ChevronDownIcon from '@/components/icons/ChevronDown.vue';
 import ChevronUpIcon from '@/components/icons/ChevronUp.vue';
 import { useFiltersStore } from '@/stores/filters';
 import type { Corpus } from '@/types';
-import { ref } from 'vue';
 
 defineProps<{ isUp?: boolean; context?: string; availableSources: Record<string, Corpus[]> }>();
 const filters = useFiltersStore();
@@ -14,7 +13,7 @@ const selectedCount = (sources: Corpus[]) =>
   sources.filter((source) => filters.sourcesFilters.includes(source.name)).length;
 
 // categories are open by default; the chevron folds them (ticking the category never does)
-const folded = ref<Record<string, boolean>>({});
+const folded = filters.foldedCategories;
 </script>
 <template>
   <div v-for="(sources, category) in availableSources" :key="category" class="category">
diff --git a/src/components/icons/LinesLeaningIcon.vue b/src/components/icons/LinesLeaningIcon.vue
index bc69eda..b5cd6f7 100644
--- a/src/components/icons/LinesLeaningIcon.vue
+++ b/src/components/icons/LinesLeaningIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="96 96 448 448"
+    width="20"
+    height="20"
+    fill="currentColor"
+  >
     <!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path
       d="M318.4 138.1C324 121.3 314.9 103.2 298.2 97.6C281.5 92 263.3 101.1 257.7 117.8L129.7 501.8C124.1 518.6 133.2 536.7 149.9 542.3C166.6 547.9 184.8 538.8 190.4 522.1L318.4 138.1zM389.3 96.4C371.9 93.5 355.4 105.3 352.5 122.7L288.5 506.7C285.6 524.1 297.4 540.6 314.8 543.5C332.2 546.4 348.7 534.6 351.6 517.2L415.6 133.2C418.5 115.8 406.7 99.3 389.3 96.4zM480 96C462.3 96 448 110.3 448 128L448 512C448 529.7 462.3 544 480 544C497.7 544 512 529.7 512 512L512 128C512 110.3 497.7 96 480 96z"
diff --git a/src/components/microlearning/LikertScale.vue b/src/components/microlearning/LikertScale.vue
index fffb90d..b9a4198 100644
--- a/src/components/microlearning/LikertScale.vue
+++ b/src/components/microlearning/LikertScale.vue
@@ -10,9 +10,12 @@
       >
         {{ value }}
       </button>
-      <span class="levelLegend" v-if="value === 1 || value == 5">{{
-        value === 1 ? $t('autoEvaluation.notAtAll') : $t('autoEvaluation.tottally')
-      }}</span>
+      <span
+        class="levelLegend"
+        :class="value === 1 ? 'start' : 'end'"
+        v-if="value === 1 || value == 5"
+        >{{ value === 1 ? $t('autoEvaluation.notAtAll') : $t('autoEvaluation.tottally') }}</span
+      >
     </div>
   </div>
 </template>
@@ -33,7 +36,7 @@ defineProps<{ disabled?: boolean }>();
 .scaleValue {
   background-color: var(--neutral-0);
   text-align: center;
-  padding: 0.5rem 2rem;
+  padding: 0.5rem 0;
   border-radius: 0.5rem;
   margin-top: 0.5rem;
   cursor: pointer;
@@ -58,14 +61,29 @@ defineProps<{ disabled?: boolean }>();
   color: var(--neutral-0);
 }
 
+/* legends hug the outer edges and may run inward past their narrow column instead of wrapping */
 .levelLegend {
   font-size: 0.8rem;
   color: var(--neutral-80);
+  white-space: nowrap;
+}
+.levelLegend.start {
+  align-self: flex-start;
+}
+.levelLegend.end {
+  align-self: flex-end;
+}
+
+@media (max-width: 576px) {
+  .scaleWrapper {
+    gap: 0.5rem;
+  }
 }
 
 .scaleLevel {
   display: flex;
   flex: 1;
+  min-width: 0;
   flex-direction: column;
   align-items: center;
   width: 100%;
diff --git a/src/components/nav/BaseNavItem.vue b/src/components/nav/BaseNavItem.vue
index a2a0ef5..ef2b401 100644
--- a/src/components/nav/BaseNavItem.vue
+++ b/src/components/nav/BaseNavItem.vue
@@ -10,11 +10,15 @@
         <component :is="icon" />
       </div>
       <span class="item-name">{{ $t(`nav.${name}`) }}</span>
+      <!-- aria-hidden: screen readers already get the name from .item-name -->
+      <TooltipComponent class="tltip" isBelow aria-hidden="true" :tooltipText="$t(`nav.${name}`)" />
     </router-link>
   </div>
 </template>
 
 <script setup lang="ts">
+import TooltipComponent from '@/components/TooltipComponent.vue';
+
 defineProps<{
   to: string;
   name: string;
@@ -67,6 +71,11 @@ defineProps<{
   align-items: center;
   justify-content: center;
 }
+/* icons ship at different native sizes (15–24px); force one box so they read as a set */
+.icon :deep(svg) {
+  width: 1.375rem;
+  height: 1.375rem;
+}
 
 .item-name {
   width: auto;
@@ -88,13 +97,21 @@ defineProps<{
   }
 }
 
-@media (max-width: 1100px) {
+/* icon-only nav: the label is visually hidden (still read by screen readers) and shown as a tooltip on hover/focus */
+@media (max-width: 1330px) {
+  .router-link {
+    position: relative;
+  }
   .item-name {
-    display: none;
-    visibility: hidden;
-    opacity: 0;
-    width: 0rem;
-    white-space: nowrap;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+  .router-link:hover .tltip,
+  .router-link:focus-visible .tltip {
+    display: block;
   }
 }
 
@@ -110,9 +127,11 @@ defineProps<{
   }
 }
 
-@media (max-width: 450px) {
+/* phones (iPhone SE 375px and up): logo + 6 icons + language must fit on one row */
+@media (max-width: 640px) {
   .router-link {
-    padding-inline: 0.05rem;
+    margin: 0;
+    padding-inline: 0.25rem;
   }
   .link-wrapper {
     padding-inline: 0rem;
diff --git a/src/components/nav/LanguageSelector.vue b/src/components/nav/LanguageSelector.vue
index 33778ca..b03fd4b 100644
--- a/src/components/nav/LanguageSelector.vue
+++ b/src/components/nav/LanguageSelector.vue
@@ -29,6 +29,15 @@ const storeLanguage = (e: Event) => {
   padding-bottom: 0.25rem;
 }
 
+@media (max-width: 650px) {
+  .language-selector {
+    margin-right: 0.5rem;
+  }
+  select {
+    padding-inline: 0.5rem;
+  }
+}
+
 select,
 ::picker(select) {
   appearance: base-select;
@@ -56,6 +65,8 @@ select:open::picker-icon {
   rotate: 180deg;
 }
 ::picker(select) {
+  /* open towards the left: the selector sits at the right edge of the screen */
+  position-area: bottom span-left;
   border-radius: 8px;
   border: 1px solid #cccccc;
 }
diff --git a/src/components/nav/NavComponent.vue b/src/components/nav/NavComponent.vue
index f97f7fd..d5d294b 100644
--- a/src/components/nav/NavComponent.vue
+++ b/src/components/nav/NavComponent.vue
@@ -147,9 +147,15 @@ const utilityEntries = [
   }
 }
 
-@media (max-width: 768px) {
+/* icon-only nav (in sync with AppHeader's 1330px): drop the top space kept for the full logo */
+@media (max-width: 1330px) {
   .nav-items {
     padding-top: 0.05rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .nav-items {
     width: 95%;
     margin: 0 auto;
   }
diff --git a/src/components/tutor/StatusModal.vue b/src/components/tutor/StatusModal.vue
index 7afc1b4..f2d8317 100644
--- a/src/components/tutor/StatusModal.vue
+++ b/src/components/tutor/StatusModal.vue
@@ -44,6 +44,15 @@ defineProps<{
 .status {
   position: relative;
   padding: 2rem;
+  max-width: 26rem;
+  margin-inline: auto;
+}
+
+@media (max-width: 576px) {
+  .status {
+    max-width: 20rem;
+    padding: 1.5rem 1.25rem;
+  }
 }
 
 .close {
diff --git a/src/localisation/en.ts b/src/localisation/en.ts
index c3dbe4f..b0a5e57 100644
--- a/src/localisation/en.ts
+++ b/src/localisation/en.ts
@@ -20,6 +20,10 @@ export const en = {
   chatProvideValidQuestion: 'Please enter a valid question.',
   clearBookmarks: 'Clear bookmarks',
   clearChat: 'Clear chat',
+  chatError: 'Something went wrong. Please try again later.',
+  cancel: 'Cancel',
+  confirmClearChat: 'Delete this whole conversation?',
+  goToBottom: 'Scroll to latest message',
   clearSearch: 'Clear search',
   closeSidebar: 'Hide sidebar',
   copied: 'Copied!',
@@ -287,6 +291,8 @@ export const en = {
     }
   },
   reload: 'Reload',
+  clearFilters: 'Clear all filters',
+  filtersSelected: '{n} selected',
   removeAll: 'Clear all',
   removeBookmark: 'Remove bookmark',
   removeSelection: 'Clear',
@@ -335,6 +341,7 @@ export const en = {
     exportBibliography: 'Export bibliography',
     exportingBibliography: 'Exporting...'
   },
+  contact: 'Contact',
   terms: 'Privacy Policy',
   subjects: {
     Anthropology: 'Anthropology',
diff --git a/src/localisation/fr.ts b/src/localisation/fr.ts
index 51ee6cf..eb03036 100644
--- a/src/localisation/fr.ts
+++ b/src/localisation/fr.ts
@@ -19,6 +19,10 @@ export const fr = {
   chatProvideValidQuestion: 'Veuillez saisir une question valide.',
   clearBookmarks: 'Supprimer tous les favoris',
   clearChat: 'Effacer la conversation',
+  chatError: "Une erreur s'est produite. Veuillez réessayer plus tard.",
+  cancel: 'Annuler',
+  confirmClearChat: 'Supprimer toute cette conversation ?',
+  goToBottom: 'Aller au dernier message',
   clearSearch: 'Effacer la recherche',
   closeSidebar: 'Masquer la barre latérale',
   copied: 'Copié !',
@@ -290,6 +294,8 @@ export const fr = {
     }
   },
   reload: 'Recharger',
+  clearFilters: 'Effacer tous les filtres',
+  filtersSelected: '{n} sélectionné | {n} sélectionnés',
   removeAll: 'Tout effacer',
   removeBookmark: 'Retirer des favoris',
   removeSelection: 'Effacer',
@@ -339,6 +345,7 @@ export const fr = {
     exportBibliography: 'Exporter la bibliographie',
     exportingBibliography: 'Export en cours...'
   },
+  contact: 'Contact',
   terms: 'Politique de confidentialité',
   subjects: {
     Anthropology: 'Anthropologie',
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
index e238b18..89c20f8 100644
--- a/src/stores/filters.ts
+++ b/src/stores/filters.ts
@@ -54,6 +54,12 @@ export const useFiltersStore = defineStore('filters', () => {
     }
   };
 
+  // UI layout of the filter panel, shared by Chat and Search so it survives tab switches (in memory, resets on reload)
+  // narrow screens start collapsed: the panel sits above the search results there
+  const panelOpen = ref(window.matchMedia?.('(min-width: 992px)').matches ?? true);
+  const openSections = ref({ sources: true, sdgs: true, languages: true });
+  const foldedCategories = ref<Record<string, boolean>>({});
+
   const handleResetFilters = () => {
     sdgFilters.value = [];
     sourcesFilters.value = [];
@@ -71,6 +77,9 @@ export const useFiltersStore = defineStore('filters', () => {
     handleLanguageFilterChange,
     languageList,
     languageFilters,
-    handleResetFilters
+    handleResetFilters,
+    panelOpen,
+    openSections,
+    foldedCategories
   };
 });
diff --git a/src/views/SearchSDG.vue b/src/views/SearchSDG.vue
index 05b4d80..ec714f5 100644
--- a/src/views/SearchSDG.vue
+++ b/src/views/SearchSDG.vue
@@ -5,7 +5,6 @@ import { useSearchStore } from '@/stores/search';
 import SourcesListComponent from '@/components/SourcesListComponent.vue';
 import SearchIcon from '@/components/icons/SearchIcon.vue';
 import SearchWrapper from '@/components/SearchWrapper.vue';
-import DeleteButton from '@/components/DeleteButton.vue';
 import Pill from '@/components/PillComponent.vue';
 import FiltersComponent from '@/components/FiltersComponent.vue';
 import ColumnTemplate from '@/components/ColumnTemplate.vue';
@@ -37,7 +36,7 @@ const expandSearch = async () => {
 </script>
 
 <template>
-  <ColumnTemplate class="search-page">
+  <ColumnTemplate class="search-page" filtersFirst>
     <template #left-panel>
       <div class="wrapper" ref="wrapper">
         <Transition name="fade">
@@ -54,9 +53,14 @@ const expandSearch = async () => {
         </Transition>
         <SearchWrapper v-show="!isCompact" class="search-box">
           <template #textArea>
-            <div class="delete-button-wrapper" v-if="store.searchInput">
-              <DeleteButton :action="store.$reset" :delText="$t('clearSearch')" />
-            </div>
+            <!-- standard "clear field" ⓧ in the corner, far from the search button -->
+            <button
+              v-if="store.searchInput"
+              class="delete clear-search"
+              :aria-label="$t('clearSearch')"
+              :title="$t('clearSearch')"
+              @click="store.$reset"
+            />
             <TextArea v-model="store.searchInput" />
           </template>
           <template #sdgsList>
@@ -186,16 +190,11 @@ const expandSearch = async () => {
   padding: 1rem 3rem 0rem 3rem;
 }
 
-.delete-button-wrapper {
+.clear-search {
   position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  align-items: flex-end;
+  top: 0.75rem;
+  right: 0.75rem;
   z-index: 1;
-  & > * {
-    border: none;
-  }
 }
 
 .text-length-feedback {
@@ -234,7 +233,7 @@ const expandSearch = async () => {
     padding-top: 0.25rem;
   }
   .wrapper {
-    padding: 0.25rem;
+    padding: 0.25rem 1rem;
   }
   .sdg-list-title {
     font-size: 0.875em;
diff --git a/src/views/TermsPage.vue b/src/views/TermsPage.vue
index ea265ba..b79a227 100644
--- a/src/views/TermsPage.vue
+++ b/src/views/TermsPage.vue
@@ -40,7 +40,7 @@ watch(
 
 <style scoped>
 .terms-page {
-  max-width: 70%;
+  max-width: 48rem;
   margin: 2rem auto;
   padding: 0 1rem;
 }