diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 25c60d7e53a92adbb914eb9994215c9e37ea8a92..50b16f03695331a5aceeceeb89c74678af960b7a 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,11 +5,18 @@ import {RoutesComponent} from "./components/routes/routes.component";
 import {RouteComponent} from "./components/routes/route/route.component";
 import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component";
 import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component";
+import {MemberDetailsComponent} from "./components/members/member-table/member-details/member-details.component";
 
 const routes: Routes = [
+  {
+    path:'', redirectTo:'members', pathMatch:"full"
+  },
   {
     path:'members', component:MemberTableComponent
   },
+  {
+    path:'member/:id', component:MemberDetailsComponent
+  },
   {
     path: 'routes',
     component: RoutesComponent,
@@ -27,11 +34,6 @@ const routes: Routes = [
     path: 'routesAddForm',
     component: AddRouteFormComponent,
   },
-  {
-    path: '',
-    redirectTo: 'members',
-    pathMatch: 'full',
-  },
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 00354ea1f8d0584aac5c518a12780c67a6d2957f..d4e78fdbe9817b8fc6cbb29b86c500edbc89f2f2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -23,7 +23,7 @@ import {RoutesComponent} from "./components/routes/routes.component";
 import {RouteComponent} from "./components/routes/route/route.component";
 import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component";
 import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component";
-import { MemberDetailsComponent } from './components/members/member-details/member-details.component';
+import { MemberDetailsComponent } from './components/members/member-table/member-details/member-details.component';
 
 @NgModule({
   declarations: [
diff --git a/src/app/components/members/member-details/member-details.component.html b/src/app/components/members/member-details/member-details.component.html
deleted file mode 100644
index 4173abafe168bbef601ba9a210b17c2ebe741fb7..0000000000000000000000000000000000000000
--- a/src/app/components/members/member-details/member-details.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>member-details works!</p>
diff --git a/src/app/components/members/member-details/member-details.component.ts b/src/app/components/members/member-details/member-details.component.ts
deleted file mode 100644
index 52a75f4513f55bb8775a91157c27f4275919ef4f..0000000000000000000000000000000000000000
--- a/src/app/components/members/member-details/member-details.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-member-details',
-  templateUrl: './member-details.component.html',
-  styleUrls: ['./member-details.component.scss']
-})
-export class MemberDetailsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/src/app/components/members/member-table/member-details/member-details.component.html b/src/app/components/members/member-table/member-details/member-details.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..48f402eea1bb498d4e979767d18bd1b03770687a
--- /dev/null
+++ b/src/app/components/members/member-table/member-details/member-details.component.html
@@ -0,0 +1,5 @@
+<div *ngIf="member !== undefined">
+  <div>
+      <h2>{{member.firstName}}</h2>
+  </div>
+</div>
diff --git a/src/app/components/members/member-details/member-details.component.scss b/src/app/components/members/member-table/member-details/member-details.component.scss
similarity index 100%
rename from src/app/components/members/member-details/member-details.component.scss
rename to src/app/components/members/member-table/member-details/member-details.component.scss
diff --git a/src/app/components/members/member-details/member-details.component.spec.ts b/src/app/components/members/member-table/member-details/member-details.component.spec.ts
similarity index 100%
rename from src/app/components/members/member-details/member-details.component.spec.ts
rename to src/app/components/members/member-table/member-details/member-details.component.spec.ts
diff --git a/src/app/components/members/member-table/member-details/member-details.component.ts b/src/app/components/members/member-table/member-details/member-details.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0884c3df6f69fbb375de191b9a510f90ca521b05
--- /dev/null
+++ b/src/app/components/members/member-table/member-details/member-details.component.ts
@@ -0,0 +1,25 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {MemberService} from "../../../../services/member.service";
+import {ActivatedRoute} from "@angular/router";
+import {Member} from "../../../../models/member";
+
+@Component({
+  selector: 'app-member-details',
+  templateUrl: './member-details.component.html',
+  styleUrls: ['./member-details.component.scss']
+})
+export class MemberDetailsComponent implements OnInit {
+
+  member!: Member;
+
+  constructor(private memberService: MemberService, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.route.params.subscribe(params => this.getMemberById(params['id']));
+  }
+
+  getMemberById(id: number) {
+    this.memberService.getMemberById(id).subscribe((data: Member) => this.member = data);
+  }
+
+}
diff --git a/src/app/components/members/member-table/member-table.component.html b/src/app/components/members/member-table/member-table.component.html
index 2aeb5b36d494c3d6253f6dc1dd20ccb96c4cdddb..f4ec68e089b94bb67ce7b7dd88690c19355e6c1d 100644
--- a/src/app/components/members/member-table/member-table.component.html
+++ b/src/app/components/members/member-table/member-table.component.html
@@ -21,7 +21,7 @@
    <ng-container matColumnDef="details">
      <th mat-header-cell *matHeaderCellDef> Details </th>
      <td mat-cell *matCellDef="let member">
-       <button mat-icon-button color="primary" (click)="redirectToDetails(member.id)">
+       <button mat-icon-button color="primary" [routerLink]="['/member', member.id]">
          <mat-icon class="mat-18">reorder</mat-icon>
        </button>
      </td>
@@ -36,7 +36,7 @@
    </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row columns: displayedColumns" ></tr>
 
    <!-- SHOWS WHEN DATA DOES NOT EXIST -->
    <tr *matNoDataRow>
diff --git a/src/app/components/members/member-table/member-table.component.scss b/src/app/components/members/member-table/member-table.component.scss
index 1a044225d62cffeef58213c47a373e33b21a01bd..6682973c6e297e52491e0e1027541cb737598d0c 100644
--- a/src/app/components/members/member-table/member-table.component.scss
+++ b/src/app/components/members/member-table/member-table.component.scss
@@ -13,3 +13,4 @@ th.mat-header-cell {
 th.mat-sort-header-sorted {
   color: black;
 }
+
diff --git a/src/app/components/members/member-table/member-table.component.ts b/src/app/components/members/member-table/member-table.component.ts
index d19f864cee4edf9e1b1f26d8a1c2af29a58eff58..0f17aaeff2e2d0ed6400b9a481d30e33e9ce1aa2 100644
--- a/src/app/components/members/member-table/member-table.component.ts
+++ b/src/app/components/members/member-table/member-table.component.ts
@@ -20,6 +20,7 @@ export class MemberTableComponent implements OnInit{
   posts: any;
   displayedColumns: string[] = ['id', 'firstName', 'lastName', 'details', 'delete'];
 
+
   constructor(private memberService: MemberService) {}
 
   ngOnInit(): void {
@@ -58,4 +59,6 @@ export class MemberTableComponent implements OnInit{
   redirectToDelete(id: number) {
 
   }
+
+
 }
diff --git a/src/app/services/member.service.ts b/src/app/services/member.service.ts
index 6cb033390ff6eb95baff33fd2954167a178aa92f..35cb082b8029d0180e6cf24084b375a5c9e01e24 100644
--- a/src/app/services/member.service.ts
+++ b/src/app/services/member.service.ts
@@ -16,6 +16,10 @@ export class MemberService {
   return this.http.get<Member[]>(`${this.apiServerUrl}/members/all`);
   }
 
+  public getMemberById(id: number): Observable<Member> {
+    return this.http.get<Member>(`${this.apiServerUrl}/member/{id}`);
+  }
+
   public addMember(member: Member): Observable<Member> {
     return this.http.post<Member>(`${this.apiServerUrl}/member/add`, member);
   }