diff --git a/components/app/AppFlatPlan.vue b/components/app/AppFlatPlan.vue
index 1936e27c0652c5d864d2ab774260e8ffe14a48a4..1bb18e92c7a7f353cad67f28e618395c7dfdce65 100644
--- a/components/app/AppFlatPlan.vue
+++ b/components/app/AppFlatPlan.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="container-flatplan" class="container mb-12">
-    <section class="grid grid-cols-4 gap-6">
+    <section class="gap-6 grid lg:grid-cols-4 md:grid-cols-2">
       <nuxt-link
         v-for="(section, i) in sections"
         :key="i"
diff --git a/components/app/AppReadingTime.vue b/components/app/AppReadingTime.vue
index e31209a0b1a3d99c88d9609d0164c19115b2e50e..97210cd593f94b25f7b1dd51935aa7aec14ae566 100644
--- a/components/app/AppReadingTime.vue
+++ b/components/app/AppReadingTime.vue
@@ -1,10 +1,12 @@
 <template>
-  <div class="flex items-center mb-8">
-    <fa :icon="['far', 'clock']" class="text-gray-400 text-lg mr-2" />
+  <div class="flex items-center mb-8 text-gray-500">
+    <fa :icon="['far', 'clock']" class="text-xl mr-2" />
 
     <div>
       <span>{{ readingTimeToStr }}</span>
-      <span class="text-gray-400 text-sm pl-1">
+      <span
+        class="text-sm text-gray-400 dark:text-gray-600 pl-1 hidden xl:inline"
+      >
         {{ `(${readingTime.words} mots)` }}
       </span>
     </div>
diff --git a/components/home/HomeCTA.vue b/components/home/HomeCTA.vue
index d3cb102a58ceb68646dfa8ed3da17bd2e8d848b8..7a0ff67fcede659442632ba133a461e98d29e6a1 100644
--- a/components/home/HomeCTA.vue
+++ b/components/home/HomeCTA.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="container-cta" class="container mb-12">
+  <div class="pt-8">
     <t-button
       class="flex items-center rounded-2xl"
       variant="success"
diff --git a/components/home/HomeHero.vue b/components/home/HomeHero.vue
index 9c14f0400e8b2f306ac1ff89f28a8b05dfa3c8d8..43ab3f068e7c7096ff2692fd5501a3fa9464f7a5 100644
--- a/components/home/HomeHero.vue
+++ b/components/home/HomeHero.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="hero container flex">
-    <div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full">
+  <div class="hero container flex lg:items-center">
+    <div class="max-w-2xl 2xl:max-w-3xl w-full">
       <nuxt-content :document="document" />
 
-      <HomeCTA class="pt-4" />
+      <HomeCTA />
     </div>
 
-    <SuperHero class="superhero w-full h-full" />
+    <SuperHero
+      class="superhero absolute h-40 hidden lg:h-full lg:relative lg:right-0 lg:w-full md:block right-6 w-1/3"
+    />
   </div>
 </template>
 
@@ -28,7 +30,7 @@ export default {
 
 <style lang="postcss" scoped>
 .hero {
-  padding: max(8vh, 8rem) 0;
+  padding: max(8vh, 4rem) 1.5rem;
 }
 
 @keyframes floatHero {
diff --git a/components/layout/LayoutFooter.vue b/components/layout/LayoutFooter.vue
index 6904d55dca1ac9900b84ef0e8346f7710396fe05..450f3299685c768efaa87c25c753e052f1a446a7 100644
--- a/components/layout/LayoutFooter.vue
+++ b/components/layout/LayoutFooter.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-wrap justify-center bg-gradient-to-r from-purple-600 to-purple-400 p-6 text-white z-10 dark:from-purple-900 dark:to-purple-700 dark:text-gray-100"
+    class="flex flex-wrap justify-center bg-gradient-to-r from-purple-600 to-purple-400 py-6 text-white z-10 dark:from-purple-900 dark:to-purple-700 dark:text-gray-100"
   >
     <div class="container">
       <div class="flex flex-wrap mb-4 w-full">
diff --git a/components/layout/LayoutHeaderLogo.vue b/components/layout/LayoutHeaderLogo.vue
index f23c0187bdbd1b2158a9cdfbf69c60cde8ba28db..b104c4357282dfa9ae37fb0584fa602aa91c995e 100644
--- a/components/layout/LayoutHeaderLogo.vue
+++ b/components/layout/LayoutHeaderLogo.vue
@@ -9,7 +9,7 @@
     />
 
     <span
-      class="bg-clip-text bg-gradient-to-r font-semibold from-purple-800 group-hover:text-transparent text-2xl to-blue-700 tracking-tight transition-colors"
+      class="bg-clip-text bg-gradient-to-r font-semibold from-purple-800 group-hover:text-transparent text-2xl to-blue-700 tracking-tight transition-colors whitespace-nowrap"
     >
       {{ $options.config.site_title }}
     </span>
diff --git a/components/page/PageHeader.vue b/components/page/PageHeader.vue
index 49cd988216d1662be0e15396d6a2c24911114754..a0ab456060d90766ce6790c7b89536a83d8e44f6 100644
--- a/components/page/PageHeader.vue
+++ b/components/page/PageHeader.vue
@@ -2,7 +2,7 @@
   <div class="flex items-center justify-between">
     <h1
       v-prevent-last-char-break
-      class="text-3xl md:text-4xl 2xl:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight py-8"
+      class="text-3xl md:text-4xl 2xl:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight py-10"
     >
       {{ document.title }}
     </h1>
diff --git a/components/ressources/RessourcesCategoriesFilter.vue b/components/ressources/RessourcesCategoriesFilter.vue
index a056c53a4d20799f3a39c39d8addf5d3356b1d1e..cd19e5433602772676cfa6b6c071f9fa24b10315 100644
--- a/components/ressources/RessourcesCategoriesFilter.vue
+++ b/components/ressources/RessourcesCategoriesFilter.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex items-center pt-2">
-    <div class="text-xs font-semibold ml-4">Filtres :</div>
-    <div class="flex items-center">
+  <div class="lg:flex items-center pt-2">
+    <div class="text-xs font-semibold mr-3 whitespace-nowrap">Filtres :</div>
+    <div class="flex items-center flex-wrap">
       <div
-        class="text-xs uppercase font-semibold ml-3 rounded px-1 py-0.5 cursor-pointer"
+        class="text-xs uppercase font-semibold mr-3 rounded px-1 py-0.5 cursor-pointer"
         :class="
           selectedCategories.length !== categories.length
             ? 'text-gray-400 hover:text-hover'
@@ -16,7 +16,7 @@
       <div
         v-for="(category, index) in categories"
         :key="index"
-        class="text-xs uppercase font-semibold ml-3 rounded px-1 py-0.5 cursor-pointer"
+        class="text-xs uppercase font-semibold mr-3 rounded px-1 py-0.5 my-0.5 cursor-pointer"
         :class="
           !selectedCategories.includes(category) ||
           selectedCategories.length === categories.length
diff --git a/components/ressources/RessourcesItem.vue b/components/ressources/RessourcesItem.vue
index cd5a554dc96f435a68ac7882c436700df496e0b7..56bf335b1fd863c06470d7a57b4e549bbd8a4eda 100644
--- a/components/ressources/RessourcesItem.vue
+++ b/components/ressources/RessourcesItem.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex cursor-pointer mb-8 p-0.5 pr-4 overflow-hidden">
+  <div class="md:flex cursor-pointer mb-8 p-0.5 pr-4 overflow-hidden">
     <a
-      class="flex-none mr-4 shadow rounded bg-gray-100"
+      class="flex-none block mr-4 shadow rounded bg-gray-100"
       style="width: 200px; height: 150px"
       :href="item.url"
       target="_blank"
diff --git a/components/ressources/RessourcesItemHeader.vue b/components/ressources/RessourcesItemHeader.vue
index 6d29bc17f7c13242160790bc712a8df2feb107c4..30190e407a2389caa25e626339318e8d4515c498 100644
--- a/components/ressources/RessourcesItemHeader.vue
+++ b/components/ressources/RessourcesItemHeader.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex items-center justify-between">
-    <div class="flex overflow-hidden">
+  <div class="md:flex items-center justify-between">
+    <div class="flex overflow-hidden mb-1 md:mb-0">
       <div v-if="isHover" class="text-xs truncate">{{ isHover }}</div>
       <div
         v-for="(category, index) in item.categories"
diff --git a/components/ressources/RessourcesSubmitModal.vue b/components/ressources/RessourcesSubmitModal.vue
index 91f0d89f1c955ad2b28a2c0d9634f9ee07db86bf..fb82c3dd8391ee38048fdc845a542d9231802ccc 100644
--- a/components/ressources/RessourcesSubmitModal.vue
+++ b/components/ressources/RessourcesSubmitModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ml-4">
+  <div class="md:ml-4 mt-2 md:mt-0">
     <t-button
       class="mx-auto"
       :text="$t('ressources.submitResources')"
diff --git a/components/search/SearchContainer.vue b/components/search/SearchContainer.vue
index 10d57244f212a35cd7545a1931b7cf032143dadc..74b93f637fb4d233eab38b9a99ab114aeb9cb3b6 100644
--- a/components/search/SearchContainer.vue
+++ b/components/search/SearchContainer.vue
@@ -4,9 +4,9 @@
       <PageHeader v-if="title" :document="{ title }" />
     </slot>
 
-    <div class="flex justify-between mb-8">
+    <div class="md:flex justify-between mb-8">
       <div class="w-full">
-        <div class="flex">
+        <div class="md:flex">
           <TInputIcon
             v-model="query"
             type="search"
diff --git a/content/ui/home-hero.md b/content/ui/home-hero.md
index d85f8780f54375dae417e48801957cfc79e9f42b..7a0dcbe0cc102c471f8cacc5222c7e3baa11cea4 100644
--- a/content/ui/home-hero.md
+++ b/content/ui/home-hero.md
@@ -1,17 +1,17 @@
-<section class="mr-20">
-  <h1 class="mb-4 text-3xl md:text-6xl 2xl:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight slide-in-bottom-h1">
+<section class="xl:mr-20">
+  <h1 class="mb-4 text-4xl md:text-5xl xl:text-6xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight slide-in-bottom-h1">
   La monnaie libre
   </h1>
 
-  <p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-4xl mb-12 font-semibold slide-in-bottom-subtitle">
+  <p class="leading-normal text-xl text-gray-700 dark:text-gray-300 md:text-2xl xl:text-4xl mb-12 font-semibold slide-in-bottom-subtitle">
   Repenser la création monétaire...<br />et l'expérimenter !
   </p>
 
-  <p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-xl mb-6 slide-in-bottom-subtitle">
+  <p class="leading-normal text-base text-gray-700 dark:text-gray-300 xl:text-xl mb-6 slide-in-bottom-subtitle">
   Un modèle économique plus juste et durable est possible.<br />Une monnaie libre place l'homme au cœur de l'économie et prend en compte les générations futures.
   </p>
 
-  <p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-xl mb-6 slide-in-bottom-subtitle">
+  <p class="leading-normal text-base text-gray-700 dark:text-gray-300 xl:text-xl mb-6 slide-in-bottom-subtitle">
   La Ğ1 (la "June") est la première monnaie libre. Conçue sur une blockchain écologique, c'est une expérience citoyenne, solidaire... et peut-être subversive !
   </p>
 </section>
\ No newline at end of file
diff --git a/nuxt.config.js b/nuxt.config.js
index 94c3b7af99259988fbe9a6129ead9ddff72eef1e..8cdb8513db1082c68a9d1913bb97261629a21354 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -206,7 +206,7 @@ export default {
   hooks: {
     // Netlifycms cannot create array in json file at root level and nuxt-content need an array. So, ressources.json is parsed to fetch 'ressources' key.
     'content:file:beforeParse': (file) => {
-      if (file.extension === '.json' && !/.*ressources.json$/.test(file.path)) {
+      if (file.extension === '.json' && /.*ressources.json$/.test(file.path)) {
         file.data = JSON.stringify(JSON.parse(file.data).ressources)
       } else if (file.extension === '.md') {
         if (/^---.*layout:.*---/s.test(file.data)) {
diff --git a/pages/ressources.vue b/pages/ressources.vue
index d69e0a1e5d178b8758df2e2e9b43dd9132e6a97d..83857f0ef1d02586e20725e83bba61535fac2f5c 100644
--- a/pages/ressources.vue
+++ b/pages/ressources.vue
@@ -22,7 +22,7 @@
             v-for="item in items"
             :key="item.path"
             :item="item"
-            class="w-1/2"
+            class="w-full xl:w-1/2"
             @select-category="selectedCategories = $event"
           />
         </transition-group>
diff --git a/tailwind.config.js b/tailwind.config.js
index e62aca13e656ef9d8a631417c90f4d1af3065404..37a0c5b8f90b5ee1381c870d5a830f3d15b5d914 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -106,6 +106,7 @@ module.exports = {
       },
     },
     container: {
+      padding: '1.5rem',
       screens: containerScreens,
       center: true,
     },