diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
index 3ca348344..5eba245c4 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
@@ -1,6 +1,6 @@
 <div [formGroup]="form" class="form-group">
-
-	<div *ngFor="let field of group.groupFields" >
+    <h4 [id]= "group.key">{{group.title}}</h4>
+	<div *ngFor="let field of group.groupFields" >   
       <df-field [field]="field" [form]="form" [dataModel] = "dataModel"></df-field>
     </div>
 
diff --git a/dmp-frontend/src/app/login/login-page.html b/dmp-frontend/src/app/login/login-page.html
index b81717cca..748752031 100644
--- a/dmp-frontend/src/app/login/login-page.html
+++ b/dmp-frontend/src/app/login/login-page.html
@@ -4,18 +4,46 @@
 </head>
 
 <body>
-        
+
     <!-- <div class="g-signin2" data-onsuccess="onSignIn"></div> -->
+
     <div class="container">
+
+        <form class="form-signin">
+            <h2 class="form-signin-heading">Please sign in</h2>
+            <label for="inputEmail" class="sr-only">Email address</label>
+            <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
+            <label for="inputPassword" class="sr-only">Password</label>
+            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
+            <div class="checkbox">
+                <label>
+                        <input type="checkbox" value="remember-me"> Remember me
+                      </label>
+            </div>
+            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+        </form>
+
+        <div class="form-signin">
+            <div class="col-md-6">
+                <h5>Sign in with</h5>
+            </div>
+            <google-signin [clientId]="myClientId" (googleSignInSuccess)="onGoogleSignInSuccess($event)"></google-signin>
+        </div>
+
+    </div>
+    <!-- /container -->
+
+
+    <!-- <div class="container">
         <div class="col-md-3 text-center">
-           <h4>Please Sign in</h4> 
+           <h4>Please Sign in with Google Account</h4> 
         </div>
         <div class="col-md-3 text-center">
             <div>
                 <google-signin [clientId]="myClientId" (googleSignInSuccess)="onGoogleSignInSuccess($event)"></google-signin>
             </div>
         </div>
-    </div>
+    </div> -->
 
     <!-- <button routerLink="/dynamic-form">Go to form</button>
     <button routerLink="/projects">Go to projects</button> trial for routing -->
diff --git a/dmp-frontend/src/app/projects/projects.component.ts b/dmp-frontend/src/app/projects/projects.component.ts
index 594be4f9f..8322218a9 100644
--- a/dmp-frontend/src/app/projects/projects.component.ts
+++ b/dmp-frontend/src/app/projects/projects.component.ts
@@ -8,12 +8,12 @@ import { Project } from '../entities/model/project';
   selector: 'projects',
   template: `
   <h1 class="title">Projects</h1>
-  <a href="#" onclick="signOut();">Sign out</a>
-    <ul class="items">
+  
+    <ul class="list-group col-md-4">
       <li *ngFor="let project of projects"
-        [class.selected]="project.id === selectedId">
-        <a [routerLink]="['/dynamic-form', project.id]">
-          <span class="badge">{{ project.id }}</span>{{ project.name }}
+        class="list-group-item">
+        <a [routerLink]="['/dynamic-form', project.id]" >
+          {{ project.name }}
         </a>
       </li>
     </ul>
diff --git a/dmp-frontend/src/styles.css b/dmp-frontend/src/styles.css
index 90d4ee007..1b86635f8 100644
--- a/dmp-frontend/src/styles.css
+++ b/dmp-frontend/src/styles.css
@@ -1 +1,42 @@
 /* You can add global styles to this file, and also import other style files */
+
+body {
+    padding-top: 40px;
+    padding-bottom: 40px;
+    background-color: #eee;
+  }
+  
+  .form-signin {
+    max-width: 330px;
+    padding: 15px;
+    margin: 0 auto;
+    box-shadow: 0px 0px 0px 1px #d8d4d4;
+  }
+  .form-signin .form-signin-heading,
+  .form-signin .checkbox {
+    margin-bottom: 10px;
+  }
+  .form-signin .checkbox {
+    font-weight: normal;
+  }
+  .form-signin .form-control {
+    position: relative;
+    height: auto;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    padding: 10px;
+    font-size: 16px;
+  }
+  .form-signin .form-control:focus {
+    z-index: 2;
+  }
+  .form-signin input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .form-signin input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
