diff --git a/website/src/page/readable/hooks/useReadableModels.tsx b/website/src/page/readable/hooks/useReadableModels.tsx
index 6f14dae6..f371d1d9 100644
--- a/website/src/page/readable/hooks/useReadableModels.tsx
+++ b/website/src/page/readable/hooks/useReadableModels.tsx
@@ -83,25 +83,29 @@ export const UseReadableModels = () => {
 				});
 				const allModels = result.data.readableListModels.items;
 				const textModels = allModels.filter(
-					(model) => model.type === ItemValues.TEXT
+					(model) => model.type === ItemValues.TEXT  
 				);
 				const imageModels = allModels.filter(
 					(model) => model.type === ItemValues.IMAGE
 				);
 
-				setModelDataOfType(textModels, ItemValues.TEXT);
+				if (textModels.length === 0 && imageModels.length === 0) {
+					throw new Error("No models found. Please make sure models are configured correctly. See https://aws-samples.github.io/document-translation/docs/readable/post-install/models/ for details.");
+				}
+
+				setModelDataOfType(textModels, ItemValues.TEXT);  
 				setModelDataOfType(imageModels, ItemValues.IMAGE);
 
 				setLoading(false);
 			} catch (error) {
 				console.log("Error fetching models:", error);
-				setError(error);
-				setLoading(false);
+				setError(error.message);
+				setLoading(false); 
 			}
 		};
 
 		fetchModels();
 	}, []);
 
-	return { modelState, modelDefault, loading, error };
+	return { modelState, modelDefault, loading, error };  
 };
diff --git a/website/src/page/readable/view.tsx b/website/src/page/readable/view.tsx
index 615875b0..f01dd578 100644
--- a/website/src/page/readable/view.tsx
+++ b/website/src/page/readable/view.tsx
@@ -48,11 +48,19 @@ export default function ReadableNew() {
 	const [imageState, setImageState] = useState({});
 	const [itemViewState, setItemViewState] = useState({});
 
-	const { modelState, modelDefault } = UseReadableModels();
+	const { modelState, modelDefault, loading, error } = UseReadableModels();
 	const LoadingStatus = [ItemStatus.GENERATE, ItemStatus.PROCESSING];
 
 	UseReadableSubscription(setMetadataState, setTextState, setImageState);
 
+	if (error) {
+		return (
+			<div className="alert alert-danger" role="alert">
+				{error} <a href="https://aws-samples.github.io/document-translation/docs/readable/post-install/models/" target="_blank" rel="noopener noreferrer">Learn more</a>
+			</div>
+		);
+	}
+
 	async function createNewTextItem(order) {
 		const authSession = await fetchAuthSession();
 		try {