diff --git a/frontend/app/scripts/controllers/userSpace.js b/frontend/app/scripts/controllers/userSpace.js
index 4b3d101..2eebb16 100755
--- a/frontend/app/scripts/controllers/userSpace.js
+++ b/frontend/app/scripts/controllers/userSpace.js
@@ -5,12 +5,61 @@
         .controller('UserSpaceCtrl', ['$scope', '$state',
             function ($scope, $state) {
 
+                $scope.toggleAccordion = toggleAccordion;
+                $scope.isOpenAccordion = isOpenAccordion;
+                $scope.logout = logout;
+                $scope.exportBooklet = exportBooklet;
+
                 init();
 
                 // ---------------------------------------------------------------
 
                 function init() {
-                   
+
+                    $scope.periods = [
+                        {
+                            number : 2,
+                            company: {
+                                icon : 'add',
+                                comment: ''
+                            }, 
+                            university: {
+                                icon : 'add',
+                                comment: ''
+                            }
+                        },{
+                            number : 1,
+                            company: {
+                                icon : 'add',
+                                comment: ''
+                            }, 
+                            university: {
+                                icon : 'add',
+                                comment: ''
+                            }
+                        }
+                    ];
+                }
+
+                function toggleAccordion(value, isCompany, index) {
+                    var newValue = (value === 'add') ? 'remove': 'add';
+                    if(isCompany === 'true') {
+                        $scope.periods[index].company.icon = newValue;
+                    } else {
+                        $scope.periods[index].university.icon = newValue;
+                    }
+                }
+
+                function isOpenAccordion(value) {
+                    return (value === 'remove');
+                }
+
+                function logout() {
+                     $state.go('login');
+                }
+
+                function exportBooklet() {
+                    console.log('export booklet .. TODO ');
                 }
 
                 // ---------------------------------------------------------------
diff --git a/frontend/app/views/userSpace.html b/frontend/app/views/userSpace.html
index 07c68bd..099911a 100755
--- a/frontend/app/views/userSpace.html
+++ b/frontend/app/views/userSpace.html
@@ -4,60 +4,82 @@
     <div class="md-toolbar-tools">
       <h2 md-truncate flex>Bienvenue Claire Veronneau</h2>
 
-      <md-button>
+      <md-button ng-click="logout()">
         Se déconnecter
       </md-button>
     </div>
 
   </md-toolbar>
 </div>
+
 <div layout="row" layout-align="center none">
   <md-content flex="80">
     <div layout="row" layout-align="end">
-      <md-button class="md-raised">Exporter le livret</md-button>
+      <md-button class="md-raised" ng-click="exportBooklet()">Exporter le livret</md-button>
     </div>
 
-    <md-card>
+    <md-card ng-repeat="period in periods">
       <md-card-title>
         <md-card-title-text>
-          <span class="md-headline">Période 2</span>
+          <h2 class="md-display-1">Période {{period.number}}</h2>
         </md-card-title-text>
       </md-card-title>
       <md-card-content>
-        <p>
-          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest
-          Greene's musical language: feel it. It's a simple request, as well...
-        </p>
-        <p>
-          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest
-          Greene's musical language: feel it. It's a simple request, as well...
-        </p>
-        <p>
-          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest
-          Greene's musical language: feel it. It's a simple request, as well...
-        </p>
-      </md-card-content>
-    </md-card>
-    <md-card>
-      <md-card-title>
-        <md-card-title-text>
-          <span class="md-headline">Période 1</span>
-        </md-card-title-text>
-      </md-card-title>
-      <md-card-content>
-        <p>
-          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest
-          Greene's musical language: feel it. It's a simple request, as well...
-        </p>
-        <p>
-          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest
-          Greene's musical language: feel it. It's a simple request, as well...
-        </p>
-        <p>
-          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest
-          Greene's musical language: feel it. It's a simple request, as well...
-        </p>
+
+
+        <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>
       </md-card-content>
     </md-card>
+
   </md-content>
 </div>
\ No newline at end of file