diff --git a/frontend/app/images/icon.png b/frontend/app/images/icon.png
new file mode 100644
index 0000000..c4dce5f
Binary files /dev/null and b/frontend/app/images/icon.png differ
diff --git a/frontend/app/scripts/controllers/responsableFormationSpace.js b/frontend/app/scripts/controllers/responsableFormationSpace.js
new file mode 100755
index 0000000..786ab42
--- /dev/null
+++ b/frontend/app/scripts/controllers/responsableFormationSpace.js
@@ -0,0 +1,70 @@
+(function () {
+    'use strict';
+    
+    angular.module('clientApp')
+        .controller('ResponsableFormationSpaceCtrl', ['$scope', '$state', '$log', '$filter',
+            function ($scope, $state, $log, $filter) {
+              var imagePath = '../images/icon.png';
+                $scope.logout = logout;
+                $scope.tabs = [];
+                init();
+                
+                function init() {
+                    $scope.selectedIndex = 0;
+                    var tabs = [
+                    {//periode 1
+                        "id":1,
+                      "title": 'One',
+                      "periodes": [//periodes pour tab0
+                          {"id":1, "plages": [//Plage pour periode 1
+                            {"id": 0,"name": "null"}
+                            ]
+                            
+                          }
+                        ],
+                      "students": [ {"face" : imagePath, "nom_prenom": 'Normand Léa'} ]
+                    },
+                    {//periode 2
+                        "id":2,
+                      "title": 'Two',
+                      "periodes": [],
+                      "students": []
+                    }],
+                    selected = null,
+                    previous = null;
+                    $scope.tabs = tabs;
+                    $scope.$watch('selectedIndex', function(current, old){
+                      previous = selected;
+                      selected = tabs[current];
+                      if ( old + 1 && (old != current)) $log.debug('Goodbye ' + previous.title + '!');
+                      if ( current + 1 )                $log.debug('Hello ' + selected.title + '!');
+                    });
+                }
+                    $scope.addTab = function (title) {
+                      //view = view || title + " Content View";
+                      $scope.tabs.push({ title: title, disabled: false, periodes: [] });
+                    };
+                    $scope.removeTab = function (indexTab) {
+                      $scope.tabs.splice(indexTab, 1);
+                    };
+                    $scope.addRecordPeriode = function(id_tab){
+                      var temp = $filter('filter')(  $scope.tabs , {id: id_tab })[0];
+                      temp.periodes.push({"id": temp.periodes.length + 1, "plages":[]});
+                    }
+                    $scope.addRecordPlage = function(id_tab, id_periode){
+                      var temp = $filter('filter')(  $scope.tabs , {id: id_tab })[0];
+                      var temp2 = $filter('filter')(  temp.periodes, {id: id_periode })[0];
+                      temp2.plages.push({"id": id_periode + 1,"name": "null"});
+                    }
+                    $scope.addStudent = function(id_tab,nom_pre_s) {
+                      var temp = $filter('filter')(  $scope.tabs , {id: id_tab })[0];
+                      temp.students.push({ face: imagePath, nom_prenom: nom_pre_s });
+                    };
+  
+          function logout() {
+              $state.go('login');
+          }
+  
+      }]);
+  
+})();
\ No newline at end of file
diff --git a/frontend/app/views/responsableFormationSpace.html b/frontend/app/views/responsableFormationSpace.html
new file mode 100755
index 0000000..858ccf3
--- /dev/null
+++ b/frontend/app/views/responsableFormationSpace.html
@@ -0,0 +1,136 @@
+<div layout="column">
+  <md-toolbar>
+
+    <div class="md-toolbar-tools">
+      <h2 md-truncate flex>Bienvenue Claire Veronneau</h2>
+
+      <md-button ng-click="logout()">
+        Se déconnecter
+      </md-button>
+    </div>
+
+  </md-toolbar>
+</div>
+<div layout="row" style="padding: 1%;">
+  <div flex="70">
+    <div layout="column" ng-cloak>
+      <md-content class="md-padding">
+        <md-tabs style="height : 100vh" md-selected="selectedIndex" md-border-bottom md-autoselect>
+          <md-button class="md-primary">+</md-button>
+          <md-button class="md-primary" ng-click="removeTab( selectedIndex )" ng-disabled="tabs.length <= 1">-</md-button>
+          
+          <md-tab ng-repeat="tab in tabs" ng-disabled="tab.disabled" label="{{tab.title}}" style="height : 100vh">
+            
+            <div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
+              
+              <div  layout="column">
+                <div flex class="principaux_formation">
+                  <div layout="column">
+                    <md-button class="md-raised md-primary" ng-click="addRecordPeriode(tab.id)">Créer une période</md-button>
+                    
+                    <div flex class="div_periodes" ng-repeat="periode in tab.periodes">
+                      <md-button class="md-raised md-primary" ng-click="addRecordPlage(tab.id, periode.id)">Créer une plage de saisie</md-button>
+                      
+                      <div class="div_plages_de_saisies" ng-repeat="plage in periode.plages">
+                        <form class="period_forms" name="period_form1">
+                          <div layout-gt-sm="row">
+                            <md-input-container md-no-float class="md-block" flex-gt-sm>
+                              <md-select name="type" ng-model="periode.type" required placeholder='Type de la période'>
+                                <md-option value="entreprise">Entreprise</md-option>
+                                <md-option value="formation">Formation</md-option>
+                              </md-select>
+                            </md-input-container>
+                            <md-input-container class="md-block" flex-gt-sm>
+                              <label>Date de début</label>
+                              <md-datepicker ng-model="user.submissionDateBegin"></md-datepicker>
+                            </md-input-container>
+                            <md-input-container class="md-block" flex-gt-sm>
+                              <label>Date de fin</label>
+                              <md-datepicker ng-model="user.submissionDateEnd"></md-datepicker>
+                            </md-input-container>
+                          </div>
+                        </form>
+                      </div>
+                      
+                    </div>
+                    
+                  </div>
+                </div>
+                
+                <md-content layout-padding>
+                  
+                <div flex class="principaux_formation" style="background-color: crimson">
+                  
+                    <form name="administrativesData_form" data-ng-submit="">
+                      <h2>Données administratives communes</h2>
+                      <md-input-container md-no-float class="md-block">
+                        <input ng-model="composanteFormation" placeholder="Composante de la formation">
+                      </md-input-container>
+                      <md-input-container md-no-float class="md-block">
+                        <input ng-model="reponsableFormation" placeholder="Responsable pédagogique de la formation">
+                      </md-input-container>
+                      <div>
+                        <md-button type="submit">Submit</md-button>
+                      </div>
+                  </form>
+                  
+                  <form name="studentsList_form">
+                    <h2>Liste des étudiants</h2>
+                    
+                    <md-list-item class="md-3-line" ng-repeat="item in tab.students" ng-click="null">
+                      <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.nom}}" />
+                      <div class="md-list-item-text" layout="column">
+                        <h3>{{ item.nom_prenom }}</h3>
+                        <p>Alternance à : </p>
+                      </div>
+                    </md-list-item>
+                    
+                    <div class="div_studentsList">
+                      <md-input-container md-no-float class="md-block">
+                        <input ng-model="infos_student" placeholder="Nom Prénom de l'étudiant">
+                      </md-input-container>
+                      <md-button class="md-raised md-primary" ng-click="addStudent(tab.id,infos_student)">Ajouter</md-button>
+                    </div>
+                    
+                  </form>
+                  
+                  <form name="livret_form"></form>
+                </div>
+                </md-content>
+              </div>
+              
+            </div>
+            
+          </md-tab>
+        </md-tabs>
+      </md-content>
+
+  <!--  <form ng-submit="addTab(tTitle)" layout="column" class="md-padding" style="padding-top: 0;"> -->
+    <!--  <div layout="row" layout-sm="column" style="height : 100vh"> -->
+       <!-- <div flex style="position: relative;">
+          <h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 35px; white-space: nowrap;">Add a new Tab:</h2>
+        </div> -->
+      <!--  <md-input-container>
+          <label for="label">Label</label>
+          <input type="text" id="label" ng-model="tTitle">
+        </md-input-container> -->
+        <!--
+        <md-input-container>
+          <label for="content">Content</label>
+          <input type="text" id="content" ng-model="tContent">
+        </md-input-container>
+        -->
+     <!--   <md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle" type="submit" style="margin-right: 0;">Add Tab</md-button>
+      </div>
+    </form> -->
+  </div>
+</div>
+
+<div flex="30">
+    <div layout="column" ng-cloak>
+      <md-content class="md-padding">jj
+      </md-content>
+    </div>
+</div>
+
+</div>
\ No newline at end of file