diff --git a/app/components/BlogCard.tsx b/app/components/BlogCard.tsx
index e33deb7..5f116ce 100644
--- a/app/components/BlogCard.tsx
+++ b/app/components/BlogCard.tsx
@@ -18,7 +18,7 @@ export default function BlogCard({ article, compact }: BlogCardProps) {
       )}
     >
       <div className="min-w-0 flex-1">
-        <h3 className="font-serif text-lg font-bold transition-transform group-hover:translate-x-1">
+        <h3 className="font-serif text-base font-bold transition-transform group-hover:translate-x-1 md:text-lg">
           {title}
         </h3>
         <p className="pt-1 text-sm text-zinc-400">
diff --git a/app/components/BlogPreview.tsx b/app/components/BlogPreview.tsx
index 168bc5f..21cffa5 100644
--- a/app/components/BlogPreview.tsx
+++ b/app/components/BlogPreview.tsx
@@ -16,7 +16,7 @@ export default async function BlogPreview() {
         <Image
           src={dancingStar}
           alt="Little star dancing with light rays"
-          className="absolute -top-12 -right-32 animate-grow-and-shrink"
+          className="absolute -top-12 -right-32 animate-grow-and-shrink max-md:hidden"
         />
         <SectionTitle className="from-brand-orange to-brand-gold p-6">
           Nos derniers articles
diff --git a/app/components/Cover.tsx b/app/components/Cover.tsx
index 4d1606f..c1b1ea8 100644
--- a/app/components/Cover.tsx
+++ b/app/components/Cover.tsx
@@ -38,7 +38,7 @@ export default function Cover() {
           </div>
         </div>
         <div className="flex flex-[4_4_0%] justify-center">
-          <div className="w-5/6 sm:max-md:h-72 max-sm:h-64 md:pb-32">
+          <div className="h-64 w-5/6 sm:h-72 md:h-auto md:pb-32">
             <Animation src="animations/laughing-smile.riv" />
           </div>
         </div>
diff --git a/app/components/CoverBackground.tsx b/app/components/CoverBackground.tsx
index ce57728..a6fe217 100644
--- a/app/components/CoverBackground.tsx
+++ b/app/components/CoverBackground.tsx
@@ -18,7 +18,7 @@ export default function CoverBackground({ children }: CoverBackgroundProps) {
       }}
     >
       <div
-        className="absolute inset-y-0 right-0 -left-32 -z-10"
+        className="absolute inset-y-0 right-0 left-0 -z-10 md:-left-32"
         style={{
           background:
             "linear-gradient(90deg, #f9fafb1a 1%, transparent 1%) 1px 0, transparent",
@@ -26,7 +26,7 @@ export default function CoverBackground({ children }: CoverBackgroundProps) {
         }}
       />
       <div
-        className="absolute right-0 bottom-0 -top-32 -left-[126px] -z-10"
+        className="absolute right-0 bottom-0 top-0 left-0 -z-10 md:-top-32 md:-left-[126px]"
         style={{
           opacity: 0.1,
           background:
diff --git a/app/components/NotionRenderer.tsx b/app/components/NotionRenderer.tsx
index 38dc9bc..def3f9c 100644
--- a/app/components/NotionRenderer.tsx
+++ b/app/components/NotionRenderer.tsx
@@ -118,9 +118,9 @@ function BlockRenderer({ block }: { block: NotionBlock }) {
     case "heading_2":
     case "heading_3": {
       const config = {
-        heading_1: { tag: "h2" as const, size: "text-2xl" },
-        heading_2: { tag: "h3" as const, size: "text-xl" },
-        heading_3: { tag: "h4" as const, size: "text-lg" },
+        heading_1: { tag: "h2" as const, size: "text-xl md:text-2xl" },
+        heading_2: { tag: "h3" as const, size: "text-lg md:text-xl" },
+        heading_3: { tag: "h4" as const, size: "text-base md:text-lg" },
       }[block.type];
       const richText = getBlockRichText(block);
       if (!richText) return null;
@@ -140,7 +140,7 @@ function BlockRenderer({ block }: { block: NotionBlock }) {
               {block.code.language}
             </span>
           )}
-          <pre className="overflow-x-auto rounded-lg bg-zinc-900 p-4">
+          <pre className="overflow-x-auto rounded-lg bg-zinc-900 p-2 md:p-4">
             <code className="text-sm text-zinc-100">
               {extractPlainText(block.code.rich_text)}
             </code>
@@ -185,7 +185,7 @@ function BlockRenderer({ block }: { block: NotionBlock }) {
                 ? extractPlainText(block.image.caption)
                 : ""
             }
-            className="rounded-lg"
+            className="max-w-full rounded-lg"
           />
           {block.image.caption.length > 0 && (
             <figcaption className="pt-2 text-center text-sm text-zinc-500">
diff --git a/app/components/Portfolio.tsx b/app/components/Portfolio.tsx
index 3405304..fbceead 100644
--- a/app/components/Portfolio.tsx
+++ b/app/components/Portfolio.tsx
@@ -19,7 +19,7 @@ export default function Portfolio() {
         <Image
           src={dancingStar}
           alt="Little star dancing with light rays"
-          className="absolute -top-12 -left-32 animate-grow-and-shrink"
+          className="absolute -top-12 -left-32 animate-grow-and-shrink max-md:hidden"
         />
         <SectionTitle className="from-brand-orange to-brand-gold p-6">
           Nos dernières victoires
diff --git a/app/components/Stack.tsx b/app/components/Stack.tsx
index ad17a3e..0b81378 100644
--- a/app/components/Stack.tsx
+++ b/app/components/Stack.tsx
@@ -57,8 +57,8 @@ export default function Stack() {
         De Rails &agrave; l&#39;IA, on ma&icirc;trise la stack qu&#39;il vous
         faut.
       </p>
-      <div className="my-16 grid grid-cols-1 gap-8 md:max-xl:mx-8 xl:grid-cols-[13fr_7fr]">
-        <div className="px-10 pt-10 md:rounded-3xl md:border-[1px] md:border-black xl:col-start-1 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
+      <div className="my-16 grid grid-cols-1 gap-8 md:mx-8 md:grid-cols-[13fr_7fr] xl:mx-0">
+        <div className="px-4 pt-10 md:rounded-3xl md:border-[1px] md:border-black md:px-10 xl:col-start-1 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
           <div>
             <h3 className="pb-3 font-serif text-2xl font-bold">
               Notre arsenal favori
@@ -120,7 +120,7 @@ export default function Stack() {
             </StackGroup>
           </div>
         </div>
-        <div className="p-10 md:rounded-3xl md:border-[1px] md:border-black xl:col-start-2 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
+        <div className="p-4 md:rounded-3xl md:border-[1px] md:border-black md:p-10 xl:col-start-2 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
           <div>
             <h3 className="pb-3 font-serif text-2xl font-bold">
               Intelligence Artificielle
diff --git a/app/components/Team.tsx b/app/components/Team.tsx
index 7229b4f..b551a8a 100644
--- a/app/components/Team.tsx
+++ b/app/components/Team.tsx
@@ -85,8 +85,8 @@ export default function Team() {
               src={patioNicolas}
               alt="Picture of Nicolas from above in a the patio with a laptop looking surprised"
               placeholder="blur"
-              className="border-8 border-white object-cover drop-shadow-lg"
-              width={470}
+              className="w-full border-8 border-white object-cover drop-shadow-lg"
+              sizes="(max-width: 768px) 50vw, 470px"
             />
           </div>
           <div className="flex">
@@ -94,8 +94,8 @@ export default function Team() {
               src={officeMehdiNicolas}
               alt="Picture of Mehdi and Nicolas looking at code on a laptop screen in an office"
               placeholder="blur"
-              className="border-8 border-white object-cover"
-              width={470}
+              className="w-full border-8 border-white object-cover"
+              sizes="(max-width: 768px) 50vw, 470px"
             />
           </div>
           <div className="flex">
@@ -103,8 +103,8 @@ export default function Team() {
               src={patioAlexisLili}
               alt="Picture of Alexis and Lili with a laptop smiling in the patio"
               placeholder="blur"
-              className="border-8 border-white object-cover"
-              width={470}
+              className="w-full border-8 border-white object-cover"
+              sizes="(max-width: 768px) 50vw, 470px"
             />
           </div>
         </div>
diff --git a/app/components/Values.tsx b/app/components/Values.tsx
index 30aa3d2..24450fa 100644
--- a/app/components/Values.tsx
+++ b/app/components/Values.tsx
@@ -40,7 +40,7 @@ export default function Values() {
         <Image
           src={underline}
           alt="Handrawing of a strike through to mimic an underline"
-          className="absolute -bottom-4"
+          className="absolute -bottom-4 max-md:hidden"
         />
         <h3 className="pb-6 font-serif text-4xl font-bold text-[#0074dd]">
           Nos plus-values
diff --git a/components/Disclosure.client.tsx b/components/Disclosure.client.tsx
index a62784a..a4da7b1 100644
--- a/components/Disclosure.client.tsx
+++ b/components/Disclosure.client.tsx
@@ -20,7 +20,7 @@ export default function CustomDisclosure({
     <Disclosure {...props}>
       {({ open }) => (
         <div className="mb-6 rounded-md border-[1px] border-black text-zinc-900">
-          <Disclosure.Button className="flex w-full justify-between rounded-md px-4 py-2 text-2xl font-bold">
+          <Disclosure.Button className="flex w-full justify-between rounded-md px-3 py-2 text-lg font-bold md:px-4 md:text-2xl">
             <span className="text-left">{title}</span>
             <ChevronUpIcon
               className={`${open ? "" : "rotate-180 transform"} h-8 w-8`}