diff --git a/src/app/NotFound/NotFound.tsx b/src/app/NotFound/NotFound.tsx
index 37f54d3e8..89b89b2b5 100644
--- a/src/app/NotFound/NotFound.tsx
+++ b/src/app/NotFound/NotFound.tsx
@@ -36,14 +36,56 @@
* SOFTWARE.
*/
import * as React from 'react';
-import { NavLink } from 'react-router-dom';
-import { Alert, PageSection } from '@patternfly/react-core';
+import { Link } from 'react-router-dom';
+import { NotFoundCard } from './NotFoundCard';
+import {
+ Button,
+ EmptyState,
+ EmptyStateIcon,
+ EmptyStateBody,
+ EmptyStateSecondaryActions,
+ Title
+} from '@patternfly/react-core';
+import '@app/app.css'
+import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-marked-alt-icon';
const NotFound: React.FunctionComponent = () => (
-
-
- Take me home
-
- )
+
+
+
+ 404: We couldn't find that page
+
+
+ One of the following pages might have what you're looking for.
+
+
+
+
+
+
+
+
+
+)
export { NotFound };
diff --git a/src/app/NotFound/NotFoundCard.tsx b/src/app/NotFound/NotFoundCard.tsx
new file mode 100644
index 000000000..487b44b3b
--- /dev/null
+++ b/src/app/NotFound/NotFoundCard.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const NotFoundCard = ({title, bodyText, linkText, linkPath}) => {
+ return(<>
+
+ {title}
+ {bodyText}
+
+ {linkText}
+
+
+ >);
+}
\ No newline at end of file
diff --git a/src/app/app.css b/src/app/app.css
index df7e11487..67a8dd244 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -43,6 +43,16 @@ html, body, #root {
height: 8em;
}
+.pf-c-card-not-found {
+ text-align: left;
+ margin-left: 1rem;
+ width: 20rem;
+}
+
+.pf-c-card-not-found__footer {
+ padding-top: 2rem;
+}
+
.cryostat-logo {
height: 2em;
}