diff --git a/_data/about.yaml b/_data/about.yaml
index fc62387..141ca03 100644
--- a/_data/about.yaml
+++ b/_data/about.yaml
@@ -33,3 +33,6 @@ body: |
   </p>
 footer:   We are a team of from France, Poland, Italy, Netherlands and Czech Republic supported during 2 years and half by Erasmus+ KA2 program.
    
+bottom_image:
+  url: /assets/about/Multicolor_Professional_Chronological_Timeline_Infographic.jpg
+  description: Chronological timeline infographic
\ No newline at end of file
diff --git a/_sass/_about.sass b/_sass/_about.sass
index cc35f0d..75e16c7 100644
--- a/_sass/_about.sass
+++ b/_sass/_about.sass
@@ -5,6 +5,16 @@
     @media screen and (max-width: $breakpoint-small)
         flex-flow: column
 
+    .text
+        display: flex
+        flex-flow: column
+        picture
+            text-align: center
+            object-fit: fill
+            img
+                width: auto
+                height: auto
+                margin: 24pt 0
     .gallery
         display: flex
         flex-wrap: wrap
diff --git a/_sass/_map.sass b/_sass/_map.sass
new file mode 100644
index 0000000..514d87f
--- /dev/null
+++ b/_sass/_map.sass
@@ -0,0 +1,3 @@
+.map
+    @media screen and (max-width: $breakpoint-small)
+        height: 400pt
diff --git a/about/index.html b/about/index.html
index 8d44a63..3135907 100644
--- a/about/index.html
+++ b/about/index.html
@@ -18,6 +18,7 @@ <h1>{{ site.data.about.title }}</h1>
                 {{ site.data.about.body }}
             </div>
             <div class="caption">{{ site.data.about.footer }}</div>
+            {% picture {{ site.data.about.bottom_image.url }} --alt {{ site.data.about.bottom_image.description }} %}
         </div>
     </section>
 </div>
diff --git a/assets/about/Multicolor_Professional_Chronological_Timeline_Infographic.jpg b/assets/about/Multicolor_Professional_Chronological_Timeline_Infographic.jpg
new file mode 100644
index 0000000..eb0bd84
Binary files /dev/null and b/assets/about/Multicolor_Professional_Chronological_Timeline_Infographic.jpg differ
diff --git a/assets/global/css/style.sass b/assets/global/css/style.sass
index 8634c6f..f5d98ab 100644
--- a/assets/global/css/style.sass
+++ b/assets/global/css/style.sass
@@ -10,3 +10,4 @@
 @import "toolkit"
 @import "question"
 @import "about"
+@import "map"
diff --git a/case_studies/index.html b/case_studies/index.html
index 369abfc..74cd284 100644
--- a/case_studies/index.html
+++ b/case_studies/index.html
@@ -2,10 +2,21 @@
 title: Case studies
 layout: default
 ---
+{%- include component-lazyiframe.html -%}
+
 <div class="page__top-content page__bottom-content width--wide ">
     <h1>{{ site.data.study_cases.title}}</h1>
     <abstract>{{ site.data.study_cases.abstract}}</abstract>
 
+    <section class="flex--space_evenly">
+        <lazy-iframe class="column__item--small map" style="display: block; overflow: hidden; "
+            title="Map of initiatives" allow="geolocation ; camera;" frameborder="0"
+            src="https://www.mapotic.com/pilot-cities/embed?zoom=3.719309383289333&lat=48.23462655956004&lng=10.771234864936204">
+            {% picture /assets/toolkit/mapotic_placeholder.jpg --alt {{ site.data.home.part3.image.description }}
+            --img style="object-fit: cover"
+            --parent slot="placeholder" %}
+        </lazy-iframe>
+    </section>
     <section class="flex--space_evenly">
         {%- for pilot_city in site.data.study_cases.pilot_cities -%}
         <div class="card column__item">
@@ -14,5 +25,6 @@ <h3>{{ pilot_city.title }}</h3>
             <p>{{ pilot_city.body }}</p>
         </div>
         {%- endfor -%}
+
     </section>
 </div>
\ No newline at end of file