Index: Sources/frontend/src/app/login/login.component.css
===================================================================
--- Sources/frontend/src/app/login/login.component.css	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/login/login.component.css	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,72 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.parent-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 200px;
+  margin-right: 200px;
+}
+
+button {
+  background-color: #3A98B9;
+  border: none;
+  padding: 5px;
+  height: 50px;
+  width: 15%;
+  margin: 5px;
+  cursor: pointer;
+  border-radius: 5px;
+  color: #FFF1DC;
+  font-weight: normal;
+  font-size: large;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+}
+
+input {
+  width: 50%;
+  height: 40px;
+  margin: none;
+  border-color: rgba(159, 168, 216, 0.5);
+  border-radius: 5px;
+}
+
+.register-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.radio {
+  width: auto !important;
+  height: 30px;
+  margin: none;
+}
+
+.action-button {
+  width: 50%
+}
+
+label {
+  font-size: large;
+  color: rgba(27, 39, 107, 0.8);
+}
+
+.form-check {
+  display: flex;
+}
+
+.radio-button-group {
+  display: flex;
+  align-items: center;
+}
+#logo{
+  width: 300px;
+  height: 300px;
+}
Index: Sources/frontend/src/app/login/login.component.html
===================================================================
--- Sources/frontend/src/app/login/login.component.html	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/login/login.component.html	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,84 @@
+<div class="parent-container">
+  <div class="header">
+    <div class="headings">
+      <h1>
+        Добредојдовте на <i>FinkiForums</i>
+        <br>
+        Централизирано место за прашања околу ФИНКИ
+      </h1>
+    </div>
+    <img id="logo" src="https://i.ibb.co/zn95ydK/NEW-LOGO.jpg">
+  </div>
+
+  <button class="action-button" (click)="showLogin()">Најави се</button>
+
+  <h1>
+    Сеуште немате профил?
+    <br>
+    Регистрирајте се и научете повеќе
+  </h1>
+
+  <button class="action-button" (click)="showRegister()">Регистрирај се</button>
+
+  <div class="container" *ngIf="login">
+    <form class="example-form">
+      <div class="login-form">
+        <label>Корисничко име</label>
+        <input placeholder="Enter your username" name="username"
+               [(ngModel)]="username">
+        <label>Лозинка</label>
+        <input placeholder="Enter your password"
+               value=""
+               name="password"
+               type="password"
+               [(ngModel)]="password">
+        <button (click)="submitLogin()"
+                [disabled]="username==null && password==null" type="button">Submit
+        </button>
+      </div>
+    </form>
+  </div>
+  <div class="container" *ngIf="register">
+    <form class="example-form">
+      <div class="register-form">
+        <label>Име</label>
+        <input placeholder="Enter your name" name="name"
+               [(ngModel)]="name">
+        <label>Презиме</label>
+        <input placeholder="Enter your last name" name="lastName"
+               [(ngModel)]="lastName">
+        <label>Електронска пошта</label>
+        <input placeholder="Enter your email" name="email"
+               [(ngModel)]="email">
+        <label>Корисничко име</label>
+        <input placeholder="Enter your username" name="username"
+               [(ngModel)]="username">
+        <label>Лозинка</label>
+        <input placeholder="Enter your password"
+               value=""
+               name="password"
+               type="password"
+               [(ngModel)]="password">
+        <div class="form-check">
+          <div class="radio-button-group">
+            <input class="radio" type="radio" name="userType" [(ngModel)]="userType" value="PROFESSOR">
+            <label class="radio-label">Професор</label>
+          </div>
+          <div class="radio-button-group">
+            <input class="radio" type="radio" name="userType" [(ngModel)]="userType" value="STUDENT">
+            <label class="radio-label">Студент</label>
+          </div>
+        </div>
+        <label *ngIf="userType=='STUDENT'">Индекс</label>
+        <input *ngIf="userType=='STUDENT'"
+               placeholder="Enter your index"
+               name="index"
+               [(ngModel)]="index">
+        <button (click)="submitRegister()"
+                [disabled]="name==null || lastName==null || email==null || username==null || password==null || userType==null"
+                type="button">Регистрирај се
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
Index: Sources/frontend/src/app/login/login.component.spec.ts
===================================================================
--- Sources/frontend/src/app/login/login.component.spec.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/login/login.component.spec.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: Sources/frontend/src/app/login/login.component.ts
===================================================================
--- Sources/frontend/src/app/login/login.component.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/login/login.component.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import {LoginService} from "../login.service";
+import {ActiveUserInterface} from "../ActiveUserInterface";
+import {Router} from "@angular/router";
+import {RegisterService} from "../register.service";
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent {
+  name:string|undefined;
+  lastName:string|undefined;
+  email:string|undefined;
+  username:string|undefined;
+  password:string|undefined;
+  userType:string|undefined;
+  index:string|undefined;
+  activeUser: ActiveUserInterface | undefined;
+  login: boolean | undefined;
+  register: boolean | undefined;
+
+  constructor(private service: LoginService, private registerService: RegisterService, private router: Router) {
+  }
+
+  submitLogin(){
+      console.log("username and pass", this.username, this.password)
+      this.service.loginUser(this.username!!, this.password!!)
+  }
+  submitRegister(){
+    console.log(this.name, this.lastName,this.email,this.username,this.password,this.userType,this.index)
+    this.registerService.registerUser(this.name!!, this.lastName!!,this.email!!,this.username!!,this.password!!,this.userType!!,this.index!!)
+  }
+  showLogin(){
+    this.login = this.login == null ? true : !this.login;
+    this.register = false;
+  }
+
+  showRegister(){
+    this.register = this.register == null ? true : !this.register;
+    this.login = false;
+  }
+
+}
