diff --git a/app/routes/_news._index.tsx b/app/routes/_news._index.tsx
index 2fb4424..2189320 100644
--- a/app/routes/_news._index.tsx
+++ b/app/routes/_news._index.tsx
@@ -69,7 +69,7 @@ clientLoader.hydrate = true as const
 export const HydrateFallback = () => {
   return (
     <Card>
-      <div className="flex h-96 items-center justify-center">
+      <div className="flex h-96 items-center justify-center gap-1">
         <ArrowPathIcon className="size-5 animate-spin" />{' '}
         <span>Loading...</span>
       </div>
@@ -94,7 +94,7 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   }
 
   return (
-    <div className="container mx-auto p-4">
+    <Card>
       <h1>{message}</h1>
       <p>{details}</p>
       {stack && (
@@ -102,7 +102,7 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
           <code>{stack}</code>
         </pre>
       )}
-    </div>
+    </Card>
   )
 }