diff --git a/src/hocs/WithEncryptionRequired.tsx b/src/hocs/WithEncryptionRequired.tsx
new file mode 100644
index 0000000..0c972d2
--- /dev/null
+++ b/src/hocs/WithEncryptionRequired.tsx
@@ -0,0 +1,78 @@
+import {ReactElement} from "react"
+import {Link as RouterLink} from "react-router-dom"
+import {MdLock} from "react-icons/md"
+
+import {Button, Grid, Typography} from "@mui/material"
+
+import {useUser} from "~/hooks"
+
+export default function WithEncryptionRequired(
+	Component: any,
+): (props: any) => ReactElement {
+	return (props: any): ReactElement => {
+		const user = useUser()
+
+		console.log("withencryption required", user)
+
+		if (!user.encryptedPassword) {
+			return (
+				<Grid container spacing={4}>
+					<Grid item>
+						<Typography variant="h6" component="h2">
+							Encryption required
+						</Typography>
+					</Grid>
+					<Grid item>
+						<Typography>
+							To continue, you need to enable encryption.
+						</Typography>
+					</Grid>
+					<Grid item>
+						<Button
+							component={RouterLink}
+							to="/complete-account?setup=true"
+							startIcon={<MdLock />}
+						>
+							Setup encryption
+						</Button>
+					</Grid>
+				</Grid>
+			)
+		}
+
+		if (!user.isDecrypted) {
+			return (
+				<Grid
+					container
+					spacing={4}
+					direction="column"
+					alignItems="center"
+				>
+					<Grid item>
+						<Typography variant="h6" component="h2">
+							Encryption required
+						</Typography>
+					</Grid>
+					<Grid item>
+						<Typography>
+							To continue, please enter your password to decrypt
+							your data.
+						</Typography>
+					</Grid>
+					<Grid item>
+						<Button
+							variant="contained"
+							component={RouterLink}
+							to="/enter-password"
+							startIcon={<MdLock />}
+						>
+							Enter Password
+						</Button>
+					</Grid>
+				</Grid>
+			)
+		}
+
+		return <Component {...props} />
+	}
+}
diff --git a/src/hocs/index.ts b/src/hocs/index.ts
new file mode 100644
index 0000000..76a4073
--- /dev/null
+++ b/src/hocs/index.ts
@@ -0,0 +1,2 @@
+export * from "./WithEncryptionRequired"
+export {default as WithEncryptionRequired} from "./WithEncryptionRequired"
diff --git a/src/routes/ReportsRoute.tsx b/src/routes/ReportsRoute.tsx
index 3dc9729..8211793 100644
--- a/src/routes/ReportsRoute.tsx
+++ b/src/routes/ReportsRoute.tsx
@@ -6,10 +6,11 @@ import {List, ListItem, ListItemText} from "@mui/material"
 
 import {PaginationResult, Report} from "~/server-types"
 import {getReports} from "~/apis"
+import {WithEncryptionRequired} from "~/hocs"
 import DecryptReport from "~/route-widgets/SettingsRoute/DecryptReport"
 import QueryResult from "~/components/QueryResult"
 
-export default function ReportsRoute(): ReactElement {
+function ReportsRoute(): ReactElement {
 	const query = useQuery<PaginationResult<Report>, AxiosError>(
 		["get_reports"],
 		getReports,
@@ -29,7 +30,9 @@ export default function ReportsRoute(): ReactElement {
 									<ListItemText
 										primary={
 											report.messageDetails.content
-												.subject
+												.subject ?? (
+												<i>{"<No Subject>"}</i>
+											)
 										}
 										secondary={`${report.messageDetails.meta.from} -> ${report.messageDetails.meta.to}`}
 									></ListItemText>
@@ -42,3 +45,5 @@ export default function ReportsRoute(): ReactElement {
 		</QueryResult>
 	)
 }
+
+export default WithEncryptionRequired(ReportsRoute)
diff --git a/src/server-types.ts b/src/server-types.ts
index 044443e..d475675 100644
--- a/src/server-types.ts
+++ b/src/server-types.ts
@@ -68,7 +68,7 @@ export interface ServerSettings {
 	imageProxyLifeTime: number
 	disposableEmailsEnabled: boolean
 	otherRelaysEnabled: boolean
-	otherRelayDomains: Array<string>
+	otherRelayDomains: string[]
 	emailVerificationChars: string
 	emailVerificationLength: number
 	emailLoginTokenChars: string