diff --git a/src/app/components/signing/signing-sidebar/signing-sidebar.component.html b/src/app/components/signing/signing-sidebar/signing-sidebar.component.html
index 4040d21..43af2fa 100644
--- a/src/app/components/signing/signing-sidebar/signing-sidebar.component.html
+++ b/src/app/components/signing/signing-sidebar/signing-sidebar.component.html
@@ -3,7 +3,9 @@
   <p class="text-gray-500 text-sm mb-4">Submitted 5 days ago.</p>
 
   <ul>
-    <app-signing-sidebar-item *ngFor="let doc of documents" [document]="doc"></app-signing-sidebar-item>
+    <app-signing-sidebar-item *ngFor="let doc of documents"
+                              (click)="selectDocument(doc)"
+                              [document]="doc"></app-signing-sidebar-item>
   </ul>
 
   <div class="mt-6 flex justify-between">
diff --git a/src/app/components/signing/signing-sidebar/signing-sidebar.component.ts b/src/app/components/signing/signing-sidebar/signing-sidebar.component.ts
index bec43ae..9c09e56 100644
--- a/src/app/components/signing/signing-sidebar/signing-sidebar.component.ts
+++ b/src/app/components/signing/signing-sidebar/signing-sidebar.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {GetSigningRequestResponseSigningRequestDocument} from '../../../../gen';
 
 @Component({
@@ -10,4 +10,10 @@ import {GetSigningRequestResponseSigningRequestDocument} from '../../../../gen';
 })
 export class SigningSidebarComponent {
   @Input() documents!: GetSigningRequestResponseSigningRequestDocument[];
+
+  @Output() documentSelected = new EventEmitter<GetSigningRequestResponseSigningRequestDocument>();
+
+  selectDocument(doc: GetSigningRequestResponseSigningRequestDocument): void {
+    this.documentSelected.emit(doc);
+  }
 }
diff --git a/src/app/components/signing/signing.component.html b/src/app/components/signing/signing.component.html
index 4e3cdf3..1e33b8c 100644
--- a/src/app/components/signing/signing.component.html
+++ b/src/app/components/signing/signing.component.html
@@ -1,6 +1,6 @@
 <div class="flex h-screen bg-gray-100">
   <div class="w-1/4">
-    <app-signing-sidebar [documents]="documents"></app-signing-sidebar>
+    <app-signing-sidebar [documents]="documents" (documentSelected)="setActiveDocument($event)"></app-signing-sidebar>
   </div>
 
   <div class="w-3/4 p-6">
diff --git a/src/app/components/signing/signing.component.ts b/src/app/components/signing/signing.component.ts
index ab44c71..78c423b 100644
--- a/src/app/components/signing/signing.component.ts
+++ b/src/app/components/signing/signing.component.ts
@@ -14,6 +14,9 @@ import {
 })
 export class SigningComponent implements OnInit {
   documents: GetSigningRequestResponseSigningRequestDocument[] = [];
+  selectedDocument: GetSigningRequestResponseSigningRequestDocument = {
+    confirmed: false, id: '', name: ''
+  }
 
   constructor(private route: ActivatedRoute, private signingRequestService: SigningRequestService) {
   }
@@ -30,4 +33,9 @@ export class SigningComponent implements OnInit {
       }
     });
   }
+
+  setActiveDocument(document: GetSigningRequestResponseSigningRequestDocument): void {
+    this.selectedDocument = document;
+    console.log(this.selectedDocument);
+  }
 }