diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index a55dd130..7e82dcb6 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -6,6 +6,7 @@ import searchNormal from "../assets/searchNormal.svg";
 import cmdKIcon from "../assets/cmdK.svg";
 import SearchedRepoCard from "./SearchedRepoCard";
 import { Combobox } from "@headlessui/react";
+import { ToastTrigger } from "../lib/reactHotToast";
 
 const Hero = () => {
   const containerRef = useRef<Document>(document);
@@ -17,6 +18,14 @@ const Hero = () => {
   const [comboBoxSelection, setComboBoxSelection] = useState("");
   const [hasFocus, setFocus] = useState(false);
 
+  const setFetchedDataWithCatch = (results: DbRepo[] | null) => {
+    if (results) {
+      setFetchedData(results);
+    } else {
+      ToastTrigger({ message: "Failed to fetch recommendations", type: "error" });
+    }
+  };
+  
   const handleCmdK = async (e: KeyboardEvent) => {
     comboButtonRef.current?.click();
     if (!hasFocus) {
@@ -24,7 +33,7 @@ const Hero = () => {
       setFocus(true);
       const results = await fetchRecommendations("stars", 3, null, searchTerm);
 
-      setFetchedData(results);
+      setFetchedDataWithCatch(results);
     } else {
       searchBoxRef.current?.blur();
       setFocus(false);
@@ -49,7 +58,7 @@ const Hero = () => {
   useDidUpdate(async () => {
     const results = await fetchRecommendations("stars", 3, null, searchTerm);
 
-    setFetchedData(results);
+    setFetchedDataWithCatch(results);
   }, [searchTerm]);
 
   return (
diff --git a/src/lib/supabase.ts b/src/lib/supabase.ts
index 3ee554c6..29392cec 100644
--- a/src/lib/supabase.ts
+++ b/src/lib/supabase.ts
@@ -119,5 +119,5 @@ export async function fetchRecommendations (
 
   error && console.error(error);
 
-  return recommendations as DbRepo[];
+  return recommendations as DbRepo[] | null;
 }