diff --git a/src/components/AccentedAlert.tsx b/src/components/AccentedAlert.tsx
new file mode 100644
index 0000000..f6d0154
--- /dev/null
+++ b/src/components/AccentedAlert.tsx
@@ -0,0 +1,48 @@
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import clsx from 'clsx';
+import { FunctionComponent } from 'react';
+
+// type AccentColors = 'red' | 'yellow' | 'green';
+// type AccentColorClass = { base: string; text: string; hover: string };
+
+type AccentedAlertProps = {
+  className?: string;
+  // color?: AccentColors;
+  text: string;
+};
+
+const AccentedAlert: FunctionComponent<AccentedAlertProps> = ({
+  className,
+  text
+}) => {
+  return (
+    <div
+      className={clsx(
+        className,
+        'border-l-4 border-yellow-600 bg-yellow-1000 p-4'
+      )}
+    >
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <ExclamationTriangleIcon
+            className="h-5 w-5 text-yellow-400"
+            aria-hidden="true"
+          />
+        </div>
+        <div className="ml-3">
+          <p className="text-sm text-yellow-500">
+            {text}
+            {/*   <a */}
+            {/*     href="#" */}
+            {/*     className="font-medium text-yellow-700 underline hover:text-yellow-600" */}
+            {/*   > */}
+            {/*     Upgrade your account to add more credits. */}
+            {/*   </a> */}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AccentedAlert;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 41a595a..ee2eda9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,9 +10,11 @@ import Layout from '@/components/Layout';
 import ConfigurationList from '@/components/ConfigurationList';
 import superjson from 'superjson';
 import type { Configuration } from '@/timing';
+import AccentedAlert from '@/components/AccentedAlert';
 
 type IndexPageProps = {
   json: string;
+  error?: string;
 };
 
 export async function getServerSideProps({
@@ -26,7 +28,8 @@ export async function getServerSideProps({
     const config = await fetchConfiguration({ times: [] }, true);
     return {
       props: {
-        json: superjson.stringify(config)
+        json: superjson.stringify(config),
+        error: 'NetworkError occurred while fetching resource.'
       }
     };
   }
@@ -39,10 +42,16 @@ export async function getServerSideProps({
   };
 }
 
-const IndexPage: NextPage<IndexPageProps> = ({ json }) => {
+const IndexPage: NextPage<IndexPageProps> = ({ error, json }) => {
   const config = superjson.parse<Configuration>(json);
+  const errorElement =
+    error != undefined ? (
+      <AccentedAlert className="mb-2" text={`An error has occured. ${error}`} />
+    ) : undefined;
+
   return (
     <Layout className="max-h-screen flex flex-col items-center">
+      {errorElement}
       <ConfigurationList configs={config} />
     </Layout>
   );