diff --git a/frontend/Gruntfile.js b/frontend/Gruntfile.js
index b8244a2..2cebbca 100644
--- a/frontend/Gruntfile.js
+++ b/frontend/Gruntfile.js
@@ -70,9 +70,9 @@ module.exports = function (grunt) {
     // The actual grunt server settings
     connect: {
       options: {
-        port: 9000,
+        port: 8081,
         // Change this to '0.0.0.0' to access the server from outside.
-        hostname: 'localhost',
+        hostname: '0.0.0.0',
         livereload: 35729
       },
       livereload: {
diff --git a/frontend/app/index.html b/frontend/app/index.html
index 509f26b..f2a7302 100644
--- a/frontend/app/index.html
+++ b/frontend/app/index.html
@@ -53,6 +53,7 @@
         <script src="scripts/app.js"></script>
         <script src="scripts/controllers/login.js"></script>
         <script src="scripts/controllers/studentSpace.js"></script>
+        <script src="scripts/controllers/responsableFormationSpace.js"></script>
         <!-- endbuild -->
 </body>
 </html>
diff --git a/frontend/app/scripts/app.js b/frontend/app/scripts/app.js
index a62f5f9..70ad11e 100755
--- a/frontend/app/scripts/app.js
+++ b/frontend/app/scripts/app.js
@@ -36,5 +36,11 @@ app.config(function ($stateProvider, $urlRouterProvider) {
             url: '/espace-etudiant',
             templateUrl: 'views/studentSpace.html',
             controller: 'StudentSpaceCtrl'
+        })
+        
+        .state('responsableFormationSpace', {
+            url: '/espace-formation',
+            templateUrl: 'views/responsableFormationSpace.html',
+            controller: 'ResponsableFormationSpaceCtrl'
         });
     });
\ No newline at end of file
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index dfbcc8f..b4e0e9b 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -34,4 +34,44 @@ body > ui-view > div > div.bg-booklet.layout-align-center-center.layout-row.flex
 
 .p-home {
   font-size: 0.6em;
+}
+
+/* ajout sitan */
+
+md-tab-data{
+  opacity: 1;
+  display: table;
+  right: 0;
+  left: initial;
+  z-index: 20;
+}
+
+.demo-tab div.principaux_formation {
+  padding: 5px;
+  margin: 7px;
+  border-bottom: 3px solid grey;
+}
+
+.div_periodes {
+  background-color: teal; padding: 5px; border: 2px solid green;margin:7px;min-height: 50px;
+}
+
+.principaux_formation > div {
+  background-color: snow;
+  
+}
+
+.principaux_formation form {
+     background-color: snow;
+    /* margin-top: 8px; */
+    margin: 8px;
+    padding: 10px;
+    min-height: 50px;
+    border: 1px solid black;
+}
+
+.div_studentsList {
+      padding: 8px;
+    /* border: 1px solid; */
+    background-color: yellowgreen;
 }
\ No newline at end of file
diff --git a/frontend/app/views/studentSpace.html b/frontend/app/views/studentSpace.html
index 099911a..b3c3933 100755
--- a/frontend/app/views/studentSpace.html
+++ b/frontend/app/views/studentSpace.html
@@ -13,73 +13,37 @@
 </div>
 
 <div layout="row" layout-align="center none">
-  <md-content flex="80">
-    <div layout="row" layout-align="end">
-      <md-button class="md-raised" ng-click="exportBooklet()">Exporter le livret</md-button>
-    </div>
-
-    <md-card ng-repeat="period in periods">
-      <md-card-title>
-        <md-card-title-text>
-          <h2 class="md-display-1">Période {{period.number}}</h2>
-        </md-card-title-text>
-      </md-card-title>
-      <md-card-content>
-
-
-        <div layout="column" layout-fill>
-          <div flex class="green darken-2">
-            <h3 class="md-headline" style="padding-left : 10px">
-              Université
-              <md-button class="md-icon-button" ng-click="toggleAccordion(period.university.icon, 'false', $index)" aria-label="call">
-                <ng-md-icon icon="{{period.university.icon}}" style="fill: blue" size="24"></ng-md-icon>
-              </md-button>
-            </h3>
-
-            <md-content flex layout-padding ng-if="isOpenAccordion(period.university.icon)">
-              <p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque
-                nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro
-                labitur reformidans accommodare, cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans
-                no. Sed laudem aliquam ne.</p><br/>
-
-              <md-input-container class="md-block">
-                <label>Commentaire de période</label>
-                <textarea ng-model="period.university.comment" md-maxlength="150" rows="5" md-select-on-focus></textarea>
-              </md-input-container>
-
-              <div layout="row" layout-align="end">
-                <md-button class="md-raised">Enregistrer</md-button>
-              </div>
-            </md-content>
-          </div>
-
-          <div flex class="green darken-3">
-            <h3 class="md-headline" style="padding-left : 10px">
-              Entreprise
-              <md-button class="md-icon-button" ng-click="toggleAccordion(period.company.icon, 'true', $index)" aria-label="call">
-                <ng-md-icon icon="{{period.company.icon}}" style="fill: blue" size="24"></ng-md-icon>
-              </md-button>
-            </h3>
-
-            <md-content flex layout-padding ng-if="isOpenAccordion(period.company.icon)">
-              <p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque
-                nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro
-                labitur reformidans accommodare, cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans
-                no. Sed laudem aliquam ne.</p>
-
-              <md-input-container class="md-block">
-                <label>Commentaire de période</label>
-                <textarea ng-model="period.company.comment" md-maxlength="150" rows="5" md-select-on-focus></textarea>
-              </md-input-container>
-
-              <div layout="row" layout-align="end">
-                <md-button class="md-raised">Enregistrer</md-button>
-              </div>
-            </md-content>
-          </div>
+  <div ng-controller="AppCtrl" class="sample" layout="column" ng-cloak>
+  <md-content class="md-padding">
+    <md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect>
+      <md-tab ng-repeat="tab in tabs"
+              ng-disabled="tab.disabled"
+              label="{{tab.title}}">
+        <div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
+          <div ng-bind="tab.content"></div>
+          <br/>
+          <md-button class="md-primary md-raised" ng-click="removeTab( tab )" ng-disabled="tabs.length <= 1">Remove Tab</md-button>
         </div>
-      </md-card-content>
-    </md-card>
-
+      </md-tab>
+    </md-tabs>
   </md-content>
+
+  <form ng-submit="addTab(tTitle,tContent)" layout="column" class="md-padding" style="padding-top: 0;">
+    <div layout="row" layout-sm="column">
+      <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 || !tContent" type="submit" style="margin-right: 0;">Add Tab</md-button>
+    </div>
+  </form>
+
+</div>
 </div>
\ No newline at end of file