diff --git a/app/accessibility/colorblind/page.tsx b/app/accessibility/colorblind/page.tsx
index 5ae0290..5c36393 100644
--- a/app/accessibility/colorblind/page.tsx
+++ b/app/accessibility/colorblind/page.tsx
@@ -59,8 +59,8 @@ export default function ColorBlindPage() {
   };
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Color Blindness Simulator</h1>
           <p className="text-muted-foreground">
diff --git a/app/accessibility/contrast/page.tsx b/app/accessibility/contrast/page.tsx
index 483487d..410fb87 100644
--- a/app/accessibility/contrast/page.tsx
+++ b/app/accessibility/contrast/page.tsx
@@ -56,8 +56,8 @@ export default function ContrastPage() {
   );
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Contrast Checker</h1>
           <p className="text-muted-foreground">
diff --git a/app/accessibility/page.tsx b/app/accessibility/page.tsx
index 7e13bd4..2919098 100644
--- a/app/accessibility/page.tsx
+++ b/app/accessibility/page.tsx
@@ -27,8 +27,8 @@ export default function AccessibilityPage() {
   ];
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Accessibility Tools</h1>
           <p className="text-muted-foreground">
diff --git a/app/accessibility/textcolor/page.tsx b/app/accessibility/textcolor/page.tsx
index fb464c5..92c2aa2 100644
--- a/app/accessibility/textcolor/page.tsx
+++ b/app/accessibility/textcolor/page.tsx
@@ -54,8 +54,8 @@ export default function TextColorPage() {
   };
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Text Color Optimizer</h1>
           <p className="text-muted-foreground">
diff --git a/app/batch/page.tsx b/app/batch/page.tsx
index 659dda2..d3b9880 100644
--- a/app/batch/page.tsx
+++ b/app/batch/page.tsx
@@ -84,8 +84,8 @@ export default function BatchPage() {
     rotateMutation.isPending;
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Batch Operations</h1>
           <p className="text-muted-foreground">
diff --git a/app/names/page.tsx b/app/names/page.tsx
index f014a0e..3656b58 100644
--- a/app/names/page.tsx
+++ b/app/names/page.tsx
@@ -32,8 +32,8 @@ export default function NamedColorsPage() {
   }, [data, search, sortBy]);
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Named Colors</h1>
           <p className="text-muted-foreground">
diff --git a/app/page.tsx b/app/page.tsx
index 228f332..395795a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center px-8 py-12 md:py-24">
-      <div className="max-w-7xl w-full space-y-8 text-center">
+    <main className="flex min-h-screen flex-col items-center justify-center py-12 md:py-24">
+      <div className="max-w-7xl mx-auto px-8 w-full space-y-8 text-center">
         <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent animate-fade-in">
           Pastel UI
         </h1>
diff --git a/app/palettes/distinct/page.tsx b/app/palettes/distinct/page.tsx
index 7657f45..df5e0a1 100644
--- a/app/palettes/distinct/page.tsx
+++ b/app/palettes/distinct/page.tsx
@@ -37,8 +37,8 @@ export default function DistinctPage() {
   };
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Distinct Colors Generator</h1>
           <p className="text-muted-foreground">
diff --git a/app/palettes/gradient/page.tsx b/app/palettes/gradient/page.tsx
index f58a2d3..cd133b8 100644
--- a/app/palettes/gradient/page.tsx
+++ b/app/palettes/gradient/page.tsx
@@ -52,8 +52,8 @@ export default function GradientPage() {
   };
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Gradient Creator</h1>
           <p className="text-muted-foreground">
diff --git a/app/palettes/harmony/page.tsx b/app/palettes/harmony/page.tsx
index 1ac169c..8e0d53c 100644
--- a/app/palettes/harmony/page.tsx
+++ b/app/palettes/harmony/page.tsx
@@ -52,8 +52,8 @@ export default function HarmonyPage() {
   };
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Harmony Palette Generator</h1>
           <p className="text-muted-foreground">
diff --git a/app/palettes/page.tsx b/app/palettes/page.tsx
index 0992dd0..105df68 100644
--- a/app/palettes/page.tsx
+++ b/app/palettes/page.tsx
@@ -27,8 +27,8 @@ export default function PalettesPage() {
   ];
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Palette Generation</h1>
           <p className="text-muted-foreground">
diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 6834348..78a3280 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -81,8 +81,8 @@ function PlaygroundContent() {
   ]);
 
   return (
-    <div className="min-h-screen px-8 py-12">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
         <div>
           <h1 className="text-4xl font-bold mb-2">Color Playground</h1>
           <p className="text-muted-foreground">
@@ -206,8 +206,8 @@ function PlaygroundContent() {
 export default function PlaygroundPage() {
   return (
     <Suspense fallback={
-      <div className="min-h-screen px-8 py-12">
-        <div className="max-w-7xl mx-auto flex items-center justify-center">
+      <div className="min-h-screen py-12">
+        <div className="max-w-7xl mx-auto px-8 flex items-center justify-center">
           <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       </div>