Index: Sources/frontend/src/app/subject/subject.component.css
===================================================================
--- Sources/frontend/src/app/subject/subject.component.css	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/subject/subject.component.css	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,41 @@
+.card {
+  display: inline-block;
+  background-color: #3A98B9;
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  padding: 5px;
+  color: #FFF1DC;;
+  font-weight: normal;
+  font-size: large;
+}
+
+.container {
+  display: flex;
+}
+
+.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: 100px;
+  margin: 5px;
+  float: right;
+  cursor: pointer;
+  color: #FFF1DC;
+  font-weight: normal;
+  font-size: large;
+}
+
+.list {
+  display: flex;
+}
Index: Sources/frontend/src/app/subject/subject.component.html
===================================================================
--- Sources/frontend/src/app/subject/subject.component.html	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/subject/subject.component.html	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,14 @@
+<div class="parent-container" *ngIf="this.activeUser!!.userType == 'PROFESSOR'">
+  <h1>Сите Предмети</h1>
+  <form class="example-form" class="list">
+    <div *ngFor="let s of subjects">
+      <input type="radio" name="radio-btns" (change)="onChange({event : $event, id : {id : s.id}})">
+      <label>
+        <p class="card">
+          {{s?.name}}
+        </p>
+      </label>
+    </div>
+  </form>
+</div>
+<app-all-courses [subjectId]="subjectId"></app-all-courses>
Index: Sources/frontend/src/app/subject/subject.component.spec.ts
===================================================================
--- Sources/frontend/src/app/subject/subject.component.spec.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/subject/subject.component.spec.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubjectComponent } from './subject.component';
+
+describe('SubjectComponent', () => {
+  let component: SubjectComponent;
+  let fixture: ComponentFixture<SubjectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SubjectComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SubjectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: Sources/frontend/src/app/subject/subject.component.ts
===================================================================
--- Sources/frontend/src/app/subject/subject.component.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
+++ Sources/frontend/src/app/subject/subject.component.ts	(revision 84234294abb1e8ce0876e888a7bec532eaeb6a14)
@@ -0,0 +1,46 @@
+import {Component, ViewChild} from '@angular/core';
+import {SubjectInterface} from "../subjectInterface";
+import {SubjectService} from "../subject.service";
+import {ActiveUserInterface} from "../ActiveUserInterface";
+import {LoginService} from "../login.service";
+import {AllCoursesComponent} from "../all-courses/all-courses.component";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-subject',
+  templateUrl: './subject.component.html',
+  styleUrls: ['./subject.component.css']
+})
+export class SubjectComponent {
+
+  subjects: SubjectInterface[] = [];
+  subjectId: number | undefined;
+  activeUser: ActiveUserInterface | undefined;
+  @ViewChild(AllCoursesComponent) child!: AllCoursesComponent;
+
+  constructor(private service: SubjectService,
+              private loginService: LoginService,
+              private router: Router) {
+  }
+
+  ngOnInit(): void {
+    this.activeUser = this.loginService.activeUser!!;
+    if (!this.activeUser) {
+      this.router.navigate(['/'])
+    }
+    this.service.getAllSubjects()
+      .subscribe(subjects => this.subjects = subjects);
+  }
+
+  onChange({event, id}: { event: any, id: any }) {
+    if (event.target.checked) {
+      // @ts-ignore
+      this.subjectId = id
+      this.child.loadCourses(id.id);
+    } else {
+      // @ts-ignore
+      this.subjectId = null;
+    }
+  }
+
+}
