diff --git a/source/src/pages/NotFound.tsx b/source/src/pages/NotFound.tsx
index 112344e..b56ff1e 100644
--- a/source/src/pages/NotFound.tsx
+++ b/source/src/pages/NotFound.tsx
@@ -5,9 +5,8 @@ import { Helmet } from "react-helmet-async"
 import theming from "../theming"
 
 const StyledNotFound = styled.div`
-	margin: auto;
-	margin-top: 2rem;
 	text-align: center;
+
 	color: ${(props) =>
 		theming.theme(props.theme.currentTheme, {
 			light: "#111111",
@@ -16,33 +15,32 @@ const StyledNotFound = styled.div`
 `
 
 const Styled404 = styled.h1`
-	font-size: 3rem;
+	font-size: 5rem;
 `
 
-export default class NotFound extends React.Component {
-	render() {
-		return (
-			<>
-				<Helmet>
-					<title>pomp | 404</title>
+const NotFound = () => {
+	return (
+		<>
+			<Helmet>
+				<title>pomp | 404</title>
 
-					<meta property="og:title" content="Page Not Found" />
-					<meta property="og:type" content="website" />
-					<meta property="og:url" content="http://developomp.com" />
-					<meta
-						property="og:image"
-						content="http://developomp.com/icon/icon.svg"
-					/>
-					<meta
-						property="og:description"
-						content="Page does not exist"
-					/>
-				</Helmet>
-				<StyledNotFound className="card main-content">
-					<Styled404>404</Styled404>
-					the page you are looking for does not exist. :(
-				</StyledNotFound>
-			</>
-		)
-	}
+				<meta property="og:title" content="Page Not Found" />
+				<meta property="og:type" content="website" />
+				<meta property="og:url" content="http://developomp.com" />
+				<meta
+					property="og:image"
+					content="http://developomp.com/icon/icon.svg"
+				/>
+				<meta property="og:description" content="Page does not exist" />
+			</Helmet>
+
+			<StyledNotFound className="card main-content">
+				<Styled404>404</Styled404>
+				<br />
+				Page was not found :(
+			</StyledNotFound>
+		</>
+	)
 }
+
+export default NotFound