diff --git a/app/pages/news-payment/index.tsx b/app/pages/news-payment/index.tsx
new file mode 100644
index 0000000..b6506b5
--- /dev/null
+++ b/app/pages/news-payment/index.tsx
@@ -0,0 +1,13 @@
+import { Card } from '~/components/ui/card'
+
+export const NewsPaymentPage = () => {
+  return (
+    <div>
+      <div className="sm-max:mx-5 relative">
+        <Card>
+          <h1>Payment</h1>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/routes/_news.payment.tsx b/app/routes/_news.payment.tsx
new file mode 100644
index 0000000..65864c0
--- /dev/null
+++ b/app/routes/_news.payment.tsx
@@ -0,0 +1,37 @@
+import { isRouteErrorResponse } from 'react-router'
+
+import { NewsPaymentPage } from '~/pages/news-payment'
+
+import type { Route } from './+types/_news.payment'
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+const NewsPaymentLayout = () => <NewsPaymentPage />
+
+export default NewsPaymentLayout