diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0f35882..8919f61 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,20 +1,27 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { TreeModule } from 'primeng/tree';
+import { DropdownModule } from 'primeng/dropdown';
 import { MainComponent } from './main/main.component';
 import { MainCenterComponent } from './main/main-center/main-center.component';
 import { TreeComponent } from './main/tree/tree.component';
+import { DropdownComponent } from './main/dropdown/dropdown.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
-  declarations: [AppComponent, TreeComponent, MainComponent, MainCenterComponent],
+  declarations: [AppComponent, TreeComponent, MainComponent, MainCenterComponent, DropdownComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
+    FormsModule,
+    BrowserAnimationsModule,
     TreeModule,
+    DropdownModule,
     HttpClientModule
   ],
   providers: [],
diff --git a/src/app/main/dropdown/dropdown.component.css b/src/app/main/dropdown/dropdown.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/main/dropdown/dropdown.component.html b/src/app/main/dropdown/dropdown.component.html
new file mode 100644
index 0000000..a18b36a
--- /dev/null
+++ b/src/app/main/dropdown/dropdown.component.html
@@ -0,0 +1,4 @@
+<div class="d-flex align-items-center p-2">
+    <h3 class="mr-2">End Item: </h3>
+    <p-dropdown [options]="xaList" [(ngModel)]="selectedEndItem" (onChange)="onChange($event)"></p-dropdown>
+</div>
\ No newline at end of file
diff --git a/src/app/main/dropdown/dropdown.component.spec.ts b/src/app/main/dropdown/dropdown.component.spec.ts
new file mode 100644
index 0000000..e0edf7a
--- /dev/null
+++ b/src/app/main/dropdown/dropdown.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownComponent } from './dropdown.component';
+
+describe('DropdownComponent', () => {
+  let component: DropdownComponent;
+  let fixture: ComponentFixture<DropdownComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropdownComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/main/dropdown/dropdown.component.ts b/src/app/main/dropdown/dropdown.component.ts
new file mode 100644
index 0000000..35db625
--- /dev/null
+++ b/src/app/main/dropdown/dropdown.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { EndItemService } from 'src/app/services/enditem.service';
+import { SelectItem } from 'primeng/api';
+
+@Component({
+  selector: 'app-dropdown',
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.css']
+})
+export class DropdownComponent {
+
+  constructor(
+    private endItemService: EndItemService
+  ) {}
+
+  // TODO replace with backend.
+  xaList: SelectItem[] = [
+    { label: 'None selected', value: null },
+    { label: 'UConn', value: 'Uconn' },
+    { label: 'Test', value: 'Test' }
+  ];
+
+  selectedEndItem = '';
+
+  onChange(event: any) {
+    this.endItemService.setEndItem(this.selectedEndItem);
+  }
+
+}
diff --git a/src/app/main/main-center/main-center.component.html b/src/app/main/main-center/main-center.component.html
index 3d7c2a9..e012abe 100644
--- a/src/app/main/main-center/main-center.component.html
+++ b/src/app/main/main-center/main-center.component.html
@@ -13,4 +13,4 @@
 
 <ng-template #noPdf>
     <h1 class="ml-4 mt-4 text-danger">PDF not found</h1>
-</ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 425ed99..9f15d2c 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -1,4 +1,7 @@
-<div class="d-flex h-100 w-100">
+<div class="bg-secondary">
+    <app-dropdown></app-dropdown>
+</div>
+<div *ngIf="endItemService.endItem$ | async" class="d-flex h-100 w-100" >
     <app-tree></app-tree>
     <app-main-center class="w-100"></app-main-center>
 </div>
\ No newline at end of file
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index 355d203..daeb522 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { EndItemService } from '../services/enditem.service';
 
 @Component({
   selector: 'app-main',
@@ -7,7 +8,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MainComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private endItemService: EndItemService
+  ) { }
 
   ngOnInit() {
   }
diff --git a/src/app/main/tree/tree.component.ts b/src/app/main/tree/tree.component.ts
index aaf8bf6..5419316 100644
--- a/src/app/main/tree/tree.component.ts
+++ b/src/app/main/tree/tree.component.ts
@@ -1,23 +1,30 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { TreeNode } from 'primeng/api';
+import { Subscription } from 'rxjs';
 import { NodeService } from 'src/app/services/node.service';
 import { TreeService } from 'src/app/services/tree.service';
+import { EndItemService } from 'src/app/services/enditem.service';
 
 @Component({
   selector: 'app-tree',
   templateUrl: './tree.component.html',
   styleUrls: ['./tree.component.css']
 })
-export class TreeComponent implements OnInit {
+export class TreeComponent implements OnInit, OnDestroy {
 
+  private dropdownSubscription: Subscription;
+
+  selectedEndItem: string;
   filesTree: TreeNode[];
 
   constructor(
     private treeService: TreeService,
-    private nodeService: NodeService
+    private nodeService: NodeService,
+    private endItemService: EndItemService
   ) { }
 
   ngOnInit() {
+    this.dropdownSubscription = this.endItemService.endItem$.subscribe(xa =>  this.selectedEndItem = xa);
     this.nodeService.getFiles().then(files => (this.filesTree = files));
   }
 
@@ -25,4 +32,8 @@ export class TreeComponent implements OnInit {
     this.treeService.changeNode(event.node);
   }
 
+  ngOnDestroy() {
+    this.dropdownSubscription.unsubscribe();
+  }
+
 }
diff --git a/src/app/services/enditem.service.ts b/src/app/services/enditem.service.ts
new file mode 100644
index 0000000..bead0cf
--- /dev/null
+++ b/src/app/services/enditem.service.ts
@@ -0,0 +1,16 @@
+import { BehaviorSubject } from 'rxjs';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class EndItemService {
+
+    private selectedEndItem = new BehaviorSubject<string>(null);
+    endItem$ = this.selectedEndItem.asObservable();
+
+    setEndItem(endItem: string) {
+        this.selectedEndItem.next(endItem);
+    }
+
+}