diff --git a/src/components/ErrorMessage/ErrorMessage.module.css b/src/components/ErrorMessage/ErrorMessage.module.css
new file mode 100644
index 00000000..ec848706
--- /dev/null
+++ b/src/components/ErrorMessage/ErrorMessage.module.css
@@ -0,0 +1,171 @@
+.errorSection {
+  height: 300px;
+  margin: 200px;
+}
+
+@media only screen and (max-width: 768px) {
+  .errorSection {
+    height: 0;
+    display: block;
+    position: relative;
+    margin: 30vh 0;
+  }
+}
+
+.errorSection p {
+  text-align: center;
+  padding: 0 25px;
+}
+
+.strong {
+  margin-top: 25px;
+  font-weight: bold;
+}
+
+.skull {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.head {
+  width: 100%;
+  height: 75%;
+  border-radius: 15% / 20%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #b92b27;
+}
+
+.head::before,
+.head::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  width: 20%;
+  height: 30%;
+  bottom: 10%;
+  background-color: #f5f5f5;
+}
+
+@media only screen and (max-width: 768px) {
+  .head::before,
+  .head::after {
+    background-color: #fff;
+  }
+}
+
+.head::before {
+  left: 10%;
+}
+
+.head::after {
+  right: 10%;
+}
+
+.crack {
+  width: 10%;
+  height: 10%;
+  position: absolute;
+  top: 0;
+  right: 25%;
+  transform: skew(-15deg);
+  background-color: #f5f5f5;
+}
+
+@media only screen and (max-width: 768px) {
+  .crack {
+    background-color: #fff;
+  }
+}
+
+.crack::before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 13.33px;
+  border-right: 10px solid transparent;
+  border-left: 5px solid transparent;
+  border-top: 25px solid #f5f5f5;
+}
+
+@media only screen and (max-width: 768px) {
+  .crack::before {
+    border-top: 25px solid #fff;
+  }
+}
+
+.mouth {
+  width: 40%;
+  height: 25%;
+  position: absolute;
+  top: 75%;
+  left: 30%;
+  border-radius: 0 0 20px 20px;
+  background-color: #b92b27;
+}
+
+.mouth::before {
+  content: "";
+  position: absolute;
+  width: 15%;
+  height: 50%;
+  border-radius: 50% / 30%;
+  left: 42.5%;
+  top: -25%;
+  background-color: #f5f5f5;
+}
+
+@media only screen and (max-width: 768px) {
+  .mouth::before {
+    background-color: #fff;
+  }
+}
+
+.teeth {
+  position: absolute;
+  bottom: 0;
+  left: 45%;
+  width: 10%;
+  height: 50%;
+  margin-bottom: -5%;
+  border-radius: 50% / 20%;
+  background-color: #f5f5f5;
+}
+
+@media only screen and (max-width: 768px) {
+  .teeth {
+    background-color: #fff;
+  }
+}
+
+.teeth::before,
+.teeth::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50% / 20%;
+  background-color: #f5f5f5;
+}
+
+@media only screen and (max-width: 768px) {
+  .teeth::before,
+  .teeth::after {
+    background-color: #fff;
+  }
+}
+
+.teeth::before {
+  left: -250%;
+}
+
+.teeth::after {
+  right: -250%;
+}
diff --git a/src/components/ErrorMessage/ErrorMessage.tsx b/src/components/ErrorMessage/ErrorMessage.tsx
new file mode 100644
index 00000000..43219c44
--- /dev/null
+++ b/src/components/ErrorMessage/ErrorMessage.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './ErrorMessage.module.css';
+
+interface ErrorMessageProps {
+  message: string;
+}
+
+export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
+  return (
+    <div className={styles.errorSection}>
+      <div className={styles.skull}>
+        <div className={styles.head}>
+          <div className={styles.crack}></div>
+        </div>
+        <div className={styles.mouth}>
+          <div className={styles.teeth}></div>
+        </div>
+      </div>
+      <p className={styles.strong}>{message}</p>
+      <p>If you are offline viewing, you&#39;ll need to visit this page with a network connection first before it can work offline.</p>
+    </div>
+  );
+};