diff --git a/package-lock.json b/package-lock.json
index 3d523d4..0a7fcc7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "n2v",
+  "name": "edupro",
   "version": "0.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -3563,8 +3563,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3585,14 +3584,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3607,20 +3604,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3737,8 +3731,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3750,7 +3743,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3765,7 +3757,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3773,14 +3764,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3799,7 +3788,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3880,8 +3868,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3893,7 +3880,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3979,8 +3965,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4016,7 +4001,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4036,7 +4020,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4080,14 +4063,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 421d29c..c9b77c0 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home/home.component';
-import { LoginComponent } from './login/login.component';
+import { loginComponent } from './login/login.component';
 import { UserDashboardComponent } from './user-dashboard/user-dashboard.component';
 import { CoursesComponent } from './courses/courses.component';
 import { CoursesDescriptionComponent } from './courses-description/courses-description.component';
@@ -18,7 +18,7 @@ const routes: Routes = [
   { path: 'course-preview', component: CoursePreviewComponent },
   { path: 'courses-description', component: CoursesDescriptionComponent },
   { path: 'forum', component: ForumComponent },
-  { path: 'login', component: LoginComponent },
+  { path: 'login', component: loginComponent },
   { path: 'about', component: AboutComponent }
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d271ace..aaf166f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
+import { loginComponent } from './login/login.component';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
@@ -10,28 +10,28 @@ import { ContactComponent } from './contact/contact.component';
 import { NavbarComponent } from './shared/navbar/navbar.component';
 import { FooterComponent } from './shared/footer/footer.component';
 import { ContactIconComponent } from './shared/contact-icon/contact-icon.component';
-import { LoginComponent } from './login/login.component';
 import { CoursesComponent } from './courses/courses.component';
 import { CoursesDescriptionComponent } from './courses-description/courses-description.component';
 import { ForumComponent } from './forum/forum.component';
 import { CoursePreviewComponent } from './course-preview/course-preview.component';
 import { AboutComponent } from './about/about.component';
-
+import { LoginBoxComponent } from './login-box/login-box.component';
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
     NavbarComponent,
     FooterComponent,
+    loginComponent,
     ContactIconComponent,
-    LoginComponent,
     UserDashboardComponent,
     CoursesComponent,
     CoursesDescriptionComponent,
     ForumComponent,
     CoursePreviewComponent,
     ContactComponent,
-    AboutComponent
+    AboutComponent,
+    LoginBoxComponent,
   ],
   imports: [BrowserModule, AppRoutingModule, NgbModule],
   providers: [],
diff --git a/src/app/login-box/login-box.component.html b/src/app/login-box/login-box.component.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/login-box/login-box.component.scss b/src/app/login-box/login-box.component.scss
new file mode 100644
index 0000000..323162f
--- /dev/null
+++ b/src/app/login-box/login-box.component.scss
@@ -0,0 +1,71 @@
+.form-group {
+    padding-right: 20px;
+    padding-left: 20px;
+    width: 560px;
+  }
+    .section1 {
+      width: 550px;
+      height: 830px;
+      background-color: #EDF5E1;
+      margin-top: 50px;
+      margin-bottom: 50px;
+      float: right;
+      margin-right: 133px;
+      
+
+    }
+    .section2 {
+      width: 550px;
+      height: 830px;
+      background-color: #EDF5E1;
+        margin-top: 50px;
+        margin-bottom: 50px;
+        float: left;
+        margin-left: 132px;
+               }
+    #one {
+      color: black;
+      
+    }
+
+
+    .input-group-text 
+    {
+     height: 34px;
+     font-size: 14px;
+
+    }
+    .form-check-label
+    {
+    padding-left: 20px;
+
+    }
+    .new
+    {
+   
+     text-decoration: underline;
+    }
+    .forget {
+      text-decoration-line: none;
+      color: black;
+    }
+    .bgoogle {
+      background-color: #DD4B39;
+      color: white;
+    }
+    .bfacebook {
+      background-color: #3B5998;
+      color: white;
+    }
+    .picture {
+      align-content: center;
+    }
+    .body {
+    background-color: #44579a;
+    color: black;
+           }
+    .dob {
+      width: 510px;
+      height: 35px;
+      border-top-right-radius: none;
+    }
\ No newline at end of file
diff --git a/src/app/login-box/login-box.component.spec.ts b/src/app/login-box/login-box.component.spec.ts
new file mode 100644
index 0000000..c93963e
--- /dev/null
+++ b/src/app/login-box/login-box.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginBoxComponent } from './login-box.component';
+
+describe('LoginBoxComponent', () => {
+  let component: LoginBoxComponent;
+  let fixture: ComponentFixture<LoginBoxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginBoxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/login-box/login-box.component.ts b/src/app/login-box/login-box.component.ts
new file mode 100644
index 0000000..7057345
--- /dev/null
+++ b/src/app/login-box/login-box.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login-box',
+  templateUrl: './login-box.component.html',
+  styleUrls: ['./login-box.component.scss']
+})
+export class LoginBoxComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index cbdfa13..5cd0f10 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,3 +1,128 @@
-<p>
-  login works!
-</p>
+
+
+<div class="loginpage">
+<div class="section2" id="two"> 
+   		
+  <br>
+  <h1 class="center">Sign-In With</h1>
+  <br>
+
+ <button class="bfacebook">
+<a class="btn btn-block btn-social btn-facebook center">
+<span class="fa fa-facebook"></span> Sign in with Facebook
+</a></button>
+<br><br>
+
+<button class="bgoogle">
+<a class="btn btn-block btn-social btn-google center">
+<span class="fa fa-google"></span> Sign in with Google
+</a></button>
+<br> <br> <h2 class="heading-2">OR</h2>
+<br>
+  <form>
+   
+  
+<div class="form-group">
+<label for="exampleInputEmail1" class="label">Email address</label>
+<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="email@example.com">
+<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+</div>
+<div class="form-group">
+<label for="exampleInputPassword1" class="label">Password</label>
+<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+</div>
+
+<div class="form-group remme">
+<div class="form-check">
+<input class="form-check-input" type="checkbox" id="gridCheck1">
+<label class="form-check-label" for="gridCheck">
+Remember Me
+</label>
+</div>
+</div>
+
+<br><br>
+<button type="submit" class="btn btn-primary">Sign-In</button>
+<br><br>
+<a href="#" class="forget">Forget Password?</a>
+<br><br>
+<a href="#" class="new">New Member?</a>
+
+<br><br>
+
+</form>
+
+</div>
+
+
+
+
+
+<div class="section1" id="one">
+
+
+<br>
+<h1 class="center">Sign Up</h1>
+<br>
+<form>
+ <div class="form-group">
+<label for="exampleInputName" class="label">Name</label>
+<input type="name" class="form-control" id="exampleInputName" aria-describedby="nameHelp" placeholder="Enter your Name">
+</div>
+  <div class="form-group">
+<label for="exampleInputEmail1" class="label">Email address</label>
+<input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter email">
+<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+</div>
+<div class="form-group">
+<label for="exampleSelect1" class="label">Gender</label>
+<select class="form-control" id="exampleSelect1">
+ <option>Male</option>
+ <option>Female</option>
+</select>
+</div>
+<div class="form-group">
+<label for="exampleInputFile" class="label">Date of Birth</label><br>
+<input type="date" name="bday" class="dob">
+</div>
+<br>
+<div class="form-group">
+<label for="exampleInputNumber" class="label">Phone number</label>
+<input type="number" class="form-control" id="exampleInputNumber" aria-describedby="numberHelp" placeholder="+91539853928">
+</div>
+
+
+
+<div class="form-group">
+<label for="exampleInputFile" class="label">Picture</label>
+<div class="picture" style="text-align: center;">
+<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
+</div>
+</div>
+
+<div class="form-group">
+<label for="exampleInputName" class="label">Username</label>
+<input type="Username" class="form-control" id="exampleInputName2" aria-describedby="nameHelp" placeholder="Username">
+</div>
+
+<div class="form-group">
+<label for="exampleInputPassword1" class="label">Password</label>
+<input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
+</div>
+<div class="form-group">
+<div class="form-check">
+<input class="form-check-input" type="checkbox" id="gridCheck">
+<label class="form-check-label" for="gridCheck">
+Agree to terms and conditions
+</label>
+</div>
+</div>
+<button type="submit" class="btn btn-primary">Register</button>
+<br><br>
+<a href="#" class="new">Already a Member?</a>
+<br><br>
+</form>
+
+
+</div>
+</div>
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index e69de29..3b5efef 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -0,0 +1,95 @@
+.loginpage {
+    background-color: #44579a;
+}
+.label {
+  font-weight: bold;
+}
+#two {
+  text-align: center;
+}
+.btn-block {
+  width: 380px;
+}
+#one {
+  text-align: center;
+}
+.form-group {
+    padding-right: 20px;
+    padding-left: 20px;
+    width: 560px;
+  }
+  .forget {
+    text-align: center;
+    text-decoration: underline;
+   
+
+  }
+  .remme{
+  float: left;
+  }
+    .section1 {
+      width: 550px;
+      height: 960px;
+      background-color: #EDF5E1;
+      margin-top: 50px;
+      margin-bottom: 50px;
+      float: right;
+      margin-right: 133px;
+      
+
+    }
+    .section2 {
+      width: 550px;
+      height: 960px;
+      background-color: #EDF5E1;
+        margin-top: 50px;
+        margin-bottom: 50px;
+        float: left;
+        margin-left: 132px;
+               }
+    #one {
+      color: black;
+      
+    }
+
+
+    .input-group-text 
+    {
+     height: 34px;
+     font-size: 14px;
+
+    }
+    .form-check-label
+    {
+    padding-left: 2px;
+
+    }
+    .new
+    {
+   
+     text-decoration: underline;
+    }
+    .forget {
+      text-decoration-line: none;
+      color: black;
+    }
+    .bgoogle {
+      background-color: #DD4B39;
+      color: white;
+    }
+    .bfacebook {
+      background-color: #3B5998;
+      color: white;
+    }
+    .picture {
+      align-content: center;
+    }
+    .body {
+    background-color: #44579a;
+    color: black;
+           }
+    .dob {
+      width: 510px;
+      height: 35px;
+      border-top-right-radius: none;
+    }
\ No newline at end of file
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 12de138..22a057a 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -5,8 +5,8 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent implements OnInit {
-
+export class loginComponent implements OnInit {
+  
   constructor() { }
 
   ngOnInit() {