diff --git a/AngularApp/src/app/card-assignment/card-assignment.component.html b/AngularApp/src/app/card-assignment/card-assignment.component.html
index 262a09a7f3aefc9c7087dd2772df34da0207e80e..218798b589260cb5e6779a74aabe275910156a5a 100644
--- a/AngularApp/src/app/card-assignment/card-assignment.component.html
+++ b/AngularApp/src/app/card-assignment/card-assignment.component.html
@@ -5,7 +5,7 @@
         </div>
         <p class="card-category">{{assgn.description}}</p>
         <h3 class="card-title">{{assgn.title}}</h3>
-        <a mat-raised-button type="submit" class="btn btn-outline-info pull-right">Create</a>
+        <a mat-raised-button (click)="openDialog()" class="btn btn-outline-info pull-right">Details</a>
     </div>
     <div class="card-footer">
         <p>{{assgn.language}}</p>
diff --git a/AngularApp/src/app/card-assignment/card-assignment.component.ts b/AngularApp/src/app/card-assignment/card-assignment.component.ts
index 81d0de00558c0e3d83e3f02adbbcc7df705af636..7637828c28cce62844332caf13b9565b84804705 100644
--- a/AngularApp/src/app/card-assignment/card-assignment.component.ts
+++ b/AngularApp/src/app/card-assignment/card-assignment.component.ts
@@ -2,16 +2,39 @@ import { Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Assignment } from 'app/model/assignment';
 
+import { TableListComponent } from 'app/table-list/table-list.component';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+export interface DialogData {
+  animal: string;
+  name: string;
+}
+
 @Component({
   selector: 'app-card-assignment',
   templateUrl: './card-assignment.component.html',
   styleUrls: ['./card-assignment.component.scss'],
 })
 export class CardAssignmentComponent implements OnInit {
- @Input() assgn : Assignment;
-  constructor() { }
+  @Input() assgn : Assignment;
+  
+  animal: string;
+  name: string;
 
+  constructor(public dialog: MatDialog) { }
+  
   ngOnInit(): void {
   }
-
+  
+  openDialog(): void {
+    const dialogRef = this.dialog.open(TableListComponent, {
+      width: '800px',
+      // data: {name: this.name, animal: this.animal}
+    });
+    
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+      this.animal = result;
+    });
+  }
+  
 }
diff --git a/AngularApp/src/app/material-components/material-components.module.ts b/AngularApp/src/app/material-components/material-components.module.ts
index 647c67248b2934ab7336dcb7daea24cc43669a65..aa8584f9f57cda121025c4fb253f8708b81a7e2e 100644
--- a/AngularApp/src/app/material-components/material-components.module.ts
+++ b/AngularApp/src/app/material-components/material-components.module.ts
@@ -5,6 +5,7 @@ import {MatTableModule} from '@angular/material/table';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
 import {MatCardModule} from '@angular/material/card';
+import {MatDialogModule} from '@angular/material/dialog';
 
 @NgModule({
   declarations: [],
@@ -13,13 +14,15 @@ import {MatCardModule} from '@angular/material/card';
     CommonModule,
     MatInputModule,
     MatSelectModule,
-    MatCardModule
+    MatCardModule,
+    MatDialogModule
   ],
   exports:[
     MatTableModule,
     MatInputModule,
     MatSelectModule,
-    MatCardModule
+    MatCardModule,
+    MatDialogModule
   ]
 })
 export class MaterialComponentsModule { }