diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 5df9fdb80..12918330d 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -46,13 +46,7 @@ body {
 }
 
 .description {
-  border-color: rgba(200, 200, 200, 0.6);
-  border-style: solid;
-  border-radius: 5px;
-  border-width: 1px;
   padding: 10px;
-  background-color: rgb(245, 245, 245);
-  margin-top: 10px;
 }
 
 .btn-file {
diff --git a/app/assets/stylesheets/recapiitulatif.scss b/app/assets/stylesheets/recapiitulatif.scss
new file mode 100644
index 000000000..e57421a56
--- /dev/null
+++ b/app/assets/stylesheets/recapiitulatif.scss
@@ -0,0 +1,9 @@
+#infos_dossier{
+  background-color:rgba(248,248,255,0.8);
+  padding-left:13%;
+  padding-right:13%;
+  padding-bottom:20px;
+  padding-top:15px;
+  margin-left:-13%;
+  margin-right:-13%;
+}
\ No newline at end of file
diff --git a/app/controllers/recapitulatif_controller.rb b/app/controllers/recapitulatif_controller.rb
index 194cd0f0e..23507f618 100644
--- a/app/controllers/recapitulatif_controller.rb
+++ b/app/controllers/recapitulatif_controller.rb
@@ -2,6 +2,7 @@ class RecapitulatifController < ApplicationController
   def show
     @dossier = Dossier.find(params[:dossier_id])
     @dossier = @dossier.decorate
+    @procedure = @dossier.procedure
 
     # mettre dans le modele
     @commentaires = @dossier.commentaires.order(created_at: :desc)
diff --git a/app/decorators/dossier_decorator.rb b/app/decorators/dossier_decorator.rb
index c3c99e64e..aa53082d3 100644
--- a/app/decorators/dossier_decorator.rb
+++ b/app/decorators/dossier_decorator.rb
@@ -10,4 +10,25 @@ class DossierDecorator < Draper::Decorator
   def last_update
     updated_at.localtime.strftime('%d/%m/%Y %H:%M')
   end
+
+  def state_fr
+    case state
+      when 'draft'
+        'Brouillon'
+      when 'proposed'
+        'Proposé'
+      when 'reply'
+        'Répondu'
+      when 'updated'
+        'Mis à jour'
+      when 'confirmed'
+        'Validé'
+      when 'deposited'
+        'Déposé'
+      when 'processed'
+        'Traité'
+      else
+        fail 'State not valid'
+    end
+  end
 end
diff --git a/app/views/backoffice/dossiers/show.html.haml b/app/views/backoffice/dossiers/show.html.haml
index 55c87ffb9..66ca14431 100644
--- a/app/views/backoffice/dossiers/show.html.haml
+++ b/app/views/backoffice/dossiers/show.html.haml
@@ -13,35 +13,7 @@
 %br
 
 .content.row
-  #map_qp.col-lg-6.col-md-6{style: 'height:500px'}
-  #pieces_justificatives.col-lg-6.col-md-6
-    %h3.text-info Liste des pièces justificatives
-    %br
-    %table.table
-      -if @procedure.lien_demarche != nil
-        %tr{id: "piece_justificative_0"}
-          %th{class:'col-lg-6'}
-            ='CERFA'
-          %td.col-lg-4.col-md-4
-            - if !@dossier.cerfa.empty?
-              %a{ href: "#{@dossier.cerfa.content}", target: '_blank' } Consulter
-            - else
-              = 'Pièce non fournie'
-
-      - @dossier.pieces_justificatives.each do |piece_justificative|
-        %tr{ id: "piece_justificative_#{piece_justificative.type}" }
-          %th.col-lg-6
-            = piece_justificative.libelle
-          %td.col-lg-4.col-md-4
-            - if piece_justificative.api_entreprise
-              %a{ href: '' } Récupérer
-            - elsif !piece_justificative.empty?
-              %a{ href: "#{piece_justificative.content}", target: '_blank' } Consulter
-            - else
-              = 'Pièce non fournie'
-
-  = render partial: '/carte/carte_sources_CSS'
-= render partial: '/carte/carte_sources_JS_backend'
+  =render partial: '/dossiers/pieces_justificatives'
 %br
 
 = render partial: '/recapitulatif/commentaires_flux'
diff --git a/app/views/dossiers/_infos_dossier.html.haml b/app/views/dossiers/_infos_dossier.html.haml
index 7647d48a1..634639366 100644
--- a/app/views/dossiers/_infos_dossier.html.haml
+++ b/app/views/dossiers/_infos_dossier.html.haml
@@ -1,9 +1,30 @@
 = javascript_include_tag "https://code.highcharts.com/highcharts.js", "chartkick"
-.row#infos_dossier
-  .col-md-6
-    %h4.text-info
-      = @dossier.nom_projet
-    %div
+
+#infos_dossier
+  %div.row
+    .col-lg-6.col-md-6
+      %h3.text-info
+        = @dossier.nom_projet
+
+      %br
+      %div.row
+        .col-lg-6.col-md-6
+          %h4 Montant total
+          %p{style:'margin-left:5%'}
+            =number_to_currency(@dossier.montant_projet.to_f, :unit => " ", :separator => ",", :delimiter => " ")
+            !='&euro;'
+
+        .col-lg-6.col-md-6
+          %h4 Début du projet souhaité
+          %p{style:'margin-left:5%'}
+            = @dossier.date_fr
+      %div.row
+        .col-lg-6.col-md-6
+          %h4 Montant souhaité
+          %p{style:'margin-left:5%'}
+            =number_to_currency(@dossier.montant_aide_demande.to_f, :unit => " ", :separator => ",", :delimiter => " ")
+            !='&euro;'
+      %br
       .description
         - begin
           - @dossier.description.split(/(?:\n\r?|\r\n?')/).each do |line|
@@ -11,28 +32,11 @@
             %br
         - rescue
           =''
-      %br
-      .col-lg-6.col-md-6
-        %h4 Montant total
 
-        %p
-          =number_to_currency(@dossier.montant_projet.to_f, :unit => " ", :separator => ",", :delimiter => " ")
-          !='&euro;'
-
-      .col-lg-6.col-md-6
-        %h4 Début du projet souhaité
-        %p
-          = @dossier.date_fr
-
-
-      / -if !request.url.include?('admin')
-      - unless gestionnaire_signed_in?
-        .col-lg-6.col-md-6
-          %br
-          %br
-          %a#modif_description{href: "/dossiers/#{@dossier.id}/description?back_url=recapitulatif"} Modifier la description
-
-
-  .col-md-6
-    = pie_chart({"Montant à charge #{(100 - @dossier.montant_aide_demande.to_f/@dossier.montant_projet.to_f*100).round(2)}%" => (@dossier.montant_projet.to_f - @dossier.montant_aide_demande.to_f), "Montant souhaité #{(@dossier.montant_aide_demande.to_f/@dossier.montant_projet.to_f*100).round(2)}%" => @dossier.montant_aide_demande})
+    .col-lg-6.col-md-6
+      =render partial: '/dossiers/pieces_justificatives'
+      -#= pie_chart({"Montant à charge #{(100 - @dossier.montant_aide_demande.to_f/@dossier.montant_projet.to_f*100).round(2)}%" => (@dossier.montant_projet.to_f - @dossier.montant_aide_demande.to_f), "Montant souhaité #{(@dossier.montant_aide_demande.to_f/@dossier.montant_projet.to_f*100).round(2)}%" => @dossier.montant_aide_demande})
 
+  %div.row{style: 'text-align:right'}
+    %a#maj_infos.btn.btn-info{href: "/dossiers/#{@dossier.id}/description?back_url=recapitulatif"}
+      = 'Editer mon dossier'
\ No newline at end of file
diff --git a/app/views/dossiers/_pieces_justificatives.html.haml b/app/views/dossiers/_pieces_justificatives.html.haml
new file mode 100644
index 000000000..20e89423d
--- /dev/null
+++ b/app/views/dossiers/_pieces_justificatives.html.haml
@@ -0,0 +1,30 @@
+#pieces_justificatives
+  %h3.text-info Liste des pièces justificatives
+  %br
+  %table.table
+    -if @procedure.lien_demarche != nil
+      %tr{id: "piece_justificative_0"}
+        %th{class:'col-lg-6'}
+          ='CERFA'
+          -if @procedure.lien_demarche != nil
+            %a{style:'font-size:0.9em; padding-left:3px', id: 'lien_cerfa' ,href: "#{@procedure.lien_demarche}", :target => '_blank'} Lien CERFA
+        %td.col-lg-6.col-md-6
+          - if !@dossier.cerfa.empty?
+            - if user_signed_in?
+              = 'Pièce fournie'
+            - elsif gestionnaire_signed_in?
+              %a{ href: "#{@dossier.cerfa.content}", target: '_blank' } Consulter
+          - else
+            = 'Pièce non fournie'
+
+    - @dossier.pieces_justificatives.each do |piece_justificative|
+      %tr{ id: "piece_justificative_#{piece_justificative.type}" }
+        %th.col-lg-6
+          = piece_justificative.libelle
+        %td.col-lg-6.col-md-6
+          - if piece_justificative.api_entreprise
+            %span.text-success Nous l'avons récupéré pour vous.
+          - elsif !piece_justificative.empty?
+            %a{ href: "#{piece_justificative.content}", target: '_blank' } Consulter
+          - else
+            = 'Pièce non fournie'
diff --git a/app/views/recapitulatif/_commentaires_flux.html.haml b/app/views/recapitulatif/_commentaires_flux.html.haml
index 62bd43289..a374cfdbf 100644
--- a/app/views/recapitulatif/_commentaires_flux.html.haml
+++ b/app/views/recapitulatif/_commentaires_flux.html.haml
@@ -1,24 +1,18 @@
-.content#commentaires_flux
-  %h3 Commentaires
-
-  %div{style: 'margin-left:3%; width:80%'}
-    -@commentaires.each do |com|
-      %span.text-info#email_contact{style: 'font-weight:bold'}
-        =com.email
-      %span#created_at
-        \-
-        =com.created_at_fr
-      %br
-      .description#body
-        =com.body
-      %br
-
-    %h4{style: 'margin-bottom:2%'} Nouveau
+.content#commentaires_flux{style:'width:100%;'}
+  %div#commentaire_new{style: 'width:80%; margin-left:auto; margin-right:auto'}
     = form_tag(url_for({ controller: :commentaires, action: :create, dossier_id: @dossier.id }), class: 'form-inline', method: 'POST') do
-      %input.form-control{:type => 'text', style: 'width: 30%; margin-bottom:2%', :id => 'email_commentaire', :name => 'email_commentaire', :value => @commentaire_email}
-      %textarea.form-control{:id => 'texte_commentaire', :name => 'texte_commentaire', style: 'width: 100%; margin-bottom:2%', rows: '5', maxlength: '255'}
-      %br
-      %input.form-control.btn.btn-success{:type => 'submit', :value => 'Poster', style: 'float:right'}
-%br
-%br
-%br
\ No newline at end of file
+      %textarea.form-control{id: 'texte_commentaire', name: 'texte_commentaire', style: 'width: 100%; margin-bottom:2%', rows: '5', maxlength: '255', placeholder:"Dialoguer avec votre interlocuteur privilégié en charge de votre dossier."}
+      %input.form-control.btn.btn-primary{:type => 'submit', :value => 'Poster', style: 'float:right'}
+  %br
+  %br
+
+  -@commentaires.each do |com|
+    %span.text-info#email_contact{style: 'font-weight:bold'}
+      =com.email
+    %span#created_at
+      \-
+      =com.created_at_fr
+    %br
+    .description#body
+      =com.body
+    %br
diff --git a/app/views/recapitulatif/show.html.haml b/app/views/recapitulatif/show.html.haml
index 571490579..400b8e6b0 100644
--- a/app/views/recapitulatif/show.html.haml
+++ b/app/views/recapitulatif/show.html.haml
@@ -1,24 +1,25 @@
-%h2
-  ='Récapitulatif'
+%div.row
+  %div.col-md-2.col-lg-2
+    %h2
+      ='Récapitulatif'
+
+  %div.col-md-8.col-lg-8
+
+  %div.col-md-2.col-lg-2
+    %h2#dossier_id{:class => 'text-info', :style => 'text-align:right; margin-bottom:15px'}
+      = "Dossier n°#{@dossier.id}"
+    -#%h3{:class => 'text-success', :style => 'text-align:right'}
+    -#  = @dossier.state_fr
+    - unless gestionnaire_signed_in?
+      %button#action_button.btn.btn-success
+        = 'Soumettre mon dossier'
 
 %div{style: 'text-align:center'}
-  -if request.referer != nil
-    -if (request.referer.include?'/description') && !(request.referer.include?'back_url=recapitulatif')
-      %h4.text-success Félicitation, votre demande a bien été enregistrée.
+  -if (request.referer != nil) && (request.referer.include?'/description') && !(request.referer.include?'back_url=recapitulatif')
+    %h3.text-success Félicitation, votre demande a bien été enregistrée.
 
-      %h3{style: 'text-align:center; line-height:1.5em'}
-        ='Votre dossier est le '
-        %br
-        %span{id: 'dossier_id', style: 'font-weight:bold;', class: 'text-success'}
-          ="n°#{@dossier.id}"
-    -else
-      %h2#dossier_id{:class => 'text-info', :style => 'text-align:right'}
-        = "Dossier n°#{@dossier.id}"
-  -else
-    %h2#dossier_id{:class => 'text-info', :style => 'text-align:right'}
-      = "Dossier n°#{@dossier.id}"
+%br
 
 = render partial: '/dossiers/infos_dossier'
 %br
-
 = render partial: 'commentaires_flux'
\ No newline at end of file
diff --git a/spec/decorators/dossier_decorator_spec.rb b/spec/decorators/dossier_decorator_spec.rb
index 90c53f6b0..eba7c246a 100644
--- a/spec/decorators/dossier_decorator_spec.rb
+++ b/spec/decorators/dossier_decorator_spec.rb
@@ -3,8 +3,48 @@ require 'spec_helper'
 describe DossierDecorator do
   let(:dossier) { create(:dossier) }
   subject { dossier.decorate }
+
   describe 'last_update' do
     subject { Timecop.freeze(Time.new(2015, 12, 24, 14, 10)) { super().last_update } }
     it { is_expected.to eq('24/12/2015 14:10') }
   end
+
+  describe 'state_fr' do
+    subject{ super().state_fr }
+
+    it 'draft is brouillon' do
+      dossier.draft!
+      expect(subject).to eq('Brouillon')
+    end
+
+    it 'proposed is propose' do
+      dossier.proposed!
+      expect(subject).to eq('Proposé')
+    end
+
+    it 'reply is repondu' do
+      dossier.reply!
+      expect(subject).to eq('Répondu')
+    end
+
+    it 'updated is mis à jour' do
+      dossier.updated!
+      expect(subject).to eq('Mis à jour')
+    end
+
+    it 'confirmed is valide' do
+      dossier.confirmed!
+      expect(subject).to eq('Validé')
+    end
+
+    it 'deposited is dépose' do
+      dossier.deposited!
+      expect(subject).to eq('Déposé')
+    end
+
+    it 'processed is traité' do
+      dossier.processed!
+      expect(subject).to eq('Traité')
+    end
+  end
 end
diff --git a/spec/factories/dossier.rb b/spec/factories/dossier.rb
index 06fb0057b..00ea31b39 100644
--- a/spec/factories/dossier.rb
+++ b/spec/factories/dossier.rb
@@ -1,6 +1,7 @@
 FactoryGirl.define do
   factory :dossier do
     nom_projet "Demande de subvention dans le cadre d'accompagnement d'enfant à l'étranger"
+    state 'draft'
     trait :with_entreprise do
       after(:build) do |dossier, _evaluator|
         etablissement = create(:etablissement)
diff --git a/spec/features/recapitulatif_page/_commentaires_flux_spec.rb b/spec/features/recapitulatif_page/_commentaires_flux_spec.rb
deleted file mode 100644
index 273fa990b..000000000
--- a/spec/features/recapitulatif_page/_commentaires_flux_spec.rb
+++ /dev/null
@@ -1,45 +0,0 @@
-require 'spec_helper'
-
-feature '_Commentaires_Flux Recapitulatif#Show Page' do
-  let(:dossier) { create(:dossier) }
-  let(:dossier_id) { dossier.id }
-  let(:email_commentaire) { 'mon_mail_de_commentaire@test.com' }
-  let!(:commentaire) { create(:commentaire, dossier: dossier, email: email_commentaire, body: 'ma super description') }
-  let(:body) { 'Commentaire de test' }
-
-  before do
-    visit "/dossiers/#{dossier_id}/recapitulatif"
-  end
-
-  context 'Affichage du flux de commentaire' do
-    scenario 'l\'email du contact est présent' do
-      expect(page).to have_selector('span[id=email_contact]')
-    end
-
-    scenario 'la date du commentaire est présent' do
-      expect(page).to have_selector('span[id=created_at]')
-    end
-
-    scenario 'le corps du commentaire est présent' do
-      expect(page).to have_selector('div[class=description][id=body]')
-    end
-  end
-
-  context 'Affichage du formulaire de commentaire' do
-    scenario 'Le formulaire envoie vers /dossiers/:dossier_id/commentaire en #POST' do
-      expect(page).to have_selector("form[action='/dossiers/#{dossier_id}/commentaire'][method=post]")
-    end
-
-    scenario 'Champs de texte' do
-      expect(page).to have_selector('textarea[id=texte_commentaire][name=texte_commentaire]')
-    end
-
-    scenario 'Champs email' do
-      expect(page).to have_selector('input[id=email_commentaire][name=email_commentaire]')
-    end
-
-    scenario 'Champs email est prérempli' do
-      expect(page).to have_content(email_commentaire)
-    end
-  end
-end
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index b01b0ddf9..c0b07e637 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -65,6 +65,7 @@ RSpec.configure do |config|
 
   config.order = 'random'
 
+  config.include Devise::TestHelpers, type: :view
   config.include Devise::TestHelpers, type: :controller
 
   config.include FactoryGirl::Syntax::Methods
diff --git a/spec/views/dossiers/_infos_dossier_spec.rb b/spec/views/dossiers/_infos_dossier_spec.rb
index 5d723b8e8..686990878 100644
--- a/spec/views/dossiers/_infos_dossier_spec.rb
+++ b/spec/views/dossiers/_infos_dossier_spec.rb
@@ -1 +1,24 @@
-# TODO à écrire
+require 'spec_helper'
+
+describe 'dossiers/_infos_dossier.html.haml', type: :view do
+  let(:dossier) { create(:dossier, :with_entreprise, :with_procedure) }
+
+  let(:maj_infos) { 'Mettre à jour les informations' }
+  let(:proposer) { 'Soumettre mon dossier' }
+
+  before do
+    assign(:dossier, dossier.decorate)
+    assign(:commentaires, dossier.commentaires)
+    render
+  end
+
+  context 'dossier is at state Draft' do
+    it 'button Mettre à jours les informations is present' do
+      expect(rendered).to have_content(maj_infos)
+      expect(rendered).to have_selector("a[href='/dossiers/#{dossier.id}/description?back_url=recapitulatif']");
+    end
+    it 'button Soumettre is present' do
+      expect(rendered).to have_selector("button[type=submit][value='#{soumettre}']");
+    end
+  end
+end
diff --git a/spec/views/recapitulatif/_commentaires_flux_spec.rb b/spec/views/recapitulatif/_commentaires_flux_spec.rb
new file mode 100644
index 000000000..9eaffbc8b
--- /dev/null
+++ b/spec/views/recapitulatif/_commentaires_flux_spec.rb
@@ -0,0 +1,47 @@
+require 'spec_helper'
+
+describe 'recapitulatif/_commentaires_flux.html.haml', type: :view do
+  let(:dossier) { create(:dossier) }
+  let(:dossier_id) { dossier.id }
+  let(:email_commentaire) { 'mon_mail_de_commentaire@test.com' }
+  let!(:commentaire) { create(:commentaire, dossier: dossier, email: email_commentaire, body: 'ma super description') }
+  let(:body) { 'Commentaire de test' }
+
+  before do
+    assign(:dossier, dossier.decorate)
+    assign(:commentaires, dossier.commentaires.all.decorate)
+    render
+  end
+
+  context 'Affichage du flux de commentaire' do
+    it 'l\'email du contact est présent' do
+      expect(rendered).to have_selector('span[id=email_contact]')
+    end
+
+    it 'la date du commentaire est présent' do
+      expect(rendered).to have_selector('span[id=created_at]')
+    end
+
+    it 'le corps du commentaire est présent' do
+      expect(rendered).to have_selector('div[class=description][id=body]')
+    end
+  end
+
+  context 'Affichage du formulaire de commentaire' do
+    it 'Le formulaire envoie vers /dossiers/:dossier_id/commentaire en #POST' do
+      expect(rendered).to have_selector("form[action='/dossiers/#{dossier_id}/commentaire'][method=post]")
+    end
+
+    it 'Champs de texte' do
+      expect(rendered).to have_selector('textarea[id=texte_commentaire][name=texte_commentaire]')
+    end
+
+    it 'Champs email' do
+      expect(rendered).to have_selector('input[id=email_commentaire][name=email_commentaire]')
+    end
+
+    it 'Champs email est prérempli' do
+      expect(rendered).to have_content(email_commentaire)
+    end
+  end
+end