diff --git a/react/src/App.js b/react/src/App.js
index 52ae7157c..0cfab419e 100644
--- a/react/src/App.js
+++ b/react/src/App.js
@@ -17,9 +17,8 @@ import {Epoch} from "./Epoch";
 import {LegacyDealDetail} from "./LegacyDealDetail"
 import {SettingsPage} from "./Settings";
 import {Banner} from "./Banner";
-import {PieceDirectoryDetail, PieceDirectoryPage} from "./PieceDirectory";
 import {ProposalLogsPage} from "./ProposalLogs";
-import {InspectPage, InspectPiecePage} from "./Inspect";
+import {PieceDoctorPage, InspectPiecePage, LIDPage} from "./LID";
 import {RetrievalLogsPage} from "./RetrievalLogs";
 import {RetrievalLogDetail} from "./RetrievalLogDetail";
 
@@ -46,6 +45,7 @@ function App(props) {
                                         <Route path="/retrieval-logs/from/:cursor/page/:pageNum" element={<RetrievalLogsPage />} />
                                         <Route path="/retrieval-logs/:peerID/:transferID" element={<RetrievalLogDetail />} />
                                         <Route path="/storage-space" element={<StorageSpacePage />} />
+                                        <Route path="/lid" element={<LIDPage />} />
                                         <Route path="/sealing-pipeline" element={<SealingPipelinePage />} />
                                         <Route path="/funds" element={<FundsPage />} />
                                         <Route path="/funds/from/:cursor/page/:pageNum" element={<FundsPage />} />
@@ -53,13 +53,12 @@ function App(props) {
                                         <Route path="/deal-transfers" element={<DealTransfersPage />} />
                                         <Route path="/mpool" element={<MpoolPage />} />
                                         <Route path="/settings" element={<SettingsPage />} />
-                                        <Route path="/piece-directory" element={<PieceDirectoryPage />} />
                                         <Route path="/deals/:dealID" element={<DealDetail />} />
                                         <Route path="/legacy-deals/:dealID" element={<LegacyDealDetail />} />
-                                        <Route path="/inspect" element={<InspectPage />} />
-                                        <Route path="/inspect/piece/:pieceCID" element={<InspectPiecePage />} />
-                                        <Route path="/inspect/from/:cursor/page/:pageNum" element={<InspectPage />} />
-                                        <Route path="/inspect/:query" element={<InspectPage />} />
+                                        <Route path="/piece-doctor" element={<PieceDoctorPage />} />
+                                        <Route path="/piece-doctor/piece/:pieceCID" element={<InspectPiecePage />} />
+                                        <Route path="/piece-doctor/from/:cursor/page/:pageNum" element={<PieceDoctorPage />} />
+                                        <Route path="/piece-doctor/:query" element={<PieceDoctorPage />} />
                                         <Route path="/" element={<StorageDealsPage />} />
                                     </Routes>
                                 </div>
diff --git a/react/src/CumulativeBarChart.js b/react/src/CumulativeBarChart.js
index 5efe5482d..abdbf827a 100644
--- a/react/src/CumulativeBarChart.js
+++ b/react/src/CumulativeBarChart.js
@@ -1,5 +1,5 @@
 /* global BigInt */
-import {humanFIL, humanFileSize} from "./util";
+import {addCommas, humanFIL, humanFileSize, isInteger} from "./util";
 import React from "react";
 import './CumulativeBarChart.css'
 
@@ -72,7 +72,11 @@ function amountToString(unit, amount) {
         case 'attoFIL':
             return humanFIL(amount)
         default:
-            return amount.toString()
+            const amtStr = amount.toString()
+            if (isInteger(amtStr)) {
+                return addCommas(amtStr)
+            }
+            return amtStr
     }
 }
 
diff --git a/react/src/DealDetail.js b/react/src/DealDetail.js
index 5e182ccc8..913bfe7a6 100644
--- a/react/src/DealDetail.js
+++ b/react/src/DealDetail.js
@@ -146,7 +146,7 @@ export function DealDetail(props) {
                 </tr>
                 <tr>
                     <th>Deal Data Root CID</th>
-                    <td><Link to={'/inspect/'+deal.DealDataRoot}>{deal.DealDataRoot}</Link></td>
+                    <td><Link to={'/piece-doctor/'+deal.DealDataRoot}>{deal.DealDataRoot}</Link></td>
                 </tr>
                 <tr>
                     <th>Verified</th>
@@ -162,7 +162,7 @@ export function DealDetail(props) {
                 </tr>
                 <tr>
                     <th>Piece CID</th>
-                    <td><Link to={'/inspect/'+deal.PieceCid}>{deal.PieceCid}</Link></td>
+                    <td><Link to={'/piece-doctor/'+deal.PieceCid}>{deal.PieceCid}</Link></td>
                 </tr>
                 <tr>
                     <th>Piece Size</th>
diff --git a/react/src/DealTransfers.js b/react/src/DealTransfers.js
index 178aaf53e..061f45684 100644
--- a/react/src/DealTransfers.js
+++ b/react/src/DealTransfers.js
@@ -5,7 +5,6 @@ import {TransfersQuery, TransferStatsQuery} from "./gql";
 import moment from "moment"
 import {PageContainer} from "./Components";
 import {Link} from "react-router-dom";
-import {toFixed} from "./util";
 import arrowLeftRightImg from './bootstrap-icons/icons/arrow-left-right.svg'
 import './DealTransfers.css'
 
diff --git a/react/src/LID.css b/react/src/LID.css
new file mode 100644
index 000000000..165b0920b
--- /dev/null
+++ b/react/src/LID.css
@@ -0,0 +1,45 @@
+.block-stats th {
+    text-align: left;
+}
+
+.block-stats td, .block-stats th {
+    padding: 0.5em 1em;
+}
+
+.lid-graphs {
+    margin-top: 2em;
+    width: 100%;
+}
+
+.lid-graphs td {
+    vertical-align: top;
+}
+
+.storage-chart {
+    padding: 1em;
+}
+
+.storage-chart .indexed, .storage-chart .unsealed, .storage-chart .active {
+    background-color: rgb(44, 123, 229);
+}
+
+.storage-chart .flagged {
+    background-color: rgb(166, 197, 247);
+}
+
+.storage-chart .sealed, .storage-chart .inactive {
+    background-color: #b3b3b3;
+}
+
+.storage-fields td {
+    padding: 0.5em 1em;
+    font-weight: normal;
+}
+
+.sectors-list-link p, .flagged-pieces-link p {
+    padding: 1em;
+}
+
+.sectors-list-link a, .flagged-pieces-link a {
+    margin-left: 1em;
+}
\ No newline at end of file
diff --git a/react/src/Inspect.js b/react/src/LID.js
similarity index 70%
rename from react/src/Inspect.js
rename to react/src/LID.js
index 09d0844d2..868831f6d 100644
--- a/react/src/Inspect.js
+++ b/react/src/LID.js
@@ -1,3 +1,4 @@
+/* global BigInt */
 import {useMutation, useQuery} from "@apollo/react-hooks";
 import {
     FlaggedPiecesQuery, PieceBuildIndexMutation,
@@ -10,30 +11,284 @@ import {PageContainer, ShortDealLink} from "./Components";
 import {Link, useNavigate, useParams} from "react-router-dom";
 import {dateFormat} from "./util-date";
 import xImg from './bootstrap-icons/icons/x-lg.svg'
-import inspectImg from './bootstrap-icons/icons/wrench.svg'
+import lidImg from './bootstrap-icons/icons/wrench.svg'
+//import repairImg from './bootstrap-icons/icons/wrench-white.svg'
+import './LID.css'
 import './Inspect.css'
 import {Pagination} from "./Pagination";
 import {Info, InfoListItem} from "./Info";
+import {CumulativeBarChart, CumulativeBarLabels} from "./CumulativeBarChart";
+import {addCommas, humanFileSize} from "./util";
 
-var inspectBasePath = '/inspect'
+var lidBasePath = '/lid'
 
-export function InspectMenuItem(props) {
+export function LIDMenuItem(props) {
     return (
-        <Link key="inspect" className="menu-item" to={inspectBasePath}>
-            <img className="icon" alt="" src={inspectImg} />
-            <h3>Inspect</h3>
+        <Link key="lid" className="menu-item" to={lidBasePath}>
+            <img className="icon" alt="" src={lidImg} />
+            <h3>Local Index Directory</h3>
         </Link>
     )
 }
 
-// Main page with flagged pieces
-export function InspectPage(props) {
-    return <PageContainer title="Inspect Piece metadata">
-        <InspectContent />
+// Landing page for LID
+export function LIDPage(props) {
+    return <PageContainer title="Local Index Directory">
+        <LIDContent />
+    </PageContainer>
+}
+
+function LIDContent() {
+    return <div className="lid">
+        <BlockStatsSection />
+        <table className="lid-graphs">
+            <tbody>
+            <tr>
+                <td width="50%">
+                    <DealDataSection />
+                    <PiecesSection />
+                </td>
+                <td>
+                    <SectorUnsealedSection />
+                    <SectorProvingState />
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+}
+
+function BlockStatsSection() {
+    return <div>
+        <h3>Block Stats</h3>
+
+        <table className="block-stats">
+            <tbody>
+            <tr>
+                <th>Total blocks:</th>
+                <td>{addCommas(32129310123)}</td>
+            </tr>
+            <tr>
+                <th>Avg Block size:</th>
+                <td>{humanFileSize(256*1024)}</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+}
+
+function mockDealData() {
+    return {
+        data: {
+            storage: {
+                Indexed: BigInt(12345432343223),
+                Flagged: BigInt(1234512345423),
+                Sealed: BigInt(1634512345423),
+            }
+        }
+    }
+}
+
+function DealDataSection() {
+    // const {loading, error, data} = useQuery(StorageQuery, { pollInterval: 10000 })
+    const {loading, error, data} = mockDealData()
+
+    if (loading) {
+        return <div>Loading...</div>
+    }
+    if (error) {
+        return <div>Error: {error.message}</div>
+    }
+
+    var storage = data.storage
+
+    const bars = [{
+        name: 'Indexed',
+        className: 'indexed',
+        amount: storage.Indexed,
+        description: ''
+    }, {
+        name: 'Flagged',
+        className: 'flagged',
+        amount: storage.Flagged,
+        description: ''
+    }, {
+        name: 'Sealed Only',
+        className: 'sealed',
+        amount: storage.Sealed,
+        description: ''
+    }]
+
+    return <div>
+        <h3>Deal Data</h3>
+
+        <div className="storage-chart">
+            <CumulativeBarChart bars={bars} unit="byte" />
+            <CumulativeBarLabels bars={bars} unit="byte" />
+        </div>
+    </div>
+}
+
+function mockPiecesData() {
+    return {
+        data: {
+            storage: {
+                Indexed: BigInt(2132),
+                Flagged: BigInt(123),
+                Sealed: BigInt(213),
+            }
+        }
+    }
+}
+
+function PiecesSection() {
+    // const {loading, error, data} = useQuery(StorageQuery, { pollInterval: 10000 })
+    const {loading, error, data} = mockPiecesData()
+
+    if (loading) {
+        return <div>Loading...</div>
+    }
+    if (error) {
+        return <div>Error: {error.message}</div>
+    }
+
+    var storage = data.storage
+
+    const bars = [{
+        name: 'Indexed',
+        className: 'indexed',
+        amount: storage.Indexed,
+        description: ''
+    }, {
+        name: 'Flagged',
+        className: 'flagged',
+        amount: storage.Flagged,
+        description: ''
+    }, {
+        name: 'Sealed Only',
+        className: 'sealed',
+        amount: storage.Sealed,
+        description: ''
+    }]
+
+    return <div>
+        <h3>Pieces</h3>
+
+        <div className="storage-chart">
+            <CumulativeBarChart bars={bars} />
+            <CumulativeBarLabels bars={bars} />
+        </div>
+
+        <div className="flagged-pieces-link">
+            <h3>Flagged Pieces</h3>
+            <p>
+                <b>{addCommas(storage.Flagged)}</b> Flagged Pieces
+                <Link to={"/piece-doctor"} className="button">View Flagged Pieces</Link>
+            </p>
+        </div>
+    </div>
+}
+
+function mockSectorUnsealedData() {
+    return {
+        data: {
+            sectors: {
+                Unsealed: BigInt(1334),
+                Sealed: BigInt(321),
+            }
+        }
+    }
+}
+
+function SectorUnsealedSection() {
+    // const {loading, error, data} = useQuery(StorageQuery, { pollInterval: 10000 })
+    const {loading, error, data} = mockSectorUnsealedData()
+
+    if (loading) {
+        return <div>Loading...</div>
+    }
+    if (error) {
+        return <div>Error: {error.message}</div>
+    }
+
+    var sectors = data.sectors
+
+    const bars = [{
+        name: 'Unsealed Copy',
+        className: 'unsealed',
+        amount: sectors.Unsealed,
+        description: ''
+    }, {
+        name: 'Sealed Only',
+        className: 'sealed',
+        amount: sectors.Sealed,
+        description: ''
+    }]
+
+    return <div>
+        <h3>Sector Unsealed Copies</h3>
+
+        <div className="storage-chart">
+            <CumulativeBarChart bars={bars} />
+            <CumulativeBarLabels bars={bars} />
+        </div>
+    </div>
+}
+
+function mockSectorProvingState() {
+    return {
+        data: {
+            sectors: {
+                Active: BigInt(1274),
+                Inactive: BigInt(381),
+            }
+        }
+    }
+}
+
+function SectorProvingState() {
+    // const {loading, error, data} = useQuery(StorageQuery, { pollInterval: 10000 })
+    const {loading, error, data} = mockSectorProvingState()
+
+    if (loading) {
+        return <div>Loading...</div>
+    }
+    if (error) {
+        return <div>Error: {error.message}</div>
+    }
+
+    var sectors = data.sectors
+
+    const bars = [{
+        name: 'Active',
+        className: 'active',
+        amount: sectors.Active,
+        description: ''
+    }, {
+        name: 'Inactive',
+        className: 'inactive',
+        amount: sectors.Inactive,
+        description: ''
+    }]
+
+    return <div>
+        <h3>Sector Proving State</h3>
+
+        <div className="storage-chart">
+            <CumulativeBarChart bars={bars} />
+            <CumulativeBarLabels bars={bars} />
+        </div>
+    </div>
+}
+
+// Page listing pieces flagged by the piece doctor
+export function PieceDoctorPage(props) {
+    return <PageContainer title="Piece Doctor">
+        <PieceDoctorContent />
     </PageContainer>
 }
 
-function InspectContent() {
+function PieceDoctorContent() {
     const params = useParams()
     const [searchQuery, setSearchQuery] = useState(params.query)
 
@@ -56,7 +311,7 @@ function FlaggedPieces({setSearchQuery}) {
         const val = parseInt(e.target.value)
         RowsPerPage.save(val)
         setRowsPerPage(val)
-        navigate(inspectBasePath)
+        navigate(lidBasePath)
         scrollTop()
     }
 
@@ -93,7 +348,7 @@ function FlaggedPieces({setSearchQuery}) {
     }
 
     const paginationParams = {
-        basePath: inspectBasePath,
+        basePath: lidBasePath,
         cursor, pageNum, totalCount,
         rowsPerPage: rowsPerPage,
         moreRows: moreRows,
@@ -149,7 +404,7 @@ function FlaggedPieceRow({piece}) {
 
     return <tr>
         <td>
-            <Link to={"/inspect/piece/"+piece.PieceCid}>
+            <Link to={"/piece-doctor/piece/"+piece.PieceCid}>
                 {piece.PieceCid}
             </Link>
         </td>
@@ -281,7 +536,7 @@ function PiecesWithPayload({payloadCid, pieceCids, setSearchQuery}) {
         <div className="title">Pieces with payload CID {payloadCid}:</div>
         {pieceCids.map(pc => (
             <div key={pc} className="payload-cid">
-                <Link onClick={() => setSearchQuery(pc)} to={"/inspect/"+pc}>{pc}</Link>
+                <Link onClick={() => setSearchQuery(pc)} to={"/piece-doctor/"+pc}>{pc}</Link>
             </div>
         ))}
     </div>
diff --git a/react/src/LegacyDealDetail.js b/react/src/LegacyDealDetail.js
index 290e14840..016a60c63 100644
--- a/react/src/LegacyDealDetail.js
+++ b/react/src/LegacyDealDetail.js
@@ -79,7 +79,7 @@ export function LegacyDealDetail(props) {
                 </tr>
                 <tr>
                     <th>Deal Data Root CID</th>
-                    <td><Link to={'/inspect/'+deal.DealDataRoot}>{deal.DealDataRoot}</Link></td>
+                    <td><Link to={'/piece-doctor/'+deal.DealDataRoot}>{deal.DealDataRoot}</Link></td>
                 </tr>
                 <tr>
                     <th>CAR File Path</th>
@@ -87,7 +87,7 @@ export function LegacyDealDetail(props) {
                 </tr>
                 <tr>
                     <th>Piece CID</th>
-                    <td><Link to={'/inspect/'+deal.PieceCid}>{deal.PieceCid}</Link></td>
+                    <td><Link to={'/piece-doctor/'+deal.PieceCid}>{deal.PieceCid}</Link></td>
                 </tr>
                 <tr>
                     <th>Verified</th>
diff --git a/react/src/Loading.css b/react/src/Loading.css
new file mode 100644
index 000000000..2753568c2
--- /dev/null
+++ b/react/src/Loading.css
@@ -0,0 +1,60 @@
+/*!
+ * three-dots - v0.3.2
+ * CSS loading animations made with single element
+ * https://nzbin.github.io/three-dots/
+ *
+ * Copyright (c) 2018 nzbin
+ * Released under MIT License
+ */
+@charset "UTF-8";
+
+/**
+ * ==============================================
+ * Dot Flashing
+ * ==============================================
+ */
+.dot-flashing {
+    position: relative;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: #b3b3b3;
+    color: #b3b3b3;
+    animation: dot-flashing 1s infinite linear alternate;
+    animation-delay: 0.5s;
+}
+.dot-flashing::before, .dot-flashing::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 0;
+}
+.dot-flashing::before {
+    left: -15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: #b3b3b3;
+    color: #b3b3b3;
+    animation: dot-flashing 1s infinite alternate;
+    animation-delay: 0s;
+}
+.dot-flashing::after {
+    left: 15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: #b3b3b3;
+    color: #b3b3b3;
+    animation: dot-flashing 1s infinite alternate;
+    animation-delay: 1s;
+}
+
+@keyframes dot-flashing {
+    0% {
+        background-color: #b3b3b3;
+    }
+    50%, 100% {
+        background-color: #f9fbfd;
+    }
+}
diff --git a/react/src/Menu.js b/react/src/Menu.js
index 5fa4250c0..fc4fc7f14 100644
--- a/react/src/Menu.js
+++ b/react/src/Menu.js
@@ -8,7 +8,7 @@ import {FundsMenuItem} from "./Funds";
 import gridImg from './bootstrap-icons/icons/grid-3x3-gap.svg'
 import './Menu.css'
 import {SettingsMenuItem} from "./Settings";
-import {InspectMenuItem} from "./Inspect";
+import {LIDMenuItem} from "./LID";
 import {ProposalLogsMenuItem} from "./ProposalLogs";
 import {RetrievalLogsMenuItem} from "./RetrievalLogs";
 
@@ -22,12 +22,12 @@ export function Menu(props) {
             <StorageDealsMenuItem />
             <ProposalLogsMenuItem />
             <RetrievalLogsMenuItem />
+            <LIDMenuItem />
             <StorageSpaceMenuItem />
             <SealingPipelineMenuItem />
-            <FundsMenuItem />
             <DealPublishMenuItem />
+            <FundsMenuItem />
             <DealTransfersMenuItem />
-            <InspectMenuItem />
             <Link key="mpool" className="menu-item" to="/mpool">
                 <img className="icon" alt="" src={gridImg} />
                 <h3>Message Pool</h3>
diff --git a/react/src/Pagination.js b/react/src/Pagination.js
index 9fcac7f77..1d56dd8dd 100644
--- a/react/src/Pagination.js
+++ b/react/src/Pagination.js
@@ -27,7 +27,7 @@ export function Pagination({basePath, cursor, pageNum, moreRows, totalCount, row
     var totalPages = Math.ceil(totalCount / rowsPerPage)
 
     var pageLinks = {}
-    if (cursor) {
+    if (cursor !== null && cursor !== "") {
         if (pageNum === 2) {
             pageLinks.prev = basePath
         } else if (pageNum > 2) {
diff --git a/react/src/PieceDirectory.css b/react/src/PieceDirectory.css
deleted file mode 100644
index dd0189dd0..000000000
--- a/react/src/PieceDirectory.css
+++ /dev/null
@@ -1,79 +0,0 @@
-.piece-directory table {
-    font-size: 1em;
-    width: 100%;
-}
-
-.piece-directory td, .piece-directory th {
-    padding: 0.5em 1em;
-    font-weight: normal;
-}
-
-.piece-directory th {
-    white-space: nowrap;
-    text-align: left;
-    opacity: 0.6;
-}
-
-.piece-directory .search {
-    position: absolute;
-    right: 8em;
-    top: 2em;
-}
-
-.piece-directory .search input {
-    background-image: url("./bootstrap-icons/icons/search.svg");
-    background-repeat: no-repeat;
-    background-position: left 0.5em center;
-    padding-left: 2em;
-    padding-right: 2em;
-}
-
-.piece-directory .search .clear-text {
-    position: absolute;
-    right: 1em;
-    top: 1.1em;
-    cursor: pointer;
-}
-
-.piece-directory h3 {
-    margin-top: 2em;
-}
-
-.piece-directory .title {
-    font-size: 1.25em;
-    color: #a61e4d;
-    margin: 2em 0.8em 1.5em 0.8em;
-}
-
-.piece-detail {
-    padding: 1em 0 5em 0;
-}
-
-.piece-detail .title {
-    color: inherit;
-    font-weight: normal;
-    margin:  0.8em;
-}
-
-.piece-detail table {
-    font-size: 1em;
-}
-
-.piece-detail table.deals tr td:first-child {
-    width: 8em;
-}
-.piece-detail table.deals tr td:last-child {
-    line-break: anywhere;
-}
-
-.piece-detail table th {
-    text-align: left;
-}
-
-.piece-detail table.deals .param {
-    color: #777777;
-}
-
-.piece-detail td, .piece-detail th {
-    padding: 0.5em 1em;
-}
diff --git a/react/src/PieceDirectory.js b/react/src/PieceDirectory.js
deleted file mode 100644
index 656460ce6..000000000
--- a/react/src/PieceDirectory.js
+++ /dev/null
@@ -1,279 +0,0 @@
-import {useQuery} from "@apollo/react-hooks";
-import {
-    DealsCountQuery,
-} from "./gql";
-import moment from "moment";
-import {DebounceInput} from 'react-debounce-input';
-import React, {useState} from "react";
-import {PageContainer, ShortDealLink} from "./Components";
-import {Link} from "react-router-dom";
-import {dateFormat} from "./util-date";
-import columnsGapImg from './bootstrap-icons/icons/columns-gap.svg'
-import xImg from './bootstrap-icons/icons/x-lg.svg'
-import './PieceDirectory.css'
-import {addCommas} from "./util";
-
-const piecesBasePath = '/pieces'
-
-export function PieceDirectoryPage(props) {
-    return <PageContainer title="Piece Metadata">
-        <PieceDirectoryContent />
-    </PageContainer>
-}
-
-function PieceDirectoryContent(props) {
-    const [searchQuery, setSearchQuery] = useState('')
-    const handleSearchQueryChange = (event) => {
-        setSearchQuery(event.target.value)
-    }
-    const clearSearchBox = () => {
-        setSearchQuery('')
-    }
-
-    const pieceRes = searchPieceCid(searchQuery)
-    const payloadRes = searchPayloadCid(searchQuery)
-
-    if (pieceRes.error || payloadRes.error) {
-        return <div>Error: {pieceRes.error ? pieceRes.error.message : payloadRes.error.message}</div>
-    }
-
-    if (pieceRes.loading || payloadRes.loading) {
-        return <div>Loading ...</div>
-    }
-
-    const showPieces = !!pieceRes.data.piece
-    const showPayload = !!payloadRes.data.payload.Pieces.length
-    const showInstructions = !showPieces && !showPayload
-    return <div className="piece-directory">
-        <SearchBox value={searchQuery} clearSearchBox={clearSearchBox} onChange={handleSearchQueryChange} />
-
-        { showPieces ? <PieceDirectoryDetail piece={pieceRes.data.piece} /> : null }
-        { showPayload ? <PayloadMetaDetail payload={payloadRes.data.payload} /> : null }
-        { showInstructions ? <p>Enter the piece CID or payload CID into the Search Box</p> : null }
-    </div>
-}
-
-export function PieceDirectoryDetail({piece}) {
-    if (!piece) {
-        return <div>No piece found with piece CID {piece.PieceCid}</div>
-    }
-
-    return <div className="piece-detail" id={piece.PieceCid}>
-        <div className="content">
-            <table className="piece-fields">
-                <tbody>
-                <tr>
-                    <th>Piece CID</th>
-                    <td>{piece.PieceCid}</td>
-                </tr>
-                <tr>
-                    <th>Data Root CID</th>
-                    <td>{piece.RootCid}</td>
-                </tr>
-                <tr>
-                    <th>Indexed CIDs</th>
-                    <td>{addCommas(piece.CidCount)}</td>
-                </tr>
-                <tr>
-                    <th>Index Status</th>
-                    <td>{piece.IndexStatus}</td>
-                </tr>
-                </tbody>
-            </table>
-
-            <div className="title">Deals</div>
-            <table className="deals">
-                <tbody>
-                <tr>
-                    <th>CreatedAt</th>
-                    <th>Deal UUID</th>
-                    <th>Chain Deal ID</th>
-                    <th>Sector Number</th>
-                    <th>Piece Offset</th>
-                    <th>Piece Length</th>
-                    <th>Unsealed</th>
-                </tr>
-                {piece.Deals.map(deal => (
-                    <tr key={deal.DealUUID}>
-                        <td>{moment().format(dateFormat)}</td>
-                        <td><ShortDealLink id={deal.DealUUID} /></td>
-                        <td>{deal.ChainDealID}</td>
-                        <td>{deal.SectorID}</td>
-                        <td>{deal.PieceOffset}</td>
-                        <td>{deal.PieceLength}</td>
-                        <td>{deal.IsUnsealed ? 'Yes' : 'No'}</td>
-                    </tr>
-                ))}
-                </tbody>
-            </table>
-        </div>
-    </div>
-}
-
-export function PayloadMetaDetail({payload}) {
-    if (payload.Pieces.length === 0) {
-        return <div>No piece found with payload CID {payload.RootCid}</div>
-    }
-
-    return <div>
-        <div class="title">Pieces containing payload CID {payload.RootCid}</div>
-        {payload.Pieces.map(piece => <PieceDirectoryDetail key={piece.PieceCid} piece={piece} />)}
-    </div>
-}
-
-function SearchBox(props) {
-    return <div className="search">
-        <DebounceInput
-            placeholder="piece or payload CID"
-            autoFocus={!!props.value}
-            minLength={4}
-            debounceTimeout={300}
-            value={props.value}
-            onChange={props.onChange} />
-        { props.value ? <img alt="clear" class="clear-text" onClick={props.clearSearchBox} src={xImg} /> : null }
-    </div>
-}
-
-export function PiecesMenuItem(props) {
-    const {data} = useQuery(DealsCountQuery, {
-        pollInterval: 10000,
-        fetchPolicy: 'network-only',
-    })
-
-    return (
-        <div className="menu-item" >
-            <img className="icon" alt="" src={columnsGapImg} />
-            <Link key="pieces" to={piecesBasePath}>
-                <h3>Pieces</h3>
-            </Link>
-        </div>
-    )
-}
-
-function searchPayloadCid(payloadCid) {
-    const pieces = []
-    for (const p of mockPieces) {
-        if (p.RootCid == payloadCid) {
-            pieces.push(p)
-        }
-    }
-
-    return {
-        data: {
-            payload: {
-                RootCid: payloadCid,
-                Pieces: pieces
-            }
-        }
-    }
-}
-
-function searchPieceCid(pieceCid) {
-    for (const p of mockPieces) {
-        if (p.PieceCid == pieceCid) {
-            return {
-                data: { piece: p }
-            }
-        }
-    }
-
-    return {
-        data: { piece: null }
-    }
-}
-
-const mockPieces = [{
-    PieceCid: 'baga6ea4seaqgbkvk6apsnfbtvnbjabpu4tsv6ns45c36452fdhkqxznt3vlnedq',
-    RootCid: 'bafybeiagwnqiviaae5aet2zivwhhsorg75x2wka2pu55o7grr23ulx5kxm',
-    CidCount: '3214',
-    IndexStatus: 'Complete',
-    Deals: [{
-        DealUUID: '237fb3d0-fc11-40dc-a77a-0b75363ffa5e',
-        ChainDealID: '1',
-        SectorID: 1,
-        PieceLength: 2048,
-        PieceOffset: 0,
-        IsUnsealed: true,
-    }, {
-        DealUUID: '25332be9-54b4-471e-a669-0757f6b61fe8',
-        ChainDealID: '2',
-        SectorID: 4,
-        PieceLength: 2048,
-        PieceOffset: 2048,
-        IsUnsealed: false,
-    }]
-}, {
-    PieceCid: 'bafybeig3yg2msah74sgvow25uxddqbabex3f3mh6hysess3w5kmgiv6zqy',
-    RootCid: 'bafybeiagwnqiviaae5aet2zivwhhsorg75x2wka2pu55o7grr23ulx5kxm',
-    CidCount: '53234',
-    IndexStatus: 'Indexing',
-    Deals: [{
-        DealUUID: '237fb3d0-fc11-40dc-a77a-0b75363ffa5e',
-        ChainDealID: '1',
-        SectorID: 1,
-        PieceLength: 2048,
-        PieceOffset: 0,
-        IsUnsealed: true,
-    }, {
-        DealUUID: '25332be9-54b4-471e-a669-0757f6b61fe8',
-        ChainDealID: '2',
-        SectorID: 4,
-        PieceLength: 2048,
-        PieceOffset: 2048,
-        IsUnsealed: false,
-    }]
-}, {
-    PieceCid: 'bafybeiaij7wqrolyv5gx2glkordkq22yacpgg23bdwyweenwlknk37zjyu',
-    RootCid: 'bafybeigbb6jrtwwdlqtqu23uzvsezm5m7qpw57emqipy5muclgp5dakpmq',
-    CidCount: '14921',
-    IndexStatus: 'Complete',
-    Deals: [{
-        DealUUID: '237fb3d0-fc11-40dc-a77a-0b75363ffa5e',
-        ChainDealID: '1',
-        SectorID: 1,
-        PieceLength: 2048,
-        PieceOffset: 0,
-        IsUnsealed: true,
-    }, {
-        DealUUID: '25332be9-54b4-471e-a669-0757f6b61fe8',
-        ChainDealID: '2',
-        SectorID: 4,
-        PieceLength: 2048,
-        PieceOffset: 2048,
-        IsUnsealed: false,
-    }]
-}, {
-    PieceCid: 'bafybeicl6ujc6ncfktctxxroxognfn7d2fqavvrryoc2lv6m4i6hpbkfti',
-    Deals: [{
-        DealUUID: '237fb3d0-fc11-40dc-a77a-0b75363ffa5e',
-        ChainDealID: '1',
-        SectorID: 1,
-        PieceLength: 2048,
-        PieceOffset: 0,
-        IsUnsealed: true,
-    }, {
-        DealUUID: '25332be9-54b4-471e-a669-0757f6b61fe8',
-        ChainDealID: '2',
-        SectorID: 4,
-        PieceLength: 2048,
-        PieceOffset: 2048,
-        IsUnsealed: true,
-    }, {
-        DealUUID: '237fb3d0-fc11-40dc-a77a-0b75363ffa5e',
-        ChainDealID: '3',
-        SectorID: 6,
-        PieceLength: 2048,
-        PieceOffset: 0,
-        IsUnsealed: false,
-    }]
-}, {
-    PieceCid: 'bafybeihhponjv2pdbmg33nxvccrgj34546avahl3nojk5cplawofvn2d3m',
-    Deals: [{
-        DealUUID: '25332be9-54b4-471e-a669-0757f6b61fe8',
-        ChainDealID: '2',
-        SectorID: 4,
-        PieceLength: 2048,
-        PieceOffset: 2048,
-        IsUnsealed: true,
-    }]
-}]
diff --git a/react/src/RetrievalLogDetail.js b/react/src/RetrievalLogDetail.js
index b5a80acba..aa214d3f1 100644
--- a/react/src/RetrievalLogDetail.js
+++ b/react/src/RetrievalLogDetail.js
@@ -103,11 +103,11 @@ export function RetrievalLogDetail(props) {
                 </tr>
                 <tr>
                     <th>Deal Data Root CID</th>
-                    <td><Link to={'/inspect/'+retrieval.PayloadCID}>{retrieval.PayloadCID}</Link></td>
+                    <td><Link to={'/piece-doctor/'+retrieval.PayloadCID}>{retrieval.PayloadCID}</Link></td>
                 </tr>
                 <tr>
                     <th>Piece CID</th>
-                    <td><Link to={'/inspect/'+retrieval.PieceCid}>{retrieval.PieceCid}</Link></td>
+                    <td><Link to={'/piece-doctor/'+retrieval.PieceCid}>{retrieval.PieceCid}</Link></td>
                 </tr>
                 <tr>
                     <th>Price per byte</th>
diff --git a/react/src/RetrievalLogs.js b/react/src/RetrievalLogs.js
index 116b1ba58..d2dac60b5 100644
--- a/react/src/RetrievalLogs.js
+++ b/react/src/RetrievalLogs.js
@@ -176,7 +176,7 @@ function TableRow(props) {
                 </Link>
             </td>
             <td className="payload-cid">
-                <Link to={'/inspect/'+row.PayloadCID}>
+                <Link to={'/piece-doctor/'+row.PayloadCID}>
                     <ShortCID cid={row.PayloadCID} />
                 </Link>
             </td>
diff --git a/react/src/gql.js b/react/src/gql.js
index cce06c3b2..55be46ae8 100644
--- a/react/src/gql.js
+++ b/react/src/gql.js
@@ -294,7 +294,6 @@ const RetrievalLogsCountQuery = gql`
     }
 `;
 
-
 const DealCancelMutation = gql`
     mutation AppDealCancelMutation($id: ID!) {
         dealCancel(id: $id)
diff --git a/react/src/util.js b/react/src/util.js
index b9e421ce8..9953fb147 100644
--- a/react/src/util.js
+++ b/react/src/util.js
@@ -133,3 +133,11 @@ export function isContractAddress(addr) {
     const addressType = addr.substring(0, 2)
     return addressType === 't4' || addressType === 'f4'
 }
+
+export function isInteger(num){
+    const isNum = (typeof(num) === 'number' || typeof(num) === "string" && num.trim() !== '') && !isNaN(num);
+    if (!isNum) {
+        return false
+    }
+    return (num+'').indexOf('.') == -1
+}