diff --git a/src/components/error.tsx b/src/components/error.tsx
new file mode 100644
index 0000000..a31bf50
--- /dev/null
+++ b/src/components/error.tsx
@@ -0,0 +1,47 @@
+import { ErrorProps } from "@/interfaces/components";
+import {
+  Button,
+  Center,
+  Heading,
+  HStack,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { ArrowClockwise, ArrowSquareOut, Warning } from "phosphor-react";
+import { useRouter } from "next/router";
+import CustomLink from "@/common/link";
+
+const Error = (props: ErrorProps) => {
+  const router = useRouter();
+
+  const handleRefresh = () => {
+    router.reload();
+  };
+
+  return (
+    <Center>
+      <VStack>
+        <Warning size={90} />
+        <Heading fontSize="3xl">{props.title}</Heading>
+        <Text>{props.description}</Text>
+        <HStack>
+          <Button
+            variant="ghost"
+            borderWidth="1px"
+            leftIcon={<ArrowClockwise />}
+            onClick={handleRefresh}
+          >
+            Refresh
+          </Button>
+          <CustomLink href="https://github.com/pheralb/svgl/issues/new" external={true}>
+            <Button variant="ghost" rightIcon={<ArrowSquareOut />}>
+              Create issue
+            </Button>
+          </CustomLink>
+        </HStack>
+      </VStack>
+    </Center>
+  );
+};
+
+export default Error;
diff --git a/src/components/loading.tsx b/src/components/loading.tsx
new file mode 100644
index 0000000..1cd5600
--- /dev/null
+++ b/src/components/loading.tsx
@@ -0,0 +1,15 @@
+import { LoadingProps } from "@/interfaces/components";
+import { Center, Spinner, Text, VStack } from "@chakra-ui/react";
+
+const Loading = (props: LoadingProps) => {
+  return (
+    <Center>
+      <VStack spacing={3}>
+        <Spinner color="brand.purple" />
+        <Text>{props.text}</Text>
+      </VStack>
+    </Center>
+  );
+};
+
+export default Loading;