diff --git a/src/components/Resource/FacilityPortTable.jsx b/src/components/Resource/FacilityPortTable.jsx
new file mode 100644
index 0000000..a77f141
--- /dev/null
+++ b/src/components/Resource/FacilityPortTable.jsx
@@ -0,0 +1,72 @@
+import React, { Component } from "react";
+import Table from "../common/Table";
+
+class FacilityPortTable extends Component {
+  columns = [
+    {
+      content: (fp) => (<span className="font-monospace">{fp.name}</span>),
+      path: "name",
+      label: "Name",
+    },
+    { 
+      content: (fp) => (
+        <div className="w-50">
+          {
+            fp.vlan_range && fp.vlan_range.length > 0 &&
+            fp.vlan_range.map((range, index) => 
+              <span
+                className="font-monospace badge bg-primary me-1"
+                key={`vlan-range-${index}`}
+              >
+                {`[${range}]`}
+              </span>
+            )
+          }
+        </div>
+      ), 
+      path: "vlan_range", 
+      label: "VLAN Range"
+    },
+    {
+      content: (fp) => (
+        <div className="w-25">
+          {
+            fp.allocated_vlan_range && fp.allocated_vlan_range.length > 0 &&
+            fp.allocated_vlan_range.map((range, index) => 
+              <span
+                className="font-monospace badge bg-primary"
+                key={`allocate-vlan-range-${index}`}
+              >
+                {`${range}`}
+              </span>
+            )
+          }
+        </div>
+      ),
+      path: "allocated_vlan_range", 
+      label: "Allocated VLAN Range"
+    }
+  ];
+
+  render() {
+    const { facilityPorts, totalCount } = this.props;
+    return (
+      <div>
+        <div className="d-flex flex-row justify-content-between p-2">
+          <div className="fw-bold font-monospace d-flex align-items-center">
+            Facility Ports ({totalCount})
+          </div>
+        </div>
+        <div className="px-2 pb-1">
+          <Table
+            columns={this.columns}
+            data={facilityPorts}
+            tStyle={"table-sm"}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default FacilityPortTable;
diff --git a/src/components/Resource/SummaryTable.jsx b/src/components/Resource/SummaryTable.jsx
index 6f35192..e88c7ff 100644
--- a/src/components/Resource/SummaryTable.jsx
+++ b/src/components/Resource/SummaryTable.jsx
@@ -57,7 +57,7 @@ class SummaryTable extends Component {
     return (
       <div>
         <div className="d-flex flex-row justify-content-between p-2">
-          <div className="font-weight-bold text-monospace d-flex align-items-center">
+          <div className="fw-bold font-monospace d-flex align-items-center">
             Sites ({totalCount})
           </div>
           <div className="d-flex flex-row w-50 justify-content-end">
@@ -79,7 +79,7 @@ class SummaryTable extends Component {
             </button> */}
           </div>
         </div>
-        <div className="mx-2 mb-2 p-2 pb-1 d-flex flex-row justify-content-between bg-light rounded text-monospace">
+        <div className="mx-2 mb-2 p-2 pb-1 d-flex flex-row justify-content-between bg-light rounded font-monospace">
           <div className="w-50">Component Available:</div>
           <div className="w-75 d-flex flex-row justify-content-between">
             <div className="form-check form-check-inline">
diff --git a/src/pages/PublicationTracker.jsx b/src/pages/PublicationTracker.jsx
index 1b13174..847a094 100644
--- a/src/pages/PublicationTracker.jsx
+++ b/src/pages/PublicationTracker.jsx
@@ -134,7 +134,7 @@ class PublicationTracker extends Component {
           !showSpinner &&
           <div>
             <div className="d-flex flex-row justify-content-end w-100 my-2">
-              <span className="text-monospace">Displaying <b>{totalCount}</b> publications.</span>
+              <span className="font-monospace">Displaying <b>{totalCount}</b> publications.</span>
             </div>
             <Table
               columns={this.columns}
diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx
index af51005..15049c2 100644
--- a/src/pages/Resources.jsx
+++ b/src/pages/Resources.jsx
@@ -7,10 +7,12 @@ import SummaryTable from "../components/Resource/SummaryTable";
 import withRouter from "../components/common/withRouter.jsx";
 import { sitesNameMapping } from "../data/sites";
 import sitesParser from "../services/parser/sitesParser";
+import facilityPortsParser from "../services/parser/facilityPortsParser";
 import { getResources } from "../services/resourceService.js";
 import { toast } from "react-toastify";
 import paginate from "../utils/paginate";
 import _ from "lodash";
+import FacilityPortTable from "../components/Resource/FacilityPortTable.jsx";
 
 class Resources extends Component {
   state = {
@@ -23,17 +25,20 @@ class Resources extends Component {
     siteNames: [],
     siteColorMapping: {},
     availableComponents: [],
-    filterQuery: []
+    filterQuery: [],
+    facilityPorts: []
   }
 
   async componentWillMount() {
     try {
       const { data: res } = await getResources(1);
-      const parsedObj = sitesParser(res.data[0], sitesNameMapping.acronymToShortName, "level1");
+      const parsedSites = sitesParser(res.data[0], sitesNameMapping.acronymToShortName, "level1");
+      const parsedFacilityPorts = facilityPortsParser(res.data[0]);
       this.setState({
-        resources: parsedObj.parsedSites,
-        siteNames: parsedObj.siteNames,
-        siteColorMapping: parsedObj.siteColorMapping
+        resources: parsedSites.parsedSites,
+        siteNames: parsedSites.siteNames,
+        siteColorMapping: parsedSites.siteColorMapping,
+        facilityPorts: parsedFacilityPorts
       });
     } catch (err) {
       toast.error("Failed to load resource information. Please reload this page.");
@@ -115,7 +120,7 @@ class Resources extends Component {
     this.setState({ activeDetailName: name });
   }
 
-  getPageData = () => {
+  getSiteData = () => {
     const {
       pageSize,
       currentPage,
@@ -154,9 +159,18 @@ class Resources extends Component {
     return { totalCount: filtered.length, data: resources };
   };
 
+  getFPData = () => {
+    const { facilityPorts } = this.state;
+    return { totalCount: facilityPorts.length, facilityPorts: facilityPorts };
+  }
+
+
+
   render() {
-    const { pageSize, currentPage, sortColumn, searchQuery, activeDetailName } = this.state;
-    const { totalCount, data } = this.getPageData();
+    const { pageSize, currentPage, sortColumn, searchQuery, 
+      activeDetailName, facilityPorts } = this.state;
+    const { totalCount, data } = this.getSiteData();
+    const { totalFPCount } = this.getFPData();
 
     return (
       <div className="container">
@@ -199,6 +213,14 @@ class Resources extends Component {
                 />
               </div>
             </div>
+            <div className="row mt-4">
+              <div className="col-12 bg-info rounded">
+                <FacilityPortTable
+                  facilityPorts={facilityPorts}
+                  totalCount={facilityPorts.length}
+                />
+              </div>
+            </div>
           </div>
       </div>
     );
diff --git a/src/services/parser/facilityPortsParser.js b/src/services/parser/facilityPortsParser.js
new file mode 100644
index 0000000..98874f5
--- /dev/null
+++ b/src/services/parser/facilityPortsParser.js
@@ -0,0 +1,14 @@
+export default function parseSites(data) {
+  let abqm_elements = JSON.parse(data.model);
+  const nodes = abqm_elements.nodes;
+  const facility_ports = nodes.filter(n => n.Type === "FacilityPort");
+  const parsedFacilityPorts = [];
+  for (const fp of facility_ports) {
+    parsedFacilityPorts.push({
+      "name": fp["Name"],
+      "vlan_range": JSON.parse(fp["Labels"]).vlan_range,
+      "allocated_vlan_range": fp["LabelAllocations"] ? JSON.parse(fp["LabelAllocations"]).vlan : []
+    })
+  }
+  return parsedFacilityPorts;
+}
\ No newline at end of file