diff --git a/pages/cards.js b/pages/cards.js
index d485bda..497d40d 100644
--- a/pages/cards.js
+++ b/pages/cards.js
@@ -539,17 +539,17 @@ export default function Cards() {
   return (
     <Layout user={user}>
       {/* Header */}
-      <div className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
-        <div className="flex items-center justify-between">
+      <div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
-            <h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
+            <h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
               Cards
             </h1>
-            <p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
+            <p className="text-base sm:text-lg" style={{ color: 'var(--text-secondary)' }}>
               Browse and manage your card collection
             </p>
           </div>
-          <div className="flex space-x-4">
+          <div className="flex space-x-2 sm:space-x-4">
             <button 
               onClick={() => setViewMode('grid')}
               className={`p-2 rounded-xl transition-all duration-200 ${
@@ -587,12 +587,12 @@ export default function Cards() {
       </div>
 
       {/* Quick Filters */}
-      <div className="p-6" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+      <div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)' }}>
         <div className="mb-4">
-          <h3 className="text-lg font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
+          <h3 className="text-base sm:text-lg font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
             Quick Filters
           </h3>
-          <div className="flex flex-wrap gap-3">
+          <div className="flex flex-wrap gap-2 sm:gap-3">
             <button
               onClick={() => setSelectedTCG('all')}
               className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
@@ -631,7 +631,7 @@ export default function Cards() {
         </div>
 
         {/* Advanced Filters */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
           <div>
             <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
               Search
@@ -816,7 +816,7 @@ export default function Cards() {
           </div>
         ) : (
           <>
-            <div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-8 p-8 pr-96' : 'space-y-4 p-6'}>
+            <div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8 p-4 sm:p-6 lg:p-8 lg:pr-96' : 'space-y-4 p-6'}>
               {cards.map(card => (
                 <CardItem
                   key={card.id}
diff --git a/tailwind.config.js b/tailwind.config.js
index 0bb2067..128c279 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,11 @@ export default {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        'xs': '475px',
+      },
+    },
   },
   plugins: [],
 } 
\ No newline at end of file