diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index d761efa26..4015e7222 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -21,7 +21,7 @@ const appRoutes: Routes = [
   { path: 'projects', component: ProjectsComponent},
   { path: 'project', component: ProjectDetailedComponent},
   { path: 'dmps', component: DmpComponent},
-  { path: 'dmp', component: DmpDetailedComponent },
+  { path: 'dmp', component: DmpDetailedComponent},
   { path: 'welcome', component: HomepageComponent},
   { path: '',   redirectTo: '/login', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent },
diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index 31fb54d23..cd2055e64 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -85,8 +85,6 @@
        
       <router-outlet></router-outlet> 
 
-      <!--this should be invisible -->
-
     </div>
 
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/dmps/dmp.component.css b/dmp-frontend/src/app/dmps/dmp.component.css
index f158a1bec..56c7ce68f 100644
--- a/dmp-frontend/src/app/dmps/dmp.component.css
+++ b/dmp-frontend/src/app/dmps/dmp.component.css
@@ -66,4 +66,55 @@ tr.hover:hover > * {
 .url-like{
     color: #0645AD;
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+/* START - FOR DETAILS MODALS */
+
+  .modal.modal-fullscreen .modal-dialog, 
+  .modal.modal-fullscreen .modal-content {
+      position: absolute;
+      left: 1%;
+      right: 1%;
+      top: 1%;
+      bottom: 1%;
+  }
+  .modal.modal-fullscreen .modal-dialog {
+    margin: 0;
+    width: 98%;
+    animation-duration:0.5s;
+  }
+  .modal.modal-fullscreen .modal-content {
+    border: none;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-shadow: inherit;
+    -moz-box-shadow: inherit;
+    -o-box-shadow: inherit;
+    box-shadow: inherit;
+    /* change bg color below */
+   /* background:#1abc9c; */
+  }
+  .modal.modal-fullscreen.force-fullscreen {
+    /* Remove the padding inside the body */
+  }
+  .modal.modal-fullscreen.force-fullscreen .modal-body {
+    padding: 0;
+  }
+  .modal.modal-fullscreen.force-fullscreen .modal-header,
+  .modal.modal-fullscreen.force-fullscreen .modal-footer {
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+  .modal.modal-fullscreen.force-fullscreen .modal-header {
+    top: 0;
+  }
+  .modal.modal-fullscreen.force-fullscreen .modal-footer {
+    bottom: 0;
+  }
+  /* END - FOR DETAILS MODALS */
\ No newline at end of file
diff --git a/dmp-frontend/src/app/dmps/dmp.component.ts b/dmp-frontend/src/app/dmps/dmp.component.ts
index c26303cb6..7cc3155e6 100644
--- a/dmp-frontend/src/app/dmps/dmp.component.ts
+++ b/dmp-frontend/src/app/dmps/dmp.component.ts
@@ -265,7 +265,8 @@ export class DmpComponent implements OnInit{
 
   viewDetailedDMP(dmp){
     console.log(dmp)
-    this.router.navigate(['/dmp'], { queryParams: { "dmpid":dmp.id, "label":dmp.label }});
+    this.router.navigate([{ outlets: { dmpDetails: [ 'dmp' ] }}]); 
+    //this.router.navigate(['/dmp'], { queryParams: { "dmpid":dmp.id, "label":dmp.label }});
   }
 
   viewDetailedProject(dmp){
diff --git a/dmp-frontend/src/app/dmps/dmps.html b/dmp-frontend/src/app/dmps/dmps.html
index 6ffb2966c..777d9d6d6 100644
--- a/dmp-frontend/src/app/dmps/dmps.html
+++ b/dmp-frontend/src/app/dmps/dmps.html
@@ -1,232 +1,269 @@
 
 <table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
-    #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
-    <thead>
-        <tr class="rowFilter">
-            <th colspan="1">
-                <input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
-            </th>
-            <th colspan="1">
-                <button class="btn btn-default " (click)="getDmps('false')">
-                    <span class="glyphicon glyphicon-refresh"></span>
-                </button>
-            </th>
+#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
+<thead>
+    <tr class="rowFilter">
+        <th colspan="1">
+            <input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
+        </th>
+        <th colspan="1">
+            <button class="btn btn-default " (click)="getDmps('false')">
+                <span class="glyphicon glyphicon-refresh"></span>
+            </button>
+        </th>
 
-            <th class="rowFilterTopBorder" colspan="3">
-                <button type="button" class="btn btn-info btnMoreFilters" data-toggle="collapse" data-target="#demo" (click)="clickFilters($event.target)">More filters</button>
-                <div id="demo" class="collapse">
-                    <input style="margin-top: 5px;" class="form-control" type="number" [(ngModel)]="versionFilter" placeholder='Version' />
-                    <select style="margin-top: 5px;" class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown"
-                        #datasetfield>
-                            <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
-                        </select>
-                </div>
-            </th>
-        </tr>
+        <th class="rowFilterTopBorder" colspan="3">
+            <button type="button" class="btn btn-info btnMoreFilters" data-toggle="collapse" data-target="#demo" (click)="clickFilters($event.target)">More filters</button>
+            <div id="demo" class="collapse">
+                <input style="margin-top: 5px;" class="form-control" type="number" [(ngModel)]="versionFilter" placeholder='Version' />
+                <select style="margin-top: 5px;" class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown"
+                    #datasetfield>
+                        <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                    </select>
+            </div>
+        </th>
+    </tr>
 
-        <tr>
-            <th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
-                <mfDefaultSorter by="id">ID</mfDefaultSorter>
-            </th>
-            <th>
-                <mfDefaultSorter by="label">Label</mfDefaultSorter>
-            </th>
-            <th>
-                <mfDefaultSorter by="version">Version</mfDefaultSorter>
-            </th>
-            <th>
-                <mfDefaultSorter by="previous">Previous</mfDefaultSorter>
-            </th>
-            <th>
-                <mfDefaultSorter by="project">Project</mfDefaultSorter>
-            </th>
-            <th>
-                <mfDefaultSorter by="description">Description</mfDefaultSorter>
-            </th>
-            <th>
-                <mfDefaultSorter by="created">Created at</mfDefaultSorter>
-            </th>
-            <th>
-                <mfDefaultSorter by="status">Status</mfDefaultSorter>
-            </th>
-            <th>
-                Actions
-            </th>
-            <th>
-                
-            </th>
+    <tr>
+        <th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
+            <mfDefaultSorter by="id">ID</mfDefaultSorter>
+        </th>
+        <th>
+            <mfDefaultSorter by="label">Label</mfDefaultSorter>
+        </th>
+        <th>
+            <mfDefaultSorter by="version">Version</mfDefaultSorter>
+        </th>
+        <th>
+            <mfDefaultSorter by="previous">Previous</mfDefaultSorter>
+        </th>
+        <th>
+            <mfDefaultSorter by="project">Project</mfDefaultSorter>
+        </th>
+        <th>
+            <mfDefaultSorter by="description">Description</mfDefaultSorter>
+        </th>
+        <th>
+            <mfDefaultSorter by="created">Created at</mfDefaultSorter>
+        </th>
+        <th>
+            <mfDefaultSorter by="status">Status</mfDefaultSorter>
+        </th>
+        <th>
+            Actions
+        </th>
+        <th>
+            
+        </th>
 
-        </tr>
-    </thead>
-    <tbody>
-        <tr class="grayout-empty-table" *ngIf="!mf.data[0]">
-            <td colspan="5">No elements</td>
-        </tr>
+    </tr>
+</thead>
+<tbody>
+    <tr class="grayout-empty-table" *ngIf="!mf.data[0]">
+        <td colspan="5">No elements</td>
+    </tr>
 
-        <tr *ngFor="let dmp of mf.data" class="hover">
-            <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
-            <td class="url-like" (click)="viewDetailedDMP(dmp)">{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }}</td>
-            <td style="width:20px;">{{dmp?.version}}</td>
-            <td style="width:300px;">{{dmp?.previous}}</td>
-            <td class="url-like" (click)="viewDetailedProject(dmp)">{{(dmp?.project?.label?.length > 40) ? (dmp?.project?.label | slice:0:40)+'...':(dmp?.project?.label) }}</td>
-            <td>{{(dmp?.description?.length > 40) ? (dmp?.description | slice:0:40)+'...':(dmp?.description) }}</td>
-            <td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
-            <td>{{dmp?.status | statusToString }}</td>
-            <td>
-                <a class="editGridColumn cursor-link" (click)="editDmp(dmp)"> <!--btn btn-primary btn-rounded css for button style -->
-                    <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a>
-                <a class="editGridColumn cursor-link" (click)="editDmpVersion(dmp)">
-                    <i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i> </a>
-                <a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
-                    <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm"  title="delete DMP"></i> </a>
-                <!--
-                <a class="editGridColumn cursor-link" (click)="selectDmp(dmp)">
-                    <i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a>
-                -->
-            </td>
-            <td style="max-width:100px;">
-                <button type="button" class="btn btn-default table-button" (click)="showDatasetsOfDmp(dmp)"> <i class="fa fa-folder-o" aria-hidden="true"></i> Datasets</button>
-            </td>
-        </tr>
-    </tbody>
-    <tfoot>
-        <tr>
-            <td colspan="1">
-                <button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
-            </td>
-            <td colspan="7">
-                <mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
-            </td>
-        </tr>
-    </tfoot>
+    <tr *ngFor="let dmp of mf.data" class="hover">
+        <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
+        <!--  data-toggle="modal" data-target="#dmp-deatils-fullscreen"  -->
+        <td class="url-like"  (click)="viewDetailedDMP(dmp)">{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }}</td>
+        <td style="width:20px;">{{dmp?.version}}</td>
+        <td style="width:300px;">{{dmp?.previous}}</td>
+        <td class="url-like" (click)="viewDetailedProject(dmp)">{{(dmp?.project?.label?.length > 40) ? (dmp?.project?.label | slice:0:40)+'...':(dmp?.project?.label) }}</td>
+        <td>{{(dmp?.description?.length > 40) ? (dmp?.description | slice:0:40)+'...':(dmp?.description) }}</td>
+        <td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
+        <td>{{dmp?.status | statusToString }}</td>
+        <td>
+            <a class="editGridColumn cursor-link" (click)="editDmp(dmp)"> <!--btn btn-primary btn-rounded css for button style -->
+                <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a>
+            <a class="editGridColumn cursor-link" (click)="editDmpVersion(dmp)">
+                <i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i> </a>
+            <a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
+                <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm"  title="delete DMP"></i> </a>
+            <!--
+            <a class="editGridColumn cursor-link" (click)="selectDmp(dmp)">
+                <i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a>
+            -->
+        </td>
+        <td style="max-width:100px;">
+            <button type="button" class="btn btn-default table-button" (click)="showDatasetsOfDmp(dmp)"> <i class="fa fa-folder-o" aria-hidden="true"></i> Datasets</button>
+        </td>
+    </tr>
+</tbody>
+<tfoot>
+    <tr>
+        <td colspan="1">
+            <button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
+        </td>
+        <td colspan="7">
+            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
+        </td>
+    </tr>
+</tfoot>
 </table>
 <!-- </div> -->
 
 <!--Modal for new and edit DMP-->
 <div class="modal fade" id="newDmpModal" tabindex="-1" role="dialog" aria-labelledby="newDmpModalLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header centered-text">
-                <h4 class="modal-title" id="modalLabel"><b>{{ dmp?.id ? "Edit Data Management Plan" : "New Data Management Plan" }}</b></h4>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
-            </div>
-            <div class="modal-body">
-                <form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
+<div class="modal-dialog" role="document">
+    <div class="modal-content">
+        <div class="modal-header centered-text">
+            <h4 class="modal-title" id="modalLabel"><b>{{ dmp?.id ? "Edit Data Management Plan" : "New Data Management Plan" }}</b></h4>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+            <form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
+                <div class="form-group">
                     <div class="form-group">
-                        <div class="form-group">
-                            <label for="label-name" class="form-control-label">Label:</label>
-                            <input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label" required>
-                        </div>
-                        <label for="recipient-name" class="col-form-label">Project:</label>
-                        <select class="form-control" id="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" name="projectsDropDown" required>
-                                  <option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
-                                  </select>
+                        <label for="label-name" class="form-control-label">Label:</label>
+                        <input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label" required>
                     </div>
-                    <div class="form-group">
-                        <label for="status-name" class="col-form-label">Status:</label>
-                        <select class="form-control" id="statusid" [ngModel]="dmp?.status" (ngModelChange)="dmp.status=$event" name="statusDropDown" (change)="SelectDMPStatus(dmp, $event, oldValue);">
-                        <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="label-name" class="form-control-label">Previous:</label>
-                        <input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event"  name="previous" disabled>
-                    </div>
-                    <div class="form-group">
-                        <label for="abbreviation-text" class="form-control-label">Version:</label>
-                        <input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event"  name="version" disabled>
-                    </div>
-                    <div class="form-group">
-                        <label for="abbreviation-text" class="form-control-label">Description:</label>
-                        <textarea rows="3" class="form-control" id="abbreviation-text" [ngModel]="dmp?.description" (ngModelChange)="dmp.description=$event"  name="description"></textarea>
-                    </div>
-               <!-- 
-                    <div class="form-group">
-                        <label for="reference-text" class="form-control-label">Profile Data:</label>
-                        <textarea class="form-control" id="reference-text" [(ngModel)]="dmp?.profileData" name="profileData"></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="start-date" class="form-control-label">Start Date:</label>
-                        <input class="form-control" id="startDate-date" [(ngModel)]= "dmp?.startDate" name = "startDate">
-                    </div>
-                    <div class="form-group">
-                        <label for="end-date" class="form-control-label">End Date:</label>
-                        <input class="form-control" id="endDate-date" [(ngModel)]= "dmp?.endDate" name = "endDate">
-                    </div> 
-                -->
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                <button type="submit" class="btn btn-primary" (click)="SaveDmp();">Save Dmp</button>
-            </div>
+                    <label for="recipient-name" class="col-form-label">Project:</label>
+                    <select class="form-control" id="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" name="projectsDropDown" required>
+                              <option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                              </select>
+                </div>
+                <div class="form-group">
+                    <label for="status-name" class="col-form-label">Status:</label>
+                    <select class="form-control" id="statusid" [ngModel]="dmp?.status" (ngModelChange)="dmp.status=$event" name="statusDropDown" (change)="SelectDMPStatus(dmp, $event, oldValue);">
+                    <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="label-name" class="form-control-label">Previous:</label>
+                    <input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event"  name="previous" disabled>
+                </div>
+                <div class="form-group">
+                    <label for="abbreviation-text" class="form-control-label">Version:</label>
+                    <input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event"  name="version" disabled>
+                </div>
+                <div class="form-group">
+                    <label for="abbreviation-text" class="form-control-label">Description:</label>
+                    <textarea rows="3" class="form-control" id="abbreviation-text" [ngModel]="dmp?.description" (ngModelChange)="dmp.description=$event"  name="description"></textarea>
+                </div>
+           <!-- 
+                <div class="form-group">
+                    <label for="reference-text" class="form-control-label">Profile Data:</label>
+                    <textarea class="form-control" id="reference-text" [(ngModel)]="dmp?.profileData" name="profileData"></textarea>
+                </div>
+                <div class="form-group">
+                    <label for="start-date" class="form-control-label">Start Date:</label>
+                    <input class="form-control" id="startDate-date" [(ngModel)]= "dmp?.startDate" name = "startDate">
+                </div>
+                <div class="form-group">
+                    <label for="end-date" class="form-control-label">End Date:</label>
+                    <input class="form-control" id="endDate-date" [(ngModel)]= "dmp?.endDate" name = "endDate">
+                </div> 
+            -->
+            </form>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            <button type="submit" class="btn btn-primary" (click)="SaveDmp();">Save Dmp</button>
         </div>
     </div>
 </div>
+</div>
 
 
 <!--Modal for changing version-->
 <div class="modal fade" id="newVersionDmpModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4 class="modal-title" id="modalLabel"><b>Clone Data Management Plan</b></h4>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-            </div>
-            <div class="modal-body">
-                <form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
-                        <div class="form-group">
-                            <label for="label-name" class="form-control-label">Label:</label>
-                            <input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label">
-                        </div>
-                        <div class="form-group" hidden>
-                            <label for="recipient-name" class="col-form-label">Project:</label>
-                            <select class="form-control" [id]="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event"  [name]="projectsDropDown" #datasetfield>
-                                <option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
-                                </select>
-                        </div>
+<div class="modal-dialog" role="document">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h4 class="modal-title" id="modalLabel"><b>Clone Data Management Plan</b></h4>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+        </div>
+        <div class="modal-body">
+            <form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
+                    <div class="form-group">
+                        <label for="label-name" class="form-control-label">Label:</label>
+                        <input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label">
+                    </div>
+                    <div class="form-group" hidden>
+                        <label for="recipient-name" class="col-form-label">Project:</label>
+                        <select class="form-control" [id]="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event"  [name]="projectsDropDown" #datasetfield>
+                            <option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                            </select>
+                    </div>
 
 
-                        <div class="form-group" hidden>
-                            <label for="label-name" class="form-control-label">Previous:</label>
-                            <input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event"  name="previous">
-                        </div>
-                        <div class="form-group" hidden>
-                            <label for="abbreviation-text" class="form-control-label">Version:</label>
-                            <input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version">
-                        </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                <button type="submit" class="btn btn-primary" [disabled]="!dmpForm.form.valid" (click)="cloneDMP(dmp);">Save Dmp</button>
-            </div>
+                    <div class="form-group" hidden>
+                        <label for="label-name" class="form-control-label">Previous:</label>
+                        <input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event"  name="previous">
+                    </div>
+                    <div class="form-group" hidden>
+                        <label for="abbreviation-text" class="form-control-label">Version:</label>
+                        <input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version">
+                    </div>
+            </form>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            <button type="submit" class="btn btn-primary" [disabled]="!dmpForm.form.valid" (click)="cloneDMP(dmp);">Save Dmp</button>
         </div>
     </div>
 </div>
+</div>
 
 <div class="modal" tabindex="-1" id="messageForChangingStatus" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-        <div class="modal-header">
-            <h5 class="modal-title">Change Staus</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <p>The submitted status is available only when all the DMP's datasets are "Submitted" or "Cancel"</p>
-        </div>
-        <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
-        </div>
-        </div>
+<div class="modal-dialog" role="document">
+    <div class="modal-content">
+    <div class="modal-header">
+        <h5 class="modal-title">Change Staus</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        <p>The submitted status is available only when all the DMP's datasets are "Submitted" or "Cancel"</p>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
+    </div>
     </div>
 </div>
+</div>
+
+
+
+<!-- MODAL FOR DETAILS -->
+<button class="btn btn-primary" data-toggle="modal" data-target="#dmp-deatils-fullscreen" contenteditable="false">Open Fullscreen Modal</button>
+
+<div class="modal fade modal-fullscreen  footer-to-bottom" id="dmp-deatils-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog animated zoomInLeft">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <h4 class="modal-title">Modal title</h4>
+            </div>
+            <div class="modal-body">
+                <p class="">One fine body…</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
+
+
+
+
+
+
+
+<router-outlet name="dmpDetails"></router-outlet> 
+
+
 
 
 <!-- Confirmation module- do not delete -->
diff --git a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.spec.ts b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.spec.ts
deleted file mode 100644
index ee11f64bd..000000000
--- a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GooggleSignInComponent } from './googgle-sign-in.component';
-
-describe('GooggleSignInComponent', () => {
-  let component: GooggleSignInComponent;
-  let fixture: ComponentFixture<GooggleSignInComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ GooggleSignInComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(GooggleSignInComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
index 1eeaa0cde..718a431e2 100644
--- a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
+++ b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
@@ -23,7 +23,7 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
   }
 
   ngOnInit() {
-    //this.googleInit();
+
   }
 
   ngAfterViewInit() {
@@ -47,7 +47,8 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
   public auth2: any;
   
   public googleInit() {
-    
+
+
     gapi.load('auth2', () => {
       this.auth2 = gapi.auth2.init({
         client_id: this.clientId,
@@ -56,15 +57,15 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
       });
 
       //RE-Render the button (due to known issues of google-button with angular's lifecycle)
-      gapi.signin2.render('googleBtn', {
-        'onsuccess': console.log("SUCCESSFULLY RERENDERED THE BUTTON"),
-        'onfailure': console.log("FAILED TO RERENDER THE BUTTON")
-      });
+      gapi.signin2.render('googleBtn');
 
       var buttonElement = this.element.nativeElement.querySelector('#googleBtn'); 
       this.attachSignin(buttonElement);
       
+      
     });
+
+
   }
   
   public attachSignin(element) {
diff --git a/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.spec.ts b/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.spec.ts
deleted file mode 100644
index cd7c7a960..000000000
--- a/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MainSignInComponent } from './main-sign-in.component';
-
-describe('MainSignInComponent', () => {
-  let component: MainSignInComponent;
-  let fixture: ComponentFixture<MainSignInComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MainSignInComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MainSignInComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts b/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
index dec9c4e81..26d233632 100644
--- a/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
+++ b/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
@@ -18,6 +18,8 @@ export class DmpDetailedComponent implements OnInit {
 
   ngOnInit() {
 
+    console.log("LOADING DmpDetailedComponent")
+
     let sub = this.route.queryParams.subscribe(params => {
 
       let dmpid = params.dmpid;
@@ -25,7 +27,6 @@ export class DmpDetailedComponent implements OnInit {
       this.serverService.getDmp(dmpid, getParams).subscribe(
         response => {
           this.dmp = response;
-          debugger;
         },
         error => {
           console.log("Could not load dmp");