diff --git a/client/src/pages/category.tsx b/client/src/pages/category.tsx
index 2efe39d..ace1815 100644
--- a/client/src/pages/category.tsx
+++ b/client/src/pages/category.tsx
@@ -135,7 +135,7 @@ export default function CategoryPage() {
         </div>
 
         {isLoading ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
             {Array.from({ length: 6 }).map((_, i) => (
               <div key={i} className="bg-card rounded-md border border-card-border">
                 <Skeleton className="w-full aspect-video rounded-t-md" />
@@ -149,7 +149,7 @@ export default function CategoryPage() {
           </div>
         ) : data && data.articles.length > 0 ? (
           <>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
               {data.articles.flatMap((article, index) => {
                 const items = [
                   <Link key={article.id} href={`/article/${article.slug}`}>