diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html
new file mode 100644
index 0000000..1c4a22f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html
@@ -0,0 +1,137 @@
+<!--
+~ Copyright 2014-present Open Networking Foundation
+~
+~ Licensed under the Apache License, Version 2.0 (the "License");
+~ you may not use this file except in compliance with the License.
+~ You may obtain a copy of the License at
+~
+~     http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<div id="ov-app" filedrop on-file-drop="appDropped()">
+    <div class="tabular-header">
+        <h2>
+            {{lionFn('title_apps')}}
+            ({{ tableData.length }}
+            {{ lionFn('total') }})
+        </h2>
+        <div class="ctrl-btns">
+            <div class="refresh" (click)="toggleRefresh()">
+                <onos-icon classes="{{ autoRefresh?'active refresh':'refresh' }}"
+                           iconId="refresh" iconSize="42" toolTip="{{ autoRefreshTip }}"></onos-icon>
+            </div>
+            <div class="separator"></div>
+
+            <!--<form id="inputFileForm">-->
+                <!--<input id="uploadFile"-->
+                       <!--type="file" size="50" accept=".oar,.jar"-->
+                       <!--file-model="appFile">-->
+            <!--</form>-->
+
+            <div class="active" trigger-form>
+                <onos-icon classes="{{ 'active upload' }}"
+                        iconId="upload" iconSize="42" toolTip="{{ uploadTip }}"></onos-icon>
+            </div>
+            <div (click)="appAction('activate')">
+                <onos-icon classes="{{ ctrlBtnState.installed?'active play':'play' }}"
+                           iconId="play" iconSize="42" toolTip="{{ activateTip }}"></onos-icon>
+            </div>
+            <div (click)="appAction('deactivate')">
+                <onos-icon classes="{{ ctrlBtnState.active?'active stop':'stop' }}"
+                        iconId="stop" iconSize="42" toolTip="{{ deactivateTip }}"></onos-icon>
+            </div>
+            <div (click)="appAction('uninstall')">
+                 <!--[ngClass]="{active: ctrlBtnState.selection}">-->
+                <!--tooltip tt-msg="uninstallTip"-->
+                <onos-icon classes="{{ ctrlBtnState.selection?'active garbage':'garbage' }}"
+                        iconId="garbage" iconSize="42" toolTip="{{ uninstallTip }}"></onos-icon>
+            </div>
+            <div (click)="downloadApp()">
+                <onos-icon classes="{{ ctrlBtnState.selection?'active download':'download' }}"
+                        iconId="download" iconSize="42" toolTip="{{ downloadTip }}"></onos-icon>
+            </div>
+        </div>
+        <div class="search">
+            <input id="searchinput" [(ngModel)]="tableDataFilter.queryStr" type="search" #search placeholder="Search"/>
+                   <!--(keyup)="onSearch(search.value)" (search)="onSearch(search.value)"/>-->
+            <select [(ngModel)]="tableDataFilter.queryBy">
+                <!--(change)="onSearchBy($event)" (change)="search.value = ''">-->
+                <option value="" disabled>Search By</option>
+                <option value="$">All Fields</option>
+                <option value="title">{{lionFn('title')}}</option>
+                <option value="id">{{lionFn('app_id')}}</option>
+                <option value="version">{{lionFn('version')}}</option>
+                <option value="category">{{lionFn('category')}}</option>
+                <option value="origin">{{lionFn('origin')}}</option>
+            </select>
+        </div>
+
+    </div>
+
+    <div class="summary-list" onos-table-resize>
+        <table onos-flash-changes id-prop="id" width="100%">
+            <tr class="table-header">
+                <th colId="state" [ngStyle]="{width: '32px'}" class="table-icon" (click)="onSort('state')">
+                    <onos-icon classes="active" [iconId]="sortIcon('state')"></onos-icon>
+                </th>
+                <th colId="icon" [ngStyle]="{width: '32px'}" class="table-icon"></th>
+                <th colId="title"  (click)="onSort('title')">{{lionFn('title')}}
+                    <onos-icon classes="active" [iconId]="sortIcon('title')"></onos-icon>
+                </th>
+                <th colId="id" (click)="onSort('id')">{{lionFn('app_id')}}
+                    <onos-icon classes="active" [iconId]="sortIcon('id')"></onos-icon>
+                </th>
+                <th colId="version" (click)="onSort('version')"> {{lionFn('version')}}
+                    <onos-icon classes="active" [iconId]="sortIcon('version')"></onos-icon>
+                </th>
+                <th colId="category" (click)="onSort('category')"> {{lionFn('category')}}
+                    <onos-icon classes="active" [iconId]="sortIcon('category')"></onos-icon>
+                </th>
+                <th colId="origin" (click)="onSort('origin')"> {{lionFn('origin')}}
+                    <onos-icon classes="active" [iconId]="sortIcon('origin')"></onos-icon>
+                </th>
+            </tr>
+
+            <tr *ngIf="tableData.length === 0" class="no-data">
+                <td colspan="5">
+                    {{annots.no_rows_msg}}
+                </td>
+            </tr>
+            <!-- See https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
+                Angular has dropped the filter and order by pipe that were present in
+                AngularJS - filter and sort the data at source instead -->
+            <tr class="table-body" *ngFor="let app of tableData | filter: tableDataFilter"
+                (click)="selectCallback($event, app)"
+                [ngClass]="{selected: app.id === selId, 'data-change': isChanged(app.id)}">
+                <td class="table-icon">
+                    <onos-icon iconId="{{app._iconid_state}}"></onos-icon>
+                </td>
+                <td class="table-icon">
+                    <!-- The path below gets the app icon from the old GUI path -->
+                    <img src="../../ui/rs/applications/{{app.icon}}/icon"
+                                            height="24px" width="24px" />
+                </td>
+                <td>{{ app.title }}</td>
+                <td>{{ app.id }}</td>
+                <td>{{ app.version }}</td>
+                <td>{{ app.category }}</td>
+                <td>{{ app.origin }}</td>
+            </tr>
+        </table>
+
+    </div>
+    <!-- There are 2 ways this component can be included
+     1) Insert it in to the ngFor above and have it created as the row is rendered
+        for the row that has a selId != '' OR
+     2) Include it here and let selId dictate its state
+     The advantage in 2) is that panel can be animated in and out, as it is not
+     killed every time the selection changes.
+     -->
+    <onos-appsdetails  class="floatpanels" id="{{ selId }}"></onos-appsdetails>
+
+</div>