diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf-routing.module.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf-routing.module.ts
new file mode 100644
index 0000000..b837eb8
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf-routing.module.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2019-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.
+ */
+
+import {NgModule} from '@angular/core';
+import {PipeconfComponent} from './pipeconf/pipeconf.component';
+import {RouterModule, Routes} from '@angular/router';
+
+const pipeconfRoutes: Routes = [
+    {
+        path: '',
+        component: PipeconfComponent
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(pipeconfRoutes)],
+    exports: [RouterModule]
+})
+export class PipeconfRoutingModule {
+}
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf.module.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf.module.ts
new file mode 100644
index 0000000..535fa0f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf.module.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2019-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.
+ */
+
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {PipeconfComponent} from './pipeconf/pipeconf.component';
+import {PipeconfDetailsComponent} from './pipeconfdetails/pipeconfdetails.component';
+import {Gui2FwLibModule} from 'gui2-fw-lib';
+import {FormsModule} from '@angular/forms';
+import {PipeconfRoutingModule} from './pipeconf-routing.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        PipeconfRoutingModule,
+        Gui2FwLibModule,
+        FormsModule
+    ],
+    declarations: [
+        PipeconfComponent,
+        PipeconfDetailsComponent
+    ],
+})
+export class PipeconfModule {
+}
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.css b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.css
new file mode 100644
index 0000000..0057ac8
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.css
@@ -0,0 +1,165 @@
+/*
+ * Copyright 2019-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.
+ */
+
+
+/* Base */
+#pipeconf-info h2 {
+    display: inline-block;
+    margin: 10px 0 10px 0;
+}
+
+#pipeconf-info h3 {
+    display: inline-block;
+    margin-bottom: 10px;
+}
+
+#pipeconf-info {
+    height: 80vh;
+    max-width: 100%;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    padding-left: 16px;
+    padding-right: 20px;
+}
+
+#pipeconf-info::-webkit-scrollbar {
+    display: none;
+}
+
+/* Table */
+.pipeconf-table {
+    width: 100%;
+}
+
+.pipeconf-table tr {
+    transition: background-color 500ms;
+    text-align: left;
+    padding: 8px 4px;
+}
+
+.pipeconf-table .selected {
+    background-color: #dbeffc !important;
+}
+
+.pipeconf-table tr:nth-child(even) {
+    background-color: #f4f4f4;
+}
+
+.pipeconf-table tr:nth-child(odd) {
+    background-color: #fbfbfb;
+}
+
+.pipeconf-table thead th {
+    background-color: #e5e5e6;
+    color: #3c3a3a;
+    font-weight: bold;
+    font-variant: small-caps;
+    text-transform: uppercase;
+    font-size: 10pt;
+    letter-spacing: 0.02em;
+}
+
+.pipeconf-table tr td {
+    padding: 4px;
+    text-align: left;
+    word-wrap: break-word;
+    font-size: 10pt;
+}
+
+.pipeconf-table tr td p {
+    margin: 5px 0;
+}
+
+/* Detail panel */
+.container {
+    padding: 10px;
+    overflow: hidden;
+}
+
+.container .top, .bottom {
+    padding: 15px;
+}
+.container .bottom {
+    overflow-y: scroll;
+}
+
+.container .bottom h2 {
+    margin: 0;
+}
+
+.container .top .detail-panel-header {
+    display: inline-block;
+    margin: 0 0 10px;
+}
+
+
+.detail-panel-table {
+    width: 100%;
+    overflow-y: hidden;
+}
+
+.detail-panel-table td, th {
+    text-align: left;
+    padding: 6px 12px;
+}
+
+.top-info {
+    font-size: 12pt;
+}
+
+.top-info .label {
+    font-weight: bold;
+    text-align: right;
+    display: inline-block;
+    margin: 0;
+    padding-right:6px;
+}
+
+.top-info .value {
+    margin: 0;
+    text-align: left;
+    display: inline-block;
+}
+
+/* Widgets */
+#ov-pipeconf h2 {
+    display: inline-block;
+}
+
+.collapse-btn {
+    cursor: pointer;
+    display: inline-block;
+    max-height: 30px;
+    overflow-y: hidden;
+    position: relative;
+    top: 8px;
+}
+
+.close-btn {
+    display: inline-block;
+    float: right;
+    margin: 0.1em;
+    cursor: pointer;
+}
+
+.text-center {
+    text-align: center !important;
+}
+
+.no-data {
+    text-align: center !important;
+    font-style: italic;
+}
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.html b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.html
new file mode 100644
index 0000000..368997d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.html
@@ -0,0 +1,132 @@
+<!--
+~ Copyright 2019-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-pipeconf">
+    <div class="tabular-header">
+        <h2>Pipeconf for Device {{devId || "(No device selected)"}}</h2>
+
+        <div class="ctrl-btns">
+            <div class="refresh" (click)="toggleRefresh()">
+                <!-- See icon.theme.css for the defintions of the classes active and refresh-->
+                <onos-icon classes="{{ autoRefresh?'active refresh':'refresh' }}" iconId="refresh" iconSize="42" toolTip="{{ autoRefreshTip }}"></onos-icon>
+            </div>
+            <div class="separator"></div>
+            <div (click)="navto('/device')">
+                <onos-icon classes="active-rect" iconId="deviceTable" iconSize="42"></onos-icon>
+            </div>
+            <div (click)="navto('/flow')">
+                <onos-icon classes="active-rect" iconId="flowTable" iconSize="42" toolTip="{{ flowTip }}"></onos-icon>
+            </div>
+            <div (click)="navto('/port')">
+                <onos-icon classes="active-rect" iconId="portTable" iconSize="42" toolTip="{{ portTip }}"></onos-icon>
+            </div>
+            <div (click)="navto('/group')">
+                <onos-icon classes="active-rect" iconId="groupTable" iconSize="42" toolTip="{{ groupTip }}"></onos-icon>
+            </div>
+            <div (click)="navto('/meter')">
+                <onos-icon classes="active-rect" iconId="meterTable" iconSize="42" toolTip="{{ meterTip }}"></onos-icon>
+            </div>
+            <div>
+                <onos-icon classes="current-view" iconId="pipeconfTable" iconSize="42" toolTip="{{ pipeconfTip }}"></onos-icon>
+            </div>
+        </div>
+    </div>
+    <div id="pipeconf-info" auto-height>
+        <div id="pipeconf-basic">
+            <table class="pipeconf-table">
+                <thead>
+                    <th class="text-center" style="width: 160px">Name</th>
+                    <th>Info</th>
+                </thead>
+                <tr *ngIf="pipeconfData === undefined; else pipeconfDataShow">
+                    <td colspan="2" class="no-data">
+                        No PiPipeconf for this device
+                    </td>
+                </tr>
+                <ng-template #pipeconfDataShow>
+                    <tr>
+                        <td class="text-center">ID</td>
+                        <td>{{pipeconfData.pipeconf.id}}</td>
+                    </tr>
+                    <tr>
+                        <td class="text-center">Behaviors</td>
+                        <td>{{pipeconfData.pipeconf.behaviors.join(", ")}}</td>
+                    </tr>
+                    <tr>
+                        <td class="text-center">Extensions</td>
+                        <td>{{pipeconfData.pipeconf.extensions.join(", ")}}</td>
+                    </tr>
+                </ng-template>
+            </table>
+        </div>
+        <h2>Pipeline Model</h2>
+        <div id="pipeconf-tables">
+            <table class="pipeconf-table">
+                <thead>
+                    <th class="text-center">Table</th>
+                    <th class="text-center">Entries used</th>
+                    <th class="text-center">Max entries</th>
+                    <th class="text-center">LookedUp</th>
+                    <th class="text-center">Matched</th>
+                    <th class="text-center">Has Counters</th>
+                    <th class="text-center">Support Aging</th>
+                    <th class="text-left">Match fields</th>
+                    <th class="text-left">Actions</th>
+                </thead>
+                <tr *ngFor="let table of tableData"
+                    (click)="selectCallback($event, table)"
+                    [ngClass]="{selected: table.table === selId, 'data-change': isChanged(table.table)}"
+                    class="clickable">
+                    <td class="text-center">{{table.table}}</td>
+                    <td class="text-center">{{table.active}}</td>
+                    <td class="text-center">{{table.maxsize}}</td>
+                    <td *ngIf="table.haslookedup === 'true'; else hasLookedupNa" class="text-center">{{table.lookedup}}</td>
+                    <ng-template #hasLookedupNa>
+                        <td class="text-center">N/A</td>
+                    </ng-template>
+                    <td class="text-center">{{table.matched}}</td>
+                    <td class="text-center">
+                        <onos-icon
+                                [iconId]="pipeconfModelTable(table.table)?.hasCounters?'active':'inactive'"
+                                [classes]="pipeconfModelTable(table.table)?.hasCounters?'active':'active-rect'"
+                                [iconSize]="20">
+                        </onos-icon>
+                    </td>
+                    <td class="text-center">
+                        <onos-icon
+                                [iconId]="pipeconfModelTable(table.table)?.supportAging?'active':'inactive'"
+                                [classes]="pipeconfModelTable(table.table)?.supportAging?'active':'active-rect'"
+                                [iconSize]="20">
+                        </onos-icon>
+                    </td>
+                    <td *ngIf="pipeconfModelTable(table.table)?.matchFields.length > 0; else noMatchFields">
+                        <p *ngFor="let mf of pipeconfModelTable(table.table)?.matchFields">{{mf.field}}</p>
+                    </td>
+                    <ng-template #noMatchFields>
+                        <td>No match fields</td>
+                    </ng-template>
+                    <td *ngIf="pipeconfModelTable(table.table)?.actions.length !== 0; else noActions">
+                        <p *ngFor="let act of pipeconfModelTable(table.table)?.actions">{{act}}</p>
+                    </td>
+                    <ng-template #noActions>
+                        <td>No table actions</td>
+                    </ng-template>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <onos-pipeconfdetails id="{{selId}}" [actions]="pipeconfData?.pipelineModel.actions" [pipeconfTable]="selectedTable" (closeEvent)="deselectRow($event)"></onos-pipeconfdetails>
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.spec.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.spec.ts
new file mode 100644
index 0000000..6af5b82
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.spec.ts
@@ -0,0 +1,96 @@
+/*
+ * Copyright 2019-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.
+ */
+
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PipeconfComponent} from './pipeconf.component';
+import {
+    FnService,
+    Gui2FwLibModule,
+    LogService,
+} from 'gui2-fw-lib';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FormsModule} from '@angular/forms';
+import {RouterTestingModule} from '@angular/router/testing';
+import {PipeconfDetailsComponent} from '../pipeconfdetails/pipeconfdetails.component';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+/**
+ * ONOS GUI -- Pipeconf Component test - Unit Tests
+ */
+describe('PipeconfComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: PipeconfComponent;
+    let fixture: ComponentFixture<PipeconfComponent>;
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            imports: [
+                BrowserAnimationsModule,
+                FormsModule,
+                RouterTestingModule,
+                Gui2FwLibModule
+            ],
+            declarations: [
+                PipeconfComponent,
+                PipeconfDetailsComponent
+            ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: 'Window', useValue: windowMock },
+            ]
+        }).compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PipeconfComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.ts
new file mode 100644
index 0000000..8a2c9e6
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconf/pipeconf.component.ts
@@ -0,0 +1,197 @@
+/*
+ * Copyright 2018-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.
+ */
+
+import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
+import {
+    FnService,
+    LogService, SortDir,
+    TableBaseImpl,
+    WebSocketService
+} from 'gui2-fw-lib';
+import {ActivatedRoute, Router} from '@angular/router';
+
+const pipeconfReq = 'pipeconfRequest';
+const pipeconfResp = 'pipeConfResponse';
+
+export interface PipeconfHeader {
+    id: string;
+    behaviors: string[];
+    extensions: string[];
+}
+
+export interface ActionParam {
+    name: string;
+    bitWidth: number;
+}
+
+export interface PipeconfAction {
+    name: string;
+    params: ActionParam[];
+}
+
+export interface MatchFields {
+    matchType: string;
+    bitWidth: number;
+    field: string;
+}
+
+export interface PipeconfTable {
+    name: string;
+    maxSize: number;
+    hasCounters: boolean;
+    supportAging: boolean;
+    matchFields: MatchFields[];
+    actions: string[];
+}
+
+export interface PipelineModel {
+    actions: PipeconfAction[];
+    tables: PipeconfTable[];
+}
+
+export interface PipeconfData {
+    pipeconf: PipeconfHeader;
+    pipelineModel: PipelineModel;
+}
+
+
+export interface TableStat {
+    table: string;
+    active: number;
+    haslookedup: boolean;
+    lookedup: number;
+    matched: number;
+    hasmaxsize: boolean;
+    maxsize: number;
+}
+
+export interface TableStats {
+    tableStats: TableStat[];
+}
+
+/**
+ * ONOS GUI -- Pipeconf View Component
+ */
+@Component({
+    selector: 'onos-pipeconf',
+    templateUrl: './pipeconf.component.html',
+    styleUrls: ['./pipeconf.component.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
+})
+export class PipeconfComponent extends TableBaseImpl implements OnInit, OnDestroy {
+    devId: string;
+    pipeconfData: PipeconfData;
+    selectedTable: PipeconfTable;
+    parentSelCb = this.updateSelected; // Func
+
+    // TODO: Update for LION
+    flowTip = 'Show flow view for selected device';
+    portTip = 'Show port view for selected device';
+    groupTip = 'Show group view for selected device';
+    meterTip = 'Show meter view for selected device';
+    pipeconfTip = 'Show pipeconf view for selected device';
+    na = 'N/A';
+
+    constructor(
+        protected fs: FnService,
+        protected log: LogService,
+        protected ar: ActivatedRoute,
+        protected router: Router,
+        protected wss: WebSocketService,
+        private ref: ChangeDetectorRef,
+    ) {
+        super(fs, log, wss, 'tableStat', 'table');
+        this.ar.queryParams.subscribe(params => {
+            this.devId = params['devId'];
+
+        });
+
+        this.payloadParams = {
+            devId: this.devId
+        };
+
+        this.responseCallback = this.tableStatsResponseCb;
+
+        this.sortParams = {
+            firstCol: 'table',
+            firstDir: SortDir.desc,
+            secondCol: 'active',
+            secondDir: SortDir.asc,
+        };
+    }
+
+    ngOnInit() {
+        // Also make a once off call to get the Pipeconf Static information
+        this.wss.bindHandlers(new Map<string, (data) => void>([
+            [pipeconfResp, (data) => {
+                this.pipeconfData = data;
+                this.ref.markForCheck();
+                this.log.debug('Pipeconf static data received', this.pipeconfData);
+            }]
+        ]));
+
+        const p = Object.assign({}, this.sortParams, this.payloadParams);
+
+        // Allow it to sit in pending events
+        if (this.wss.isConnected()) {
+            this.wss.sendEvent(pipeconfReq, p);
+        }
+
+        this.init();
+
+        this.log.debug('PipeconfComponent initialized');
+    }
+
+    ngOnDestroy() {
+        this.destroy();
+        this.wss.unbindHandlers([pipeconfResp]);
+
+        this.log.debug('PipeconfComponent destroyed');
+    }
+
+    tableStatsResponseCb(newTableData: TableStats) {
+        // checks if data changed for row flashing
+    }
+
+    /**
+     * There's nothing to navigate down further to for Pipeconf - instead we can
+     * navigate for the Device that was passed in
+     * @param path
+     */
+    navto(path) {
+        this.log.debug('navigate to', path);
+        this.router.navigate([path], { queryParams: { devId: this.devId } });
+    }
+
+    pipeconfModelTable(table: string): PipeconfTable {
+        if (this.pipeconfData === undefined) {
+            return; // Not loaded yet
+        }
+        for (const t of this.pipeconfData.pipelineModel.tables) {
+            if (t.name === table) {
+                return t;
+            }
+        }
+        this.log.warn('Could not find table', table, 'in PipelineModel');
+    }
+
+    updateSelected(event: any, selRow: any): void {
+        if (this.selId === undefined) {
+            this.selectedTable = undefined;
+        } else {
+            this.selectedTable = this.pipeconfModelTable(this.selId);
+        }
+    }
+}
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.css b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.css
new file mode 100644
index 0000000..48b5c0d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.css
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2019-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.
+ */
+
+/* More in generic panel.css */
+
+#pipeconf-details-panel.floatpanel {
+    z-index: 0;
+}
+
+
+#pipeconf-details-panel .container {
+    padding: 8px 12px;
+}
+
+#pipeconf-details-panel .close-btn {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    cursor: pointer;
+}
+
+#pipeconf-details-panel .dev-icon {
+    display: inline-block;
+    padding: 0 6px 0 0;
+    vertical-align: middle;
+}
+
+#pipeconf-details-panel h2 {
+    display: inline-block;
+    margin: 8px 0;
+}
+
+
+#pipeconf-details-panel h2 input {
+    font-size: 0.90em;
+    width: 106%;
+}
+
+#pipeconf-details-panel .top-tables {
+    font-size: 10pt;
+    white-space: nowrap;
+}
+
+#pipeconf-details-panel .top div.left {
+    float: left;
+    padding: 0 18px 0 0;
+}
+#pipeconf-details-panel .top div.right {
+    display: inline-block;
+}
+
+#pipeconf-details-panel td.label {
+    font-weight: bold;
+    text-align: right;
+    padding-right: 6px;
+}
+
+#pipeconf-details-panel .actionBtns div {
+    padding: 12px 6px;
+}
+
+#pipeconf-details-panel hr {
+    width: 100%;
+    margin: 2px auto;
+}
+
+#pipeconf-details-panel .bottom table {
+    border-spacing: 0;
+}
+
+#pipeconf-details-panel .bottom th {
+    letter-spacing: 0.02em;
+}
+
+#pipeconf-details-panel .bottom th,
+#pipeconf-details-panel .bottom td {
+    padding: 6px 12px;
+    text-align: center;
+}
+
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.html b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.html
new file mode 100644
index 0000000..399ad28
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.html
@@ -0,0 +1,90 @@
+<!--
+~ Copyright 2019-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="pipeconf-details-panel" class="floatpanel"
+     [@pipeconfDetailsState]="id!=='' && !closed">
+    <div class="container">
+        <div class="top">
+            <div class="close-btn">
+                <onos-icon class="close-btn" classes="active-close"
+                           iconId="close" iconSize="20"
+                           (click)="close()"></onos-icon>
+            </div>
+            <h2>{{id}}</h2>
+            <div class="top-content">
+                <div class="top-tables">
+                    <div class="left">
+                        <table>
+                            <tbody>
+                            <tr>
+                                <td class="label" width="110">Name :</td>
+                                <td class="value"
+                                    width="80">{{pipeconfTable?.name}}</td>
+                                <td class="label" width="110">Support Aging :
+                                </td>
+                                <td class="value"
+                                    width="80">{{pipeconfTable?.supportAging}}</td>
+                            </tr>
+                            <tr>
+                                <td class="label" width="110">Has counters :
+                                </td>
+                                <td class="value"
+                                    width="80">{{pipeconfTable?.hasCounters}}</td>
+                                <td class="label" width="110">Max entries :</td>
+                                <td class="value"
+                                    width="80">{{pipeconfTable?.maxSize}}</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <hr>
+        </div>
+        <div class="bottom">
+            <h2 class="match-title">Match fields</h2>
+            <table>
+                <thead>
+                <th>Field</th>
+                <th>Match type</th>
+                <th>Bit width</th>
+                </thead>
+                <tbody>
+                <tr *ngFor="let mf of pipeconfTable?.matchFields">
+                    <td>{{mf.field}}</td>
+                    <td>{{mf.matchType}}</td>
+                    <td>{{mf.bitWidth}}</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="bottom">
+            <h2 class="action-title">Actions</h2>
+            <table>
+                <thead>
+                <th>Action</th>
+                <th>Parameter</th>
+                </thead>
+                <tbody>
+                <tr *ngFor="let actionKey of pipeconfTable?.actions">
+                    <td>{{actionKey}}</td>
+                    <td><p *ngFor="let param of actionDetails(actionKey).params">{{param.name}}:{{param.bitWidth}}</p></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.spec.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.spec.ts
new file mode 100644
index 0000000..f8bbf7a
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.spec.ts
@@ -0,0 +1,81 @@
+/*
+ * Copyright 2019-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.
+ */
+
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PipeconfDetailsComponent} from './pipeconfdetails.component';
+import {
+    FnService, Gui2FwLibModule,
+    LogService,
+} from 'gui2-fw-lib';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+describe('PipeconfDetailsComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: PipeconfDetailsComponent;
+    let fixture: ComponentFixture<PipeconfDetailsComponent>;
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'panel' });
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            imports: [BrowserAnimationsModule, Gui2FwLibModule],
+            declarations: [PipeconfDetailsComponent],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: 'Window', useValue: windowMock },
+            ]
+        }).compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PipeconfDetailsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.ts b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.ts
new file mode 100644
index 0000000..2fcb117
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/pipeconf/pipeconfdetails/pipeconfdetails.component.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2019-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.
+ */
+
+import {
+    Component, Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    SimpleChanges
+} from '@angular/core';
+import {
+    DetailsPanelBaseImpl,
+    FnService,
+    IconService,
+    LogService, WebSocketService
+} from 'gui2-fw-lib';
+import {PipeconfAction, PipeconfTable} from '../pipeconf/pipeconf.component';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+/**
+ * ONOS GUI -- Pipeconf Detail View Component
+ */
+@Component({
+    selector: 'onos-pipeconfdetails',
+    templateUrl: './pipeconfdetails.component.html',
+    styleUrls: ['./pipeconfdetails.component.css',
+        '../../../fw/widget/panel.css', '../../../fw/widget/panel-theme.css'],
+    animations: [
+        trigger('pipeconfDetailsState', [
+            state('true', style({
+                transform: 'translateX(-100%)',
+                opacity: '100'
+            })),
+            state('false', style({
+                transform: 'translateX(0%)',
+                opacity: '0'
+            })),
+            transition('0 => 1', animate('100ms ease-in')),
+            transition('1 => 0', animate('100ms ease-out'))
+        ])
+    ]
+})
+export class PipeconfDetailsComponent extends DetailsPanelBaseImpl implements OnInit, OnDestroy, OnChanges {
+    @Input() id: string;
+    @Input() pipeconfTable: PipeconfTable;
+    @Input() actions: PipeconfAction[] = [];
+
+    constructor(protected fs: FnService,
+                protected log: LogService,
+                protected is: IconService,
+                protected wss: WebSocketService
+    ) {
+        super(fs, log, wss, 'device');
+    }
+
+    ngOnInit() {
+        this.init();
+        this.log.debug('Pipeconf Details Component initialized:', this.id);
+    }
+
+    /**
+     * Stop listening to appDetailsResponse on WebSocket
+     */
+    ngOnDestroy() {
+        this.destroy();
+        this.log.debug('Pipeconf Details Component destroyed');
+    }
+
+    /**
+     * Details Panel Data Request on row selection changes
+     * Should be called whenever id changes
+     * If id is empty, no request is made
+     */
+    ngOnChanges(changes: SimpleChanges) {
+        if (this.id === undefined || this.id === '') {
+            this.closed = false;
+        }
+    }
+
+    actionDetails(name: string): PipeconfAction {
+        for (const action of this.actions) {
+            if (action.name === name) {
+                return action;
+            }
+        }
+        this.log.debug('Action not found', name);
+    }
+
+}