diff --git a/gestioncof/cms/static/cofcms/css/screen.css b/gestioncof/cms/static/cofcms/css/screen.css
index 5f543bb4..965206c3 100644
--- a/gestioncof/cms/static/cofcms/css/screen.css
+++ b/gestioncof/cms/static/cofcms/css/screen.css
@@ -169,21 +169,25 @@ article ul {
 article ul li {
   list-style: outside;
 }
+/* line 98, ../sass/screen.scss */
+article:last-child {
+  margin-bottom: 30px;
+}
 
-/* line 100, ../sass/screen.scss */
+/* line 103, ../sass/screen.scss */
 .container {
   max-width: 1000px;
   margin: 0 auto;
   position: relative;
 }
-/* line 105, ../sass/screen.scss */
+/* line 108, ../sass/screen.scss */
 .container .aside-wrap {
   position: absolute;
   top: 30px;
   height: 100%;
   width: 250px;
 }
-/* line 111, ../sass/screen.scss */
+/* line 114, ../sass/screen.scss */
 .container .aside-wrap .aside {
   color: #fff;
   position: fixed;
@@ -194,43 +198,47 @@ article ul li {
   padding: 15px;
   box-shadow: -4px 4px 1px rgba(0, 0, 0, 0.3);
 }
-/* line 121, ../sass/screen.scss */
+/* line 124, ../sass/screen.scss */
+.container .aside-wrap .aside h2 {
+  color: #fff;
+}
+/* line 128, ../sass/screen.scss */
 .container .aside-wrap .aside .calendar {
   margin: 0 auto;
   display: block;
 }
-/* line 128, ../sass/screen.scss */
+/* line 135, ../sass/screen.scss */
 .container .content {
   max-width: 700px;
   margin-left: auto;
   margin-right: 0;
 }
-/* line 133, ../sass/screen.scss */
+/* line 140, ../sass/screen.scss */
 .container .content .intro {
   border-bottom: 3px solid #a3d200;
   margin: 20px -10px;
   margin-top: 5px;
   padding: 15px 5px;
 }
-/* line 143, ../sass/screen.scss */
+/* line 150, ../sass/screen.scss */
 .container .content section article {
   background: #fff;
   padding: 30px;
   box-shadow: -4px 4px 1px rgba(0, 0, 0, 0.3);
 }
-/* line 147, ../sass/screen.scss */
+/* line 154, ../sass/screen.scss */
 .container .content section article a {
   color: #3cb3a6;
 }
-/* line 152, ../sass/screen.scss */
+/* line 159, ../sass/screen.scss */
 .container .content section article + h2 {
   margin-top: 15px;
 }
-/* line 156, ../sass/screen.scss */
+/* line 163, ../sass/screen.scss */
 .container .content section article + article {
   margin-top: 25px;
 }
-/* line 161, ../sass/screen.scss */
+/* line 168, ../sass/screen.scss */
 .container .content section.directory article.entry {
   width: 80%;
   max-width: 600px;
@@ -238,7 +246,7 @@ article ul li {
   position: relative;
   padding-right: 120px;
 }
-/* line 168, ../sass/screen.scss */
+/* line 175, ../sass/screen.scss */
 .container .content section.directory article.entry .entry-image {
   display: block;
   position: absolute;
@@ -251,25 +259,25 @@ article ul li {
   transform: translateX(90%);
   top: -15px;
 }
-/* line 180, ../sass/screen.scss */
+/* line 187, ../sass/screen.scss */
 .container .content section.directory article.entry .entry-image img {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
 }
-/* line 190, ../sass/screen.scss */
+/* line 197, ../sass/screen.scss */
 .container .content section.actuhome {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: top;
 }
-/* line 196, ../sass/screen.scss */
+/* line 203, ../sass/screen.scss */
 .container .content section.actuhome article + article {
   margin: 0;
 }
-/* line 200, ../sass/screen.scss */
+/* line 207, ../sass/screen.scss */
 .container .content section.actuhome article.actu {
   position: relative;
   background: none;
@@ -278,7 +286,7 @@ article ul li {
   min-width: 300px;
   flex: 1;
 }
-/* line 208, ../sass/screen.scss */
+/* line 215, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header {
   position: relative;
   box-shadow: -4px 5px 1px rgba(0, 0, 0, 0.3);
@@ -289,7 +297,7 @@ article ul li {
   background-size: cover;
   background-position: center center;
 }
-/* line 218, ../sass/screen.scss */
+/* line 225, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header h2 {
   position: absolute;
   width: 100%;
@@ -299,11 +307,11 @@ article ul li {
   text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
   background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
 }
-/* line 226, ../sass/screen.scss */
+/* line 233, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header h2 a {
   color: #fff;
 }
-/* line 232, ../sass/screen.scss */
+/* line 239, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-misc {
   background: white;
   box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.2);
@@ -311,17 +319,17 @@ article ul li {
   padding: 15px;
   padding-top: 5px;
 }
-/* line 239, ../sass/screen.scss */
+/* line 246, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-misc .actu-minical {
   display: block;
 }
-/* line 242, ../sass/screen.scss */
+/* line 249, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-misc .actu-dates {
   display: block;
   text-align: right;
   font-size: 0.9em;
 }
-/* line 249, ../sass/screen.scss */
+/* line 256, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-overlay {
   display: block;
   background: none;
@@ -333,41 +341,64 @@ article ul li {
   z-index: 5;
   opacity: 0;
 }
+/* line 272, ../sass/screen.scss */
+.container .content section.actulist article.actu {
+  display: flex;
+  width: 100%;
+  padding: 0;
+}
+/* line 277, ../sass/screen.scss */
+.container .content section.actulist article.actu .actu-image {
+  width: 30%;
+  max-width: 200px;
+  background-size: cover;
+  background-position: center center;
+}
+/* line 283, ../sass/screen.scss */
+.container .content section.actulist article.actu .actu-infos {
+  padding: 15px;
+  flex: 1;
+}
+/* line 287, ../sass/screen.scss */
+.container .content section.actulist article.actu .actu-infos .actu-dates {
+  font-weight: bold;
+  font-size: 0.9em;
+}
 
-/* line 268, ../sass/screen.scss */
+/* line 299, ../sass/screen.scss */
 .calendar td, .calendar th {
   text-align: center;
   vertical-align: center;
   border: 2px solid transparent;
   padding: 1px;
 }
-/* line 275, ../sass/screen.scss */
+/* line 306, ../sass/screen.scss */
 .calendar th {
   font-weight: bold;
 }
-/* line 279, ../sass/screen.scss */
+/* line 310, ../sass/screen.scss */
 .calendar td {
   font-size: 0.8em;
   width: 25px;
   height: 30px;
 }
-/* line 284, ../sass/screen.scss */
+/* line 315, ../sass/screen.scss */
 .calendar td.out {
   opacity: 0.3;
 }
-/* line 287, ../sass/screen.scss */
+/* line 318, ../sass/screen.scss */
 .calendar td.today {
   border-bottom-color: #000;
 }
-/* line 290, ../sass/screen.scss */
+/* line 321, ../sass/screen.scss */
 .calendar td:nth-child(7) {
   background: rgba(0, 0, 0, 0.3);
 }
-/* line 293, ../sass/screen.scss */
+/* line 324, ../sass/screen.scss */
 .calendar td:nth-child(6) {
   background: rgba(0, 0, 0, 0.2);
 }
-/* line 296, ../sass/screen.scss */
+/* line 327, ../sass/screen.scss */
 .calendar td.hasevent {
   font-weight: bold;
   color: #3cb3a6;
diff --git a/gestioncof/cms/static/cofcms/sass/screen.scss b/gestioncof/cms/static/cofcms/sass/screen.scss
index aa278464..7a69cf5b 100644
--- a/gestioncof/cms/static/cofcms/sass/screen.scss
+++ b/gestioncof/cms/static/cofcms/sass/screen.scss
@@ -95,6 +95,9 @@ article {
             list-style: outside;
         }
     }
+    &:last-child {
+        margin-bottom: 30px;
+    }
 }
 
 .container {
@@ -118,6 +121,10 @@ article {
             padding: 15px;
             box-shadow: -4px 4px 1px rgba(#000, 0.3);
 
+            h2 {
+                color: #fff;
+            }
+            
             .calendar {
                 margin: 0 auto;
                 display: block;
@@ -260,6 +267,30 @@ article {
 
                 }
             }
+            
+            &.actulist {
+                article.actu {
+                    display:flex;
+                    width: 100%;
+                    padding: 0;
+                    
+                    .actu-image {
+                        width: 30%;
+                        max-width: 200px;
+                        background-size: cover;
+                        background-position: center center;
+                    }
+                    .actu-infos {
+                        padding: 15px;
+                        flex: 1;
+
+                        .actu-dates {
+                            font-weight: bold;
+                            font-size: 0.9em;
+                        }
+                    }
+                }
+            }
         }
     }
 }
diff --git a/gestioncof/cms/templates/cofcms/cof_actu_index_page.html b/gestioncof/cms/templates/cofcms/cof_actu_index_page.html
index bc2ecc2a..affd433d 100644
--- a/gestioncof/cms/templates/cofcms/cof_actu_index_page.html
+++ b/gestioncof/cms/templates/cofcms/cof_actu_index_page.html
@@ -14,13 +14,16 @@
     <section class="actulist">
         {% for actu in page.actus %}
             <article class="actu">
-                <h2><a href="{% pageurl actu %}">{{ actu.title }}</a></h2>
-                {% if actu.is_event %}
-                    <p>{{ actu.chapo }}</p>
-                {% else %}
-                    {{ actu.body|safe|truncatewords_html:25 }}
-                {% endif %}
-                <a href="{% pageurl actu %}">Lire plus &gt;</a>
+                <div class="actu-image" {% if actu.image %}{% image actu.image fill-400x200 as img %}style="background-image:url('{{ img.url }}');"{% endif %}></div>
+                <div class="actu-infos">
+                    <h2><a href="{% pageurl actu %}">{{ actu.title }}</a></h2>
+                    {% if actu.is_event %}
+                        <p><span class="actu-dates">{{ actu.dates|capfirst }}</span><br />{{ actu.chapo }}</p>
+                    {% else %}
+                        {{ actu.body|safe|truncatewords_html:25 }}
+                    {% endif %}
+                    <a href="{% pageurl actu %}">Lire plus &gt;</a>
+                </div>
             </article>
         {% endfor %}
     </section>