diff --git a/src/components/DiscoverRoadmaps/DiscoverError.tsx b/src/components/DiscoverRoadmaps/DiscoverError.tsx
new file mode 100644
index 000000000..a18012e13
--- /dev/null
+++ b/src/components/DiscoverRoadmaps/DiscoverError.tsx
@@ -0,0 +1,21 @@
+import { ErrorIcon } from '../ReactIcons/ErrorIcon';
+
+type DiscoverErrorProps = {
+  message: string;
+};
+
+export function DiscoverError(props: DiscoverErrorProps) {
+  const { message } = props;
+
+  return (
+    <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl border px-5 py-3 sm:px-0 sm:py-20">
+      <ErrorIcon additionalClasses="mb-4 h-8 w-8 sm:h-14 sm:w-14" />
+      <h2 className="mb-1 text-lg font-semibold sm:text-xl">
+        Oops! Something went wrong
+      </h2>
+      <p className="mb-3 text-balance text-center text-xs text-gray-800 sm:text-sm">
+        {message}
+      </p>
+    </div>
+  );
+}
diff --git a/src/pages/discover.astro b/src/pages/discover.astro
index 19b94a1a8..dbfee1565 100644
--- a/src/pages/discover.astro
+++ b/src/pages/discover.astro
@@ -2,6 +2,7 @@
 import { roadmapApi } from '../api/roadmap';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { DiscoverRoadmaps } from '../components/DiscoverRoadmaps/DiscoverRoadmaps';
+import { DiscoverError } from '../components/DiscoverRoadmaps/DiscoverError';
 
 export const prerender = false;
 
@@ -9,14 +10,11 @@ const roadmapApiClient = roadmapApi(Astro);
 
 const { error, response: roadmaps } =
   await roadmapApiClient.listShowcaseRoadmap();
-console.log('-'.repeat(20));
-console.log(error);
-console.log('-'.repeat(20));
-
 const searchParams = Astro.url.searchParams.toString();
 ---
 
 <BaseLayout title='Discover Custom Roadmaps'>
+  {error && <DiscoverError message={error.message} />}
   {
     roadmaps && (
       <DiscoverRoadmaps