diff --git a/packages/ui/http-error.tsx b/packages/ui/http-error.tsx
new file mode 100644
index 0000000..2674b08
--- /dev/null
+++ b/packages/ui/http-error.tsx
@@ -0,0 +1,21 @@
+type Props = {
+  readonly code: string;
+  readonly description: string;
+  readonly title: string;
+};
+
+export function HttpError({ code, description, title }: Props) {
+  return (
+    <section className="bg-white">
+      <div className="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
+        <div className="mx-auto max-w-screen-sm text-center">
+          <h1 className="text-primary-600  mb-4 text-7xl font-extrabold tracking-tight lg:text-9xl">
+            {code}
+          </h1>
+          <p className="mb-4 text-3xl font-bold tracking-tight text-gray-900">{title}</p>
+          <p className="mb-4 text-lg font-light text-gray-800">{description}</p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 757d1e0..1d691d8 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -8,4 +8,5 @@ export * from './content';
 export * from './divider';
 export * from './header';
 export * from './heading';
+export * from './http-error';
 export * from './input';