diff --git a/src/Ombi/ClientApp/app/interfaces/IRequestModel.ts b/src/Ombi/ClientApp/app/interfaces/IRequestModel.ts
index 236e694fc..92c455fc1 100644
--- a/src/Ombi/ClientApp/app/interfaces/IRequestModel.ts
+++ b/src/Ombi/ClientApp/app/interfaces/IRequestModel.ts
@@ -71,6 +71,10 @@ export interface ITvRequests {
   status: string;
   childRequests: IChildRequests[];
   qualityOverride: number;
+  background: any;
+  totalSeasons: number;
+  tvDbId: number;
+  open: boolean; // THIS IS FOR THE UI
 
   // For UI display
   qualityOverrideTitle: string;
diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.html b/src/Ombi/ClientApp/app/requests/tvrequests.component.html
index 954bd6b42..70147ecad 100644
--- a/src/Ombi/ClientApp/app/requests/tvrequests.component.html
+++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.html
@@ -18,43 +18,40 @@
      [infiniteScrollThrottle]="100"
      (scrolled)="loadMore()">-->
 <div>
-    <p-treeTable [value]="tvRequests">
-        <ng-template let-col let-node="rowData" pTemplate="header">
-            Results
-        </ng-template>
-        <ng-template let-col let-node="rowData" pTemplate="body">
+    <div *ngIf="tvRequests">
+        <div *ngFor="let node of tvRequests.collection">
             <!--This is the section that holds the parent level results set-->
-            <div *ngIf="!node.leaf">
+            <div>
                 <div class="row">
-                    <div class="myBg backdrop" [style.background-image]="node?.data?.background"></div>
+                    <div class="myBg backdrop" [style.background-image]="node?.background"></div>
                     <div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
 
                     <div class="col-sm-2  small-padding">
 
-                        <img class="img-responsive poster" src="{{node.data.posterPath || null}}" alt="poster">
+                        <img class="img-responsive poster" src="{{node.posterPath || null}}" alt="poster">
 
                     </div>
 
                     <div class="col-sm-5  small-padding">
                         <div>
-                            <a href="http://www.imdb.com/title/{{node.data.imdbId}}/" target="_blank">
-                                <h4 class="request-title">{{node.data.title}} ({{node.data.releaseDate | date: 'yyyy'}})</h4>
+                            <a href="http://www.imdb.com/title/{{node.imdbId}}/" target="_blank">
+                                <h4 class="request-title">{{node.title}} ({{node.releaseDate | date: 'yyyy'}})</h4>
                             </a>
                         </div>
                         <br />
                         <div>
                             <span>Status: </span>
-                            <span class="label label-success">{{node.data.status}}</span>
+                            <span class="label label-success">{{node.status}}</span>
                         </div>
 
 
-                        <div>Release Date: {{node.data.releaseDate | date}}</div>
+                        <div>Release Date: {{node.releaseDate | date}}</div>
                         <div *ngIf="isAdmin">
-                            <div *ngIf="node.data.qualityOverrideTitle" class="quality-override">{{ 'Requests.QualityOverride' | translate }}
-                                <span>{{node.data.qualityOverrideTitle}} </span>
+                            <div *ngIf="node.qualityOverrideTitle" class="quality-override">{{ 'Requests.QualityOverride' | translate }}
+                                <span>{{node.qualityOverrideTitle}} </span>
                             </div>
-                            <div *ngIf="node.data.rootPathOverrideTitle" class="root-override">{{ 'Requests.RootFolderOverride' | translate }}
-                                <span>{{node.data.rootPathOverrideTitle}} </span>
+                            <div *ngIf="node.rootPathOverrideTitle" class="root-override">{{ 'Requests.RootFolderOverride' | translate }}
+                                <span>{{node.rootPathOverrideTitle}} </span>
                             </div>
                         </div>
 
@@ -62,7 +59,7 @@
                     </div>
                     <div class="col-sm-3 col-sm-push-3  small-padding">
 
-                        <button style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab($event)">
+                        <button style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab(node,$event)">
                             <i class="fa fa-plus"></i> View</button>
                         <div *ngIf="isAdmin">
                             <!--Sonarr Root Folder-->
@@ -76,7 +73,7 @@
                                 </button>
                                 <ul class="dropdown-menu">
                                     <li *ngFor="let folder of sonarrRootFolders">
-                                        <a href="#" (click)="selectRootFolder(node.data, folder, $event)">{{folder.path}}</a>
+                                        <a href="#" (click)="selectRootFolder(node, folder, $event)">{{folder.path}}</a>
                                     </li>
                                 </ul>
                             </div>
@@ -92,7 +89,7 @@
                                 </button>
                                 <ul class="dropdown-menu">
                                     <li *ngFor="let profile of sonarrProfiles">
-                                        <a href="#" (click)="selectQualityProfile(node.data, profile, $event)">{{profile.name}}</a>
+                                        <a href="#" (click)="selectQualityProfile(node, profile, $event)">{{profile.name}}</a>
                                     </li>
                                 </ul>
                             </div>
@@ -106,7 +103,7 @@
                             </button>
                             <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                 <li *ngFor="let cat of issueCategories">
-                                    <a [routerLink]="" (click)="reportIssue(cat, node.data)">{{cat.value}}</a>
+                                    <a [routerLink]="" (click)="reportIssue(cat, node)">{{cat.value}}</a>
                                 </li>
                             </ul>
                         </div>
@@ -114,11 +111,11 @@
                 </div>
             </div>
             <!--This is the section that holds the child seasons if they want to specify specific episodes-->
-            <div *ngIf="node.leaf">
-                <tvrequests-children [childRequests]="node.data" [isAdmin]="isAdmin" (requestDeleted)="childRequestDeleted($event)"></tvrequests-children>
+            <div *ngIf="node.open">
+                <tvrequests-children [childRequests]="node.childRequests" [isAdmin]="isAdmin" (requestDeleted)="childRequestDeleted($event)"></tvrequests-children>
             </div>
-        </ng-template>
-    </p-treeTable>
+        </div>
+    </div>
 
     <p-paginator [rows]="10" [totalRecords]="totalTv" (onPageChange)="paginate($event)"></p-paginator>
 </div>
diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts
index e59fc5c94..27469af0b 100644
--- a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts
+++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts
@@ -1,12 +1,11 @@
 import { PlatformLocation } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
-import { TreeNode } from "primeng/primeng";
 import { Subject } from "rxjs";
 import { debounceTime, distinctUntilChanged } from "rxjs/operators";
 
 import { AuthService } from "../auth/auth.service";
-import { IIssueCategory, IPagenator, ISonarrProfile, ISonarrRootFolder, ITvRequests } from "../interfaces";
+import { FilterType, IIssueCategory, IPagenator, IRequestsViewModel, ISonarrProfile, ISonarrRootFolder, ITvRequests, OrderType } from "../interfaces";
 import { NotificationService, RequestService, SonarrService } from "../services";
 import { ImageService } from "./../services/image.service";
 
@@ -17,7 +16,7 @@ import { ImageService } from "./../services/image.service";
 })
 export class TvRequestsComponent implements OnInit {
 
-    public tvRequests: TreeNode[];
+    public tvRequests: IRequestsViewModel<ITvRequests>;
     public searchChanged = new Subject<string>();
     public searchText: string;
     public isAdmin: boolean;
@@ -56,11 +55,11 @@ export class TvRequestsComponent implements OnInit {
                 this.resetSearch();
                 return;
             }
-            this.requestService.searchTvRequestsTree(this.searchText)
+            this.requestService.searchTvRequests(this.searchText)
                 .subscribe(m => {
-                    this.tvRequests = m;
-                    this.tvRequests.forEach((val) => this.loadBackdrop(val));
-                    this.tvRequests.forEach((val) => this.setOverride(val.data));
+                    this.tvRequests.collection = m;
+                    this.tvRequests.collection.forEach((val) => this.loadBackdrop(val));
+                    this.tvRequests.collection.forEach((val) => this.setOverride(val));
                 });
         });
         this.defaultPoster = "../../../images/default_tv_poster.png";
@@ -70,47 +69,15 @@ export class TvRequestsComponent implements OnInit {
         }
     }
 
-    public openClosestTab(el: any) {
-        const rowclass = "undefined ng-star-inserted";
-        el = el.toElement || el.relatedTarget || el.target || el.srcElement;
-
-        if (el.nodeName === "BUTTON") {
-
-            const isButtonAlreadyActive = el.parentElement.querySelector(".active");
-            // if a Button already has Class: .active
-            if (isButtonAlreadyActive) {
-                isButtonAlreadyActive.classList.remove("active");
-            } else {
-                el.className += " active";
-            }
-        }
-
-        while (el.className !== rowclass) {
-            // Increment the loop to the parent node until we find the row we need
-            el = el.parentNode;
-        }
-        // At this point, the while loop has stopped and `el` represents the element that has
-        // the class you specified
-
-        // Then we loop through the children to find the caret which we want to click
-        const caretright = "fa-caret-right";
-        const caretdown = "fa-caret-down";
-        for (const value of el.children) {
-            // the caret from the ui has 2 class selectors depending on if expanded or not
-            // we search for both since we want to still toggle the clicking
-            if (value.className.includes(caretright) || value.className.includes(caretdown)) {
-                // Then we tell JS to click the element even though we hid it from the UI
-                value.click();
-                //Break from loop since we no longer need to continue looking
-                break;
-            }
-        }
+    public openClosestTab(node: ITvRequests,el: any) {
+        el.preventDefault();
+        node.open = !node.open;
     }
 
     public ngOnInit() {
         this.amountToLoad = 10;
         this.currentlyLoaded = 10;
-        this.tvRequests = [];
+        this.tvRequests = {collection:[], total:0};
         this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");
 
         this.loadInit();
@@ -119,7 +86,7 @@ export class TvRequestsComponent implements OnInit {
     public paginate(event: IPagenator) {
         const skipAmount = event.first;
 
-        this.requestService.getTvRequestsTree(this.amountToLoad, skipAmount)
+        this.requestService.getTvRequests(this.amountToLoad, skipAmount, OrderType.RequestedDateDesc, FilterType.None, FilterType.None)
             .subscribe(x => {
                 this.tvRequests = x;
                 this.currentlyLoaded = this.currentlyLoaded + this.amountToLoad;
@@ -198,13 +165,13 @@ export class TvRequestsComponent implements OnInit {
 
     private loadInit() {
         this.requestService.getTotalTv().subscribe(x => this.totalTv = x);
-        this.requestService.getTvRequestsTree(this.amountToLoad, 0)
+        this.requestService.getTvRequests(this.amountToLoad, 0, OrderType.RequestedDateDesc, FilterType.None, FilterType.None)
             .subscribe(x => {
                 this.tvRequests = x;
-                this.tvRequests.forEach((val, index) => {
+                this.tvRequests.collection.forEach((val, index) => {
                     this.setDefaults(val);
                     this.loadBackdrop(val);
-                    this.setOverride(val.data);
+                    this.setOverride(val);
                 });
             });
 
@@ -222,20 +189,20 @@ export class TvRequestsComponent implements OnInit {
         this.loadInit();
     }
 
-    private setDefaults(val: any) {
-        if (val.data.posterPath === null) {
-            val.data.posterPath = this.defaultPoster;
+    private setDefaults(val: ITvRequests) {
+        if (val.posterPath === null) {
+            val.posterPath = this.defaultPoster;
         }
     }
 
-    private loadBackdrop(val: TreeNode): void {
-        if (val.data.background != null) {
-            val.data.background = this.sanitizer.bypassSecurityTrustStyle
-                ("url(https://image.tmdb.org/t/p/w1280" + val.data.background + ")");
+    private loadBackdrop(val: ITvRequests): void {
+        if (val.background != null) {
+            val.background = this.sanitizer.bypassSecurityTrustStyle
+                ("url(https://image.tmdb.org/t/p/w1280" + val.background + ")");
         } else {
-            this.imageService.getTvBanner(val.data.tvDbId).subscribe(x => {
+            this.imageService.getTvBanner(val.tvDbId).subscribe(x => {
                 if (x) {
-                    val.data.background = this.sanitizer.bypassSecurityTrustStyle
+                    val.background = this.sanitizer.bypassSecurityTrustStyle
                         ("url(" + x + ")");
                 }
             });
diff --git a/src/Ombi/ClientApp/app/services/request.service.ts b/src/Ombi/ClientApp/app/services/request.service.ts
index 8a04c5cd3..82acc2bfb 100644
--- a/src/Ombi/ClientApp/app/services/request.service.ts
+++ b/src/Ombi/ClientApp/app/services/request.service.ts
@@ -5,7 +5,7 @@ import { HttpClient } from "@angular/common/http";
 import { Observable } from "rxjs";
 
 import { TreeNode } from "primeng/primeng";
-import { IRequestEngineResult } from "../interfaces";
+import { IRequestEngineResult, FilterType } from "../interfaces";
 import { IChildRequests, IFilter, IMovieRequestModel, IMovieRequests, IMovieUpdateModel, IRequestsViewModel, ITvRequests, ITvUpdateModel, OrderType } from "../interfaces";
 import { ITvRequestViewModel } from "../interfaces";
 import { ServiceHelpers } from "./service.helpers";
@@ -64,8 +64,8 @@ export class RequestService extends ServiceHelpers {
         return this.http.put<IMovieRequests>(`${this.url}movie/`, JSON.stringify(request), {headers: this.headers});
     }
 
-    public getTvRequests(count: number, position: number): Observable<ITvRequests[]> {
-        return this.http.get<ITvRequests[]>(`${this.url}tv/${count}/${position}`, {headers: this.headers});
+    public getTvRequests(count: number, position: number, order: OrderType, status: FilterType, availability: FilterType): Observable<IRequestsViewModel<ITvRequests>> {
+        return this.http.get<IRequestsViewModel<ITvRequests>>(`${this.url}tv/${count}/${position}/${order}/${status}/${availability}`, {headers: this.headers});
     }
 
     public getTvRequestsTree(count: number, position: number): Observable<TreeNode[]> {