diff --git a/dmp-frontend/src/app/models/login/Credential.ts b/dmp-frontend/src/app/models/login/Credential.ts
index 6af148802..063f7a83a 100644
--- a/dmp-frontend/src/app/models/login/Credential.ts
+++ b/dmp-frontend/src/app/models/login/Credential.ts
@@ -1,4 +1,4 @@
 export class Credential {
 	public username: string;
-	public password: string;
+	public secret: string;
 }
diff --git a/dmp-frontend/src/app/services/auth/auth.service.ts b/dmp-frontend/src/app/services/auth/auth.service.ts
index 340c8a989..c9c8a76a6 100644
--- a/dmp-frontend/src/app/services/auth/auth.service.ts
+++ b/dmp-frontend/src/app/services/auth/auth.service.ts
@@ -76,6 +76,22 @@ export class AuthService {
 			});
 	}
 
+	public nativeLogin(credentials: Credential): Observable<Principal> {
+		const url = this.actionUrl + 'nativelogin';
+
+		return this.http.post(url, credentials, { headers: this.headers })
+			.map((res: any) => {
+				const principal = this.current(JsonSerializer.fromJSONObject(res.payload, Principal));
+				//this.loginContextSubject.next(true);
+				return principal;
+			})
+			.catch((error: any) => {
+				//this.loginContextSubject.next(false);
+				return Observable.throw(error);
+			});
+	}
+
+
 	public logout(): void {
 		const url = this.actionUrl + 'logout';
 		const principal = this.current();
diff --git a/dmp-frontend/src/app/user-management/login.module.ts b/dmp-frontend/src/app/user-management/login.module.ts
index 6527007ec..08cdfcdb1 100644
--- a/dmp-frontend/src/app/user-management/login.module.ts
+++ b/dmp-frontend/src/app/user-management/login.module.ts
@@ -1,3 +1,4 @@
+import { FormsModule } from '@angular/forms';
 import { TwitterLoginComponent } from './login/twitter-login/twitter-login.component';
 import { SnackBarNotificationComponent } from '../shared/components/notificaiton/snack-bar-notification.component';
 import { LinkedInLoginComponent } from './login/linkedin-login/linkedin-login.component';
@@ -14,7 +15,8 @@ import { CommonModule } from '@angular/common';
     imports: [
         SharedModule,
         CommonModule,
-        LoginRoutes
+        LoginRoutes,
+        FormsModule
     ],
     declarations: [
         LoginComponent,
diff --git a/dmp-frontend/src/app/user-management/login/login.component.html b/dmp-frontend/src/app/user-management/login/login.component.html
index 13eb83a8b..9c7770711 100644
--- a/dmp-frontend/src/app/user-management/login/login.component.html
+++ b/dmp-frontend/src/app/user-management/login/login.component.html
@@ -20,24 +20,24 @@
               </button>
             </div>
           </div>
-          <div *ngIf = "hasNativeLogin()">
+          <div *ngIf="hasNativeLogin()">
             <!-- <p class="tip">Or Be Classical</p> -->
             <div class="card-form">
               <div class="form-row">
                 <i class="material-icons">email</i>
                 <mat-input-container color="accent">
-                  <input type="text" matInput placeholder="Email address" />
+                  <input type="text" [(ngModel)]="credential.username" matInput placeholder="Email address" />
                 </mat-input-container>
               </div>
               <div class="form-row">
                 <i class="material-icons">lock_outline</i>
                 <mat-input-container color="accent">
-                  <input type="password" matInput placeholder="Password" />
+                  <input type="password" [(ngModel)]="credential.secret" matInput placeholder="Password" />
                 </mat-input-container>
               </div>
             </div>
             <div class="card-footer">
-              <button mat-button (click)="loginBtn()">LET'S GO</button>
+              <button mat-button (click)="nativeLogin()">LET'S GO</button>
             </div>
           </div>
         </div>
diff --git a/dmp-frontend/src/app/user-management/login/login.component.ts b/dmp-frontend/src/app/user-management/login/login.component.ts
index d89df4c6d..dcaf945d6 100644
--- a/dmp-frontend/src/app/user-management/login/login.component.ts
+++ b/dmp-frontend/src/app/user-management/login/login.component.ts
@@ -1,3 +1,4 @@
+import { Credential } from '../../models/login/Credential';
 import { LoginOptions } from '../utilties/LoginOptions';
 import { LoginService } from '../utilties/login-service';
 import { HttpClient } from '@angular/common/http';
@@ -16,17 +17,18 @@ import { TranslateService } from "@ngx-translate/core";
 export class LoginComponent implements OnInit {
 
   public auth2: any;
+  public credential: Credential = new Credential()
 
   constructor(
     private loginService: LoginService
-  ) { 
+  ) {
   }
 
 
 
   ngOnInit() {
     this.loginService.initProviders();
-   }
+  }
 
   public facebookLogin() {
     this.loginService.facebookLogin();
@@ -40,6 +42,9 @@ export class LoginComponent implements OnInit {
     this.loginService.twitterInitialiseLogin();
   }
 
+  public nativeLogin() {
+    this.loginService.nativeLogin(this.credential);
+  }
   public hasFacebookOauth(): boolean {
     return this.loginService.hasProvider(LoginOptions.facebookOauth);
   }
diff --git a/dmp-frontend/src/app/user-management/utilties/login-service.ts b/dmp-frontend/src/app/user-management/utilties/login-service.ts
index eaf123d60..7bbadb2ae 100644
--- a/dmp-frontend/src/app/user-management/utilties/login-service.ts
+++ b/dmp-frontend/src/app/user-management/utilties/login-service.ts
@@ -1,3 +1,4 @@
+import { Credential } from '../../models/login/Credential';
 import { HostConfiguration } from '../../app.constants';
 import { LoginProviderConfiguration } from './LoginProviderConfiguration';
 import { AuthService } from '../../services/auth/auth.service';
@@ -168,6 +169,19 @@ export class LoginService {
         )
     }
 
+
+    /*
+   * NATIVE LOGIN
+   */
+
+    public nativeLogin(credentials: Credential) {
+        this.authService.nativeLogin(credentials).subscribe(
+            res => this.onLogInSuccess(res),
+            error => this.onLogInError(error)
+        )
+    }
+
+
     /*
    * LOGIN HANDLERS
    */