diff --git a/app/main/templates/agent.html b/app/main/templates/agent.html
index b31f2ab..e2a2b7b 100644
--- a/app/main/templates/agent.html
+++ b/app/main/templates/agent.html
@@ -1,7 +1,8 @@
 {% extends "base_page.html" %}
 
 {% block more_heads %}
-<link href="{{ url_for('main.static', filename='css/charges.css', version=config.VERSION) }}" rel="stylesheet" type="text/css"/>
+<link href="{{ url_for('main.static', filename='css/charges.css', version=config.VERSION) }}" rel="stylesheet"
+      type="text/css"/>
 {% endblock %}
 
 {% block content %}
@@ -9,25 +10,84 @@
 <!-- Invisible span to definte wich ul and a in the navbar are actived -->
 <span id="nav_actived" style="display: none">agent,agents</span>
 
-<div id="projects_chart" class="charge_chart"></div>
+<div class="card">
+  <div class="card-header">
+    Fiche Agent
+  </div>
+  <div class="card-body">
+    <dl class="row agent">
+      <dt class="col-sm-2 text-right">ID :</dt>
+      <dd class="col-sm-10 text-left">{{agent.id}}</dd>
+      <dt class="col-sm-2 text-right">Genre :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">Date de naissance :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">E-mail :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      {# TODO: put different spacing #}
+      <dt class="col-sm-2 text-right"></dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">Statut :</dt>
+      <dd class="col-sm-10 text-left">{{agent.status_id}}</dd>
+      <dt class="col-sm-2 text-right">Organisme :</dt>
+      <dd class="col-sm-10 text-left">{{agent.company_id}}</dd>
+      <dt class="col-sm-2 text-right">Corps :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">BAP :</dt>
+      <dd class="col-sm-10 text-left">{{agent.bap_id}}</dd>
+      {# TODO: puth different spacing #}
+      <dt class="col-sm-2 text-right"></dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">Quotité :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">Date arrivée :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">Date départ :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      {# TODO: put different spacing #}
+      <dt class="col-sm-2 text-right"></dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">Commentaires :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      {# TODO: put different spacing #}
+      <dt class="col-sm-2 text-right"></dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">APPRENTI</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">Fiche de poste :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      {# TODO: put different spacing #}
+      <dt class="col-sm-2 text-right"></dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">Compétences :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+      <dt class="col-sm-2 text-right">Besoin en formation :</dt>
+      <dd class="col-sm-10 text-left"></dd>
+    </dl>
+
+    <a class="card-link disabled" href="#">Modifier</a>
+  </div>
+</div>
+
+<div class="charge_chart" id="projects_chart"></div>
 <table id="charge_table">
   <thead>
   <tr>
-  {% for header in charges[0] %}
+    {% for header in charges[0] %}
     <th>{{header}}</th>
-  {% endfor %}
+    {% endfor %}
   </tr>
   </thead>
   <tbody>
   {% for line in charges[1:] %}
   <tr>
     {% for i in range(line|length) %}
-      {%if  'Charge' in charges[0][i]  %}
-        {% set charge = line[i] | int %}
-        <td>{{charge / 100}}</td>
-      {%else%}
-        <td>{{line[i]}}</td>
-      {%endif%}
+    {%if 'Charge' in charges[0][i] %}
+    {% set charge = line[i] | int %}
+    <td>{{charge / 100}}</td>
+    {%else%}
+    <td>{{line[i]}}</td>
+    {%endif%}
     {% endfor %}
   </tr>
   {% endfor %}
@@ -43,7 +103,7 @@
 <script>
   build_chart("#projects_chart",
       "{{url_for('main.charge_agent_csv', agent_id=agent.id)}}",
-      "{{agent.secondname}}"+ " {{agent.firstname}}",
+      "{{agent.secondname}}" + " {{agent.firstname}}",
       "project");
 </script>
 {% endblock %}
diff --git a/app/main/templates/agent_edit.html b/app/main/templates/agent_edit.html
new file mode 100644
index 0000000..4990d4d
--- /dev/null
+++ b/app/main/templates/agent_edit.html
@@ -0,0 +1,42 @@
+{% extends "base_page.html" %}
+{% block content %}
+{% if agent %}
+Modifier l'agent {{ agent.name}}.
+{% else %}
+Ajouter un nouvel agent.
+{% endif %}
+<form action="{{url_for('main.agent_edit')}}" method="post">
+  {% if agent %}
+  <input class="form-control" id="agent_id" name="agent_id" type="hidden" value="{{agent.id}}">
+  {% endif %}
+  <div class="form-group">
+    <label for="firstname">Nom</label>
+    <input class="form-control" id="firstname" name="firstname" type="text" value="{{agent.firstname}}">
+  </div>
+  <div class="form-group">
+    <label for="secondname">Prénom</label>
+    <input class="form-control" id="secondname" name="secondname" type="text" value="{{agent.secondname}}">
+  </div>
+  <div class="form-group">
+    <label for="virtual">Virtuel</label>
+    <input class="form-control" id="virtual" name="virtual" type="text" value="{{agent.virtual}}">
+  </div>
+  <div class="form-group">
+    <label for="company">Structure</label>
+    <input class="form-control" id="company" name="company" type="text" value="{{agent.company.name}}">
+  </div>
+  <div class="form-group">
+    <label for="grade">Grade</label>
+    <input class="form-control" id="grade" name="grade" type="text" value="{{agent.grade.name}}">
+  </div>
+  <div class="form-group">
+    <label for="status">Statut</label>
+    <input class="form-control" id="status" name="status" type="text" value="{{agent.status.name}}">
+  </div>
+  <div class="form-group">
+    <label for="bap">Bap</label>
+    <input class="form-control" id="bap" name="bap" type="text" value="{{agent.bap.name}}">
+  </div>
+  <input class="btn btn-dark" type="submit" value="Valider">
+</form>
+{% endblock %}
diff --git a/app/static/css/style.css b/app/static/css/style.css
index 497c072..fd93882 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -8,8 +8,9 @@
 
 @media (min-width: 1670px) {
     .sidebar {
-        max-width:12.499999995%;
+        max-width: 12.499999995%;
     }
+}
 /*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 
 html {
@@ -106,4 +107,8 @@ nav.sidebar a.disabled {
     border: solid black 1pt;
     margin-bottom: 3em;
     border-radius: 0;
+}
+
+dl.agent {
+    line-height: 1.2;
 }
\ No newline at end of file
--
libgit2 0.21.2