diff --git a/src/features/cv-preview/themes/ClassicTheme.tsx b/src/features/cv-preview/themes/ClassicTheme.tsx
index 66e90d9..1b35d9c 100644
--- a/src/features/cv-preview/themes/ClassicTheme.tsx
+++ b/src/features/cv-preview/themes/ClassicTheme.tsx
@@ -2,170 +2,169 @@ import type { CVData } from "../../../core/domain/cv.types";
 import { useTranslation } from "react-i18next";
 
 export const ClassicTheme = ({ data }: { data: CVData }) => {
-  const { t } = useTranslation("theme", {
-    lng: data.metadata.language || "fr",
-  });
+	const { t } = useTranslation("theme", {
+		lng: data.metadata.language || "fr",
+	});
 
-  return (
-    <div
-      className="p-16 h-full min-h-[297mm] flex flex-col font-serif bg-white text-slate-900"
-      id="cv-to-print"
-    >
-      <header className="text-center border-b-2 border-slate-900 pb-6 mb-8">
-        <h1 className="text-4xl font-bold tracking-tight uppercase mb-2">
-          {data.personalInfo.fullName || t("defaultName")}
-        </h1>
-        <p className="text-xl text-slate-700 font-medium uppercase tracking-[0.2em] mb-4">
-          {data.personalInfo.title || t("defaultTitle")}
-        </p>
+	return (
+		<div
+			className="p-16 h-full min-h-[297mm] flex flex-col font-serif bg-white text-slate-900"
+			id="cv-to-print">
+			<header className="text-center border-b-2 border-slate-900 pb-6 mb-8">
+				<h1 className="text-4xl font-bold tracking-tight uppercase mb-2">
+					{data.personalInfo.fullName || t("defaultName")}
+				</h1>
+				<p className="text-xl text-slate-700 font-medium uppercase tracking-[0.2em] mb-4">
+					{data.personalInfo.title || t("defaultTitle")}
+				</p>
 
-        <div className="flex flex-wrap justify-center gap-x-3 gap-y-1 text-[10px] text-slate-600 max-w-2xl mx-auto">
-          {data.personalInfo.contacts.map((c, i) => (
-            <span key={c.id} className="flex items-center">
-              <span className="font-bold uppercase">{c.label}:</span>&nbsp;
-              {c.value}
-              {(i < data.personalInfo.contacts.length - 1 ||
-                data.personalInfo.socials.length > 0) && (
-                <span className="ml-3 text-slate-300">|</span>
-              )}
-            </span>
-          ))}
-          {data.personalInfo.socials.map((s, i) => (
-            <span key={s.id} className="flex items-center">
-              <span className="font-bold uppercase">{s.platform}:</span>&nbsp;
-              <span className="italic">
-                {s.url.replace(/^https?:\/\//, "")}
-              </span>
-              {i < data.personalInfo.socials.length - 1 && (
-                <span className="ml-3 text-slate-300">|</span>
-              )}
-            </span>
-          ))}
-        </div>
-      </header>
+				<div className="flex flex-wrap justify-center gap-x-3 gap-y-1 text-[10px] text-slate-600 max-w-2xl mx-auto">
+					{data.personalInfo.contacts.map((c, i) => (
+						<span key={c.id} className="flex items-center">
+							<span className="font-bold uppercase">{c.label}:</span>&nbsp;
+							{c.value}
+							{(i < data.personalInfo.contacts.length - 1 ||
+								data.personalInfo.socials.length > 0) && (
+								<span className="ml-3 text-slate-300">|</span>
+							)}
+						</span>
+					))}
+					{data.personalInfo.socials.map((s, i) => (
+						<span key={s.id} className="flex items-center">
+							<span className="font-bold uppercase">{s.platform}:</span>&nbsp;
+							<span className="italic">
+								{s.url.replace(/^https?:\/\//, "")}
+							</span>
+							{i < data.personalInfo.socials.length - 1 && (
+								<span className="ml-3 text-slate-300">|</span>
+							)}
+						</span>
+					))}
+				</div>
+			</header>
 
-      <div className="space-y-8">
-        {data.personalInfo.summary && (
-          <section>
-            <h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
-              {t("sections.summary")}
-            </h2>
-            <p className="text-[12px] text-slate-700 leading-relaxed text-justify">
-              {data.personalInfo.summary}
-            </p>
-          </section>
-        )}
+			<div className="space-y-8">
+				{data.personalInfo.summary && (
+					<section>
+						<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
+							{t("sections.summary")}
+						</h2>
+						<p className="text-[12px] text-slate-700 leading-relaxed text-justify">
+							{data.personalInfo.summary}
+						</p>
+					</section>
+				)}
 
-        <section>
-          <h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-4">
-            {t("sections.experience")}
-          </h2>
-          <div className="space-y-6">
-            {data.experiences.map((exp) => (
-              <div key={exp.id}>
-                <div className="flex justify-between items-baseline mb-1">
-                  <h3 className="text-[13px] font-bold">
-                    {exp.company.toUpperCase()} —{" "}
-                    <span className="italic font-serif">{exp.role}</span>
-                  </h3>
-                  <span className="text-[10px] font-bold uppercase tabular-nums">
-                    {exp.startDate} — {exp.endDate}
-                  </span>
-                </div>
-                {exp.description && (
-                  <p className="text-[11px] text-slate-600 mb-2 italic">
-                    {exp.description}
-                  </p>
-                )}
-                <ul className="list-disc ml-5 space-y-1">
-                  {exp.mission.map((m, idx) => (
-                    <li key={idx} className="text-[11px] text-slate-700 pl-1">
-                      {m}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-        </section>
+				{data.experiences.length > 0 && (
+					<section>
+						<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-4">
+							{t("sections.experience")}
+						</h2>
+						<div className="space-y-6">
+							{data.experiences.map((exp) => (
+								<div key={exp.id}>
+									<div className="flex justify-between items-baseline mb-1">
+										<h3 className="text-[13px] font-bold">
+											{exp.company.toUpperCase()} —{" "}
+											<span className="italic font-serif">{exp.role}</span>
+										</h3>
+										<span className="text-[10px] font-bold uppercase tabular-nums">
+											{exp.startDate} — {exp.endDate}
+										</span>
+									</div>
+									{exp.description && (
+										<p className="text-[11px] text-slate-600 mb-2 italic">
+											{exp.description}
+										</p>
+									)}
+									<ul className="list-disc ml-5 space-y-1">
+										{exp.mission.map((m, idx) => (
+											<li key={idx} className="text-[11px] text-slate-700 pl-1">
+												{m}
+											</li>
+										))}
+									</ul>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
 
-        {data.educations.length > 0 && (
-          <section>
-            <h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-4">
-              {t("sections.education")}
-            </h2>
-            <div className="space-y-4">
-              {data.educations.map((edu) => (
-                <div
-                  key={edu.id}
-                  className="flex justify-between items-baseline"
-                >
-                  <div>
-                    <h3 className="text-[12px] font-bold">{edu.degree}</h3>
-                    <p className="text-[11px] italic text-slate-600">
-                      {edu.school}
-                    </p>
-                  </div>
-                  <span className="text-[10px] font-bold tabular-nums">
-                    {edu.year}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </section>
-        )}
+				{data.educations.length > 0 && (
+					<section>
+						<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-4">
+							{t("sections.education")}
+						</h2>
+						<div className="space-y-4">
+							{data.educations.map((edu) => (
+								<div
+									key={edu.id}
+									className="flex justify-between items-baseline">
+									<div>
+										<h3 className="text-[12px] font-bold">{edu.degree}</h3>
+										<p className="text-[11px] italic text-slate-600">
+											{edu.school}
+										</p>
+									</div>
+									<span className="text-[10px] font-bold tabular-nums">
+										{edu.year}
+									</span>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
 
-        <div className="grid grid-cols-2 gap-8">
-          {data.skills.length > 0 && (
-            <section>
-              <h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
-                {t("sections.skills")}
-              </h2>
-              <p className="text-[11px] text-slate-700 leading-relaxed">
-                {data.skills.join(" • ")}
-              </p>
-            </section>
-          )}
+				<div className="grid grid-cols-2 gap-8">
+					{data.skills.length > 0 && (
+						<section>
+							<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
+								{t("sections.skills")}
+							</h2>
+							<p className="text-[11px] text-slate-700 leading-relaxed">
+								{data.skills.join(" • ")}
+							</p>
+						</section>
+					)}
 
-          {data.languages.length > 0 && (
-            <section>
-              <h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
-                {t("sections.languages")}
-              </h2>
-              <div className="space-y-1">
-                {data.languages.map((lang) => (
-                  <p key={lang.id} className="text-[11px] text-slate-700">
-                    <span className="font-bold">{lang.name}</span> :{" "}
-                    <span className="italic">{lang.level}</span>
-                  </p>
-                ))}
-              </div>
-            </section>
-          )}
-        </div>
+					{data.languages.length > 0 && (
+						<section>
+							<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
+								{t("sections.languages")}
+							</h2>
+							<div className="space-y-1">
+								{data.languages.map((lang) => (
+									<p key={lang.id} className="text-[11px] text-slate-700">
+										<span className="font-bold">{lang.name}</span> :{" "}
+										<span className="italic">{lang.level}</span>
+									</p>
+								))}
+							</div>
+						</section>
+					)}
+				</div>
 
-        {data.certifications.length > 0 && (
-          <section>
-            <h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
-              {t("sections.certifications")}
-            </h2>
-            <ul className="grid grid-cols-1 gap-1">
-              {data.certifications.map((cert) => (
-                <li
-                  key={cert.id}
-                  className="text-[11px] text-slate-700 flex justify-between"
-                >
-                  <span>
-                    <span className="font-bold">{cert.name}</span>
-                    {cert.issuer && ` — ${cert.issuer}`}
-                  </span>
-                  <span className="font-bold tabular-nums">{cert.year}</span>
-                </li>
-              ))}
-            </ul>
-          </section>
-        )}
-      </div>
-    </div>
-  );
+				{data.certifications.length > 0 && (
+					<section>
+						<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
+							{t("sections.certifications")}
+						</h2>
+						<ul className="grid grid-cols-1 gap-1">
+							{data.certifications.map((cert) => (
+								<li
+									key={cert.id}
+									className="text-[11px] text-slate-700 flex justify-between">
+									<span>
+										<span className="font-bold">{cert.name}</span>
+										{cert.issuer && ` — ${cert.issuer}`}
+									</span>
+									<span className="font-bold tabular-nums">{cert.year}</span>
+								</li>
+							))}
+						</ul>
+					</section>
+				)}
+			</div>
+		</div>
+	);
 };
diff --git a/src/features/cv-preview/themes/ElegantTheme.tsx b/src/features/cv-preview/themes/ElegantTheme.tsx
index 227b0b1..e90addd 100644
--- a/src/features/cv-preview/themes/ElegantTheme.tsx
+++ b/src/features/cv-preview/themes/ElegantTheme.tsx
@@ -1,193 +1,195 @@
 import { Globe, ExternalLink } from "lucide-react";
 import type { CVData } from "../../../core/domain/cv.types";
 import {
-  CONTACT_ICONS,
-  SOCIAL_ICONS,
-  type ContactType,
-  type SocialType,
+	CONTACT_ICONS,
+	SOCIAL_ICONS,
+	type ContactType,
+	type SocialType,
 } from "../../shared/icon";
 import { useTranslation } from "react-i18next";
 
 export const ElegantTheme = ({ data }: { data: CVData }) => {
-  const { t } = useTranslation("theme", {
-    lng: data.metadata.language || "fr",
-  });
+	const { t } = useTranslation("theme", {
+		lng: data.metadata.language || "fr",
+	});
 
-  return (
-    <div
-      className="p-12 min-h-[297mm] bg-white text-slate-900 font-serif leading-normal"
-      id="cv-to-print"
-    >
-      <header className="text-center mb-8">
-        <h1 className="text-3xl font-bold mb-3">
-          {data.personalInfo.fullName || t("defaultName")}
-        </h1>
+	return (
+		<div
+			className="p-12 min-h-[297mm] bg-white text-slate-900 font-serif leading-normal"
+			id="cv-to-print">
+			<header className="text-center mb-8">
+				<h1 className="text-3xl font-bold mb-3">
+					{data.personalInfo.fullName || t("defaultName")}
+				</h1>
 
-        <div className="flex flex-wrap justify-center items-center gap-x-4 gap-y-1 text-[11px]">
-          {data.personalInfo.contacts.map((c, i) => {
-            const Icon =
-              CONTACT_ICONS[c.label.toLowerCase() as ContactType] || Globe;
-            return (
-              <div key={c.id} className="flex items-center gap-1">
-                <Icon size={10} className="text-slate-600" />
-                <span>{c.value}</span>
-                {(i < data.personalInfo.contacts.length - 1 ||
-                  data.personalInfo.socials.length > 0) && (
-                  <span className="ml-4 text-slate-300">|</span>
-                )}
-              </div>
-            );
-          })}
-          {data.personalInfo.socials.map((s, i) => {
-            const Icon =
-              SOCIAL_ICONS[s.platform.toLowerCase() as SocialType] ||
-              ExternalLink;
-            return (
-              <div key={s.id} className="flex items-center gap-1">
-                <Icon size={10} className="text-slate-600" />
-                <span className="underline decoration-slate-300">
-                  {s.url.replace(/^https?:\/\//, "")}
-                </span>
-                {i < data.personalInfo.socials.length - 1 && (
-                  <span className="ml-4 text-slate-300">|</span>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </header>
+				<div className="flex flex-wrap justify-center items-center gap-x-4 gap-y-1 text-[11px]">
+					{data.personalInfo.contacts.map((c, i) => {
+						const Icon =
+							CONTACT_ICONS[c.label.toLowerCase() as ContactType] || Globe;
+						return (
+							<div key={c.id} className="flex items-center gap-1">
+								<Icon size={10} className="text-slate-600" />
+								<span>{c.value}</span>
+								{(i < data.personalInfo.contacts.length - 1 ||
+									data.personalInfo.socials.length > 0) && (
+									<span className="ml-4 text-slate-300">|</span>
+								)}
+							</div>
+						);
+					})}
+					{data.personalInfo.socials.map((s, i) => {
+						const Icon =
+							SOCIAL_ICONS[s.platform.toLowerCase() as SocialType] ||
+							ExternalLink;
+						return (
+							<div key={s.id} className="flex items-center gap-1">
+								<Icon size={10} className="text-slate-600" />
+								<span className="underline decoration-slate-300">
+									{s.url.replace(/^https?:\/\//, "")}
+								</span>
+								{i < data.personalInfo.socials.length - 1 && (
+									<span className="ml-4 text-slate-300">|</span>
+								)}
+							</div>
+						);
+					})}
+				</div>
+			</header>
 
-      <div className="space-y-8">
-        {data.personalInfo.summary && (
-          <section>
-            <h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-3">
-              {t("sections.summary")}
-            </h2>
-            <p className="text-[11px] text-slate-700 text-justify">
-              {data.personalInfo.summary}
-            </p>
-          </section>
-        )}
+			<div className="space-y-8">
+				{data.personalInfo.summary && (
+					<section>
+						<h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-3">
+							{t("sections.summary")}
+						</h2>
+						<p className="text-[11px] text-slate-700 text-justify">
+							{data.personalInfo.summary}
+						</p>
+					</section>
+				)}
 
-        <section>
-          <h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-4">
-            {t("sections.experience")}
-          </h2>
-          <div className="space-y-6">
-            {data.experiences.map((exp) => (
-              <div key={exp.id} className="grid grid-cols-4 gap-4">
-                <div className="col-span-1 text-[10px] font-bold text-slate-500 pt-1">
-                  {exp.startDate} — {exp.endDate}
-                </div>
-                <div className="col-span-3">
-                  <div className="flex justify-between items-baseline mb-1">
-                    <h3 className="text-[12px] font-bold">{exp.role}</h3>
-                    <span className="text-[10px] italic text-slate-600">
-                      {exp.company}
-                    </span>
-                  </div>
-                  {exp.description && (
-                    <p className="text-[10px] text-slate-700 mb-2 leading-relaxed italic">
-                      {exp.description}
-                    </p>
-                  )}
-                  <ul className="list-disc ml-4 space-y-1">
-                    {exp.mission.map((m, idx) => (
-                      <li key={idx} className="text-[10px] text-slate-600 pl-1">
-                        {m}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
+				{data.experiences.length > 0 && (
+					<section>
+						<h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-4">
+							{t("sections.experience")}
+						</h2>
+						<div className="space-y-6">
+							{data.experiences.map((exp) => (
+								<div key={exp.id} className="grid grid-cols-4 gap-4">
+									<div className="col-span-1 text-[10px] font-bold text-slate-500 pt-1">
+										{exp.startDate} — {exp.endDate}
+									</div>
+									<div className="col-span-3">
+										<div className="flex justify-between items-baseline mb-1">
+											<h3 className="text-[12px] font-bold">{exp.role}</h3>
+											<span className="text-[10px] italic text-slate-600">
+												{exp.company}
+											</span>
+										</div>
+										{exp.description && (
+											<p className="text-[10px] text-slate-700 mb-2 leading-relaxed italic">
+												{exp.description}
+											</p>
+										)}
+										<ul className="list-disc ml-4 space-y-1">
+											{exp.mission.map((m, idx) => (
+												<li
+													key={idx}
+													className="text-[10px] text-slate-600 pl-1">
+													{m}
+												</li>
+											))}
+										</ul>
+									</div>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
 
-        {data.educations.length > 0 && (
-          <section>
-            <h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-4">
-              {t("sections.education")}
-            </h2>
-            <div className="space-y-4">
-              {data.educations.map((edu) => (
-                <div key={edu.id} className="grid grid-cols-4 gap-4">
-                  <div className="col-span-1 text-[10px] font-bold text-slate-500 pt-1">
-                    {edu.year}
-                  </div>
-                  <div className="col-span-3">
-                    <div className="flex justify-between items-baseline">
-                      <h3 className="text-[12px] font-bold">{edu.degree}</h3>
-                      <span className="text-[10px] italic text-slate-600">
-                        {edu.school}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </section>
-        )}
+				{data.educations.length > 0 && (
+					<section>
+						<h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-4">
+							{t("sections.education")}
+						</h2>
+						<div className="space-y-4">
+							{data.educations.map((edu) => (
+								<div key={edu.id} className="grid grid-cols-4 gap-4">
+									<div className="col-span-1 text-[10px] font-bold text-slate-500 pt-1">
+										{edu.year}
+									</div>
+									<div className="col-span-3">
+										<div className="flex justify-between items-baseline">
+											<h3 className="text-[12px] font-bold">{edu.degree}</h3>
+											<span className="text-[10px] italic text-slate-600">
+												{edu.school}
+											</span>
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
 
-        <div className="grid grid-cols-2 gap-8">
-          {data.skills.length > 0 && (
-            <section>
-              <h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-3">
-                {t("sections.skills")}
-              </h2>
-              <div className="text-[10px] text-slate-700 leading-relaxed">
-                {data.skills.join(" • ")}
-              </div>
-            </section>
-          )}
+				<div className="grid grid-cols-2 gap-8">
+					{data.skills.length > 0 && (
+						<section>
+							<h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-3">
+								{t("sections.skills")}
+							</h2>
+							<div className="text-[10px] text-slate-700 leading-relaxed">
+								{data.skills.join(" • ")}
+							</div>
+						</section>
+					)}
 
-          {data.languages.length > 0 && (
-            <section>
-              <h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-3">
-                {t("sections.languages")}
-              </h2>
-              <div className="space-y-1">
-                {data.languages.map((lang) => (
-                  <p key={lang.id} className="text-[10px] text-slate-700">
-                    <span className="font-bold">{lang.name}</span>: {lang.level}
-                  </p>
-                ))}
-              </div>
-            </section>
-          )}
-        </div>
+					{data.languages.length > 0 && (
+						<section>
+							<h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-3">
+								{t("sections.languages")}
+							</h2>
+							<div className="space-y-1">
+								{data.languages.map((lang) => (
+									<p key={lang.id} className="text-[10px] text-slate-700">
+										<span className="font-bold">{lang.name}</span>: {lang.level}
+									</p>
+								))}
+							</div>
+						</section>
+					)}
+				</div>
 
-        {data.certifications && data.certifications.length > 0 && (
-          <section>
-            <h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-3">
-              {t("sections.certifications")}
-            </h2>
-            <ul className="grid grid-cols-1 gap-1">
-              {data.certifications.map((cert) => (
-                <li
-                  key={cert.id}
-                  className="text-[10px] text-slate-700 flex justify-between"
-                >
-                  <span>
-                    <span className="font-bold">{cert.name}</span>
-                    {cert.issuer && ` — ${cert.issuer}`}
-                  </span>
-                  <span className="font-bold text-slate-400 tabular-nums">
-                    {cert.year}
-                  </span>
-                </li>
-              ))}
-            </ul>
-          </section>
-        )}
-      </div>
+				{data.certifications && data.certifications.length > 0 && (
+					<section>
+						<h2 className="text-sm font-bold uppercase tracking-widest border-b border-slate-900 mb-3">
+							{t("sections.certifications")}
+						</h2>
+						<ul className="grid grid-cols-1 gap-1">
+							{data.certifications.map((cert) => (
+								<li
+									key={cert.id}
+									className="text-[10px] text-slate-700 flex justify-between">
+									<span>
+										<span className="font-bold">{cert.name}</span>
+										{cert.issuer && ` — ${cert.issuer}`}
+									</span>
+									<span className="font-bold text-slate-400 tabular-nums">
+										{cert.year}
+									</span>
+								</li>
+							))}
+						</ul>
+					</section>
+				)}
+			</div>
 
-      <footer className="mt-12 pt-4 border-t border-slate-100 text-center text-[8px] text-slate-400 uppercase tracking-widest">
-        {new Date().toLocaleDateString(data.metadata.language || "fr-FR", {
-          month: "long",
-          year: "numeric",
-        })}
-      </footer>
-    </div>
-  );
+			<footer className="mt-12 pt-4 border-t border-slate-100 text-center text-[8px] text-slate-400 uppercase tracking-widest">
+				{new Date().toLocaleDateString(data.metadata.language || "fr-FR", {
+					month: "long",
+					year: "numeric",
+				})}
+			</footer>
+		</div>
+	);
 };
diff --git a/src/features/cv-preview/themes/HipsterTheme.tsx b/src/features/cv-preview/themes/HipsterTheme.tsx
index 3fdbecd..416a5aa 100644
--- a/src/features/cv-preview/themes/HipsterTheme.tsx
+++ b/src/features/cv-preview/themes/HipsterTheme.tsx
@@ -1,269 +1,266 @@
 import { Globe, ExternalLink, Circle, Award } from "lucide-react";
 import type { CVData } from "../../../core/domain/cv.types";
 import {
-  CONTACT_ICONS,
-  SOCIAL_ICONS,
-  type ContactType,
-  type SocialType,
+	CONTACT_ICONS,
+	SOCIAL_ICONS,
+	type ContactType,
+	type SocialType,
 } from "../../shared/icon";
 import { useTranslation } from "react-i18next";
 
 export const HipsterTheme = ({ data }: { data: CVData }) => {
-  const { t } = useTranslation("theme", {
-    lng: data.metadata.language || "fr",
-  });
+	const { t } = useTranslation("theme", {
+		lng: data.metadata.language || "fr",
+	});
 
-  return (
-    <div
-      className="flex min-h-[297mm] bg-white text-slate-800 font-sans shadow-lg"
-      id="cv-to-print"
-    >
-      <div className="w-[30%] bg-[#1a1f2b] text-white p-6 flex flex-col gap-6 shrink-0">
-        <div className="text-center mb-2">
-          {data.personalInfo.photoUrl && (
-            <div className="mb-4 relative inline-block">
-              <img
-                src={data.personalInfo.photoUrl}
-                className="w-32 h-32 rounded-full border-4 border-slate-700 mx-auto object-cover"
-                alt={data.personalInfo.fullName}
-              />
-            </div>
-          )}
-          <h2 className="text-cyan-400 text-[10px] font-bold tracking-[0.3em] uppercase mb-1">
-            {t("sections.summary")}
-          </h2>
-          <h1 className="text-xl font-bold uppercase tracking-wider">
-            {data.personalInfo.fullName || t("defaultName")}
-          </h1>
-        </div>
+	return (
+		<div
+			className="flex min-h-[297mm] bg-white text-slate-800 font-sans shadow-lg"
+			id="cv-to-print">
+			<div className="w-[30%] bg-[#1a1f2b] text-white p-6 flex flex-col gap-6 shrink-0">
+				<div className="text-center mb-2">
+					{data.personalInfo.photoUrl && (
+						<div className="mb-4 relative inline-block">
+							<img
+								src={data.personalInfo.photoUrl}
+								className="w-32 h-32 rounded-full border-4 border-slate-700 mx-auto object-cover"
+								alt={data.personalInfo.fullName}
+							/>
+						</div>
+					)}
+					<h2 className="text-cyan-400 text-[10px] font-bold tracking-[0.3em] uppercase mb-1">
+						{t("sections.summary")}
+					</h2>
+					<h1 className="text-xl font-bold uppercase tracking-wider">
+						{data.personalInfo.fullName || t("defaultName")}
+					</h1>
+				</div>
 
-        {data.personalInfo.summary && (
-          <section>
-            <p className="text-[10px] text-slate-300 leading-relaxed text-justify italic">
-              {data.personalInfo.summary}
-            </p>
-          </section>
-        )}
+				{data.personalInfo.summary && (
+					<section>
+						<p className="text-[10px] text-slate-300 leading-relaxed text-justify italic">
+							{data.personalInfo.summary}
+						</p>
+					</section>
+				)}
 
-        <section>
-          <h2 className="text-cyan-400 text-[10px] font-bold tracking-[0.2em] uppercase mb-4 border-b border-slate-700 pb-2">
-            Contact
-          </h2>
-          <div className="space-y-4">
-            {data.personalInfo.contacts.map((c) => {
-              const Icon =
-                CONTACT_ICONS[c.label.toLowerCase() as ContactType] || Globe;
-              return (
-                <div key={c.id} className="flex items-center gap-3">
-                  <div className="p-1.5 bg-slate-800 rounded">
-                    <Icon size={12} className="text-cyan-400" />
-                  </div>
-                  <div className="text-[9px] min-w-0">
-                    <p className="text-slate-500 uppercase font-bold text-[7px] leading-none mb-1">
-                      {c.label}
-                    </p>
-                    <p className="text-slate-200 ">{c.value || "—"}</p>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </section>
+				{data.personalInfo.contacts.length > 0 && (
+					<section>
+						<h2 className="text-cyan-400 text-[10px] font-bold tracking-[0.2em] uppercase mb-4 border-b border-slate-700 pb-2">
+							Contact
+						</h2>
+						<div className="space-y-4">
+							{data.personalInfo.contacts.map((c) => {
+								const Icon =
+									CONTACT_ICONS[c.label.toLowerCase() as ContactType] || Globe;
+								return (
+									<div key={c.id} className="flex items-center gap-3">
+										<div className="p-1.5 bg-slate-800 rounded">
+											<Icon size={12} className="text-cyan-400" />
+										</div>
+										<div className="text-[9px] min-w-0">
+											<p className="text-slate-500 uppercase font-bold text-[7px] leading-none mb-1">
+												{c.label}
+											</p>
+											<p className="text-slate-200 ">{c.value || "—"}</p>
+										</div>
+									</div>
+								);
+							})}
+						</div>
+					</section>
+				)}
 
-        {data.personalInfo.socials.length > 0 && (
-          <section>
-            <h2 className="text-cyan-400 text-[10px] font-bold tracking-[0.2em] uppercase mb-4 border-b border-slate-700 pb-2">
-              {t("sections.socials") || "Social"}
-            </h2>
-            <div className="space-y-4">
-              {data.personalInfo.socials.map((social) => {
-                const Icon =
-                  SOCIAL_ICONS[social.platform.toLowerCase() as SocialType] ||
-                  ExternalLink;
-                const displayUrl = social.url
-                  .replace(/^https?:\/\//, "")
-                  .replace(/^www\./, "")
-                  .replace(/\/$/, "");
-                return (
-                  <div key={social.id} className="flex items-center gap-3">
-                    <div className="p-1.5 bg-slate-800 rounded">
-                      <Icon size={12} className="text-cyan-400" />
-                    </div>
-                    <div className="min-w-0">
-                      <p className="text-slate-500 uppercase font-bold text-[7px] leading-none mb-1">
-                        {social.platform}
-                      </p>
-                      <p className="text-[9px] text-slate-200 ">{displayUrl}</p>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </section>
-        )}
+				{data.personalInfo.socials.length > 0 && (
+					<section>
+						<h2 className="text-cyan-400 text-[10px] font-bold tracking-[0.2em] uppercase mb-4 border-b border-slate-700 pb-2">
+							{t("sections.socials") || "Social"}
+						</h2>
+						<div className="space-y-4">
+							{data.personalInfo.socials.map((social) => {
+								const Icon =
+									SOCIAL_ICONS[social.platform.toLowerCase() as SocialType] ||
+									ExternalLink;
+								const displayUrl = social.url
+									.replace(/^https?:\/\//, "")
+									.replace(/^www\./, "")
+									.replace(/\/$/, "");
+								return (
+									<div key={social.id} className="flex items-center gap-3">
+										<div className="p-1.5 bg-slate-800 rounded">
+											<Icon size={12} className="text-cyan-400" />
+										</div>
+										<div className="min-w-0">
+											<p className="text-slate-500 uppercase font-bold text-[7px] leading-none mb-1">
+												{social.platform}
+											</p>
+											<p className="text-[9px] text-slate-200 ">{displayUrl}</p>
+										</div>
+									</div>
+								);
+							})}
+						</div>
+					</section>
+				)}
 
-        {data.skills.length > 0 && (
-          <section>
-            <h2 className="text-cyan-400 text-[10px] font-bold tracking-[0.2em] uppercase mb-4 border-b border-slate-700 pb-2">
-              {t("sections.skills")}
-            </h2>
-            <div className="flex flex-wrap gap-2">
-              {data.skills.map((s, i) => (
-                <span
-                  key={i}
-                  className="bg-slate-800 text-slate-300 px-2 py-1 rounded text-[8px] border border-slate-700 uppercase tracking-tighter"
-                >
-                  {s}
-                </span>
-              ))}
-            </div>
-          </section>
-        )}
+				{data.skills.length > 0 && (
+					<section>
+						<h2 className="text-cyan-400 text-[10px] font-bold tracking-[0.2em] uppercase mb-4 border-b border-slate-700 pb-2">
+							{t("sections.skills")}
+						</h2>
+						<div className="flex flex-wrap gap-2">
+							{data.skills.map((s, i) => (
+								<span
+									key={i}
+									className="bg-slate-800 text-slate-300 px-2 py-1 rounded text-[8px] border border-slate-700 uppercase tracking-tighter">
+									{s}
+								</span>
+							))}
+						</div>
+					</section>
+				)}
 
-        {data.languages.length > 0 && (
-          <section>
-            <h2 className="text-cyan-400 text-[10px] font-bold tracking-[0.2em] uppercase mb-4 border-b border-slate-700 pb-2">
-              {t("sections.languages")}
-            </h2>
-            <div className="space-y-2">
-              {data.languages.map((lang) => (
-                <div
-                  key={lang.id}
-                  className="flex justify-between items-center"
-                >
-                  <span className="text-[10px] font-bold text-slate-200 uppercase">
-                    {lang.name}
-                  </span>
-                  <span className="text-[9px] text-cyan-400 italic">
-                    {lang.level}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </section>
-        )}
-      </div>
+				{data.languages.length > 0 && (
+					<section>
+						<h2 className="text-cyan-400 text-[10px] font-bold tracking-[0.2em] uppercase mb-4 border-b border-slate-700 pb-2">
+							{t("sections.languages")}
+						</h2>
+						<div className="space-y-2">
+							{data.languages.map((lang) => (
+								<div
+									key={lang.id}
+									className="flex justify-between items-center">
+									<span className="text-[10px] font-bold text-slate-200 uppercase">
+										{lang.name}
+									</span>
+									<span className="text-[9px] text-cyan-400 italic">
+										{lang.level}
+									</span>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
+			</div>
 
-      <div className="w-[70%] p-10 flex flex-col gap-8">
-        <header className="border-b-4 border-slate-100 pb-6">
-          <h1 className="text-3xl font-black text-slate-900 uppercase tracking-tight leading-none">
-            {data.personalInfo.title || t("defaultTitle")}
-          </h1>
-          <div className="mt-2 w-16 h-1 bg-cyan-500"></div>
-        </header>
+			<div className="w-[70%] p-10 flex flex-col gap-8">
+				<header className="border-b-4 border-slate-100 pb-6">
+					<h1 className="text-3xl font-black text-slate-900 uppercase tracking-tight leading-none">
+						{data.personalInfo.title || t("defaultTitle")}
+					</h1>
+					<div className="mt-2 w-16 h-1 bg-cyan-500"></div>
+				</header>
 
-        <section>
-          <h2 className="text-sm font-bold text-slate-900 tracking-[0.2em] uppercase mb-8 flex items-center gap-2">
-            <Circle size={8} className="fill-cyan-500 text-cyan-500" />{" "}
-            {t("sections.experience")}
-          </h2>
-          <div className="space-y-10">
-            {data.experiences.map((exp) => (
-              <div
-                key={exp.id}
-                className="relative pl-6 border-l-2 border-slate-100 group"
-              >
-                <div className="absolute -left-[5px] top-0 w-2 h-2 rounded-full bg-cyan-500 shadow-[0_0_0_4px_rgba(6,182,212,0.1)]" />
+				{data.experiences.length > 0 && (
+					<section>
+						<h2 className="text-sm font-bold text-slate-900 tracking-[0.2em] uppercase mb-8 flex items-center gap-2">
+							<Circle size={8} className="fill-cyan-500 text-cyan-500" />{" "}
+							{t("sections.experience")}
+						</h2>
+						<div className="space-y-10">
+							{data.experiences.map((exp) => (
+								<div
+									key={exp.id}
+									className="relative pl-6 border-l-2 border-slate-100 group">
+									<div className="absolute -left-[5px] top-0 w-2 h-2 rounded-full bg-cyan-500 shadow-[0_0_0_4px_rgba(6,182,212,0.1)]" />
 
-                <div className="flex justify-between items-start mb-2">
-                  <div className="min-w-0 flex-1">
-                    <h3 className="font-black text-slate-900 text-base leading-none uppercase">
-                      {exp.role}
-                    </h3>
-                    <p className="text-cyan-600 font-bold text-[10px] mt-1 uppercase tracking-widest">
-                      {exp.company}
-                    </p>
-                  </div>
-                  <span className="text-[10px] font-black text-slate-400 tabular-nums ml-4">
-                    {exp.startDate} — {exp.endDate}
-                  </span>
-                </div>
+									<div className="flex justify-between items-start mb-2">
+										<div className="min-w-0 flex-1">
+											<h3 className="font-black text-slate-900 text-base leading-none uppercase">
+												{exp.role}
+											</h3>
+											<p className="text-cyan-600 font-bold text-[10px] mt-1 uppercase tracking-widest">
+												{exp.company}
+											</p>
+										</div>
+										<span className="text-[10px] font-black text-slate-400 tabular-nums ml-4">
+											{exp.startDate} — {exp.endDate}
+										</span>
+									</div>
 
-                {exp.description && (
-                  <p className="text-[11px] text-slate-700 leading-relaxed mb-3 text-justify font-medium">
-                    {exp.description}
-                  </p>
-                )}
+									{exp.description && (
+										<p className="text-[11px] text-slate-700 leading-relaxed mb-3 text-justify font-medium">
+											{exp.description}
+										</p>
+									)}
 
-                <ul className="space-y-1.5">
-                  {exp.mission.map((m, i) => (
-                    <li
-                      key={i}
-                      className="text-[11px] text-slate-600 flex gap-2"
-                    >
-                      <span className="text-cyan-500 font-bold">•</span>
-                      {m}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-        </section>
+									<ul className="space-y-1.5">
+										{exp.mission.map((m, i) => (
+											<li
+												key={i}
+												className="text-[11px] text-slate-600 flex gap-2">
+												<span className="text-cyan-500 font-bold">•</span>
+												{m}
+											</li>
+										))}
+									</ul>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
 
-        {data.educations.length > 0 && (
-          <section>
-            <h2 className="text-sm font-bold text-slate-900 tracking-[0.2em] uppercase mb-6 flex items-center gap-2">
-              <Circle size={8} className="fill-cyan-500 text-cyan-500" />{" "}
-              {t("sections.education")}
-            </h2>
-            <div className="grid grid-cols-1 gap-6">
-              {data.educations.map((edu) => (
-                <div
-                  key={edu.id}
-                  className="flex justify-between items-baseline border-b border-slate-50 pb-2"
-                >
-                  <div>
-                    <h3 className="text-[12px] font-black text-slate-900 uppercase">
-                      {edu.degree}
-                    </h3>
-                    <p className="text-[10px] text-cyan-600 font-bold mt-0.5 italic">
-                      {edu.school}
-                    </p>
-                  </div>
-                  <span className="text-[10px] font-black text-slate-400 tabular-nums">
-                    {edu.year}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </section>
-        )}
+				{data.educations.length > 0 && (
+					<section>
+						<h2 className="text-sm font-bold text-slate-900 tracking-[0.2em] uppercase mb-6 flex items-center gap-2">
+							<Circle size={8} className="fill-cyan-500 text-cyan-500" />{" "}
+							{t("sections.education")}
+						</h2>
+						<div className="grid grid-cols-1 gap-6">
+							{data.educations.map((edu) => (
+								<div
+									key={edu.id}
+									className="flex justify-between items-baseline border-b border-slate-50 pb-2">
+									<div>
+										<h3 className="text-[12px] font-black text-slate-900 uppercase">
+											{edu.degree}
+										</h3>
+										<p className="text-[10px] text-cyan-600 font-bold mt-0.5 italic">
+											{edu.school}
+										</p>
+									</div>
+									<span className="text-[10px] font-black text-slate-400 tabular-nums">
+										{edu.year}
+									</span>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
 
-        {data.certifications && data.certifications.length > 0 && (
-          <section>
-            <h2 className="text-sm font-bold text-slate-900 tracking-[0.2em] uppercase mb-6 flex items-center gap-2">
-              <Circle size={8} className="fill-cyan-500 text-cyan-500" />{" "}
-              {t("sections.certifications")}
-            </h2>
-            <div className="grid grid-cols-2 gap-4">
-              {data.certifications.map((cert) => (
-                <div
-                  key={cert.id}
-                  className="flex items-center gap-4 bg-slate-50 p-3 rounded border border-slate-100"
-                >
-                  <div className="p-2 bg-white rounded shadow-sm">
-                    <Award size={16} className="text-cyan-600" />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="flex justify-between items-center gap-2">
-                      <p className="text-[11px] font-black text-slate-800  uppercase">
-                        {cert.name}
-                      </p>
-                      <span className="text-[9px] text-slate-400 font-black tabular-nums">
-                        {cert.year}
-                      </span>
-                    </div>
-                    <p className="text-[9px] text-cyan-600 font-bold uppercase tracking-tighter ">
-                      {cert.issuer}
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </section>
-        )}
-      </div>
-    </div>
-  );
+				{data.certifications && data.certifications.length > 0 && (
+					<section>
+						<h2 className="text-sm font-bold text-slate-900 tracking-[0.2em] uppercase mb-6 flex items-center gap-2">
+							<Circle size={8} className="fill-cyan-500 text-cyan-500" />{" "}
+							{t("sections.certifications")}
+						</h2>
+						<div className="grid grid-cols-2 gap-4">
+							{data.certifications.map((cert) => (
+								<div
+									key={cert.id}
+									className="flex items-center gap-4 bg-slate-50 p-3 rounded border border-slate-100">
+									<div className="p-2 bg-white rounded shadow-sm">
+										<Award size={16} className="text-cyan-600" />
+									</div>
+									<div className="flex-1 min-w-0">
+										<div className="flex justify-between items-center gap-2">
+											<p className="text-[11px] font-black text-slate-800  uppercase">
+												{cert.name}
+											</p>
+											<span className="text-[9px] text-slate-400 font-black tabular-nums">
+												{cert.year}
+											</span>
+										</div>
+										<p className="text-[9px] text-cyan-600 font-bold uppercase tracking-tighter ">
+											{cert.issuer}
+										</p>
+									</div>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
+			</div>
+		</div>
+	);
 };
diff --git a/src/features/cv-preview/themes/ModernTheme.tsx b/src/features/cv-preview/themes/ModernTheme.tsx
index 9000318..65af4cd 100644
--- a/src/features/cv-preview/themes/ModernTheme.tsx
+++ b/src/features/cv-preview/themes/ModernTheme.tsx
@@ -1,276 +1,272 @@
 import { Globe, ExternalLink, Award } from "lucide-react";
 import type { CVData } from "../../../core/domain/cv.types";
 import {
-  CONTACT_ICONS,
-  SOCIAL_ICONS,
-  type ContactType,
-  type SocialType,
+	CONTACT_ICONS,
+	SOCIAL_ICONS,
+	type ContactType,
+	type SocialType,
 } from "../../shared/icon";
 import { useTranslation } from "react-i18next";
 
 export const ModernTheme = ({ data }: { data: CVData }) => {
-  const { t } = useTranslation("theme", {
-    lng: data.metadata.language || "fr",
-  });
+	const { t } = useTranslation("theme", {
+		lng: data.metadata.language || "fr",
+	});
 
-  return (
-    <div
-      className="flex min-h-[297mm] bg-white text-slate-800 font-sans"
-      id="cv-to-print"
-    >
-      <div className="w-[35%] bg-[#1e293b] text-white p-8 flex flex-col gap-8 shadow-inner">
-        <div className="text-center">
-          {data.personalInfo.photoUrl && (
-            <div className="mb-6 relative inline-block">
-              <img
-                src={data.personalInfo.photoUrl}
-                className="w-36 h-36 rounded-full border-4 border-slate-700 mx-auto object-cover shadow-2xl"
-                alt={data.personalInfo.fullName}
-              />
-              <div className="absolute inset-0 rounded-full border border-white/10"></div>
-            </div>
-          )}
-          <h1 className="text-2xl font-bold uppercase tracking-wider text-white">
-            {data.personalInfo.fullName || t("defaultName")}
-          </h1>
-          <p className="text-blue-400 text-sm font-medium mt-2 tracking-wide uppercase">
-            {data.personalInfo.title || t("defaultTitle")}
-          </p>
-        </div>
+	return (
+		<div
+			className="flex min-h-[297mm] bg-white text-slate-800 font-sans"
+			id="cv-to-print">
+			<div className="w-[35%] bg-[#1e293b] text-white p-8 flex flex-col gap-8 shadow-inner">
+				<div className="text-center">
+					{data.personalInfo.photoUrl && (
+						<div className="mb-6 relative inline-block">
+							<img
+								src={data.personalInfo.photoUrl}
+								className="w-36 h-36 rounded-full border-4 border-slate-700 mx-auto object-cover shadow-2xl"
+								alt={data.personalInfo.fullName}
+							/>
+							<div className="absolute inset-0 rounded-full border border-white/10"></div>
+						</div>
+					)}
+					<h1 className="text-2xl font-bold uppercase tracking-wider text-white">
+						{data.personalInfo.fullName || t("defaultName")}
+					</h1>
+					<p className="text-blue-400 text-sm font-medium mt-2 tracking-wide uppercase">
+						{data.personalInfo.title || t("defaultTitle")}
+					</p>
+				</div>
 
-        <section>
-          <h2 className="text-xs font-bold text-blue-400 tracking-[0.2em] uppercase border-b border-slate-700 pb-2 mb-4">
-            Contact
-          </h2>
-          <div className="space-y-4">
-            {data.personalInfo.contacts.map((c) => {
-              const Icon =
-                CONTACT_ICONS[c.label.toLowerCase() as ContactType] || Globe;
-              return (
-                <div key={c.id} className="flex items-center gap-3 group">
-                  <div className="p-2 bg-slate-800 rounded-lg group-hover:bg-blue-600 transition-colors">
-                    <Icon
-                      size={14}
-                      className="text-blue-400 group-hover:text-white"
-                    />
-                  </div>
-                  <div className="text-[10px] break-all">
-                    <p className="text-slate-500 uppercase font-bold text-[8px] leading-none mb-1">
-                      {c.label}
-                    </p>
-                    <p className="text-slate-200">{c.value || "—"}</p>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </section>
+				{data.personalInfo.contacts.length > 0 && (
+					<section>
+						<h2 className="text-xs font-bold text-blue-400 tracking-[0.2em] uppercase border-b border-slate-700 pb-2 mb-4">
+							Contact
+						</h2>
+						<div className="space-y-4">
+							{data.personalInfo.contacts.map((c) => {
+								const Icon =
+									CONTACT_ICONS[c.label.toLowerCase() as ContactType] || Globe;
+								return (
+									<div key={c.id} className="flex items-center gap-3 group">
+										<div className="p-2 bg-slate-800 rounded-lg group-hover:bg-blue-600 transition-colors">
+											<Icon
+												size={14}
+												className="text-blue-400 group-hover:text-white"
+											/>
+										</div>
+										<div className="text-[10px] break-all">
+											<p className="text-slate-500 uppercase font-bold text-[8px] leading-none mb-1">
+												{c.label}
+											</p>
+											<p className="text-slate-200">{c.value || "—"}</p>
+										</div>
+									</div>
+								);
+							})}
+						</div>
+					</section>
+				)}
 
-        {data.personalInfo.socials.length > 0 && (
-          <section>
-            <h2 className="text-xs font-bold text-blue-400 tracking-[0.2em] uppercase border-b border-slate-700 pb-2 mb-4">
-              {t("sections.socials") || "Réseaux Sociaux"}
-            </h2>
-            <div className="space-y-4">
-              {data.personalInfo.socials.map((social) => {
-                const Icon =
-                  SOCIAL_ICONS[social.platform.toLowerCase() as SocialType] ||
-                  ExternalLink;
-                const hrefUrl = social.url.startsWith("http")
-                  ? social.url
-                  : `https://${social.url}`;
-                const displayUrl = social.url
-                  .replace(/^https?:\/\//, "")
-                  .replace(/^www\./, "")
-                  .replace(/\/$/, "");
-                return (
-                  <div
-                    key={social.id}
-                    className="flex items-center gap-3 group"
-                  >
-                    <div className="p-2 bg-slate-800 rounded-lg group-hover:bg-blue-600 transition-colors">
-                      <Icon
-                        size={14}
-                        className="text-blue-400 group-hover:text-white"
-                      />
-                    </div>
-                    <div className="min-w-0">
-                      <p className="text-slate-500 uppercase font-bold text-[8px] leading-none mb-1">
-                        {social.platform}
-                      </p>
-                      <a
-                        href={hrefUrl}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="text-[10px] text-slate-200 truncate block hover:text-blue-400 transition-colors"
-                      >
-                        {displayUrl}
-                      </a>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </section>
-        )}
+				{data.personalInfo.socials.length > 0 && (
+					<section>
+						<h2 className="text-xs font-bold text-blue-400 tracking-[0.2em] uppercase border-b border-slate-700 pb-2 mb-4">
+							{t("sections.socials") || "Réseaux Sociaux"}
+						</h2>
+						<div className="space-y-4">
+							{data.personalInfo.socials.map((social) => {
+								const Icon =
+									SOCIAL_ICONS[social.platform.toLowerCase() as SocialType] ||
+									ExternalLink;
+								const hrefUrl = social.url.startsWith("http")
+									? social.url
+									: `https://${social.url}`;
+								const displayUrl = social.url
+									.replace(/^https?:\/\//, "")
+									.replace(/^www\./, "")
+									.replace(/\/$/, "");
+								return (
+									<div
+										key={social.id}
+										className="flex items-center gap-3 group">
+										<div className="p-2 bg-slate-800 rounded-lg group-hover:bg-blue-600 transition-colors">
+											<Icon
+												size={14}
+												className="text-blue-400 group-hover:text-white"
+											/>
+										</div>
+										<div className="min-w-0">
+											<p className="text-slate-500 uppercase font-bold text-[8px] leading-none mb-1">
+												{social.platform}
+											</p>
+											<a
+												href={hrefUrl}
+												target="_blank"
+												rel="noreferrer"
+												className="text-[10px] text-slate-200 truncate block hover:text-blue-400 transition-colors">
+												{displayUrl}
+											</a>
+										</div>
+									</div>
+								);
+							})}
+						</div>
+					</section>
+				)}
 
-        {data.skills.length > 0 && (
-          <section>
-            <h2 className="text-xs font-bold text-blue-400 tracking-[0.2em] uppercase border-b border-slate-700 pb-2 mb-4">
-              {t("sections.skills")}
-            </h2>
-            <div className="flex flex-wrap gap-2">
-              {data.skills.map((s, i) => (
-                <span
-                  key={i}
-                  className="bg-slate-800 text-slate-300 px-2 py-1 rounded text-[9px] border border-slate-700"
-                >
-                  {s}
-                </span>
-              ))}
-            </div>
-          </section>
-        )}
+				{data.skills.length > 0 && (
+					<section>
+						<h2 className="text-xs font-bold text-blue-400 tracking-[0.2em] uppercase border-b border-slate-700 pb-2 mb-4">
+							{t("sections.skills")}
+						</h2>
+						<div className="flex flex-wrap gap-2">
+							{data.skills.map((s, i) => (
+								<span
+									key={i}
+									className="bg-slate-800 text-slate-300 px-2 py-1 rounded text-[9px] border border-slate-700">
+									{s}
+								</span>
+							))}
+						</div>
+					</section>
+				)}
 
-        {data.languages && data.languages.length > 0 && (
-          <section>
-            <h2 className="text-xs font-bold text-blue-400 tracking-[0.2em] uppercase border-b border-slate-700 pb-2 mb-4">
-              {t("sections.languages")}
-            </h2>
-            <div className="space-y-3">
-              {data.languages.map((lang) => (
-                <div
-                  key={lang.id}
-                  className="flex items-center justify-between"
-                >
-                  <span className="text-[10px] font-bold text-slate-200">
-                    {lang.name}
-                  </span>
-                  <span className="text-[9px] text-blue-400 italic font-medium">
-                    {lang.level}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </section>
-        )}
-      </div>
+				{data.languages && data.languages.length > 0 && (
+					<section>
+						<h2 className="text-xs font-bold text-blue-400 tracking-[0.2em] uppercase border-b border-slate-700 pb-2 mb-4">
+							{t("sections.languages")}
+						</h2>
+						<div className="space-y-3">
+							{data.languages.map((lang) => (
+								<div
+									key={lang.id}
+									className="flex items-center justify-between">
+									<span className="text-[10px] font-bold text-slate-200">
+										{lang.name}
+									</span>
+									<span className="text-[9px] text-blue-400 italic font-medium">
+										{lang.level}
+									</span>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
+			</div>
 
-      <div className="w-[65%] p-12 flex flex-col gap-10">
-        {data.personalInfo.summary && (
-          <section>
-            <h2 className="text-sm font-bold text-slate-800 tracking-[0.2em] uppercase mb-4 flex items-center gap-3">
-              <span className="w-10 h-[2px] bg-blue-600"></span>{" "}
-              {t("sections.summary")}
-            </h2>
-            <p className="text-sm text-slate-600 leading-relaxed italic border-l-4 border-slate-100 pl-4 py-2">
-              "{data.personalInfo.summary}"
-            </p>
-          </section>
-        )}
+			<div className="w-[65%] p-12 flex flex-col gap-10">
+				{data.personalInfo.summary && (
+					<section>
+						<h2 className="text-sm font-bold text-slate-800 tracking-[0.2em] uppercase mb-4 flex items-center gap-3">
+							<span className="w-10 h-[2px] bg-blue-600"></span>{" "}
+							{t("sections.summary")}
+						</h2>
+						<p className="text-sm text-slate-600 leading-relaxed italic border-l-4 border-slate-100 pl-4 py-2">
+							"{data.personalInfo.summary}"
+						</p>
+					</section>
+				)}
 
-        <section>
-          <h2 className="text-sm font-bold text-slate-800 tracking-[0.2em] uppercase mb-8 flex items-center gap-3">
-            <span className="w-10 h-[2px] bg-blue-600"></span>{" "}
-            {t("sections.experience")}
-          </h2>
-          <div className="space-y-8">
-            {data.experiences.map((exp) => (
-              <div
-                key={exp.id}
-                className="relative pl-6 border-l-2 border-slate-100 group"
-              >
-                <div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-white border-2 border-slate-200 group-hover:border-blue-600 transition-colors shadow-sm" />
-                <div className="flex justify-between items-start mb-2">
-                  <div>
-                    <h3 className="font-bold text-slate-900 text-base leading-none">
-                      {exp.role}
-                    </h3>
-                    <p className="text-blue-600 font-semibold text-xs mt-2 uppercase tracking-wide">
-                      {exp.company}
-                    </p>
-                  </div>
-                  <span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-md border border-blue-100 shrink-0">
-                    {exp.startDate} — {exp.endDate}
-                  </span>
-                </div>
-                <ul className="list-disc ml-4 text-[12px] text-slate-600 space-y-2">
-                  {exp.mission.map((m, i) => (
-                    <li key={i} className="pl-1">
-                      {m}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-        </section>
+				{data.experiences.length > 0 && (
+					<section>
+						<h2 className="text-sm font-bold text-slate-800 tracking-[0.2em] uppercase mb-8 flex items-center gap-3">
+							<span className="w-10 h-[2px] bg-blue-600"></span>{" "}
+							{t("sections.experience")}
+						</h2>
+						<div className="space-y-8">
+							{data.experiences.map((exp) => (
+								<div
+									key={exp.id}
+									className="relative pl-6 border-l-2 border-slate-100 group">
+									<div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-white border-2 border-slate-200 group-hover:border-blue-600 transition-colors shadow-sm" />
+									<div className="flex justify-between items-start mb-2">
+										<div>
+											<h3 className="font-bold text-slate-900 text-base leading-none">
+												{exp.role}
+											</h3>
+											<p className="text-blue-600 font-semibold text-xs mt-2 uppercase tracking-wide">
+												{exp.company}
+											</p>
+										</div>
+										<span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-md border border-blue-100 shrink-0">
+											{exp.startDate} — {exp.endDate}
+										</span>
+									</div>
+									<ul className="list-disc ml-4 text-[12px] text-slate-600 space-y-2">
+										{exp.mission.map((m, i) => (
+											<li key={i} className="pl-1">
+												{m}
+											</li>
+										))}
+									</ul>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
 
-        {data.educations.length > 0 && (
-          <section>
-            <h2 className="text-sm font-bold text-slate-800 tracking-[0.2em] uppercase mb-6 flex items-center gap-3">
-              <span className="w-10 h-[2px] bg-blue-600"></span>{" "}
-              {t("sections.education")}
-            </h2>
-            <div className="space-y-6">
-              {data.educations.map((edu) => (
-                <div
-                  key={edu.id}
-                  className="flex justify-between items-baseline gap-4"
-                >
-                  <div className="min-w-0">
-                    <p className="text-sm font-bold text-slate-800 truncate">
-                      {edu.degree}
-                    </p>
-                    <p className="text-xs text-blue-600 font-medium mt-1 uppercase tracking-tight">
-                      {edu.school}
-                    </p>
-                  </div>
-                  <p className="text-xs text-slate-400 font-bold tabular-nums shrink-0">
-                    {edu.year}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </section>
-        )}
+				{data.educations.length > 0 && (
+					<section>
+						<h2 className="text-sm font-bold text-slate-800 tracking-[0.2em] uppercase mb-6 flex items-center gap-3">
+							<span className="w-10 h-[2px] bg-blue-600"></span>{" "}
+							{t("sections.education")}
+						</h2>
+						<div className="space-y-6">
+							{data.educations.map((edu) => (
+								<div
+									key={edu.id}
+									className="flex justify-between items-baseline gap-4">
+									<div className="min-w-0">
+										<p className="text-sm font-bold text-slate-800 truncate">
+											{edu.degree}
+										</p>
+										<p className="text-xs text-blue-600 font-medium mt-1 uppercase tracking-tight">
+											{edu.school}
+										</p>
+									</div>
+									<p className="text-xs text-slate-400 font-bold tabular-nums shrink-0">
+										{edu.year}
+									</p>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
 
-        {data.certifications && data.certifications.length > 0 && (
-          <section>
-            <h2 className="text-sm font-bold text-slate-800 tracking-[0.2em] uppercase mb-6 flex items-center gap-3">
-              <span className="w-10 h-[2px] bg-blue-600"></span>{" "}
-              {t("sections.certifications")}
-            </h2>
-            <div className="grid grid-cols-1 gap-4">
-              {data.certifications.map((cert) => (
-                <div
-                  key={cert.id}
-                  className="flex items-center gap-4 bg-slate-50 p-3 rounded-lg border border-slate-100"
-                >
-                  <div className="p-2 bg-white rounded-md shadow-sm">
-                    <Award size={16} className="text-blue-600" />
-                  </div>
-                  <div className="flex-1">
-                    <div className="flex justify-between items-center">
-                      <p className="text-[12px] font-bold text-slate-800">
-                        {cert.name}
-                      </p>
-                      <span className="text-[10px] text-slate-400 font-bold">
-                        {cert.year}
-                      </span>
-                    </div>
-                    {cert.issuer && (
-                      <p className="text-[10px] text-blue-600 font-medium uppercase tracking-wider">
-                        {cert.issuer}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </section>
-        )}
-      </div>
-    </div>
-  );
+				{data.certifications && data.certifications.length > 0 && (
+					<section>
+						<h2 className="text-sm font-bold text-slate-800 tracking-[0.2em] uppercase mb-6 flex items-center gap-3">
+							<span className="w-10 h-[2px] bg-blue-600"></span>{" "}
+							{t("sections.certifications")}
+						</h2>
+						<div className="grid grid-cols-1 gap-4">
+							{data.certifications.map((cert) => (
+								<div
+									key={cert.id}
+									className="flex items-center gap-4 bg-slate-50 p-3 rounded-lg border border-slate-100">
+									<div className="p-2 bg-white rounded-md shadow-sm">
+										<Award size={16} className="text-blue-600" />
+									</div>
+									<div className="flex-1">
+										<div className="flex justify-between items-center">
+											<p className="text-[12px] font-bold text-slate-800">
+												{cert.name}
+											</p>
+											<span className="text-[10px] text-slate-400 font-bold">
+												{cert.year}
+											</span>
+										</div>
+										{cert.issuer && (
+											<p className="text-[10px] text-blue-600 font-medium uppercase tracking-wider">
+												{cert.issuer}
+											</p>
+										)}
+									</div>
+								</div>
+							))}
+						</div>
+					</section>
+				)}
+			</div>
+		</div>
+	);
 };
diff --git a/src/features/cv-preview/themes/NeoBentoTheme.tsx b/src/features/cv-preview/themes/NeoBentoTheme.tsx
index 90115bf..17a191e 100644
--- a/src/features/cv-preview/themes/NeoBentoTheme.tsx
+++ b/src/features/cv-preview/themes/NeoBentoTheme.tsx
@@ -14,17 +14,19 @@ export const NeoBentoTheme = ({ data }: { data: CVData }) => {
   });
 
   return (
-    <div
+    <main
       className="w-[210mm] min-h-[297mm] bg-[#f8fafc] text-slate-900 font-sans p-4 mx-auto flex flex-col gap-3"
       id="cv-to-print"
     >
-      <div className="bg-white rounded-2xl p-4 border border-slate-100 flex items-center gap-5 shadow-sm h-fit">
+      <header className="bg-white rounded-2xl p-4 border border-slate-100 flex items-center gap-5 shadow-sm h-fit">
         {data.personalInfo.photoUrl && (
-          <img
-            src={data.personalInfo.photoUrl}
-            className="w-24 h-24 rounded-xl object-cover border border-slate-100"
-            alt={data.personalInfo.fullName}
-          />
+          <figure className="shrink-0">
+            <img
+              src={data.personalInfo.photoUrl}
+              className="w-24 h-24 rounded-xl object-cover border border-slate-100"
+              alt={`Photo de profil de ${data.personalInfo.fullName}`}
+            />
+          </figure>
         )}
         <div className="flex-1">
           <h1 className="text-3xl font-black text-slate-900 leading-none uppercase">
@@ -33,169 +35,192 @@ export const NeoBentoTheme = ({ data }: { data: CVData }) => {
           <p className="text-xl font-bold text-indigo-600 mt-1 uppercase">
             {data.personalInfo.title || t("defaultTitle")}
           </p>
-          <div className="flex flex-wrap gap-x-4 mt-2">
-            {data.personalInfo.contacts.map((c) => {
-              const Icon =
-                CONTACT_ICONS[c.label.toLowerCase() as ContactType] || Globe;
-
-              return (
-                <span
-                  key={c.id}
-                  className="flex items-center gap-1 text-[12px] font-bold text-slate-500 uppercase"
-                >
-                  <Icon size={14} className="text-indigo-600" /> {c.value}
-                </span>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-12 gap-3 items-start">
-        <div className="col-span-4 flex flex-col gap-3">
-          <div className="bg-indigo-600 rounded-2xl p-4 text-white h-fit shadow-sm">
-            <h2 className="text-[14px] font-black uppercase mb-1 tracking-wider">
-              {t("sections.summary")}
-            </h2>
-            <p className="text-[12px] leading-snug">
-              {data.personalInfo.summary}
-            </p>
-          </div>
-
-          <div className="bg-white rounded-2xl p-4 border border-slate-100 h-fit shadow-sm">
-            <h2 className="text-[14px] font-black uppercase mb-2 text-slate-400 tracking-wider">
-              {t("sections.skills")}
-            </h2>
-            <div className="flex flex-wrap gap-1">
-              {data.skills.map((s, i) => (
-                <span
-                  key={i}
-                  className="px-2 py-0.5 bg-slate-50 text-slate-700 rounded text-[12px] font-bold border border-slate-100 uppercase"
-                >
-                  {s}
-                </span>
-              ))}
-            </div>
-          </div>
-
-          <div className="bg-white rounded-2xl p-4 border border-slate-100 h-fit shadow-sm">
-            <h2 className="text-[14px] font-black uppercase mb-3 text-slate-400 tracking-wider">
-              {t("sections.socials") || "RESEAUX & LIENS"}
-            </h2>
-            <div className="space-y-2">
-              {data.personalInfo.socials.map((social) => {
-                const Icon =
-                  SOCIAL_ICONS[social.platform.toLowerCase() as SocialType] ||
-                  ExternalLink;
+          {data.personalInfo.contacts?.length > 0 && (
+            <address className="not-italic flex flex-wrap gap-x-4 mt-2">
+              {data.personalInfo.contacts.map((c) => {
+                const Icon = CONTACT_ICONS[c.label.toLowerCase() as ContactType] || Globe;
                 return (
-                  <div
-                    key={social.id}
-                    className="flex items-center gap-2 text-[12px] font-bold text-slate-700"
+                  <span
+                    key={c.id}
+                    className="flex items-center gap-1 text-[12px] font-bold text-slate-500 uppercase"
                   >
-                    <Icon size={14} className="text-indigo-600 shrink-0" />
-                    <span className="truncate">
-                      {social.url.replace(/^https?:\/\/(www\.)?/, "")}
-                    </span>
-                  </div>
+                    <Icon size={14} className="text-indigo-600" aria-hidden="true" /> {c.value}
+                  </span>
                 );
               })}
-            </div>
-          </div>
-
-          <div className="bg-slate-900 rounded-2xl p-4 text-white h-fit shadow-sm">
-            <h2 className="text-[14px] font-black uppercase mb-2 text-slate-500 tracking-wider">
-              {t("sections.languages")}
-            </h2>
-            <div className="space-y-1">
-              {data.languages?.map((lang) => (
-                <div
-                  key={lang.id}
-                  className="flex justify-between text-[12px] font-bold uppercase"
-                >
-                  <span>{lang.name}</span>
-                  <span className="text-indigo-400">{lang.level}</span>
-                </div>
-              ))}
-            </div>
-          </div>
+            </address>
+          )}
         </div>
+      </header>
 
-        <div className="col-span-8 flex flex-col gap-3">
-          <div className="bg-white rounded-2xl p-4 border border-slate-100 h-fit shadow-sm">
-            <h2 className="text-[16px] font-black uppercase mb-3 text-slate-900 border-b pb-1">
-              {t("sections.experience")}
-            </h2>
-            <div className="space-y-4">
-              {data.experiences.map((exp) => (
-                <div key={exp.id} className="border-l-2 border-indigo-50 pl-3">
-                  <div className="flex justify-between items-start">
-                    <h3 className="text-[14px] font-black uppercase text-slate-900 leading-tight">
-                      {exp.role}
-                    </h3>
-                    <span className="text-[12px] font-bold text-slate-400 shrink-0">
-                      {exp.startDate} — {exp.endDate}
-                    </span>
-                  </div>
-                  <p className="text-indigo-600 font-black text-[12px] uppercase mb-1">
-                    {exp.company}
-                  </p>
-                  <ul className="space-y-0.5">
-                    {exp.mission.map((m, i) => (
-                      <li
-                        key={i}
-                        className="text-[12px] text-slate-600 leading-tight"
+      <div className="grid grid-cols-12 gap-3 items-start flex-1">
+        <aside className="col-span-4 flex flex-col gap-3">
+          {data.personalInfo.summary && (
+            <section className="bg-indigo-600 rounded-2xl p-4 text-white h-fit shadow-sm">
+              <h2 className="text-[14px] font-black uppercase mb-1 tracking-wider">
+                {t("sections.summary")}
+              </h2>
+              <p className="text-[12px] leading-snug opacity-95">
+                {data.personalInfo.summary}
+              </p>
+            </section>
+          )}
+
+          {data.skills?.length > 0 && (
+            <section className="bg-white rounded-2xl p-4 border border-slate-100 h-fit shadow-sm">
+              <h2 className="text-[14px] font-black uppercase mb-2 text-slate-400 tracking-wider">
+                {t("sections.skills")}
+              </h2>
+              <ul className="flex flex-wrap gap-1 p-0 list-none">
+                {data.skills.map((s, i) => (
+                  <li
+                    key={i}
+                    className="px-2 py-0.5 bg-slate-50 text-slate-700 rounded text-[12px] font-bold border border-slate-100 uppercase"
+                  >
+                    {s}
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+
+          {data.personalInfo.socials?.length > 0 && (
+            <section className="bg-white rounded-2xl p-4 border border-slate-100 h-fit shadow-sm">
+              <h2 className="text-[14px] font-black uppercase mb-3 text-slate-400 tracking-wider">
+                {t("sections.socials") || "Réseaux & Liens"}
+              </h2>
+              <ul className="space-y-2 list-none p-0">
+                {data.personalInfo.socials.map((social) => {
+                  const Icon = SOCIAL_ICONS[social.platform.toLowerCase() as SocialType] || ExternalLink;
+                  return (
+                    <li key={social.id}>
+                      <a
+                        href={social.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-[12px] font-bold text-slate-700 hover:text-indigo-600 transition-colors"
                       >
-                        • {m}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="bg-white rounded-2xl p-4 border border-slate-100 h-fit shadow-sm">
-            <h2 className="text-[14px] font-black uppercase mb-2 text-slate-400 tracking-wider">
-              {t("sections.education")}
-            </h2>
-            {data.educations.map((edu) => (
-              <div key={edu.id} className="mb-2 last:mb-0">
-                <div className="flex justify-between items-start gap-2">
-                  <p className="text-[12px] font-black uppercase leading-tight">
-                    {edu.degree}
-                  </p>
-                  <span className="text-[11px] font-bold text-slate-400 shrink-0">
-                    {edu.year}
-                  </span>
-                </div>
-                <p className="text-[11px] text-indigo-600 font-bold uppercase">
-                  {edu.school}
-                </p>
+                        <Icon size={14} className="text-indigo-600 shrink-0" aria-hidden="true" />
+                        <span className="truncate">
+                          {social.url.replace(/^https?:\/\/(www\.)?/, "")}
+                        </span>
+                      </a>
+                    </li>
+                  );
+                })}
+              </ul>
+            </section>
+          )}
+
+          {data.languages?.length > 0 && (
+            <section className="bg-slate-900 rounded-2xl p-4 text-white h-fit shadow-sm">
+              <h2 className="text-[14px] font-black uppercase mb-2 text-slate-500 tracking-wider">
+                {t("sections.languages")}
+              </h2>
+              <dl className="space-y-1">
+                {data.languages.map((lang) => (
+                  <div key={lang.id} className="flex justify-between text-[12px] font-bold uppercase">
+                    <dt>{lang.name}</dt>
+                    <dd className="text-indigo-400">{lang.level}</dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+          )}
+        </aside>
+
+        <div className="col-span-8 flex flex-col gap-3">
+          {data.experiences?.length > 0 && (
+            <section className="bg-white rounded-2xl p-4 border border-slate-100 h-fit shadow-sm">
+              <h2 className="text-[16px] font-black uppercase mb-3 text-slate-900 border-b pb-1">
+                {t("sections.experience")}
+              </h2>
+              <div className="space-y-4">
+                {data.experiences.map((exp) => (
+                  <article key={exp.id} className="border-l-2 border-indigo-50 pl-3">
+                    <header className="flex justify-between items-start mb-1 bg-transparent p-0 border-none shadow-none">
+                      <div>
+                        <h3 className="text-[14px] font-black uppercase text-slate-900 leading-tight">
+                          {exp.role}
+                        </h3>
+                        <p className="text-indigo-600 font-black text-[12px] uppercase">
+                          {exp.company}
+                        </p>
+                      </div>
+                      <time className="text-[12px] font-bold text-slate-400 shrink-0 italic">
+                        {exp.startDate} — {exp.endDate}
+                      </time>
+                    </header>
+                    {exp.mission?.length > 0 && (
+                      <ul className="space-y-0.5 list-none p-0">
+                        {exp.mission.map((m, i) => (
+                          <li key={i} className="text-[12px] text-slate-600 leading-tight">
+                            • {m}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </article>
+                ))}
               </div>
-            ))}
-          </div>
+            </section>
+          )}
 
-          <div className="bg-white rounded-2xl p-4 border border-slate-100 h-fit shadow-sm">
-            <h2 className="text-[14px] font-black uppercase mb-2 text-slate-400 tracking-wider">
-              {t("sections.certifications")}
-            </h2>
-            {data.certifications?.map((cert) => (
-              <div key={cert.id} className="mb-2 last:mb-0">
-                <div className="flex justify-between items-start gap-2">
-                  <p className="text-[12px] font-black uppercase text-slate-800 leading-tight">
-                    {cert.name}
-                  </p>
-                  <span className="text-[10px] font-bold text-slate-400 shrink-0">
-                    {cert.year}
-                  </span>
-                </div>
-                <p className="text-indigo-600 font-bold uppercase text-[10px]">
-                  {cert.issuer}
-                </p>
+          {data.educations?.length > 0 && (
+            <section className="bg-white rounded-2xl p-4 border border-slate-100 h-fit shadow-sm">
+              <h2 className="text-[14px] font-black uppercase mb-2 text-slate-400 tracking-wider">
+                {t("sections.education")}
+              </h2>
+              <div className="space-y-3">
+                {data.educations.map((edu) => (
+                  <article key={edu.id} className="flex justify-between items-start gap-2">
+                    <div>
+                      <h3 className="text-[12px] font-black uppercase leading-tight text-slate-800">
+                        {edu.degree}
+                      </h3>
+                      <p className="text-[11px] text-indigo-600 font-bold uppercase">
+                        {edu.school}
+                      </p>
+                    </div>
+                    <time className="text-[11px] font-bold text-slate-400 shrink-0 italic">
+                      {edu.year}
+                    </time>
+                  </article>
+                ))}
               </div>
-            ))}
-          </div>
+            </section>
+          )}
+
+          {data.certifications?.length > 0 && (
+            <section className="bg-white rounded-2xl p-4 border border-slate-100 h-fit shadow-sm">
+              <h2 className="text-[14px] font-black uppercase mb-2 text-slate-400 tracking-wider">
+                {t("sections.certifications")}
+              </h2>
+              <div className="space-y-2">
+                {data.certifications.map((cert) => (
+                  <article key={cert.id} className="flex justify-between items-start gap-2">
+                    <div>
+                      <h3 className="text-[12px] font-black uppercase text-slate-800 leading-tight">
+                        {cert.name}
+                      </h3>
+                      <p className="text-indigo-600 font-bold uppercase text-[10px]">
+                        {cert.issuer}
+                      </p>
+                    </div>
+                    <time className="text-[10px] font-bold text-slate-400 shrink-0">
+                      {cert.year}
+                    </time>
+                  </article>
+                ))}
+              </div>
+            </section>
+          )}
         </div>
       </div>
-    </div>
+
+      <footer className="text-[10px] text-center text-slate-400 uppercase font-bold mt-2">
+        {t("lastModified")} {new Date(data.metadata.lastModified).toLocaleDateString()}
+      </footer>
+    </main>
   );
-};
+};
\ No newline at end of file
diff --git a/src/features/cv-preview/themes/StandardTheme.tsx b/src/features/cv-preview/themes/StandardTheme.tsx
index be1036c..3b1ff6c 100644
--- a/src/features/cv-preview/themes/StandardTheme.tsx
+++ b/src/features/cv-preview/themes/StandardTheme.tsx
@@ -79,7 +79,7 @@ export const StandardTheme = ({ data }: { data: CVData }) => {
 
       <div className="grid grid-cols-3 gap-10">
         <div className="col-span-2 space-y-8">
-          <section>
+          {data.experiences?.length > 0 && <section>
             <h2 className="text-sm font-black uppercase text-slate-900 mb-6 border-l-4 border-blue-600 pl-3">
               {t("sections.experience")}
             </h2>
@@ -120,7 +120,7 @@ export const StandardTheme = ({ data }: { data: CVData }) => {
                 </div>
               ))}
             </div>
-          </section>
+          </section>}
 
           {data.educations.length > 0 && (
             <section>