diff --git a/e2e/tutor.spec.ts b/e2e/tutor.spec.ts
index 2b2f866..53bd4a5 100644
--- a/e2e/tutor.spec.ts
+++ b/e2e/tutor.spec.ts
@@ -164,21 +164,22 @@ test.describe('Tutor', () => {
     await page.goto('/tutor');
   });
 
-  test('should display input type file', async ({ page }) => {
-    await expect(page.getByTestId('file-input')).toBeVisible();
+  test('should display the file drop zone', async ({ page }) => {
+    await expect(page.getByTestId('file-input')).toBeAttached();
+    await expect(page.getByTestId('tutor-next-button')).toBeDisabled();
   });
 
-  test('should add more inputs files to the page', async ({ page }) => {
-    await page.getByRole('button', { name: '+' }).click();
-    const fileInputs = page.getByTestId('file-input');
-    await expect(fileInputs).toHaveCount(2);
+  test('should list added files and enable continue', async ({ page }) => {
+    await page.getByTestId('file-input').setInputFiles('./e2e/files/test_tutor.pdf');
+    await expect(page.getByTestId('file-list')).toContainText('test_tutor.pdf');
+    await expect(page.getByTestId('tutor-next-button')).toBeEnabled();
   });
 
-  test('should remove input when clicking on x', async ({ page }) => {
-    await page.getByRole('button', { name: '+' }).click();
-    await expect(page.getByTestId('file-input')).toHaveCount(2);
-    await page.getByRole('button', { name: 'x' }).last().click();
-    await expect(page.getByTestId('file-input')).toHaveCount(1);
+  test('should remove a file from the list', async ({ page }) => {
+    await page.getByTestId('file-input').setInputFiles('./e2e/files/test_tutor.pdf');
+    await page.getByTestId('file-list').getByRole('button').click();
+    await expect(page.getByTestId('file-list')).toHaveCount(0);
+    await expect(page.getByTestId('tutor-next-button')).toBeDisabled();
   });
 
   // test('should add file to input', async ({ page }) => {
diff --git a/env.d.ts b/env.d.ts
index 11f02fe..8fb94e5 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1 +1,4 @@
 /// <reference types="vite/client" />
+
+// no types published for this package
+declare module 'turndown-plugin-gfm';
diff --git a/package.json b/package.json
index 60694e6..7db14c6 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,8 @@
     "marked": "^12.0.2",
     "mixpanel-browser": "^2.80.0",
     "pinia": "^2.1.4",
+    "turndown": "^7.2.4",
+    "turndown-plugin-gfm": "^1.0.2",
     "vue": "^3.3.4",
     "vue-i18n": "9",
     "vue-router": "^4.2.4"
@@ -36,6 +38,7 @@
     "@tsconfig/node18": "^18.2.0",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^18.17.0",
+    "@types/turndown": "^5.0.6",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/eslint-config-prettier": "^8.0.0",
diff --git a/src/components/__tests__/ThirdStep.spec.ts b/src/components/__tests__/ThirdStep.spec.ts
new file mode 100644
index 0000000..4e2c83b
--- /dev/null
+++ b/src/components/__tests__/ThirdStep.spec.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ThirdStep from '@/components/tutor/ThirdStep.vue';
+import { cleanSyllabus } from '@/stores/tutor';
+
+const mountStep = (content: string) =>
+  mount(ThirdStep, {
+    props: {
+      syllabus: { content, source: 'x' },
+      giveFeedback: vi.fn(),
+      feedbackHistory: [],
+      action: vi.fn(),
+      updateSyllabus: vi.fn(),
+      restart: vi.fn(),
+      updateSyllabusInDB: vi.fn()
+    }
+  });
+
+describe('ThirdStep link bubble', () => {
+  it('shows an "open" bubble in a new tab when a link is clicked', async () => {
+    const wrapper = mountStep('See [paper](https://example.org/a).');
+    await wrapper.find('#syllabus a').trigger('click');
+    const open = wrapper.find('.link-bubble a');
+    expect(open.attributes('href')).toBe('https://example.org/a');
+    expect(open.attributes('target')).toBe('_blank');
+  });
+
+  it('hides the bubble when clicking plain text', async () => {
+    const wrapper = mountStep('See [paper](https://example.org/a).');
+    await wrapper.find('#syllabus a').trigger('click');
+    await wrapper.find('#syllabus p').trigger('click');
+    expect(wrapper.find('.link-bubble').exists()).toBe(false);
+  });
+
+  it('never offers non-web links', async () => {
+    const wrapper = mountStep('[bad](javascript:alert(1))');
+    const link = wrapper.find('#syllabus a');
+    if (link.exists()) await link.trigger('click');
+    expect(wrapper.find('.link-bubble').exists()).toBe(false);
+  });
+});
+
+describe('ThirdStep editing keeps the syllabus intact', () => {
+  const table = '| Week | Content |\n| --- | --- |\n| 1 | Intro<br>- E-waste<br>- Hubs |';
+
+  it('does not rewrite the syllabus when nothing was typed (e.g. after clicking a link)', async () => {
+    const wrapper = mountStep(`${table}\n\nSee [paper](https://example.org/a).`);
+    await wrapper.find('#syllabus a').trigger('click');
+    await wrapper.find('#syllabus').trigger('blur');
+    expect(wrapper.props('updateSyllabus')).not.toHaveBeenCalled();
+  });
+
+  it('keeps line breaks inside table cells after an edit, instead of turning them into bullets', async () => {
+    const wrapper = mountStep(table);
+    const syllabus = wrapper.find('#syllabus');
+    await syllabus.trigger('input');
+    await syllabus.trigger('blur');
+    const saved = (wrapper.props('updateSyllabus') as ReturnType<typeof vi.fn>).mock.calls[0][0];
+    expect(saved).toContain('| 1 | Intro<br>- E-waste<br>- Hubs |');
+  });
+});
+
+describe('cleanSyllabus', () => {
+  it('turns literal "\\n" into <br> in tables and into new lines elsewhere', () => {
+    expect(cleanSyllabus('| 1 | a \\n- b |\nText\\nmore')).toBe('| 1 | a <br>- b |\nText\nmore');
+  });
+});
diff --git a/src/components/microlearning/ProgressBar.vue b/src/components/microlearning/ProgressBar.vue
index 24b500e..0786cb7 100644
--- a/src/components/microlearning/ProgressBar.vue
+++ b/src/components/microlearning/ProgressBar.vue
@@ -5,7 +5,13 @@
     </div>
 
     <div class="steps">
-      <div v-for="(step, index) in STEP_LABELS" :key="index" class="step" :class="stepClass(index)">
+      <div
+        v-for="(step, index) in steps"
+        :key="index"
+        class="step"
+        :class="stepClass(index)"
+        @click="clickable && index < currentStep && $emit('select', index)"
+      >
         <div class="circle">
           <svg v-if="index < currentStep" class="check" viewBox="0 0 24 24">
             <path
@@ -24,7 +30,7 @@
         </div>
 
         <span class="label">
-          {{ $t(`microLearning.progressBarLabels.${step}`) }}
+          {{ labels ? step : $t(`microLearning.progressBarLabels.${step}`) }}
         </span>
       </div>
     </div>
@@ -38,16 +44,25 @@ const STEP_LABELS = ['contribution', 'skills', 'activity', 'yourTurn'];
 
 const props = defineProps<{
   currentStep: number;
+  // already translated labels; defaults to the micro-learning steps
+  labels?: string[];
+  // finished steps emit "select" when clicked
+  clickable?: boolean;
 }>();
 
+defineEmits<{ select: [index: number] }>();
+
+const steps = computed(() => props.labels || STEP_LABELS);
+
 const progressWidth = computed(() => {
-  return `${(props.currentStep / (STEP_LABELS.length - 1) + 0.05) * 100}%`;
+  return `${(props.currentStep / (steps.value.length - 1) + 0.05) * 100}%`;
 });
 
 function stepClass(index: number) {
   return {
     active: index === props.currentStep,
-    done: index < props.currentStep
+    done: index < props.currentStep,
+    clickable: props.clickable && index < props.currentStep
   };
 }
 </script>
@@ -133,6 +148,10 @@ function stepClass(index: number) {
   color: #444;
 }
 
+.clickable {
+  cursor: pointer;
+}
+
 .check {
   width: 16px;
   height: 16px;
diff --git a/src/components/tutor/CursusInfo.vue b/src/components/tutor/CursusInfo.vue
index 2ac61ba..5382b7a 100644
--- a/src/components/tutor/CursusInfo.vue
+++ b/src/components/tutor/CursusInfo.vue
@@ -1,27 +1,20 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import ChevronDown from '@/components/icons/ChevronDown.vue';
-import BaseDropdown from '@/components/dropdowns/BaseDropdown.vue';
+import { ref, computed, nextTick } from 'vue';
 import OpenUrlIcon from '@/components/icons/OpenUrlIcon.vue';
-
-// TODO: add info that default values will be used if not written down
-// TODO: make files required:w
+import type { FileErrorReason } from '@/stores/tutor';
 
 interface Props {
-  disabled?: boolean;
-  addFile: (e: Event, id: string) => void;
-  removeFile: (id: string) => void;
-  searchError?: boolean;
-  fileError: { state: boolean; reason: 'BIG_FILE' | 'BAD_EXTENSION' | null };
+  files: Record<string, File>;
+  addFiles: (files: FileList | File[]) => void;
+  removeFile: (name: string) => void;
+  fileError: { state: boolean; reason: FileErrorReason | null };
   courseTitle: string;
   level: string;
   duration: string;
   description: string;
   action: () => void;
-  actionText?: string;
-  addedFilesTitles: string[];
   storedLanguage: string;
-  selectLang: (string) => void;
+  selectLang: (lang: string) => void;
 }
 
 const props = defineProps<Props>();
@@ -32,253 +25,309 @@ const emit = defineEmits<{
   'update:description': [value: string];
 }>();
 
-const MAX_FILES = 3;
-const inputGroupLength = ref(1);
-const uid = ref(0);
-const inputGroupRef = ref<HTMLElement | null>(null);
-const inputContainerRef = ref<HTMLElement | null>(null);
-const fileInputRef = ref<HTMLInputElement | null>(null);
-const deleteButtonRef = ref<HTMLButtonElement | null>(null);
-
-const canAddMoreFiles = computed(() => inputGroupLength.value < MAX_FILES);
-const hasMultipleFiles = computed(() => inputGroupLength.value > 1);
+const isDragging = ref(false);
+const showNudge = ref(false);
+const titleInput = ref<HTMLInputElement | null>(null);
+const nudge = ref<HTMLElement | null>(null);
 
-const updateInputGroupLength = () => {
-  inputGroupLength.value = document.querySelectorAll('.input-group input').length;
-};
+const fileNames = computed(() => Object.keys(props.files));
+const hasDetails = computed(
+  () => !!(props.courseTitle || props.level || props.duration || props.description)
+);
 
-const removeElementById = (id: string) => {
-  const element = document.getElementById(id);
-  if (element && element.parentNode === inputGroupRef.value) {
-    inputGroupRef.value?.removeChild(element);
-  }
-  updateInputGroupLength();
+const onPick = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  if (input.files) props.addFiles(input.files);
+  // allows picking the same file again after removing it
+  input.value = '';
 };
 
-const handleRemoveFile = (id: string) => {
-  props.removeFile(id);
-  removeElementById(id);
+const onDrop = (e: DragEvent) => {
+  isDragging.value = false;
+  if (e.dataTransfer?.files) props.addFiles(e.dataTransfer.files);
 };
 
-const createInput = (id: string) => {
-  const input = fileInputRef.value?.cloneNode(false) as HTMLInputElement;
-  input.id = id;
-  input.files = new DataTransfer().files;
-  input.addEventListener('change', (e) => props.addFile(e, id));
-  return input;
+const onContinue = async () => {
+  if (!hasDetails.value && !showNudge.value) {
+    showNudge.value = true;
+    await nextTick();
+    nudge.value?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    return;
+  }
+  showNudge.value = false;
+  props.action();
 };
 
-const createDeleteButton = (id: string) => {
-  const delButton = deleteButtonRef.value?.cloneNode(true) as HTMLButtonElement;
-  delButton.disabled = false;
-  delButton.addEventListener('click', () => handleRemoveFile(id));
-  return delButton;
+const focusDetails = () => {
+  showNudge.value = false;
+  titleInput.value?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  titleInput.value?.focus();
 };
+</script>
 
-const appendNewInputFile = () => {
-  if (!inputGroupRef.value || !inputContainerRef.value) {
-    console.error('Input group is not defined');
-    return;
-  }
+<template>
+  <div class="wrapper">
+    <h1 class="title is-4 is-size-5-mobile">{{ $t('tutor.documentsStep.title') }}</h1>
+    <p class="subtitle is-6 mt-2">{{ $t('tutor.documentsStep.description') }}</p>
 
-  const elementId = `file_${++uid.value}`;
-  const container = inputContainerRef.value.cloneNode(false) as HTMLElement;
-  container.id = elementId;
+    <label
+      class="dropzone"
+      :class="{ dragging: isDragging }"
+      @dragover.prevent="isDragging = true"
+      @dragleave="isDragging = false"
+      @drop.prevent="onDrop"
+    >
+      <input
+        class="is-sr-only"
+        type="file"
+        multiple
+        accept="application/pdf, text/plain, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+        data-testid="file-input"
+        @change="onPick"
+      />
+      <span>
+        {{ $t('tutor.documentsStep.dropzone') }}
+        <span class="browse">{{ $t('tutor.documentsStep.browse') }}</span>
+      </span>
+      <span class="is-size-7 has-text-grey">{{ $t('tutor.documentsStep.limits') }}</span>
+    </label>
 
-  container.appendChild(createInput(elementId));
-  container.appendChild(createDeleteButton(elementId));
+    <p v-if="fileError.state" class="has-text-danger mt-2">
+      {{ $t(`tutor.${fileError.reason}`) }}
+    </p>
 
-  inputGroupRef.value.appendChild(container);
-  updateInputGroupLength();
-};
-</script>
+    <ul v-if="fileNames.length" class="files" data-testid="file-list">
+      <li v-for="name in fileNames" :key="name">
+        <span class="file-name">{{ name }}</span>
+        <button
+          class="delete is-small"
+          :aria-label="$t('tutor.documentsStep.removeFile', { name })"
+          @click="removeFile(name)"
+        />
+      </li>
+    </ul>
 
-<template>
-  <div id="target-1" class="wrapper">
-    <h1 class="title is-4 is-size-5-mobile">1 - {{ $t('tutor.firstStep.title') }}</h1>
-    <p class="subtitle is-6 is-size-6-mobile">{{ $t('tutor.firstStep.description') }}</p>
-
-    <!-- File Input Section -->
-    <div class="is-flex is-flex-direction-column">
-      <div ref="inputGroupRef" class="input-group is-flex is-flex-direction-column">
-        <div ref="inputContainerRef" class="is-flex is-flex-direction-row mb-2" id="file_0">
-          <input
-            ref="fileInputRef"
-            class="input"
-            type="file"
-            accept="application/pdf, text/plain, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-            placeholder="Enter the new file"
-            data-testid="file-input"
-            @change="(e) => props.addFile(e, 'file_0')"
-          />
-          <button ref="deleteButtonRef" disabled class="button">x</button>
-        </div>
-      </div>
-      <p class="mr-2 is-italic">{{ $t('tutor.typeDoc') }}</p>
+    <p class="is-size-7 has-text-grey mt-2">
+      {{ $t('tutor.documentsStep.hint') }}
       <a
-        id="articleToAdd"
-        class="link is-small"
+        class="example-link"
         href="https://journals.plos.org/plosone/article/file?id=10.1371/journal.pone.0206282&type=printable"
         target="_blank"
-        ><span class="mr-2 is-small">{{ $t('tutor.articleToAddExample') }}</span>
-        <OpenUrlIcon class="icon is-small mt-2"
+        >{{ $t('tutor.documentsStep.exampleLink') }} <OpenUrlIcon class="icon is-small"
       /></a>
+    </p>
 
-      <p v-if="fileError.state" class="has-text-danger">
-        {{ $t(`tutor.${fileError.reason}`) }}
-      </p>
-
-      <div class="is-align-self-flex-end">
-        <span class="has-text-grey-light mr-2">{{ $t('tutor.firstStep.acceptedFiles') }}</span>
-        <button
-          v-if="hasMultipleFiles"
-          class="button has-background-grey-light ml-2"
-          @click="handleRemoveFile((inputGroupRef?.lastChild as HTMLElement)?.id || '')"
+    <div class="field mt-5 language">
+      <label class="label" for="cursus-lang">{{ $t('tutor.documentsStep.languageLabel') }}</label>
+      <div class="select">
+        <select
+          id="cursus-lang"
+          :value="storedLanguage"
+          @change="selectLang(($event.target as HTMLSelectElement).value)"
         >
-          -
-        </button>
-        <button class="button" :disabled="!canAddMoreFiles" @click="appendNewInputFile">+</button>
+          <option v-for="lang in ['fr', 'en']" :key="lang" :value="lang">
+            {{ $t(`lang.${lang}`) }}
+          </option>
+        </select>
       </div>
     </div>
 
-    <p v-if="searchError" class="has-text-danger mt-2">
-      {{ $t('tutor.firstStep.searchError') }}
-    </p>
+    <!-- Course details: optional but they make the syllabus fit the course -->
+    <div class="details box mt-5">
+      <h2 class="title is-5 mb-2 details-title">
+        {{ $t('tutor.documentsStep.detailsTitle') }}
+        <span class="tag is-primary is-light">{{ $t('tutor.documentsStep.recommended') }}</span>
+      </h2>
+      <p class="mb-4">{{ $t('tutor.documentsStep.detailsWhy') }}</p>
 
-    <!-- Course Description Section -->
-    <h2 class="title is-6 mt-4 is-size-6-mobile">
-      {{ $t('tutor.firstStep.cursusDescriptionTitle') }}
-    </h2>
-    <p class="subtitle is-6 is-size-6-mobile">
-      {{ $t('tutor.firstStep.cursusDescriptionDescription') }}
-    </p>
-
-    <div class="cursus-details">
-      <div class="description">
-        <label for="cursus-title">{{ $t('tutor.firstStep.cursusTitleLabel') }}</label>
-        <input
-          class="input"
-          type="text"
-          id="cursus-title"
-          :value="courseTitle"
-          @input="emit('update:courseTitle', ($event.target as HTMLInputElement).value)"
-          :placeholder="$t('tutor.firstStep.cursusTitlePlaceholder')"
-        />
+      <div class="cursus-details">
+        <div class="field full">
+          <label class="label" for="cursus-title">{{ $t('tutor.documentsStep.titleLabel') }}</label>
+          <input
+            ref="titleInput"
+            class="input"
+            type="text"
+            id="cursus-title"
+            :value="courseTitle"
+            @input="emit('update:courseTitle', ($event.target as HTMLInputElement).value)"
+            :placeholder="$t('tutor.documentsStep.titlePlaceholder')"
+          />
+        </div>
+        <div class="field">
+          <label class="label" for="cursus-level">{{ $t('tutor.documentsStep.levelLabel') }}</label>
+          <input
+            class="input"
+            type="text"
+            id="cursus-level"
+            :value="level"
+            @input="emit('update:level', ($event.target as HTMLInputElement).value)"
+            :placeholder="$t('tutor.documentsStep.levelPlaceholder')"
+          />
+        </div>
+        <div class="field">
+          <label class="label" for="cursus-duration">
+            {{ $t('tutor.documentsStep.durationLabel') }}
+          </label>
+          <input
+            class="input"
+            type="text"
+            id="cursus-duration"
+            :value="duration"
+            @input="emit('update:duration', ($event.target as HTMLInputElement).value)"
+            :placeholder="$t('tutor.documentsStep.durationPlaceholder')"
+          />
+        </div>
       </div>
 
-      <div class="description">
-        <label for="cursus-level">{{ $t('tutor.firstStep.cursusLevelLabel') }}</label>
-        <input
-          class="input"
-          type="text"
-          id="cursus-level"
-          :value="level"
-          @input="emit('update:level', ($event.target as HTMLInputElement).value)"
-          :placeholder="$t('tutor.firstStep.cursusLevelPlaceholder')"
+      <div class="field">
+        <label class="label" for="cursus-description">
+          {{ $t('tutor.documentsStep.descriptionLabel') }}
+        </label>
+        <textarea
+          id="cursus-description"
+          class="textarea"
+          rows="3"
+          :placeholder="$t('tutor.documentsStep.descriptionPlaceholder')"
+          :value="description"
+          @input="emit('update:description', ($event.target as HTMLTextAreaElement).value)"
         />
       </div>
+    </div>
 
-      <div class="description">
-        <label for="cursus-duration">{{ $t('tutor.firstStep.cursusDurationLabel') }}</label>
-        <input
-          class="input"
-          type="text"
-          id="cursus-duration"
-          :value="duration"
-          @input="emit('update:duration', ($event.target as HTMLInputElement).value)"
-          :placeholder="$t('tutor.firstStep.cursusDurationPlaceholder')"
-        />
-      </div>
-      <div class="description">
-        <label for="cursus-lang">{{ $t('tutor.firstStep.syllabusLanguage') }}</label>
-        <BaseDropdown v-slot="slotProps" :isUp="isUp" :title="storedLanguage">
-          <ClickableText
-            class="dropdown-item"
-            :text="$t('removeSelection')"
-            :action="
-              () => {
-                slotProps.toggleVisibility();
-              }
-            "
-          />
-          <a
-            :key="lang"
-            @click="
-              selectLang(lang);
-              slotProps.toggleVisibility();
-            "
-            v-for="lang in ['fr', 'en']"
-            class="dropdown-item"
-            :class="storedLanguage === lang && 'is-active'"
-          >
-            {{ $t(`${lang}`) }}
-          </a>
-        </BaseDropdown>
+    <div v-if="showNudge" ref="nudge" class="notification is-warning is-light nudge" role="status">
+      <p>{{ $t('tutor.documentsStep.nudge') }}</p>
+      <div class="buttons mt-2">
+        <button class="button is-small" @click="focusDetails">
+          {{ $t('tutor.documentsStep.addDetails') }}
+        </button>
+        <button class="button is-small is-text" @click="onContinue">
+          {{ $t('tutor.documentsStep.continueAnyway') }}
+        </button>
       </div>
     </div>
 
-    <label for="cursus-description" class="mt-4">
-      {{ $t('tutor.firstStep.cursusDescriptionLabel') }}
-    </label>
-    <textarea
-      id="cursus-description"
-      class="textarea mt-1"
-      :placeholder="$t('tutor.firstStep.cursusDescriptionPlaceholder')"
-      :value="description"
-      @input="emit('update:description', ($event.target as HTMLTextAreaElement).value)"
-    />
-    <div class="is-flex is-justify-content-end mt-4">
-      <a data-testid="tutor-next-button" class="button is-primary" href="#" @click="action()">
-        <ChevronDown />
-        {{ $t(`${actionText || 'next'}`) }}
-      </a>
+    <div class="step-footer">
+      <span v-if="!fileNames.length" class="has-text-grey is-size-7">
+        {{ $t('tutor.documentsStep.noFile') }}
+      </span>
+      <button
+        data-testid="tutor-next-button"
+        class="button is-primary"
+        :disabled="!fileNames.length"
+        @click="onContinue"
+      >
+        {{ $t('tutor.documentsStep.action') }} →
+      </button>
     </div>
   </div>
 </template>
 
 <style scoped>
-.button > svg {
-  height: 1rem;
-  padding-right: 1rem;
-}
 .wrapper {
-  padding: 5% 0;
   width: 100%;
   display: flex;
   flex-direction: column;
-  transition: all 1s;
-  margin: 0 auto;
 }
 
-.description {
-  max-height: 2.5rem;
-  width: 24%;
+.dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 1.5rem 1rem;
+  border: 2px dashed var(--neutral-20);
+  border-radius: 0.5rem;
+  text-align: center;
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+  &:hover,
+  &.dragging,
+  &:focus-within {
+    border-color: var(--primary);
+    background-color: var(--neutral-10);
+  }
 }
 
-.wrapper.disabled {
-  opacity: 0.5;
-  pointer-events: none;
+.browse {
+  color: var(--primary-dark);
+  text-decoration: underline;
 }
 
-.cursus-details {
+.files {
+  margin-top: 0.75rem;
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    background-color: var(--neutral-10);
+    margin-bottom: 0.25rem;
+  }
+}
+
+.file-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.example-link {
+  white-space: nowrap;
+  .icon {
+    width: 0.9em;
+    height: 0.9em;
+    vertical-align: -0.1em;
+  }
+}
+
+.language .select {
+  min-width: 12rem;
+  select {
+    width: 100%;
+  }
+}
+
+.details-title {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  align-items: center;
   gap: 0.5rem;
-  margin-bottom: 1rem;
 }
 
-@media (max-width: 768px) {
-  .cursus-details {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
+.details {
+  box-shadow: none;
+  border: 1px solid var(--neutral-20);
+}
+
+.cursus-details {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0 1rem;
+  .full {
+    grid-column: 1 / -1;
   }
+}
 
-  .description {
-    width: 100%;
-    max-height: none;
+.nudge {
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+.step-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+@media (max-width: 768px) {
+  .cursus-details {
+    grid-template-columns: 1fr;
   }
 }
 </style>
diff --git a/src/components/tutor/EditableTextBox.vue b/src/components/tutor/EditableTextBox.vue
deleted file mode 100644
index 809db4a..0000000
--- a/src/components/tutor/EditableTextBox.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts" setup>
-import CheckIcon from '@/components/icons/CheckIcon.vue';
-import EditIcon from '@/components/icons/EditIcon.vue';
-import { ref } from 'vue';
-const props = defineProps<{
-  paragraphList: [string];
-  title: string;
-  updateSummary: (index: number, content: string) => void;
-}>();
-const editableParagraphs = ref(props.paragraphList.map(() => true));
-
-function toggleEdit(index: number, value: boolean) {
-  editableParagraphs.value[index] = value;
-
-  if (editableParagraphs.value[index]) {
-    requestAnimationFrame(() => {
-      const el = document.getElementById(`summary_${index}`);
-      if (!el) return;
-      el.focus();
-
-      const range = document.createRange();
-      const sel = window.getSelection();
-      range.selectNodeContents(el);
-      range.collapse(false);
-      sel?.removeAllRanges();
-      sel?.addRange(range);
-    });
-  }
-}
-
-function preventLineBreaks(e) {
-  if (e.key === 'Enter') {
-    e.preventDefault();
-  }
-}
-
-function sanitizePaste(e) {
-  e.preventDefault();
-  const text = e.clipboardData.getData('text/plain').replace(/\r?\n|\r/g, ' ');
-  document.execCommand('insertText', false, text);
-}
-
-const handleTextEdit = (event, index) => {
-  const newValue = event.target.innerText;
-  props.updateSummary(index, newValue);
-};
-</script>
-<template>
-  <div id="editable-paragraphs" :key="index" v-for="(paragraph, index) in paragraphList">
-    <h2 class="title is-6 mt-4">
-      {{ title }}
-    </h2>
-    <div class="is-flex is-flex-wrap-wrap">
-      <div class="mt-2 ml-auto is-flex is-align-items-center">
-        <button class="button is-white" @click="toggleEdit(index, true)">
-          <span class="icon is-small">
-            <EditIcon />
-          </span>
-          <span>{{ $t('edit') }}</span>
-        </button>
-        <button
-          data-testid="validate-button"
-          class="button is-white"
-          @click="toggleEdit(index, false)"
-          :class="{ validated: !editableParagraphs[index] }"
-        >
-          <span class="icon is-small">
-            <CheckIcon />
-          </span>
-          <span>{{ editableParagraphs[index] ? $t('validate') : $t('validated') }}</span>
-        </button>
-      </div>
-      <p
-        :id="`summary_${index}`"
-        class="input editable-paragraph"
-        :contenteditable="editableParagraphs[index]"
-        @keydown="preventLineBreaks"
-        @paste="sanitizePaste"
-        @blur="handleTextEdit($event, index)"
-        :class="{ validated: !editableParagraphs[index] }"
-      >
-        {{ summary }}
-      </p>
-    </div>
-  </div>
-</template>
-<style scoped>
-.button > svg {
-  height: 1rem;
-  padding-right: 1rem;
-}
-
-button.validated {
-  color: green;
-}
-
-p.validated {
-  background-color: var(--neutral-10);
-}
-
-.editable-paragraph {
-  width: 100%;
-  height: auto;
-  padding: 1rem;
-  resize: none;
-  margin-top: 0.5rem;
-}
-</style>
diff --git a/src/components/tutor/ResourcesStep.vue b/src/components/tutor/ResourcesStep.vue
new file mode 100644
index 0000000..232e5be
--- /dev/null
+++ b/src/components/tutor/ResourcesStep.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+// ponytail: forked from SecondStep.vue, which stays as-is for the hidden /tutor_test page
+import { type Document } from '@/types';
+import CardSimpleComponent from '@/components/CardSimpleComponent.vue';
+import Card from '@/components/CardComponent.vue';
+import ModalWrapper from '@/components/ModalWrapper.vue';
+import { useBookmarksStore } from '@/stores/bookmarks';
+
+defineProps<{
+  sources?: Document[];
+  searchError?: boolean;
+  appendSource: (source: Document) => void;
+  selectedSources: Document[];
+  action: () => Promise<void>;
+}>();
+
+const bookmarks = useBookmarksStore();
+</script>
+<template>
+  <div class="wrapper">
+    <h1 data-testId="documents-list-title" class="title is-4 is-size-5-mobile">
+      {{ $t('tutor.resourcesStep.title') }}
+    </h1>
+
+    <template v-if="sources && sources.length">
+      <p class="subtitle is-6 mt-2">{{ $t('tutor.resourcesStep.description') }}</p>
+      <div class="sources">
+        <div
+          class="source"
+          role="checkbox"
+          tabindex="0"
+          v-for="source in sources"
+          :key="source.id"
+          :aria-checked="selectedSources.includes(source)"
+          :class="{ selected: selectedSources.includes(source) }"
+          @click="appendSource(source)"
+          @keydown.enter.space.prevent="appendSource(source)"
+        >
+          <!-- ponytail: native checkbox for the visual only, the row handles clicks and keyboard -->
+          <input
+            type="checkbox"
+            class="check"
+            tabindex="-1"
+            aria-hidden="true"
+            :checked="selectedSources.includes(source)"
+          />
+          <CardSimpleComponent
+            :title="source.payload.document_title"
+            :corpus="source.payload.document_corpus"
+            :url="source.payload.document_url"
+            :details="source.payload.document_details"
+            :sdg="source.payload.document_sdg"
+            :toggleBookmark="() => bookmarks.toggleBookmark(source)"
+            :isBookmarked="bookmarks.isBookmarked(source.payload.document_id)"
+          >
+            <template #modal="scope">
+              <ModalWrapper
+                :key="`modal-${source.id}`"
+                :isOpen="scope.isOpen"
+                :onClose="scope.onClose"
+                @click.stop
+                @keydown.stop
+              >
+                <Card
+                  :key="`modal-card-${source.id}`"
+                  :title="source.payload.document_title"
+                  :description="source.payload.document_desc"
+                  :url="source.payload.document_url"
+                  :sdg="source.payload.document_sdg"
+                  :details="source.payload.document_details"
+                  :corpus="source.payload.document_corpus"
+                  :score="source.score"
+                  :toggleBookmark="() => bookmarks.toggleBookmark(source)"
+                  :isBookmarked="bookmarks.isBookmarked(source.payload.document_id)"
+                  :slice="source.payload.slice_content"
+                  :externalId="source.payload.document_external_id"
+                  hasFullDescription
+                />
+              </ModalWrapper>
+            </template>
+          </CardSimpleComponent>
+        </div>
+      </div>
+    </template>
+
+    <div v-else class="empty has-text-centered">
+      <p class="title is-5">{{ $t('tutor.resourcesStep.noSources') }}</p>
+      <p v-if="searchError" class="has-text-danger">{{ $t('tutor.resourcesStep.searchError') }}</p>
+      <p class="mt-2">{{ $t('tutor.resourcesStep.noSourcesDescription') }}</p>
+      <img class="image" src="@/assets/no-sources.svg" alt="" />
+    </div>
+
+    <div class="step-footer">
+      <div v-if="sources && sources.length" class="is-size-7">
+        <p class="has-text-weight-bold">
+          {{ $t('tutor.resourcesStep.selected', selectedSources.length) }}
+        </p>
+        <p v-if="!selectedSources.length" class="has-text-grey">
+          {{ $t('tutor.resourcesStep.allHint') }}
+        </p>
+      </div>
+      <button data-testid="tutor-generate-button" class="button is-primary" @click="action">
+        {{ $t('tutor.resourcesStep.action') }} →
+      </button>
+    </div>
+  </div>
+</template>
+<style scoped>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.sources {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--neutral-20);
+  border-bottom: 1px solid var(--neutral-20);
+}
+/* one list, rows split by dividers */
+.source {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: var(--neutral-10);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: -2px;
+  }
+}
+.source + .source {
+  border-top: 1px solid var(--neutral-20);
+}
+.source.selected {
+  background-color: var(--primary-lighter);
+}
+.check {
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin: 0;
+  accent-color: var(--primary-dark);
+  pointer-events: none;
+}
+/* restyle the shared card: clear hierarchy, no inner hover or empty number column */
+.source :deep(.block.is-flex.is-fullwidth) {
+  padding: 0 !important;
+  &:hover {
+    background-color: transparent;
+  }
+}
+.source :deep([data-category]) {
+  display: none;
+}
+.source :deep(.is-size-6.has-text-weight-normal) {
+  font-weight: 600 !important;
+  line-height: 1.35;
+}
+.source :deep(.corpus) {
+  margin-top: 0.125rem;
+  font-size: 0.8rem;
+  font-style: normal !important;
+  color: var(--neutral-70);
+}
+.source :deep(.is-6.mr-2) {
+  font-size: 0.75rem;
+  color: var(--neutral-70);
+}
+.source :deep(.pill) {
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.7rem;
+  line-height: 1.25rem;
+}
+.source :deep(.is-flex.is-align-items-center) {
+  margin-top: 0.375rem;
+}
+.step-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1rem;
+  & > button {
+    margin-left: auto;
+  }
+}
+.image {
+  margin: 1rem auto;
+  width: 100%;
+  height: 200px;
+}
+</style>
diff --git a/src/components/tutor/StatusModal.vue b/src/components/tutor/StatusModal.vue
index 43f452b..7afc1b4 100644
--- a/src/components/tutor/StatusModal.vue
+++ b/src/components/tutor/StatusModal.vue
@@ -1,34 +1,28 @@
 <template>
-  <ModalWrapper v-if="isLoading" :isOpen="isLoading" :onClose="stopAction">
-    <div v-if="shouldRetryAction" class="box">
-      <div class="is-flex is-flex-direction-column is-align-items-center is-justify-content-center">
-        <h1 class="title is-size-4 is-size-5-mobile has-text-centered">
-          <span class="mr-4"><ErrorDocumentIcon /></span>
-          {{ $t('tutor.retry.title') }}
-        </h1>
-
-        <p class="loader-text is-title is-size-4 is-size-5-mobile mx-6 px-6">
-          {{ $t('tutor.retry.description') }}
-        </p>
-        <div class="is-flex is-gap-4">
-          <button data-testid="tutor-back-button" class="button mt-6" @click="action">
-            {{ $t('tutor.retry.button') }}
-          </button>
-          <button data-testid="tutor-back-button" class="button mt-6" @click="stopAction()">
-            {{ $t('tutor.retry.stop') }}
-          </button>
-        </div>
+  <ModalWrapper v-if="isLoading" :isOpen="isLoading">
+    <div v-if="shouldRetryAction" class="box has-text-centered status" role="alert">
+      <ErrorDocumentIcon class="mb-3" />
+      <h1 class="title is-size-4 is-size-5-mobile">{{ $t('tutor.error.title') }}</h1>
+      <p>{{ $t(`tutor.error.${kind}`) }} {{ $t('tutor.error.kept') }}</p>
+      <div class="buttons is-centered mt-5">
+        <button data-testid="tutor-cancel-button" class="button" @click="stopAction()">
+          {{ $t('tutor.error.cancel') }}
+        </button>
+        <button data-testid="tutor-retry-button" class="button is-primary" @click="action()">
+          {{ $t('tutor.error.retry') }}
+        </button>
       </div>
     </div>
-    <div v-else class="box loading-modal has-text-centered">
-      <h1 class="title is-size-4 is-size-5-mobile">
-        {{ title }}
-      </h1>
-      <progress class="progress is-large is-primary mb-6" max="100">60%</progress>
-      <p class="is-title is-size-5 is-size-6-mobile">{{ $t('tutor.loading.wait') }}</p>
-      <p class="is-title is-size-5 is-size-6-mobile">
-        {{ description }}
-      </p>
+    <div v-else class="box has-text-centered status" role="status">
+      <button
+        class="delete close"
+        :aria-label="$t('tutor.error.cancel')"
+        data-testid="tutor-close-button"
+        @click="stopAction()"
+      />
+      <h1 class="title is-size-4 is-size-5-mobile">{{ $t(`tutor.loading.${kind}.title`) }}</h1>
+      <progress class="progress is-primary" max="100" />
+      <p>{{ $t(`tutor.loading.${kind}.description`) }}</p>
     </div>
   </ModalWrapper>
 </template>
@@ -42,15 +36,19 @@ defineProps<{
   shouldRetryAction: boolean;
   action: () => Promise<void>;
   stopAction: () => void;
-  title: string;
-  description: string;
+  kind: 'extract' | 'search' | 'syllabus' | 'feedback';
 }>();
 </script>
 
 <style scoped>
-.loading-modal {
+.status {
+  position: relative;
   padding: 2rem;
-  width: 100%;
-  height: 100%;
+}
+
+.close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
 }
 </style>
diff --git a/src/components/tutor/SummariesStep.vue b/src/components/tutor/SummariesStep.vue
index 691f9a3..fb4bcd4 100644
--- a/src/components/tutor/SummariesStep.vue
+++ b/src/components/tutor/SummariesStep.vue
@@ -1,142 +1,48 @@
 <script setup lang="ts">
-// TODO: use button to make summary editable
-// TODO: use button to validate summary --> make it required to go to the next step
-// TODO: send edited summaries to the search request
-import CheckIcon from '@/components/icons/CheckIcon.vue';
-import ChevronDown from '@/components/icons/ChevronDown.vue';
-import EditIcon from '@/components/icons/EditIcon.vue';
-import { ref } from 'vue';
-
-const props = defineProps<{
-  summaries: [string];
-  files: File;
+defineProps<{
+  summaries: string[];
+  files: Record<string, File>;
   updateSummary: (index: number, content: string) => void;
   action: () => void;
-  actionText?: string;
-  disabled: boolean;
 }>();
-
-const editableParagraphs = ref(props.summaries.map(() => true));
-
-function toggleEdit(index, value) {
-  editableParagraphs.value[index] = value;
-
-  if (editableParagraphs.value[index]) {
-    requestAnimationFrame(() => {
-      const el = document.getElementById(`summary_${index}`);
-      if (!el) return;
-      el.focus();
-
-      const range = document.createRange();
-      const sel = window.getSelection();
-      range.selectNodeContents(el);
-      range.collapse(false);
-      sel.removeAllRanges();
-      sel.addRange(range);
-    });
-  }
-}
-
-function preventLineBreaks(e) {
-  if (e.key === 'Enter') {
-    e.preventDefault();
-  }
-}
-
-function sanitizePaste(e) {
-  e.preventDefault();
-  const text = e.clipboardData.getData('text/plain').replace(/\r?\n|\r/g, ' ');
-  document.execCommand('insertText', false, text);
-}
-
-const handleTextEdit = (event, index) => {
-  const newValue = event.target.innerText;
-  props.updateSummary(index, newValue);
-};
 </script>
 <template>
-  <div id="target-2" class="summaries-section" :class="{ disabled: disabled }">
-    <h2 data-testid="tutor-summaries-title" class="title is-4 is-size-5-mobile mt-4">
-      2 - {{ $t('tutor.summaries.title') }}
+  <div class="summaries-section">
+    <h2 data-testid="tutor-summaries-title" class="title is-4 is-size-5-mobile">
+      {{ $t('tutor.summaryStep.title') }}
     </h2>
-    <p class="subtitle is-6">
-      {{ $t('tutor.summaries.description') }}
-    </p>
-    <div id="summaries" :key="index" v-for="(summary, index) in summaries">
-      <h2 class="title is-6 mt-4">
-        {{ Object.values(files)[index]?.name || $t('tutor.summaries.noFileName') }}
-      </h2>
-      <div class="is-flex is-flex-wrap-wrap">
-        <div class="mt-2 ml-auto is-flex is-align-items-center">
-          <button class="button is-white" @click="toggleEdit(index, true)">
-            <span class="icon is-small">
-              <EditIcon />
-            </span>
-            <span>{{ $t('edit') }}</span>
-          </button>
-          <button
-            data-testid="validate-summary-button"
-            class="button is-white"
-            @click="toggleEdit(index, false)"
-            :class="{ validated: !editableParagraphs[index] }"
-          >
-            <span class="icon is-small">
-              <CheckIcon />
-            </span>
-            <span>{{ editableParagraphs[index] ? $t('validate') : $t('validated') }}</span>
-          </button>
-        </div>
-        <p
-          :id="`summary_${index}`"
-          class="input summary"
-          :contenteditable="editableParagraphs[index]"
-          @keydown="preventLineBreaks"
-          @paste="sanitizePaste"
-          @blur="handleTextEdit($event, index)"
-          :class="{ validated: !editableParagraphs[index] }"
-        >
-          {{ summary }}
-        </p>
-      </div>
+    <p class="subtitle is-6 mt-2">{{ $t('tutor.summaryStep.description') }}</p>
+
+    <div class="field" v-for="(summary, index) in summaries" :key="index">
+      <label class="label" :for="`summary_${index}`">
+        {{
+          Object.values(files)[index]?.name || $t('tutor.summaryStep.noFileName', { n: index + 1 })
+        }}
+      </label>
+      <!-- ponytail: field-sizing grows the box natively; rows is the fallback for older browsers -->
+      <textarea
+        :id="`summary_${index}`"
+        class="textarea summary"
+        :rows="Math.max(3, Math.ceil(summary.length / 90))"
+        :value="summary"
+        @input="updateSummary(index, ($event.target as HTMLTextAreaElement).value)"
+      />
     </div>
+
     <div class="is-flex is-justify-content-end mt-4">
-      <a class="button is-primary" href="#" @click="action()">
-        <ChevronDown />
-        {{ $t(`${actionText || 'next'}`) }}
-      </a>
+      <button data-testid="tutor-search-button" class="button is-primary" @click="action()">
+        {{ $t('tutor.summaryStep.action') }} →
+      </button>
     </div>
   </div>
 </template>
 <style scoped>
-.button > svg {
-  height: 1rem;
-  padding-right: 1rem;
-}
 .summaries-section {
-  margin: auto;
-  padding: 5% 0;
   width: 100%;
 }
-.summaries-section.disabled {
-  height: 10%;
-  & > * {
-    opacity: 50%;
-  }
-}
-
-button.validated {
-  color: green;
-}
-
-p.validated {
-  background-color: var(--neutral-10);
-}
 
 .summary {
-  width: 100%;
-  height: auto;
-  padding: 1rem;
-  resize: none;
-  margin-top: 0.5rem;
+  field-sizing: content;
+  min-height: 5rem;
 }
 </style>
diff --git a/src/components/tutor/ThirdStep.vue b/src/components/tutor/ThirdStep.vue
index 1572e15..55792f3 100644
--- a/src/components/tutor/ThirdStep.vue
+++ b/src/components/tutor/ThirdStep.vue
@@ -1,196 +1,266 @@
 <script setup lang="ts">
-// TODO: add an "edit" button
 import { marked } from 'marked';
-import { ref, type Ref } from 'vue';
-import EditIcon from '@/components/icons/EditIcon.vue';
+import TurndownService from 'turndown';
+import { gfm } from 'turndown-plugin-gfm';
+import { computed, nextTick, ref } from 'vue';
+import OpenUrlIcon from '@/components/icons/OpenUrlIcon.vue';
+
 const props = defineProps<{
   syllabus?: { content: string; source: string };
-  giveFeedback: (feedback: string) => Promise<boolean>;
+  giveFeedback: (feedback: string) => Promise<boolean | undefined>;
   feedbackHistory: string[];
-  action: () => {};
-  actionText?: string;
-  disabled: boolean;
+  action: () => void;
   updateSyllabus: (content: string) => void;
   restart: () => void;
   updateSyllabusInDB: () => void;
 }>();
 
-const isEditable: Ref<boolean> = ref(false);
+const syllabusBox = ref<HTMLElement | null>(null);
+
+// edits happen on the rendered HTML; turn them back into markdown so headings,
+// lists and tables survive in the page and in the Word download
+const turndown = new TurndownService({
+  headingStyle: 'atx',
+  bulletListMarker: '-',
+  emDelimiter: '*',
+  hr: '---'
+});
+turndown.use(gfm);
+// the markdown comes from the LLM, not a user: no need to escape it
+turndown.escape = (s: string) => s;
+// a real line break would split the table row, so keep <br> inside table cells
+turndown.addRule('tableCellBreak', {
+  filter: (node) => node.nodeName === 'BR' && !!node.closest('td, th'),
+  replacement: () => '<br>'
+});
+
+const html = computed(() => (props.syllabus?.content ? marked.parse(props.syllabus.content) : ''));
 
-const enableFeedback: Ref<boolean> = ref(false);
-const feedback: Ref<string> = ref('');
+// links can't be followed inside editable text, so clicking one shows a small
+// "open" bubble under it (like in Google Docs)
+const linkBubble = ref<{ href: string; top: number; left: number } | null>(null);
 
-const toggleFeedback = async () => {
-  if (feedback.value.length > 0) {
-    // keep the text if sending failed, so the user doesn't lose what they wrote
-    if (!(await props.giveFeedback(feedback.value))) return;
-    feedback.value = '';
+const showLinkBubble = (event: MouseEvent) => {
+  const link = (event.target as HTMLElement).closest('a');
+  const box = syllabusBox.value;
+  // only web and mail links, never javascript: or similar
+  if (!link || !box || !/^(https?:|mailto:)/.test(link.href)) {
+    linkBubble.value = null;
+    return;
   }
-  enableFeedback.value = !enableFeedback.value;
+  const linkRect = link.getBoundingClientRect();
+  const boxRect = box.getBoundingClientRect();
+  linkBubble.value = {
+    href: link.href,
+    top: linkRect.bottom - boxRect.top + box.scrollTop + 4,
+    left: Math.max(0, Math.min(linkRect.left - boxRect.left, box.clientWidth - 320))
+  };
 };
 
-const handleTextEdit = (event) => {
-  const newValue = event.target.innerText;
-  props.updateSyllabus(newValue);
+// only convert back to markdown after a real edit: clicking around (e.g. on a link)
+// must never rewrite the syllabus
+let isDirty = false;
+
+const handleTextEdit = (event: FocusEvent) => {
+  linkBubble.value = null;
+  if (!isDirty) return;
+  isDirty = false;
+  props.updateSyllabus(turndown.turndown((event.target as HTMLElement).innerHTML));
+  props.updateSyllabusInDB();
 };
 
-const handleSyllabusEdition = () => {
-  if (isEditable.value) {
-    // Save the edited syllabus
-    props.updateSyllabusInDB();
-  }
-  isEditable.value = !isEditable.value;
+const feedback = ref('');
+const feedbackFailed = ref(false);
+
+const sendFeedback = async () => {
+  if (!feedback.value.trim()) return;
+  const ok = await props.giveFeedback(feedback.value);
+  // keep the text if sending failed, so the user doesn't lose what they wrote
+  feedbackFailed.value = ok === false;
+  if (!ok) return;
+  feedback.value = '';
+  // show the regenerated syllabus from its start
+  await nextTick();
+  syllabusBox.value?.scrollTo({ top: 0 });
+  syllabusBox.value?.scrollIntoView({ behavior: 'smooth', block: 'start' });
 };
 </script>
 <template>
-  <div id="target-4" class="wrapper" :class="{ disabled: disabled }">
+  <div class="wrapper">
     <h1 data-testid="thirdStepTitle" class="title is-4 is-size-5-mobile">
-      4 - {{ $t('tutor.thirdStep.title') }}
+      {{ $t('tutor.syllabusStep.title') }}
     </h1>
-    <p class="subtitle is-6">{{ $t('tutor.thirdStep.description') }}</p>
-    <!-- syllabus -->
-
-    <div class="is-flex is-flex-direction-column">
-      <button class="button is-white ml-auto" @click="handleSyllabusEdition">
-        <span class="icon is-small mr-2">
-          <EditIcon />
-        </span>
-        {{ isEditable ? $t('save') : $t('edit') }}
-      </button>
-      <div class="editable-syllabus-wrapper">
-        <p
-          :contenteditable="isEditable"
-          :class="{ editable: isEditable }"
-          id="syllabus"
-          class="syllabus content"
-          v-if="syllabus?.content"
-          v-html="marked.parse(syllabus?.content)"
-          @blur="handleTextEdit($event)"
-          @click="isEditable = true"
-        />
+    <p class="subtitle is-6 mt-2">{{ $t('tutor.syllabusStep.description') }}</p>
+
+    <div ref="syllabusBox" class="editable-syllabus-wrapper">
+      <div
+        v-if="syllabus?.content"
+        contenteditable="true"
+        id="syllabus"
+        class="syllabus content"
+        v-html="html"
+        @blur="handleTextEdit"
+        @click="showLinkBubble"
+        @keydown="linkBubble = null"
+        @input="isDirty = true"
+      />
+      <!-- mousedown.prevent keeps the focus in the syllabus so the bubble isn't closed by blur -->
+      <div
+        v-if="linkBubble"
+        class="link-bubble"
+        :style="{ top: `${linkBubble.top}px`, left: `${linkBubble.left}px` }"
+        @mousedown.prevent
+      >
+        <span class="link-url">{{ linkBubble.href }}</span>
+        <a
+          class="button is-small is-primary is-light"
+          :href="linkBubble.href"
+          target="_blank"
+          rel="noopener noreferrer"
+          @click="linkBubble = null"
+        >
+          {{ $t('tutor.syllabusStep.openLink') }}
+          <OpenUrlIcon class="icon is-small ml-1" />
+        </a>
       </div>
     </div>
 
-    <details v-if="feedbackHistory.length" class="feedback-history" open>
-      <summary>{{ $t('tutor.thirdStep.feedbackHistory', { n: feedbackHistory.length }) }}</summary>
-      <ol>
-        <li v-for="(item, index) in feedbackHistory" :key="index">{{ item }}</li>
-      </ol>
-    </details>
-
-    <textarea class="textarea" v-if="enableFeedback" v-model="feedback"></textarea>
+    <div class="feedback box">
+      <label class="label" for="syllabus-feedback">{{
+        $t('tutor.syllabusStep.feedbackLabel')
+      }}</label>
+      <details v-if="feedbackHistory.length" class="feedback-history">
+        <summary>
+          {{ $t('tutor.syllabusStep.feedbackHistory', { n: feedbackHistory.length }) }}
+        </summary>
+        <ol>
+          <li v-for="(item, index) in feedbackHistory" :key="index">{{ item }}</li>
+        </ol>
+      </details>
+      <textarea
+        id="syllabus-feedback"
+        class="textarea"
+        rows="2"
+        v-model="feedback"
+        :placeholder="$t('tutor.syllabusStep.feedbackPlaceholder')"
+      />
+      <p v-if="feedbackFailed" class="has-text-danger mt-2">
+        {{ $t('tutor.syllabusStep.feedbackError') }}
+      </p>
+      <div class="is-flex is-justify-content-end mt-2">
+        <button class="button" :disabled="!feedback.trim()" @click="sendFeedback">
+          {{ $t('tutor.syllabusStep.regenerate') }}
+        </button>
+      </div>
+    </div>
 
     <div class="actions">
-      <button class="button feedback" @click="toggleFeedback">
-        {{
-          enableFeedback ? $t('tutor.thirdStep.sendFeedback') : $t('tutor.thirdStep.giveFeedback')
-        }}
+      <button class="button is-text" @click="restart">
+        {{ $t('tutor.syllabusStep.restart') }}
       </button>
-      <button class="button is-primary" @click="action()">{{ $t('download') }}</button>
-      <button class="button" @click="restart">
-        {{ $t('tutor.restartSyllabusCreation') }}
+      <button class="button is-primary" @click="action()">
+        {{ $t('tutor.syllabusStep.download') }}
       </button>
     </div>
   </div>
 </template>
 
 <style scoped>
-.actions {
-  margin-top: 1rem;
+.wrapper {
   display: flex;
-  justify-content: end;
-  padding-bottom: 3rem;
-  gap: 1rem;
+  flex-direction: column;
+  width: 100%;
 }
 
-.button.feedback {
-  margin-right: auto;
+.editable-syllabus-wrapper {
+  position: relative;
+  max-height: 70vh;
+  overflow-y: auto;
+  margin-bottom: 1rem;
 }
 
-.feedback-history {
-  margin-bottom: 1rem;
-  padding: 0.75rem 1rem;
+.syllabus {
+  padding: 2rem;
   border: 1px solid var(--neutral-20);
   border-radius: 0.5rem;
+  min-height: 10rem;
+  overflow-x: auto;
   background-color: var(--neutral-10);
-  summary {
+  cursor: text;
+  :deep(a) {
     cursor: pointer;
-    font-weight: bold;
   }
-  ol {
-    margin: 0.5rem 0 0 1.5rem;
+  &:hover {
+    border-color: var(--primary-light);
   }
-  li {
-    white-space: pre-wrap;
-    margin-bottom: 0.25rem;
+  &:focus {
+    outline: none;
+    border-color: var(--primary);
+    background-color: var(--neutral-0);
   }
 }
 
-.button > svg {
-  height: 1rem;
-  padding-right: 1rem;
-}
-
-.wrapper {
+.link-bubble {
+  position: absolute;
+  z-index: 5;
   display: flex;
-  height: 100%;
-  flex-direction: column;
-  flex-grow: 0;
-  flex-basis: 0;
-  transition: flex-grow 0.3s;
-  padding: 5% 0;
-  width: 100%;
-  margin: auto;
+  align-items: center;
+  gap: 0.75rem;
+  max-width: 320px;
+  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
+  border: 1px solid var(--neutral-20);
+  border-radius: 0.5rem;
+  background-color: var(--neutral-0);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
+  font-size: 0.8rem;
 }
 
-.wrapper.disabled {
-  opacity: 50%;
+.link-url {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--neutral-70);
 }
 
-details:not([open]) {
-  opacity: 0.5;
+.link-bubble .icon {
+  width: 0.9em;
+  height: 0.9em;
 }
 
-.syllabus {
-  padding: 2rem;
+.feedback {
+  box-shadow: none;
   border: 1px solid var(--neutral-20);
-  border-radius: 0.5rem;
-  min-height: 10rem;
-  max-width: 80rem;
-  overflow-y: auto;
-  overflow-x: scroll;
-  background-color: var(--neutral-10);
-  cursor: text;
 }
 
-.editable-syllabus-wrapper {
-  height: 70vh;
-  overflow-y: scroll;
-  margin-bottom: 8px;
+.feedback-history {
+  margin-bottom: 0.5rem;
+  summary {
+    cursor: pointer;
+    color: var(--neutral-70);
+  }
+  ol {
+    margin: 0.5rem 0 0 1.5rem;
+  }
+  li {
+    white-space: pre-wrap;
+    margin-bottom: 0.25rem;
+  }
 }
-.editable {
-  border: 2px solid var(--primary);
-  background-color: var(--neutral-0);
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-bottom: 3rem;
 }
 
-@media (max-width: 1280px) {
+@media (max-width: 768px) {
   .actions {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.25rem;
+    flex-direction: column-reverse;
   }
-  .button.feedback {
-    margin-right: 0;
-  }
-
   .syllabus {
     padding: 1rem;
   }
-
-  .content h2 {
-    font-size: 1.25rem;
-    margin-bottom: 0.75rem;
-    font-weight: 600;
-  }
 }
 </style>
diff --git a/src/localisation/en.ts b/src/localisation/en.ts
index c4b0d48..b3ec93a 100644
--- a/src/localisation/en.ts
+++ b/src/localisation/en.ts
@@ -364,66 +364,120 @@ export const en = {
   },
   textLengthFeedback: 'Please add more text to improve search results.',
   tutor: {
-    typeDoc:
-      'This feature is currently under development. For the best results, we recommend using scientific articles or book chapters.',
-    articleToAddExample: 'Click to view an example document',
-    restartSyllabusCreation: 'Start a new syllabus creation',
-    syllabusSteps: 'Syllabus steps:',
     BIG_FILE: 'File size exceeds 5 MB.',
     BAD_EXTENSION: 'File type not supported. Only PDF, TXT, and DOCX files are allowed.',
-    retry: {
-      title: 'Please try again',
-      description: 'An issue occurred while extracting the provided content, please try again.',
-      button: 'retry',
-      stop: 'cancel'
+    TOO_MANY_FILES: 'You can add up to 3 files.',
+    edit: 'Edit',
+    collapse: 'Close',
+    steps: {
+      documents: 'Documents',
+      summary: 'Summary',
+      resources: 'Resources',
+      syllabus: 'Syllabus'
+    },
+    documentsStep: {
+      title: 'Add your course materials',
+      description:
+        'Upload 1 to 3 documents your course is based on (articles, book chapters…). WeLearn builds the syllabus from them.',
+      dropzone: 'Drop files here or',
+      browse: 'browse',
+      limits: 'PDF, DOCX or TXT · 5 MB max · up to 3 files',
+      hint: 'This feature is in beta: scientific articles and book chapters give the best results.',
+      exampleLink: 'See an example document',
+      removeFile: 'Remove {name}',
+      noFile: 'Add at least one document to continue.',
+      languageLabel: 'Syllabus language',
+      detailsTitle: 'Tell us about your course',
+      recommended: 'Strongly recommended',
+      detailsWhy:
+        'The more you tell us, the better the syllabus fits your course. Without these details it will stay generic.',
+      titleLabel: 'Course title',
+      titlePlaceholder: 'e.g. Introduction to sociolinguistics',
+      levelLabel: 'Level of study',
+      levelPlaceholder: 'e.g. First-year undergraduate',
+      durationLabel: 'Duration',
+      durationPlaceholder: 'e.g. 6 weeks, 2 hours per week',
+      descriptionLabel: 'Course description and goals',
+      descriptionPlaceholder:
+        'e.g. Students discover the key concepts of sociolinguistics and learn to analyse language use in their own community.',
+      nudge: 'Without course details, your syllabus will be generic.',
+      addDetails: 'Add details',
+      continueAnyway: 'Continue anyway',
+      action: 'Analyse my documents',
+      recap: '{files} · {lang}'
+    },
+    summaryStep: {
+      title: 'Your document summary',
+      description:
+        "Here's what WeLearn understood from each document. You can adjust it if needed: it guides the search for related resources.",
+      noFileName: 'Document {n}',
+      action: 'Find related resources',
+      recap: 'No document summarized | 1 document summarized | {n} documents summarized'
+    },
+    resourcesStep: {
+      title: 'Choose resources to include',
+      description:
+        'These WeLearn resources match your documents and help connect your course to the Sustainable Development Goals. Click a resource to select it.',
+      selected: 'No resource selected | 1 resource selected | {n} resources selected',
+      allHint: 'Nothing selected: WeLearn will use all the resources above.',
+      action: 'Generate syllabus',
+      noSources: 'No related resources found',
+      noSourcesDescription:
+        'You can still generate a syllabus from your documents only, but it will make fewer links to sustainability. To get resources, go back and try other documents.',
+      searchError:
+        'The search for resources failed. You can still generate a syllabus from your documents.',
+      recapAll: 'All resources'
+    },
+    syllabusStep: {
+      title: 'Your syllabus is ready',
+      description:
+        'Click the text to edit it, ask WeLearn for changes, then download it as a Word file.',
+      feedbackLabel: 'Ask for changes',
+      feedbackPlaceholder:
+        'e.g. Add a week on assessment methods, shorten the reading list, make it more hands-on…',
+      regenerate: 'Regenerate with my changes',
+      feedbackError: "Your changes couldn't be applied. Please try again.",
+      feedbackHistory: 'Changes you already requested ({n})',
+      openLink: 'Open',
+      download: 'Download (.docx)',
+      restart: 'Start a new syllabus'
     },
     loading: {
-      wait: 'Please wait',
       extract: {
-        title: 'Document content extraction',
-        description: 'WeLearn extracts the content from your documents to generate a summary.'
+        title: 'Reading your documents',
+        description: 'WeLearn is identifying the main ideas of each document.'
       },
       search: {
-        title: 'Finding related resources',
+        title: 'Searching for related resources',
         description:
-          'Processing your documents and searching for relevant resources in the WeLearn database.'
+          'WeLearn is looking through its library for resources that match your documents.'
       },
       syllabus: {
-        title: 'Generating syllabus',
+        title: 'Writing your syllabus',
         description:
-          'WeLearn is generating your syllabus from the documents provided. This step may take a few minutes.'
+          "WeLearn is combining your documents, course details and resources. This can take up to a minute: please don't close or reload this page."
       },
-      default: {
-        title: 'Loading',
-        description: 'WeLearn is getting ready for the next step.'
+      feedback: {
+        title: 'Applying your changes',
+        description: 'WeLearn is updating the syllabus based on your request.'
       }
     },
+    error: {
+      title: 'Something went wrong',
+      extract: "We couldn't read your documents.",
+      search: "We couldn't search for related resources.",
+      syllabus: "We couldn't write the syllabus.",
+      kept: 'Your inputs are kept.',
+      retry: 'Try again',
+      cancel: 'Cancel'
+    },
+    // used by the hidden /tutor_test version
     summaries: {
       noFileName: 'No file name provided',
       title: 'Uploaded documents summaries',
       description:
         'WeLearn has extracted the following summaries from your uploaded documents. You can review them before proceeding to the next step.'
     },
-    firstStep: {
-      syllabusLanguage: 'Syllabus language',
-      acceptedFiles: 'Accepted file types: PDF, TXT, DOCX',
-      searchError: 'No results were found for the provided document.',
-      title: 'Add documents',
-      description:
-        'To get started, upload one or more reference documents your course is based on. They will be used to generate your syllabus.',
-      cursusDescriptionTitle: 'Course information',
-      cursusDescriptionDescription:
-        'Fill in the information about your course. It will be used to generate a syllabus that adapts to your needs.',
-      cursusTitleLabel: 'Title',
-      cursusTitlePlaceholder: 'Sociolinguistics 101',
-      cursusLevelLabel: 'Level of study',
-      cursusLevelPlaceholder: 'Undergraduate',
-      cursusDurationLabel: 'Duration',
-      cursusDurationPlaceholder: '6 weeks',
-      cursusDescriptionLabel: 'Brief description of the course',
-      cursusDescriptionPlaceholder:
-        'This course covers the fundamentals of sociolinguistics, mainly key concepts and theories.'
-    },
     secondStep: {
       title: 'Select additional resources',
       description:
@@ -431,14 +485,6 @@ export const en = {
       noSources: 'No resources related to your documents were found.',
       noSourcesDescription:
         'You can proceed with your uploaded documents only, but sustainability integration in the generated syllabus may be limited.\nTo explore more resources, return to the previous step to modify your uploaded documents.'
-    },
-    thirdStep: {
-      title: 'Your syllabus',
-      description:
-        'You can edit directly on this page, download a copy, and submit feedback that WeLearn will use to regenerate the syllabus — in any order, and as many times as you like.',
-      giveFeedback: 'Provide feedback on the generated syllabus',
-      sendFeedback: 'Submit feedback',
-      feedbackHistory: 'Changes you already requested ({n})'
     }
   },
   microlearning: {
diff --git a/src/localisation/fr.ts b/src/localisation/fr.ts
index 1485c60..b838cfc 100644
--- a/src/localisation/fr.ts
+++ b/src/localisation/fr.ts
@@ -367,68 +367,122 @@ export const fr = {
   },
   textLengthFeedback: 'Veuillez ajouter davantage de texte pour lancer la recherche.',
   tutor: {
-    typeDoc:
-      "Cette fonctionnalité est actuellement en cours de développement. Pour obtenir les meilleurs résultats, nous recommandons d'utiliser des articles scientifiques ou des chapitres d'ouvrages.",
-    articleToAddExample: 'Consulter un exemple de document',
-    restartSyllabusCreation: 'Commencer un nouveau syllabus',
-    syllabusSteps: 'Étapes du syllabus :',
     BIG_FILE: 'La taille du fichier dépasse 5 Mo.',
     BAD_EXTENSION:
       'Type de fichier non pris en charge. Seuls les fichiers PDF, TXT et DOCX sont acceptés.',
-    retry: {
-      title: 'Veuillez réessayer',
+    TOO_MANY_FILES: "Vous pouvez ajouter jusqu'à 3 fichiers.",
+    edit: 'Modifier',
+    collapse: 'Fermer',
+    steps: {
+      documents: 'Documents',
+      summary: 'Résumé',
+      resources: 'Ressources',
+      syllabus: 'Syllabus'
+    },
+    documentsStep: {
+      title: 'Ajoutez vos supports de cours',
+      description:
+        "Importez 1 à 3 documents sur lesquels repose votre cours (articles, chapitres d'ouvrage…). WeLearn construit le syllabus à partir de ceux-ci.",
+      dropzone: 'Déposez vos fichiers ici ou',
+      browse: 'parcourez',
+      limits: 'PDF, DOCX ou TXT · 5 Mo max · 3 fichiers maximum',
+      hint: "Cette fonctionnalité est en bêta : les articles scientifiques et les chapitres d'ouvrage donnent les meilleurs résultats.",
+      exampleLink: 'Voir un exemple de document',
+      removeFile: 'Retirer {name}',
+      noFile: 'Ajoutez au moins un document pour continuer.',
+      languageLabel: 'Langue du syllabus',
+      detailsTitle: 'Parlez-nous de votre cours',
+      recommended: 'Fortement recommandé',
+      detailsWhy:
+        'Plus vous en dites, plus le syllabus sera adapté à votre cours. Sans ces informations, il restera générique.',
+      titleLabel: 'Titre du cours',
+      titlePlaceholder: 'ex. : Introduction à la sociolinguistique',
+      levelLabel: "Niveau d'études",
+      levelPlaceholder: 'ex. : Licence 1',
+      durationLabel: 'Durée',
+      durationPlaceholder: 'ex. : 6 semaines, 2 heures par semaine',
+      descriptionLabel: 'Description et objectifs du cours',
+      descriptionPlaceholder:
+        'ex. : Les étudiants découvrent les concepts clés de la sociolinguistique et apprennent à analyser les usages de la langue dans leur environnement.',
+      nudge: 'Sans informations sur le cours, votre syllabus sera générique.',
+      addDetails: 'Ajouter des informations',
+      continueAnyway: 'Continuer quand même',
+      action: 'Analyser mes documents',
+      recap: '{files} · {lang}'
+    },
+    summaryStep: {
+      title: 'Le résumé de vos documents',
       description:
-        "Un problème est survenu lors de l'extraction du contenu renseigné, veuillez relancer.",
-      button: 'relancer la requête',
-      stop: 'annuler'
+        "Voici ce que WeLearn a retenu de chaque document. Vous pouvez l'ajuster si besoin : il oriente la recherche de ressources.",
+      noFileName: 'Document {n}',
+      action: 'Trouver des ressources',
+      recap: 'Aucun document résumé | 1 document résumé | {n} documents résumés'
+    },
+    resourcesStep: {
+      title: 'Choisissez des ressources à intégrer',
+      description:
+        'Ces ressources WeLearn correspondent à vos documents et aident à relier votre cours aux Objectifs de développement durable. Cliquez sur une ressource pour la sélectionner.',
+      selected:
+        'Aucune ressource sélectionnée | 1 ressource sélectionnée | {n} ressources sélectionnées',
+      allHint: 'Aucune sélection : WeLearn utilisera toutes les ressources ci-dessus.',
+      action: 'Générer le syllabus',
+      noSources: 'Aucune ressource associée trouvée',
+      noSourcesDescription:
+        "Vous pouvez tout de même générer un syllabus à partir de vos documents seulement, mais il fera moins de liens avec la durabilité. Pour obtenir des ressources, revenez en arrière et essayez d'autres documents.",
+      searchError:
+        'La recherche de ressources a échoué. Vous pouvez tout de même générer un syllabus à partir de vos documents.',
+      recapAll: 'Toutes les ressources'
+    },
+    syllabusStep: {
+      title: 'Votre syllabus est prêt',
+      description:
+        'Cliquez sur le texte pour le modifier, demandez des modifications à WeLearn, puis téléchargez-le au format Word.',
+      feedbackLabel: 'Demander des modifications',
+      feedbackPlaceholder:
+        "ex. : Ajouter une semaine sur l'évaluation, raccourcir la bibliographie, rendre le cours plus pratique…",
+      regenerate: 'Régénérer avec mes modifications',
+      feedbackError: "Vos modifications n'ont pas pu être appliquées. Veuillez réessayer.",
+      feedbackHistory: 'Modifications déjà demandées ({n})',
+      openLink: 'Ouvrir',
+      download: 'Télécharger (.docx)',
+      restart: 'Créer un nouveau syllabus'
     },
     loading: {
-      wait: 'Veuillez patienter',
       extract: {
-        title: 'Extraction du contenu du document',
-        description: 'WeLearn extrait le contenu de vos documents pour générer un résumé.'
+        title: 'Lecture de vos documents',
+        description: 'WeLearn repère les idées principales de chaque document.'
       },
       search: {
         title: 'Recherche de ressources associées',
         description:
-          'Traitement de vos documents et recherche de ressources pertinentes dans la base de données WeLearn.'
+          'WeLearn parcourt sa bibliothèque pour trouver des ressources liées à vos documents.'
       },
       syllabus: {
-        title: 'Génération du syllabus',
+        title: 'Rédaction de votre syllabus',
         description:
-          'WeLearn génère votre syllabus à partir des documents fournis. Cette étape peut prendre quelques minutes.'
+          'WeLearn combine vos documents, les informations du cours et les ressources. Cela peut prendre jusqu’à une minute : merci de ne pas fermer ni recharger la page.'
       },
-      default: {
-        title: 'Chargement',
-        description: 'WeLearn se prépare pour la prochaine étape.'
+      feedback: {
+        title: 'Application de vos modifications',
+        description: 'WeLearn met à jour le syllabus selon votre demande.'
       }
     },
+    error: {
+      title: 'Un problème est survenu',
+      extract: 'Impossible de lire vos documents.',
+      search: 'Impossible de rechercher des ressources associées.',
+      syllabus: 'Impossible de rédiger le syllabus.',
+      kept: 'Vos informations sont conservées.',
+      retry: 'Réessayer',
+      cancel: 'Annuler'
+    },
+    // used by the hidden /tutor_test version
     summaries: {
       noFileName: 'Aucun nom de fichier fourni',
       title: 'Résumés des documents importés',
       description:
         'WeLearn a extrait les points clés de vos documents importés pour générer le syllabus.'
     },
-    firstStep: {
-      syllabusLanguage: 'Langue du syllabus',
-      acceptedFiles: 'Types de fichiers acceptés : PDF, TXT, DOCX',
-      searchError: 'Aucun résultat trouvé pour le document fourni.',
-      title: 'Ajoutez des documents',
-      description:
-        'Pour commencer, importez un ou plusieurs documents de référence sur lesquels s’appuie votre cours. Ils serviront à générer votre syllabus.',
-      cursusDescriptionTitle: 'Informations sur le cours',
-      cursusDescriptionDescription:
-        "Renseignez les informations sur votre cours. Elle seront utilisées pour générer un syllabus qui s'adapte a vos besoins.",
-      cursusTitleLabel: 'Titre',
-      cursusTitlePlaceholder: 'Introduction à la sociolinguistique',
-      cursusLevelLabel: 'Niveau d’études',
-      cursusLevelPlaceholder: 'Licence',
-      cursusDurationLabel: 'Durée',
-      cursusDurationPlaceholder: '6 semaines',
-      cursusDescriptionLabel: 'Ajoutez une brève description pour améliorer le syllabus',
-      cursusDescriptionPlaceholder:
-        'Ce cours couvre les fondamentaux de la sociolinguistique, notamment les concepts et théories clés.'
-    },
     secondStep: {
       title: 'Sélectionnez des ressources additionnelles',
       description:
@@ -436,14 +490,6 @@ export const fr = {
       noSources: 'Aucune ressource en lien avec vos documents n’a été trouvée.',
       noSourcesDescription:
         'Vous pouvez poursuivre uniquement avec vos documents importés, mais l’intégration de la durabilité dans votre syllabus pourrait être limitée.\nPour parcourir des ressources additionnelles différentes, revenez à l’étape précédente pour modifier vos documents importés.'
-    },
-    thirdStep: {
-      title: 'Votre syllabus',
-      description:
-        'Vous pouvez modifier directement cette page, télécharger une copie et envoyer un retour que WeLearn utilisera pour régénérer le syllabus — dans l’ordre de votre choix, autant de fois que nécessaire.',
-      giveFeedback: 'Donner un retour sur le syllabus généré',
-      sendFeedback: 'Envoyer le retour',
-      feedbackHistory: 'Modifications déjà demandées ({n})'
     }
   },
   microlearning: {
diff --git a/src/stores/tutor.ts b/src/stores/tutor.ts
index 14201ce..e74188b 100644
--- a/src/stores/tutor.ts
+++ b/src/stores/tutor.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { scrollToAnchor } from '@/utils/navigation';
+import axios from 'axios';
 import { convertMarkdownToDocx, downloadDocx } from '@/utils/md-to-docx';
 import _isequal from 'lodash.isequal';
 import { type Ref, ref } from 'vue';
@@ -7,14 +7,29 @@ import { type Document, type TutorSearch, type TutorSyllabus } from '@/types';
 import { basePostAxios } from '@/utils/fetch';
 import i18n from '@/localisation/i18n';
 
+const MAX_FILES = 3;
+const MAX_FILE_SIZE = 5 * 1024 * 1024;
+
+// the LLM sometimes writes a literal "\n" (backslash + n): inside a table cell it
+// means a line break (<br>), anywhere else a real new line
+export const cleanSyllabus = (content: string) =>
+  content
+    .split('\n')
+    .map((line) =>
+      line.trim().startsWith('|') ? line.replace(/\\n/g, '<br>') : line.replace(/\\n/g, '\n')
+    )
+    .join('\n');
+
+export type FileErrorReason = 'BIG_FILE' | 'BAD_EXTENSION' | 'TOO_MANY_FILES';
+
 export const useTutorStore = defineStore('tutor', () => {
   const tutorSearch: Ref<TutorSearch | undefined> = ref(undefined);
   const syllabi: Ref<{ content: string; source: string } | undefined> = ref(undefined);
+  // keyed by file name, so the same file can't be added twice
   const newFilesToSearch: Ref<Record<string, File>> = ref({});
   const searchedFiles: Ref<File[]> = ref([]);
   const isLoading: Ref<boolean> = ref(false);
   const step: Ref<number> = ref(1);
-  const hasNewSearch: Ref<boolean> = ref(false);
   const level: Ref<string> = ref('');
   const duration: Ref<string> = ref('');
   const description: Ref<string> = ref('');
@@ -24,7 +39,6 @@ export const useTutorStore = defineStore('tutor', () => {
   // feedback the user already sent for the current syllabus, oldest first
   const feedbackHistory: Ref<string[]> = ref([]);
 
-  const goBack = () => (step.value = step.value - 1);
   const goNext = () => (step.value = step.value + 1);
   const setStep = (newStep: number) => (step.value = newStep);
 
@@ -32,61 +46,47 @@ export const useTutorStore = defineStore('tutor', () => {
   const shouldRetryAction: Ref<boolean> = ref(false);
   const hasSearchError: Ref<boolean> = ref(false);
   const reloadError: Ref<boolean> = ref(false);
-  const hasSyllabusError: Ref<boolean> = ref(false);
-  const fileError: Ref<{ state: boolean; reason: 'BIG_FILE' | 'BAD_EXTENSION' | null }> = ref({
+  const fileError: Ref<{ state: boolean; reason: FileErrorReason | null }> = ref({
     state: false,
     reason: null
   });
 
-  const addFile = (e: any, input_id: string) => {
-    const targetFile = e.target.files[0];
-
-    if (targetFile && targetFile.size > 5 * 1024 * 1024) {
-      fileError.value = {
-        state: true,
-        reason: 'BIG_FILE'
-      };
-      return;
-    }
+  // one request at a time: closing the loading modal aborts it
+  let controller: AbortController | undefined;
+  const startRequest = () => {
+    controller?.abort();
+    controller = new AbortController();
+    shouldRetryAction.value = false;
+    isLoading.value = true;
+    return { signal: controller.signal };
+  };
 
-    if (
-      targetFile &&
-      !(
-        targetFile.type === 'application/pdf' ||
-        targetFile.type.startsWith('text/') ||
-        targetFile.type ===
-          'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-      )
-    ) {
-      fileError.value = {
-        state: true,
-        reason: 'BAD_EXTENSION'
-      };
-      return;
+  const isAllowedType = (file: File) =>
+    file.type === 'application/pdf' ||
+    file.type.startsWith('text/') ||
+    file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+
+  const addFiles = (files: FileList | File[]) => {
+    let reason: FileErrorReason | null = null;
+    const next = { ...newFilesToSearch.value };
+    for (const file of Array.from(files)) {
+      if (file.size > MAX_FILE_SIZE) reason = 'BIG_FILE';
+      else if (!isAllowedType(file)) reason = 'BAD_EXTENSION';
+      else if (!next[file.name] && Object.keys(next).length >= MAX_FILES) reason = 'TOO_MANY_FILES';
+      else next[file.name] = file;
     }
-
-    newFilesToSearch.value = {
-      ...newFilesToSearch.value,
-      [input_id]: targetFile
-    };
-
-    fileError.value = {
-      state: false,
-      reason: null
-    };
+    newFilesToSearch.value = next;
+    fileError.value = { state: !!reason, reason };
   };
 
-  const removeFile = (input_id: string) => {
-    if (newFilesToSearch.value[input_id]) {
-      delete newFilesToSearch.value[input_id];
-    }
-    fileError.value = {
-      state: false,
-      reason: null
-    };
+  const removeFile = (name: string) => {
+    const rest = { ...newFilesToSearch.value };
+    delete rest[name];
+    newFilesToSearch.value = rest;
+    fileError.value = { state: false, reason: null };
   };
 
-  const summaries = ref<[string]>([]);
+  const summaries = ref<string[]>([]);
 
   const updateSummary = (index: number, content: string) => {
     summaries.value[index] = content;
@@ -102,77 +102,66 @@ export const useTutorStore = defineStore('tutor', () => {
   const syllabusLanguage: Ref<string> = ref(i18n.global.locale.value);
   const selectSyllabusLanguage = (lang: string) => {
     syllabusLanguage.value = lang;
+    // summaries are extracted in this language, so they must be redone
+    searchedFiles.value = [];
   };
 
   const getFilesContent = async (arg: File[]) => {
-    isLoading.value = true;
-    shouldRetryAction.value = false;
+    const { signal } = startRequest();
     const formData = new FormData();
     arg.forEach((file) => {
       if (file) {
         formData.append('files', file);
       }
     });
-    try {
-      const resp = await basePostAxios(
-        `/tutor/files/content?lang=${syllabusLanguage.value}`,
-        formData,
-        {
-          headers: { 'content-type': 'multipart/form-data' }
-        }
-      );
-      if (resp.status === 204) {
-        shouldRetryAction.value = true;
-        throw new Error('retry getFilesContent');
-      } else {
-        extracts.value = resp.data.extracts;
-        const red_summaries = resp.data.extracts.reduce(
-          (acc: string[], curr: { summary: string }) => {
-            acc = [...acc, curr.summary];
-            return acc;
-          },
-          []
-        );
-        summaries.value = red_summaries;
-        goNext();
-        isLoading.value = false;
+    const resp = await basePostAxios(
+      `/tutor/files/content?lang=${syllabusLanguage.value}`,
+      formData,
+      {
+        headers: { 'content-type': 'multipart/form-data' },
+        signal
       }
-    } catch (error: any) {
-      shouldRetryAction.value = true;
-      throw new Error(error);
+    );
+    if (resp.status === 204) {
+      throw new Error('retry getFilesContent');
     }
+    extracts.value = resp.data.extracts;
+    summaries.value = resp.data.extracts.map((e: { summary: string }) => e.summary);
+    isLoading.value = false;
   };
 
   const stopAction = () => {
+    controller?.abort();
     isLoading.value = false;
+    shouldRetryAction.value = false;
   };
 
-  const retrieveTutorSearch = async (arg: File[]) => {
+  const retrieveTutorSearch = async () => {
     setStep(2);
-    isLoading.value = true;
+    const { signal } = startRequest();
 
     try {
-      const resp = await basePostAxios('/tutor/search_extracts', { summaries: summaries.value });
+      const resp = await basePostAxios(
+        '/tutor/search_extracts',
+        { summaries: summaries.value },
+        { signal }
+      );
       if (resp.status === 204) {
         shouldRetryAction.value = true;
-      } else {
-        tutorSearch.value = resp.data;
-        hasSearchError.value = false;
-        isLoading.value = false;
-        shouldRetryAction.value = false;
-
-        goNext();
-        scrollToAnchor('target-3');
+        return;
       }
+      tutorSearch.value = resp.data;
+      hasSearchError.value = false;
+      isLoading.value = false;
+      setStep(3);
     } catch (error: any) {
+      if (axios.isCancel(error)) return;
       console.error('Error during tutor search:', error);
       hasSearchError.value = true;
+      shouldRetryAction.value = true;
       if (error.code === 'ERR_NETWORK') {
         reloadError.value = true;
       }
-    } finally {
-      setStep(3);
-      searchedFiles.value = arg;
     }
   };
 
@@ -190,14 +179,14 @@ export const useTutorStore = defineStore('tutor', () => {
     setStep(1);
     reloadError.value = false;
     selectedSources.value = [];
-    const arg = Object.values(newFilesToSearch.value).filter((e) => e);
+    const arg = Object.values(newFilesToSearch.value);
     if (!arg.length) {
       console.error('No files selected');
       return;
     }
 
+    // same files as last time: keep the summaries the user may have edited
     if (_isequal(searchedFiles.value, arg)) {
-      hasNewSearch.value = false;
       goNext();
       return;
     }
@@ -205,40 +194,22 @@ export const useTutorStore = defineStore('tutor', () => {
     tutorSearch.value = undefined;
     try {
       await getFilesContent(arg);
-      hasNewSearch.value = true;
-      scrollToAnchor('target-2');
-      // goNext();
-    } catch (error) {
-      console.error('get files content did not work');
-    }
-  };
-
-  const handleSearch = async () => {
-    reloadError.value = false;
-    selectedSources.value = [];
-    const arg = Object.values(newFilesToSearch.value).filter((e) => e);
-    if (!arg.length) {
-      console.error('No files selected');
-      return;
-    }
-
-    if (_isequal(searchedFiles.value, arg) && !shouldRetryAction.value) {
-      hasNewSearch.value = false;
+      searchedFiles.value = arg;
       goNext();
-      return;
+    } catch (error) {
+      if (axios.isCancel(error)) return;
+      console.error('get files content did not work', error);
+      shouldRetryAction.value = true;
     }
-
-    tutorSearch.value = undefined;
-    await retrieveTutorSearch(arg);
-    hasNewSearch.value = true;
   };
 
   const restart = () => {
     setStep(1);
-    scrollToAnchor('target-1');
 
     //reset all refs
     tutorSearch.value = undefined;
+    syllabi.value = undefined;
+    summaries.value = [];
     selectedSources.value = [];
     courseTitle.value = '';
     level.value = '';
@@ -248,77 +219,88 @@ export const useTutorStore = defineStore('tutor', () => {
     searchedFiles.value = [];
     extracts.value = [];
     feedbackHistory.value = [];
+    hasSearchError.value = false;
+    fileError.value = { state: false, reason: null };
   };
 
-  const retrieveSyllabus = async () => {
-    if (!tutorSearch.value) {
-      throw new Error('Body is empty');
-    }
-    isLoading.value = true;
+  // with nothing selected, all found resources are used
+  const documentsToUse = () =>
+    selectedSources.value.length ? selectedSources.value : tutorSearch.value?.documents || [];
+
+  const retrieveSyllabus = async (): Promise<boolean> => {
+    const { signal } = startRequest();
     try {
-      const resp = await basePostAxios(`/tutor/syllabus?lang=${syllabusLanguage.value}`, {
-        ...tutorSearch.value,
-        documents: selectedSources.value.length
-          ? selectedSources.value
-          : tutorSearch.value.documents,
-        extracts: extracts.value,
-        ...(courseTitle.value && { course_title: courseTitle.value }),
-        ...(level.value && { level: level.value }),
-        ...(duration.value && { duration: duration.value }),
-        ...(description.value && { description: description.value })
-      });
+      const resp = await basePostAxios(
+        `/tutor/syllabus?lang=${syllabusLanguage.value}`,
+        {
+          ...tutorSearch.value,
+          documents: documentsToUse(),
+          extracts: extracts.value,
+          ...(courseTitle.value && { course_title: courseTitle.value }),
+          ...(level.value && { level: level.value }),
+          ...(duration.value && { duration: duration.value }),
+          ...(description.value && { description: description.value })
+        },
+        { signal }
+      );
 
       const data = resp.data as TutorSyllabus;
 
       //keep only the syllabus from pedagogical engineer
-      syllabi.value = data.syllabus.filter(({ source }) =>
+      const syllabus = data.syllabus.filter(({ source }) =>
         source.toLowerCase().includes('pedagogicalengineeragent')
       )[0];
-
-      hasSyllabusError.value = false;
-      scrollToAnchor('target-4');
+      syllabi.value = syllabus && { ...syllabus, content: cleanSyllabus(syllabus.content) };
+      isLoading.value = false;
+      return true;
     } catch (error) {
+      if (axios.isCancel(error)) return false;
       console.error('Error during syllabus retrieval:', error);
-      hasSyllabusError.value = true;
-    } finally {
-      isLoading.value = false;
+      shouldRetryAction.value = true;
+      return false;
     }
   };
 
   const handleCreateSyllabus = async () => {
     setStep(3);
-    if (
-      !tutorSearch.value ||
-      (!tutorSearch.value.documents.length && !searchedFiles.value.length)
-    ) {
+    if (!tutorSearch.value) {
       console.error('No documents found');
       return;
     }
 
-    await retrieveSyllabus();
-    hasNewSearch.value = false;
-    goNext();
+    if (await retrieveSyllabus()) {
+      feedbackHistory.value = [];
+      goNext();
+    }
   };
 
-  const giveFeedback = async (feedback: string): Promise<boolean> => {
+  // true = applied, false = failed, undefined = cancelled by the user
+  const giveFeedback = async (feedback: string): Promise<boolean | undefined> => {
     if (!tutorSearch.value || !syllabi.value) {
       throw new Error('Body is empty');
     }
 
-    isLoading.value = true;
+    const { signal } = startRequest();
 
     try {
-      const resp = await basePostAxios('/tutor/syllabus/feedback', {
-        feedback: feedback,
-        syllabus: [syllabi.value],
-        ...tutorSearch.value,
-        documents: selectedSources.value
-      });
+      const resp = await basePostAxios(
+        '/tutor/syllabus/feedback',
+        {
+          feedback: feedback,
+          syllabus: [syllabi.value],
+          ...tutorSearch.value,
+          // known behaviour: feedback only relies on the current syllabus and the request
+          documents: selectedSources.value
+        },
+        { signal }
+      );
 
-      syllabi.value = resp.data.syllabus[0];
+      const syllabus = resp.data.syllabus[0];
+      syllabi.value = { ...syllabus, content: cleanSyllabus(syllabus.content) };
       feedbackHistory.value.push(feedback);
       return true;
     } catch (error) {
+      if (axios.isCancel(error)) return undefined;
       console.error('Error during feedback submission:', error);
       return false;
     } finally {
@@ -359,16 +341,14 @@ export const useTutorStore = defineStore('tutor', () => {
     syllabusLanguage,
     selectSyllabusLanguage,
     step,
-    goBack,
     goNext,
     setStep,
     syllabi,
-    addFile,
+    addFiles,
     removeFile,
     fileError,
     restart,
     reloadError,
-    handleSearch,
     retrieveTutorSearch,
     tutorSearch,
     appendSource,
@@ -376,7 +356,6 @@ export const useTutorStore = defineStore('tutor', () => {
     updateSummary,
     handleCreateSyllabus,
     hasSearchError,
-    hasSyllabusError,
     isLoading,
     searchedFiles,
     giveFeedback,
diff --git a/src/utils/__tests__/md-to-docx.spec.ts b/src/utils/__tests__/md-to-docx.spec.ts
new file mode 100644
index 0000000..f31c9b7
--- /dev/null
+++ b/src/utils/__tests__/md-to-docx.spec.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { ExternalHyperlink, TextRun } from 'docx';
+import { processInlineText } from '@/utils/md-to-docx/helpers';
+import { convertMarkdownToDocx } from '@/utils/md-to-docx';
+import JSZip from 'jszip';
+
+describe('processInlineText', () => {
+  it('keeps the text around links and turns every link into a hyperlink', () => {
+    const children = processInlineText(
+      'Smith (2020). [Paper](https://a.org/x) and https://b.org/y'
+    );
+    expect(children[0]).toBeInstanceOf(TextRun);
+    expect(children.filter((c) => c instanceof ExternalHyperlink)).toHaveLength(2);
+  });
+
+  it('understands the HTML links the LLM writes', () => {
+    const children = processInlineText(
+      'OMS (2021) <a href="https://www.who.int/x" target="_blank">[lien]</a>.'
+    );
+    expect(children.filter((c) => c instanceof ExternalHyperlink)).toHaveLength(1);
+  });
+
+  it('leaves lines without links as formatted text', () => {
+    const children = processInlineText('Plain **bold** text');
+    expect(children.every((c) => c instanceof TextRun)).toBe(true);
+  });
+
+  it('builds a Word file from a syllabus with references', async () => {
+    const md =
+      '## References\n\n- Smith (2020). [Paper](https://a.org/x)\n- **Doe** (2021). https://b.org/y\n\nSee [site](https://c.org).';
+    await expect(convertMarkdownToDocx(md)).resolves.toBeTruthy();
+  });
+
+  it('renders headings, tables, separators and links as real Word formatting', async () => {
+    // shaped like a syllabus saved after an edit ("| --- |" separators, [[lien]] links)
+    const md = [
+      '## 5. **Méthodes d’évaluation**',
+      '',
+      '| Type | Poids | Description |',
+      '| --- | --- | --- |',
+      '| **Participation** | 10% | Débats sur les ODD |',
+      '| **Examen final** | 25% | Ligne 1<br>- Ligne 2 |',
+      '',
+      '---',
+      '',
+      '#### **Ouvrages de référence :**',
+      '',
+      '-   Géopolitique – *Pascal Gauchon* [[lien]](https://www.eyrolles.com/Geopolitique/)',
+      '-   Limites à la croissance [[lien]](https://www.clubofrome.org/)'
+    ].join('\n');
+    const blob = await convertMarkdownToDocx(md);
+    const zip = await JSZip.loadAsync(blob);
+    const xml = await zip.file('word/document.xml')!.async('string');
+    const text = xml.replace(/<[^>]+>/g, '');
+
+    expect((xml.match(/<w:tbl>/g) || []).length).toBe(1);
+    expect(text).not.toContain('**');
+    expect(text).not.toContain('| ---');
+    expect(text).not.toContain('---');
+    expect(text).not.toContain('](');
+    expect((xml.match(/<w:hyperlink /g) || []).length).toBe(2);
+  });
+});
diff --git a/src/utils/md-to-docx/converter.ts b/src/utils/md-to-docx/converter.ts
index cf3c0c3..e848ba1 100644
--- a/src/utils/md-to-docx/converter.ts
+++ b/src/utils/md-to-docx/converter.ts
@@ -1,4 +1,13 @@
-import { Document, Paragraph, TextRun, AlignmentType, PageOrientation, Packer, Table } from 'docx';
+import {
+  Document,
+  Paragraph,
+  TextRun,
+  AlignmentType,
+  PageOrientation,
+  Packer,
+  Table,
+  BorderStyle
+} from 'docx';
 import { type Options, type Style, headingConfigs } from './types';
 import {
   processHeading,
@@ -6,10 +15,10 @@ import {
   processListItem,
   processBlockquote,
   processComment,
-  processFormattedText,
+  processInlineText,
   collectTables,
+  isTableSeparator,
   processCodeBlock,
-  processLinkParagraph,
   processImage
 } from './helpers';
 
@@ -80,7 +89,22 @@ export async function convertMarkdownToDocx(
             listItems = [];
             inList = false;
           }
-          docChildren.push(new Paragraph({}));
+          // ponytail: no empty paragraph, text paragraphs already have spacing around them
+          continue;
+        }
+
+        // Horizontal rule (---, ***, ___): a thin line instead of raw dashes
+        if (/^(-{3,}|\*{3,}|_{3,})$/.test(line)) {
+          if (inList) {
+            docChildren.push(...listItems);
+            listItems = [];
+            inList = false;
+          }
+          docChildren.push(
+            new Paragraph({
+              border: { bottom: { style: BorderStyle.SINGLE, size: 6, color: 'CCCCCC', space: 1 } }
+            })
+          );
           continue;
         }
 
@@ -129,7 +153,7 @@ export async function convertMarkdownToDocx(
 
         // Handle tables
         if (line.startsWith('|') && line.endsWith('|')) {
-          if (i + 1 < lines.length && lines[i + 1].includes('|-')) {
+          if (i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
             if (inList) {
               docChildren.push(...listItems);
               listItems = [];
@@ -241,20 +265,12 @@ export async function convertMarkdownToDocx(
           continue;
         }
 
-        // Handle links - make sure this is after image handling
-        const linkMatch = line.match(/^(?!.*!\[).*\[([^\]]+)\]\(([^)]+)\)/);
-        if (linkMatch) {
-          const [, text, url] = linkMatch;
-          docChildren.push(processLinkParagraph(text, url, style));
-          continue;
-        }
-
         // Regular paragraph text with special formatting
         if (!inList) {
           try {
             docChildren.push(
               new Paragraph({
-                children: processFormattedText(line),
+                children: processInlineText(line),
                 spacing: {
                   before: style.paragraphSpacing,
                   after: style.paragraphSpacing,
diff --git a/src/utils/md-to-docx/helpers.ts b/src/utils/md-to-docx/helpers.ts
index 936e5d2..6de10f3 100644
--- a/src/utils/md-to-docx/helpers.ts
+++ b/src/utils/md-to-docx/helpers.ts
@@ -10,7 +10,8 @@ import {
   TableLayoutType,
   WidthType,
   ExternalHyperlink,
-  ImageRun
+  ImageRun,
+  type ParagraphChild
 } from 'docx';
 import { type Style, type TableData, type HeadingConfig, type ListItemConfig } from './types';
 
@@ -23,7 +24,8 @@ import { type Style, type TableData, type HeadingConfig, type ListItemConfig } f
  * @returns The processed paragraph
  */
 export function processHeading(line: string, config: HeadingConfig, style: Style): Paragraph {
-  const headingText = line.replace(new RegExp(`^#{${config.level}} `), '');
+  // the whole heading is bold already: drop the markdown bold markers
+  const headingText = line.replace(new RegExp(`^#{${config.level}} `), '').replace(/\*\*/g, '');
   const headingLevel = config.level;
 
   return new Paragraph({
@@ -66,7 +68,7 @@ export function processTable(tableData: TableData, documentType: 'document' | 'r
                   style: 'Strong',
                   children: [
                     new TextRun({
-                      text: header,
+                      text: header.replace(/\*\*/g, ''),
                       bold: true,
                       color: '000000'
                     })
@@ -85,16 +87,10 @@ export function processTable(tableData: TableData, documentType: 'document' | 'r
             children: row.map(
               (cell) =>
                 new TableCell({
-                  children: [
-                    new Paragraph({
-                      children: [
-                        new TextRun({
-                          text: cell,
-                          color: '000000'
-                        })
-                      ]
-                    })
-                  ]
+                  // one paragraph per <br>, with bold and links kept
+                  children: cell
+                    .split(/<br\s*\/?>/i)
+                    .map((part) => new Paragraph({ children: processInlineText(part.trim()) }))
                 })
             )
           })
@@ -116,12 +112,44 @@ export function processTable(tableData: TableData, documentType: 'document' | 'r
  * @param style - The style configuration
  * @returns The processed paragraph
  */
+// links, in the 3 forms the LLM writes them:
+// markdown [text](url) (text may hold brackets, e.g. [[lien]](url)), HTML <a href="url">text</a>, bare URL
+const LINK_REGEX =
+  /\[((?:[^[\]]|\[[^\]]*\])+)\]\(([^)\s]+)\)|<a\s[^>]*href="([^"]+)"[^>]*>(.*?)<\/a>|(https?:\/\/[^\s)<>"]+)/g;
+
+/**
+ * Formats a line (bold, italic, code) and turns its links into real hyperlinks,
+ * keeping the text around them
+ */
+export function processInlineText(line: string): ParagraphChild[] {
+  const children: ParagraphChild[] = [];
+  let last = 0;
+  for (const match of line.matchAll(LINK_REGEX)) {
+    const index = match.index ?? 0;
+    if (index > last) children.push(...processFormattedText(line.slice(last, index)));
+    const url = match[2] || match[3] || match[5];
+    children.push(
+      new ExternalHyperlink({
+        children: [
+          new TextRun({
+            text: match[1] || match[4] || url,
+            color: '0000FF',
+            underline: { type: 'single' }
+          })
+        ],
+        link: url
+      })
+    );
+    last = index + match[0].length;
+  }
+  if (last < line.length) children.push(...processFormattedText(line.slice(last)));
+  return children;
+}
+
 export function processListItem(config: ListItemConfig, style: Style): Paragraph {
-  const children: TextRun[] = [
-    new TextRun({
-      text: config.text + (config.boldText ? '\n' : ''),
-      color: '000000'
-    })
+  const children: ParagraphChild[] = [
+    ...processInlineText(config.text),
+    ...(config.boldText ? [new TextRun({ text: '\n', color: '000000' })] : [])
   ];
 
   if (config.boldText) {
@@ -307,13 +335,17 @@ export function processFormattedText(line: string): TextRun[] {
  * @param lines - The markdown lines
  * @returns An array of table data
  */
+// separator line under a table header: |---|---| or | --- | :-: | (both are valid markdown)
+export const isTableSeparator = (line: string) =>
+  /^\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)*\|?$/.test(line.trim());
+
 export function collectTables(lines: string[]): TableData[] {
   const tables: TableData[] = [];
 
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     if (line.trim().startsWith('|') && line.trim().endsWith('|')) {
-      if (i + 1 < lines.length && lines[i + 1].includes('|-')) {
+      if (i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
         const headers = line
           .split('|')
           .filter(Boolean)
diff --git a/src/views/TutorPage.vue b/src/views/TutorPage.vue
index ae50f78..98f9c05 100644
--- a/src/views/TutorPage.vue
+++ b/src/views/TutorPage.vue
@@ -1,42 +1,26 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import i18n from '@/localisation/i18n';
 import CursusInfo from '@/components/tutor/CursusInfo.vue';
 import SummariesStep from '@/components/tutor/SummariesStep.vue';
-import SourcesList from '@/components/tutor/SecondStep.vue';
+import ResourcesStep from '@/components/tutor/ResourcesStep.vue';
 import EditableSyllabus from '@/components/tutor/ThirdStep.vue';
-import StepsIndicator from '@/components/tutor/StepsIndicator.vue';
+import ProgressBar from '@/components/microlearning/ProgressBar.vue';
 import ErrorComponent from '@/components/ErrorComponent.vue';
 import { useTutorStore } from '@/stores/tutor';
 import StatusModal from '@/components/tutor/StatusModal.vue';
 import { scrollToAnchor } from '@/utils/navigation';
 
 const store = useTutorStore();
+const { t } = i18n.global;
 
-const getI18nText = computed(() => {
-  // switch case for step 1, 2, 3
-  switch (store.step) {
-    case 1:
-      return {
-        title: 'tutor.loading.extract.title',
-        description: 'tutor.loading.extract.description'
-      };
-    case 2:
-      return {
-        title: 'tutor.loading.search.title',
-        description: 'tutor.loading.search.description'
-      };
-    case 3:
-      return {
-        title: 'tutor.loading.syllabus.title',
-        description: 'tutor.loading.syllabus.description'
-      };
-    default:
-      return {
-        title: 'tutor.loading.default.title',
-        description: 'tutor.loading.default.description'
-      };
-  }
-});
+const STEPS = ['documents', 'summary', 'resources', 'syllabus'] as const;
+const stepLabels = computed(() => STEPS.map((s) => t(`tutor.steps.${s}`)));
+
+// which loading / error message the modal shows (feedback runs at step 4)
+const loadingKind = computed(
+  () => (['extract', 'search', 'syllabus', 'feedback'] as const)[store.step - 1] || 'extract'
+);
 
 const stepToAction: Record<1 | 2 | 3 | 4, (arg?: any) => Promise<void>> = {
   1: store.handleSummaryFiles,
@@ -45,80 +29,111 @@ const stepToAction: Record<1 | 2 | 3 | 4, (arg?: any) => Promise<void>> = {
   4: store.handleDownloadSyllabus
 };
 
+// finished steps fold into a one-line recap; "Edit" opens one again
+const expanded = ref<Record<number, boolean>>({});
+const isFolded = (n: number) => n < store.step && !expanded.value[n];
+
+const recap = computed(() => ({
+  1: t('tutor.documentsStep.recap', {
+    files: Object.keys(store.newFilesToSearch).join(', '),
+    lang: t(`lang.${store.syllabusLanguage}`)
+  }),
+  2: t('tutor.summaryStep.recap', store.summaries.length),
+  3: store.selectedSources.length
+    ? t('tutor.resourcesStep.selected', store.selectedSources.length)
+    : t('tutor.resourcesStep.recapAll')
+}));
+
+watch(
+  () => store.step,
+  async (step) => {
+    expanded.value = {};
+    await nextTick();
+    scrollToAnchor(`target-${step}`);
+  }
+);
+
 onMounted(() => {
   scrollToAnchor(`target-${store.step}`);
 });
 </script>
 <template>
   <div class="content-centered-wrapper">
-    <div class="is-flex is-flex-wrap-wrap is-justify-content-center is-align-items-center mt-4">
-      <p class="subtitle has-text-weight-bold is-5 is-size-6-mobile mr-4 my-auto">
-        {{ $t('tutor.syllabusSteps') }}
-      </p>
-
-      <StepsIndicator
-        :step="store.step"
-        :setStep="store.setStep"
-        :advancement="store.step"
-        :stepsLength="4"
+    <div class="steps-bar">
+      <ProgressBar
+        :currentStep="store.step - 1"
+        :labels="stepLabels"
+        clickable
+        @select="(i: number) => scrollToAnchor(`target-${i + 1}`)"
       />
     </div>
     <ErrorComponent v-if="store.reloadError" />
     <StatusModal
       :isLoading="store.isLoading"
       :shouldRetryAction="store.shouldRetryAction"
-      :action="stepToAction[store.step]"
+      :action="stepToAction[store.step as 1 | 2 | 3 | 4]"
       :stopAction="store.stopAction"
-      :title="$t(getI18nText.title)"
-      :description="$t(getI18nText.description)"
+      :kind="loadingKind"
     />
 
     <div class="layout-flex">
-      <CursusInfo
-        :selectLang="store.selectSyllabusLanguage"
-        :storedLanguage="store.syllabusLanguage"
-        :searchError="store.hasSearchError"
-        :fileError="store.fileError"
-        v-model:courseTitle="store.courseTitle"
-        v-model:level="store.level"
-        v-model:duration="store.duration"
-        v-model:description="store.description"
-        data-test="fist-step"
-        :addFile="store.addFile"
-        :removeFile="store.removeFile"
-        :action="stepToAction[1]"
-        actionText="next"
-      />
-      <SummariesStep
-        :updateSummary="store.updateSummary"
-        :summaries="store.summaries"
-        :files="store.newFilesToSearch"
-        :action="stepToAction[2]"
-        :disabled="store.step < 2"
-        actionText="search"
-      />
-      <SourcesList
-        v-if="store.step >= 2"
-        data-test="second-step"
-        :disabled="store.step < 3"
-        :sources="store.tutorSearch?.documents"
-        :appendSource="store.appendSource"
-        :selectedSources="store.selectedSources"
-        :action="stepToAction[3]"
-        actionText="genSyllabus"
-      />
-      <EditableSyllabus
-        v-if="store.step >= 3"
-        :disabled="store.step < 4"
-        data-test="third-step"
-        :syllabus="store.syllabi"
-        :updateSyllabus="store.updateSyllabus"
-        :giveFeedback="store.giveFeedback"
-        :feedbackHistory="store.feedbackHistory"
-        :action="stepToAction[4]"
-        :restart="store.restart"
-        :updateSyllabusInDB="store.updateSyllabusInDB"
-      />
+      <template v-for="n in 4" :key="n">
+        <section v-if="store.step >= n" :id="`target-${n}`" class="step-section">
+          <div v-if="n < store.step" class="recap" :class="{ open: expanded[n] }">
+            <span class="recap-check" aria-hidden="true">✓</span>
+            <strong>{{ stepLabels[n - 1] }}</strong>
+            <span class="recap-text">{{ recap[n as 1 | 2 | 3] }}</span>
+            <button class="button is-small is-text" @click="expanded[n] = !expanded[n]">
+              {{ expanded[n] ? $t('tutor.collapse') : $t('tutor.edit') }}
+            </button>
+          </div>
+
+          <template v-if="!isFolded(n)">
+            <CursusInfo
+              v-if="n === 1"
+              data-test="fist-step"
+              :files="store.newFilesToSearch"
+              :addFiles="store.addFiles"
+              :removeFile="store.removeFile"
+              :fileError="store.fileError"
+              :selectLang="store.selectSyllabusLanguage"
+              :storedLanguage="store.syllabusLanguage"
+              v-model:courseTitle="store.courseTitle"
+              v-model:level="store.level"
+              v-model:duration="store.duration"
+              v-model:description="store.description"
+              :action="stepToAction[1]"
+            />
+            <SummariesStep
+              v-else-if="n === 2"
+              :updateSummary="store.updateSummary"
+              :summaries="store.summaries"
+              :files="store.newFilesToSearch"
+              :action="stepToAction[2]"
+            />
+            <ResourcesStep
+              v-else-if="n === 3"
+              data-test="second-step"
+              :sources="store.tutorSearch?.documents"
+              :searchError="store.hasSearchError"
+              :appendSource="store.appendSource"
+              :selectedSources="store.selectedSources"
+              :action="stepToAction[3]"
+            />
+            <EditableSyllabus
+              v-else
+              data-test="third-step"
+              :syllabus="store.syllabi"
+              :updateSyllabus="store.updateSyllabus"
+              :giveFeedback="store.giveFeedback"
+              :feedbackHistory="store.feedbackHistory"
+              :action="stepToAction[4]"
+              :restart="store.restart"
+              :updateSyllabusInDB="store.updateSyllabusInDB"
+            />
+          </template>
+        </section>
+      </template>
     </div>
   </div>
 </template>
@@ -132,21 +147,96 @@ onMounted(() => {
   overflow: hidden;
 }
 
+.steps-bar {
+  width: 100%;
+  padding: 0 20%;
+  border-bottom: 1px solid var(--neutral-20);
+}
+
+/* compact version of the micro-learning progress bar */
+.steps-bar :deep(.progress-wrapper) {
+  margin: 0.75rem 0 0.5rem;
+}
+.steps-bar :deep(.steps) {
+  margin-top: 0.5rem;
+}
+.steps-bar :deep(.step) {
+  flex-direction: row;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.steps-bar :deep(.circle) {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.75rem;
+  border-width: 1.5px;
+}
+.steps-bar :deep(.check) {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+.steps-bar :deep(.label) {
+  margin-top: 0;
+  max-width: none;
+  font-size: 0.8rem;
+}
+@media (max-width: 640px) {
+  /* only the current step keeps its name */
+  .steps-bar :deep(.step:not(.active) .label) {
+    display: none;
+  }
+}
+
 .layout-flex {
   width: 100%;
   overflow-y: auto;
   padding: 1rem 20%;
 }
 
+.step-section {
+  padding: 1.5rem 0;
+  scroll-margin-top: 0.5rem;
+}
+
+.step-section + .step-section {
+  border-top: 1px solid var(--neutral-20);
+}
+
+.recap {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--neutral-70);
+}
+
+.recap.open {
+  margin-bottom: 1.5rem;
+}
+
+.recap-check {
+  color: var(--primary-dark);
+  font-weight: bold;
+}
+
+.recap-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @media (max-width: 1024px) {
-  .layout-flex {
+  .layout-flex,
+  .steps-bar {
     padding-inline: 10%;
   }
 }
 
 @media (max-width: 768px) {
-  .layout-flex {
-    padding-inline: 5%;
+  .layout-flex,
+  .steps-bar {
+    padding-inline: 1rem;
   }
 }
 </style>
diff --git a/src/views/__tests__/__snapshots__/TutorPage.test.ts.snap b/src/views/__tests__/__snapshots__/TutorPage.test.ts.snap
index 8fc2abf..84758e6 100644
--- a/src/views/__tests__/__snapshots__/TutorPage.test.ts.snap
+++ b/src/views/__tests__/__snapshots__/TutorPage.test.ts.snap
@@ -6,420 +6,394 @@ exports[`TutorPage > renders properly 1`] = `
   data-v-8a8621cb=""
 >
   <div
-    class="is-flex is-flex-wrap-wrap is-justify-content-center is-align-items-center mt-4"
+    class="steps-bar"
     data-v-8a8621cb=""
   >
-    <p
-      class="subtitle has-text-weight-bold is-5 is-size-6-mobile mr-4 my-auto"
-      data-v-8a8621cb=""
-    >
-      tutor.syllabusSteps
-    </p>
     <div
-      class="wrapper"
-      data-v-050e406a=""
+      class="progress-wrapper"
+      data-v-49a355d6=""
       data-v-8a8621cb=""
     >
-      
-      <a
-        class="step-indicator active"
-        data-v-050e406a=""
-        href="#"
-      >
-        1
-      </a>
-      <a
-        class="step-indicator disabled"
-        data-v-050e406a=""
-        href="#"
-      >
-        2
-      </a>
-      <a
-        class="step-indicator disabled"
-        data-v-050e406a=""
-        href="#"
-      >
-        3
-      </a>
-      <a
-        class="step-indicator disabled"
-        data-v-050e406a=""
-        href="#"
-      >
-        4
-      </a>
-      
-    </div>
-  </div>
-  <!--v-if-->
-  <!--v-if-->
-  <div
-    class="layout-flex"
-    data-v-8a8621cb=""
-  >
-    <div
-      class="wrapper"
-      data-test="fist-step"
-      data-v-5582d651=""
-      data-v-8a8621cb=""
-      id="target-1"
-    >
-      <h1
-        class="title is-4 is-size-5-mobile"
-        data-v-5582d651=""
-      >
-        1 - tutor.firstStep.title
-      </h1>
-      <p
-        class="subtitle is-6 is-size-6-mobile"
-        data-v-5582d651=""
+      <div
+        class="progress-track"
+        data-v-49a355d6=""
       >
-        tutor.firstStep.description
-      </p>
-      <!-- File Input Section -->
+        <div
+          class="progress-fill"
+          data-v-49a355d6=""
+          style="width: 5%;"
+        />
+      </div>
       <div
-        class="is-flex is-flex-direction-column"
-        data-v-5582d651=""
+        class="steps"
+        data-v-49a355d6=""
       >
+        
         <div
-          class="input-group is-flex is-flex-direction-column"
-          data-v-5582d651=""
+          class="step active"
+          data-v-49a355d6=""
         >
           <div
-            class="is-flex is-flex-direction-row mb-2"
-            data-v-5582d651=""
-            id="file_0"
+            class="circle"
+            data-v-49a355d6=""
           >
-            <input
-              accept="application/pdf, text/plain, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-              class="input"
-              data-testid="file-input"
-              data-v-5582d651=""
-              placeholder="Enter the new file"
-              type="file"
-            />
-            <button
-              class="button"
-              data-v-5582d651=""
-              disabled=""
+            <span
+              data-v-49a355d6=""
             >
-              x
-            </button>
+              1
+            </span>
           </div>
+          <span
+            class="label"
+            data-v-49a355d6=""
+          >
+            Documents
+          </span>
         </div>
-        <p
-          class="mr-2 is-italic"
-          data-v-5582d651=""
-        >
-          tutor.typeDoc
-        </p>
-        <a
-          class="link is-small"
-          data-v-5582d651=""
-          href="https://journals.plos.org/plosone/article/file?id=10.1371/journal.pone.0206282&type=printable"
-          id="articleToAdd"
-          target="_blank"
+        <div
+          class="step"
+          data-v-49a355d6=""
         >
+          <div
+            class="circle"
+            data-v-49a355d6=""
+          >
+            <span
+              data-v-49a355d6=""
+            >
+              2
+            </span>
+          </div>
           <span
-            class="mr-2 is-small"
-            data-v-5582d651=""
+            class="label"
+            data-v-49a355d6=""
           >
-            tutor.articleToAddExample
+            Résumé
           </span>
+        </div>
+        <div
+          class="step"
+          data-v-49a355d6=""
+        >
           <div
-            class="icon is-small mt-2"
-            data-v-5582d651=""
-            data-v-69f71e04=""
+            class="circle"
+            data-v-49a355d6=""
           >
-            <svg
-              data-v-69f71e04=""
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              data-v-49a355d6=""
             >
-              <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-              <path
-                d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"
-                data-v-69f71e04=""
-                fill="currentColor"
-              />
-            </svg>
+              3
+            </span>
           </div>
-        </a>
-        <!--v-if-->
+          <span
+            class="label"
+            data-v-49a355d6=""
+          >
+            Ressources
+          </span>
+        </div>
         <div
-          class="is-align-self-flex-end"
-          data-v-5582d651=""
+          class="step"
+          data-v-49a355d6=""
         >
+          <div
+            class="circle"
+            data-v-49a355d6=""
+          >
+            <span
+              data-v-49a355d6=""
+            >
+              4
+            </span>
+          </div>
           <span
-            class="has-text-grey-light mr-2"
-            data-v-5582d651=""
+            class="label"
+            data-v-49a355d6=""
           >
-            tutor.firstStep.acceptedFiles
+            Syllabus
           </span>
-          <!--v-if-->
-          <button
-            class="button"
-            data-v-5582d651=""
-          >
-            +
-          </button>
         </div>
+        
       </div>
+    </div>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+  <div
+    class="layout-flex"
+    data-v-8a8621cb=""
+  >
+    
+    
+    <section
+      class="step-section"
+      data-v-8a8621cb=""
+      id="target-1"
+    >
       <!--v-if-->
-      <!-- Course Description Section -->
-      <h2
-        class="title is-6 mt-4 is-size-6-mobile"
-        data-v-5582d651=""
-      >
-        tutor.firstStep.cursusDescriptionTitle
-      </h2>
-      <p
-        class="subtitle is-6 is-size-6-mobile"
-        data-v-5582d651=""
-      >
-        tutor.firstStep.cursusDescriptionDescription
-      </p>
+      
       <div
-        class="cursus-details"
+        class="wrapper"
+        data-test="fist-step"
         data-v-5582d651=""
+        data-v-8a8621cb=""
       >
-        <div
-          class="description"
+        <h1
+          class="title is-4 is-size-5-mobile"
+          data-v-5582d651=""
+        >
+          tutor.documentsStep.title
+        </h1>
+        <p
+          class="subtitle is-6 mt-2"
+          data-v-5582d651=""
+        >
+          tutor.documentsStep.description
+        </p>
+        <label
+          class="dropzone"
           data-v-5582d651=""
         >
-          <label
-            data-v-5582d651=""
-            for="cursus-title"
-          >
-            tutor.firstStep.cursusTitleLabel
-          </label>
           <input
-            class="input"
+            accept="application/pdf, text/plain, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+            class="is-sr-only"
+            data-testid="file-input"
             data-v-5582d651=""
-            id="cursus-title"
-            placeholder="tutor.firstStep.cursusTitlePlaceholder"
-            type="text"
-            value=""
+            multiple=""
+            type="file"
           />
-        </div>
-        <div
-          class="description"
+          <span
+            data-v-5582d651=""
+          >
+            tutor.documentsStep.dropzone 
+            <span
+              class="browse"
+              data-v-5582d651=""
+            >
+              tutor.documentsStep.browse
+            </span>
+          </span>
+          <span
+            class="is-size-7 has-text-grey"
+            data-v-5582d651=""
+          >
+            tutor.documentsStep.limits
+          </span>
+        </label>
+        <!--v-if-->
+        <!--v-if-->
+        <p
+          class="is-size-7 has-text-grey mt-2"
           data-v-5582d651=""
         >
-          <label
+          tutor.documentsStep.hint 
+          <a
+            class="example-link"
             data-v-5582d651=""
-            for="cursus-level"
+            href="https://journals.plos.org/plosone/article/file?id=10.1371/journal.pone.0206282&type=printable"
+            target="_blank"
           >
-            tutor.firstStep.cursusLevelLabel
-          </label>
-          <input
-            class="input"
-            data-v-5582d651=""
-            id="cursus-level"
-            placeholder="tutor.firstStep.cursusLevelPlaceholder"
-            type="text"
-            value=""
-          />
-        </div>
+            tutor.documentsStep.exampleLink 
+            <div
+              class="icon is-small"
+              data-v-5582d651=""
+              data-v-69f71e04=""
+            >
+              <svg
+                data-v-69f71e04=""
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+                <path
+                  d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"
+                  data-v-69f71e04=""
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </a>
+        </p>
         <div
-          class="description"
+          class="field mt-5 language"
           data-v-5582d651=""
         >
           <label
+            class="label"
             data-v-5582d651=""
-            for="cursus-duration"
+            for="cursus-lang"
           >
-            tutor.firstStep.cursusDurationLabel
+            tutor.documentsStep.languageLabel
           </label>
-          <input
-            class="input"
+          <div
+            class="select"
             data-v-5582d651=""
-            id="cursus-duration"
-            placeholder="tutor.firstStep.cursusDurationPlaceholder"
-            type="text"
-            value=""
-          />
+          >
+            <select
+              data-v-5582d651=""
+              id="cursus-lang"
+              value="fr"
+            >
+              
+              <option
+                data-v-5582d651=""
+                value="fr"
+              >
+                lang.fr
+              </option>
+              <option
+                data-v-5582d651=""
+                value="en"
+              >
+                lang.en
+              </option>
+              
+            </select>
+          </div>
         </div>
+        <!-- Course details: optional but they make the syllabus fit the course -->
         <div
-          class="description"
+          class="details box mt-5"
           data-v-5582d651=""
         >
-          <label
+          <h2
+            class="title is-5 mb-2 details-title"
             data-v-5582d651=""
-            for="cursus-lang"
           >
-            tutor.firstStep.syllabusLanguage
-          </label>
+            tutor.documentsStep.detailsTitle 
+            <span
+              class="tag is-primary is-light"
+              data-v-5582d651=""
+            >
+              tutor.documentsStep.recommended
+            </span>
+          </h2>
+          <p
+            class="mb-4"
+            data-v-5582d651=""
+          >
+            tutor.documentsStep.detailsWhy
+          </p>
           <div
-            class="dropdown is-fullwidth"
+            class="cursus-details"
             data-v-5582d651=""
-            data-v-d2915419=""
           >
             <div
-              class="dropdown-trigger"
-              data-v-d2915419=""
+              class="field full"
+              data-v-5582d651=""
+            >
+              <label
+                class="label"
+                data-v-5582d651=""
+                for="cursus-title"
+              >
+                tutor.documentsStep.titleLabel
+              </label>
+              <input
+                class="input"
+                data-v-5582d651=""
+                id="cursus-title"
+                placeholder="tutor.documentsStep.titlePlaceholder"
+                type="text"
+                value=""
+              />
+            </div>
+            <div
+              class="field"
+              data-v-5582d651=""
             >
-              <button
-                aria-controls="dropdown-menu"
-                aria-haspopup="true"
-                class="button"
-                data-v-d2915419=""
+              <label
+                class="label"
+                data-v-5582d651=""
+                for="cursus-level"
               >
-                <div
-                  class="drop-title container is-flex"
-                  data-v-d2915419=""
-                >
-                  <span
-                    data-v-d2915419=""
-                  >
-                    fr
-                  </span>
-                  <!--v-if-->
-                </div>
-                <span
-                  class="icon is-small"
-                  data-v-d2915419=""
-                >
-                  <svg
-                    data-v-d2915419=""
-                    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>
-                </span>
-              </button>
+                tutor.documentsStep.levelLabel
+              </label>
+              <input
+                class="input"
+                data-v-5582d651=""
+                id="cursus-level"
+                placeholder="tutor.documentsStep.levelPlaceholder"
+                type="text"
+                value=""
+              />
             </div>
             <div
-              class="dropdown-menu"
-              data-v-d2915419=""
-              id="dropdown-menu"
-              role="menu"
+              class="field"
+              data-v-5582d651=""
             >
-              <div
-                class="dropdown-content"
-                data-v-d2915419=""
+              <label
+                class="label"
+                data-v-5582d651=""
+                for="cursus-duration"
               >
-                
-                <clickabletext
-                  action="() => {
-                slotProps.toggleVisibility();
-              }"
-                  class="dropdown-item"
-                  data-v-5582d651=""
-                  text="removeSelection"
-                />
-                
-                <a
-                  class="dropdown-item is-active"
-                  data-v-5582d651=""
-                >
-                  fr
-                </a>
-                <a
-                  class="dropdown-item"
-                  data-v-5582d651=""
-                >
-                  en
-                </a>
-                
-                
-              </div>
+                tutor.documentsStep.durationLabel
+              </label>
+              <input
+                class="input"
+                data-v-5582d651=""
+                id="cursus-duration"
+                placeholder="tutor.documentsStep.durationPlaceholder"
+                type="text"
+                value=""
+              />
             </div>
           </div>
+          <div
+            class="field"
+            data-v-5582d651=""
+          >
+            <label
+              class="label"
+              data-v-5582d651=""
+              for="cursus-description"
+            >
+              tutor.documentsStep.descriptionLabel
+            </label>
+            <textarea
+              class="textarea"
+              data-v-5582d651=""
+              id="cursus-description"
+              placeholder="tutor.documentsStep.descriptionPlaceholder"
+              rows="3"
+              value=""
+            />
+          </div>
         </div>
-      </div>
-      <label
-        class="mt-4"
-        data-v-5582d651=""
-        for="cursus-description"
-      >
-        tutor.firstStep.cursusDescriptionLabel
-      </label>
-      <textarea
-        class="textarea mt-1"
-        data-v-5582d651=""
-        id="cursus-description"
-        placeholder="tutor.firstStep.cursusDescriptionPlaceholder"
-        value=""
-      />
-      <div
-        class="is-flex is-justify-content-end mt-4"
-        data-v-5582d651=""
-      >
-        <a
-          class="button is-primary"
-          data-testid="tutor-next-button"
+        <!--v-if-->
+        <div
+          class="step-footer"
           data-v-5582d651=""
-          href="#"
         >
-          <svg
+          <span
+            class="has-text-grey is-size-7"
             data-v-5582d651=""
-            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>
-           next
-        </a>
-      </div>
-    </div>
-    <div
-      class="summaries-section disabled"
-      data-v-834edf8c=""
-      data-v-8a8621cb=""
-      id="target-2"
-    >
-      <h2
-        class="title is-4 is-size-5-mobile mt-4"
-        data-testid="tutor-summaries-title"
-        data-v-834edf8c=""
-      >
-         2 - tutor.summaries.title
-      </h2>
-      <p
-        class="subtitle is-6"
-        data-v-834edf8c=""
-      >
-        tutor.summaries.description
-      </p>
-      
-      
-      <div
-        class="is-flex is-justify-content-end mt-4"
-        data-v-834edf8c=""
-      >
-        <a
-          class="button is-primary"
-          data-v-834edf8c=""
-          href="#"
-        >
-          <svg
-            data-v-834edf8c=""
-            viewBox="0 0 448 512"
-            xmlns="http://www.w3.org/2000/svg"
+            tutor.documentsStep.noFile
+          </span>
+          <button
+            class="button is-primary"
+            data-testid="tutor-next-button"
+            data-v-5582d651=""
+            disabled=""
           >
-            <!--!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>
-           search
-        </a>
+            tutor.documentsStep.action → 
+          </button>
+        </div>
       </div>
-    </div>
+      
+    </section>
+    
+    
+    <!--v-if-->
+    
+    
     <!--v-if-->
+    
+    
     <!--v-if-->
+    
+    
   </div>
 </div>
 `;
diff --git a/yarn.lock b/yarn.lock
index 5b4b141..3da288b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -589,6 +589,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@mixmark-io/domino@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@mixmark-io/domino/-/domino-2.2.0.tgz#4e8ec69bf1afeb7a14f0628b7e2c0f35bdb336c3"
+  integrity sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==
+
 "@mixpanel/rrdom@^2.0.0-alpha.18":
   version "2.0.0-alpha.18.4"
   resolved "https://registry.yarnpkg.com/@mixpanel/rrdom/-/rrdom-2.0.0-alpha.18.4.tgz#5229dc32d991d6a17870e5033558e9e2be9f1f3c"
@@ -917,6 +922,11 @@
   resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz"
   integrity sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==
 
+"@types/turndown@^5.0.6":
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@types/turndown/-/turndown-5.0.6.tgz#42a27397298a312d6088f29c0ff4819c518c1ecb"
+  integrity sha512-ru00MoyeeouE5BX4gRL+6m/BsDfbRayOskWqUvh7CLGW+UXxHQItqALa38kKnOiZPqJrtzJUgAC2+F0rL1S4Pg==
+
 "@types/yarnpkg__lockfile@^1.1.9":
   version "1.1.9"
   resolved "https://registry.npmjs.org/@types/yarnpkg__lockfile/-/yarnpkg__lockfile-1.1.9.tgz"
@@ -4121,6 +4131,18 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
+turndown-plugin-gfm@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/turndown-plugin-gfm/-/turndown-plugin-gfm-1.0.2.tgz#6f8678a361f35220b2bdf5619e6049add75bf1c7"
+  integrity sha512-vwz9tfvF7XN/jE0dGoBei3FXWuvll78ohzCZQuOb+ZjWrs3a0XhQVomJEb2Qh4VHTPNRO4GPZh0V7VRbiWwkRg==
+
+turndown@^7.2.4:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/turndown/-/turndown-7.2.4.tgz#42d98202aefa8c188c997b586bc6da78bdf27ea2"
+  integrity sha512-I8yFsfRzmzK0WV1pNNOA4A7y4RDfFxPRxb3t+e3ui14qSGOxGtiSP6GjeX+Y6CHb7HYaFj7ECUD7VE5kQMZWGQ==
+  dependencies:
+    "@mixmark-io/domino" "^2.2.0"
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"