diff --git a/app/(app)/pastel/batch/page.tsx b/app/(app)/pastel/batch/page.tsx
index 7a3ff77..c8355e5 100644
--- a/app/(app)/pastel/batch/page.tsx
+++ b/app/(app)/pastel/batch/page.tsx
@@ -97,7 +97,7 @@ export default function BatchPage() {
           {/* Input */}
           <div className="space-y-6">
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Input Colors</h2>
+              <h2 className="text-sm font-medium mb-4">Input Colors</h2>
               <p className="text-sm text-muted-foreground mb-4">
                 Enter colors (one per line or comma-separated). Supports hex format
               </p>
@@ -115,7 +115,7 @@ export default function BatchPage() {
             </div>
 
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Operation</h2>
+              <h2 className="text-sm font-medium mb-4">Operation</h2>
               <div className="space-y-4">
                 <Select
                   label="Operation"
@@ -169,7 +169,7 @@ export default function BatchPage() {
             {outputColors.length > 0 ? (
               <>
                 <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-xl font-semibold mb-4">
+                  <h2 className="text-sm font-medium mb-4">
                     Output Colors ({outputColors.length})
                   </h2>
                   <PaletteGrid colors={outputColors} />
diff --git a/app/(app)/pastel/colorblind/page.tsx b/app/(app)/pastel/colorblind/page.tsx
index 9bf1ac0..908df42 100644
--- a/app/(app)/pastel/colorblind/page.tsx
+++ b/app/(app)/pastel/colorblind/page.tsx
@@ -73,7 +73,7 @@ export default function ColorBlindPage() {
           <div className="space-y-6">
             <div className="p-6 border rounded-lg bg-card">
               <div className="flex items-center justify-between mb-4">
-                <h2 className="text-xl font-semibold">Colors to Test</h2>
+                <h2 className="text-sm font-medium">Colors to Test</h2>
                 <Button
                   onClick={addColor}
                   variant="outline"
@@ -110,7 +110,7 @@ export default function ColorBlindPage() {
             </div>
 
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Blindness Type</h2>
+              <h2 className="text-sm font-medium mb-4">Blindness Type</h2>
               <div className="space-y-4">
                 <Select
                   label="Type"
@@ -152,7 +152,7 @@ export default function ColorBlindPage() {
             {simulations.length > 0 ? (
               <>
                 <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-xl font-semibold mb-4">Simulation Results</h2>
+                  <h2 className="text-sm font-medium mb-4">Simulation Results</h2>
                   <p className="text-sm text-muted-foreground mb-6">
                     Compare original colors (left) with how they appear to people with{' '}
                     {blindnessType} (right)
diff --git a/app/(app)/pastel/contrast/page.tsx b/app/(app)/pastel/contrast/page.tsx
index a8010c3..a849058 100644
--- a/app/(app)/pastel/contrast/page.tsx
+++ b/app/(app)/pastel/contrast/page.tsx
@@ -70,7 +70,7 @@ export default function ContrastPage() {
           <div className="space-y-6">
             <div className="p-6 border rounded-lg bg-card">
               <div className="flex items-center justify-between mb-4">
-                <h2 className="text-xl font-semibold">Foreground Color</h2>
+                <h2 className="text-sm font-medium">Foreground Color</h2>
               </div>
               <ColorPicker color={foreground} onChange={setForeground} />
             </div>
@@ -87,7 +87,7 @@ export default function ContrastPage() {
             </div>
 
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Background Color</h2>
+              <h2 className="text-sm font-medium mb-4">Background Color</h2>
               <ColorPicker color={background} onChange={setBackground} />
             </div>
           </div>
@@ -96,7 +96,7 @@ export default function ContrastPage() {
           <div className="space-y-6">
             {/* Preview */}
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Preview</h2>
+              <h2 className="text-sm font-medium mb-4">Preview</h2>
               <div
                 className="rounded-lg p-8 text-center"
                 style={{ backgroundColor: background, color: foreground }}
@@ -109,7 +109,7 @@ export default function ContrastPage() {
             {/* Contrast Ratio */}
             {ratio !== null && (
               <div className="p-6 border rounded-lg bg-card">
-                <h2 className="text-xl font-semibold mb-4">Contrast Ratio</h2>
+                <h2 className="text-sm font-medium mb-4">Contrast Ratio</h2>
                 <div className="text-center mb-6">
                   <div className="text-5xl font-bold">{ratio.toFixed(2)}:1</div>
                   <p className="text-sm text-muted-foreground mt-2">
@@ -128,7 +128,7 @@ export default function ContrastPage() {
             {/* WCAG Compliance */}
             {compliance && (
               <div className="p-6 border rounded-lg bg-card">
-                <h2 className="text-xl font-semibold mb-4">WCAG 2.1 Compliance</h2>
+                <h2 className="text-sm font-medium mb-4">WCAG 2.1 Compliance</h2>
                 <div className="space-y-4">
                   <div>
                     <h3 className="text-sm font-semibold mb-2">Level AA</h3>
diff --git a/app/(app)/pastel/distinct/page.tsx b/app/(app)/pastel/distinct/page.tsx
index 50e6d3a..636feb1 100644
--- a/app/(app)/pastel/distinct/page.tsx
+++ b/app/(app)/pastel/distinct/page.tsx
@@ -51,7 +51,7 @@ export default function DistinctPage() {
           <div className="lg:col-span-1">
             <div className="p-6 border rounded-lg bg-card space-y-6">
               <div>
-                <h2 className="text-xl font-semibold mb-4">Settings</h2>
+                <h2 className="text-sm font-medium mb-4">Settings</h2>
               </div>
 
               <div>
@@ -128,7 +128,7 @@ export default function DistinctPage() {
           {/* Results */}
           <div className="lg:col-span-2 space-y-6">
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">
+              <h2 className="text-sm font-medium mb-4">
                 Generated Colors {colors.length > 0 && `(${colors.length})`}
               </h2>
               <PaletteGrid colors={colors} />
diff --git a/app/(app)/pastel/gradient/page.tsx b/app/(app)/pastel/gradient/page.tsx
index 7c6393c..d683b00 100644
--- a/app/(app)/pastel/gradient/page.tsx
+++ b/app/(app)/pastel/gradient/page.tsx
@@ -65,7 +65,7 @@ export default function GradientPage() {
           {/* Controls */}
           <div className="space-y-6">
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Color Stops</h2>
+              <h2 className="text-sm font-medium mb-4">Color Stops</h2>
               <div className="space-y-4">
                 {stops.map((stop, index) => (
                   <div key={index} className="flex items-start gap-3">
@@ -95,7 +95,7 @@ export default function GradientPage() {
             </div>
 
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Settings</h2>
+              <h2 className="text-sm font-medium mb-4">Settings</h2>
               <div className="space-y-4">
                 <div>
                   <label htmlFor="count" className="text-sm font-medium mb-2 block">
@@ -159,7 +159,7 @@ export default function GradientPage() {
             {gradient && gradient.length > 0 && (
               <>
                 <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-xl font-semibold mb-4">Gradient Preview</h2>
+                  <h2 className="text-sm font-medium mb-4">Gradient Preview</h2>
                   <div
                     className="h-32 rounded-lg"
                     style={{
@@ -169,7 +169,7 @@ export default function GradientPage() {
                 </div>
 
                 <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-xl font-semibold mb-4">
+                  <h2 className="text-sm font-medium mb-4">
                     Colors ({gradient.length})
                   </h2>
                   <PaletteGrid colors={gradient} />
diff --git a/app/(app)/pastel/harmony/page.tsx b/app/(app)/pastel/harmony/page.tsx
index 40e1ae9..187d33e 100644
--- a/app/(app)/pastel/harmony/page.tsx
+++ b/app/(app)/pastel/harmony/page.tsx
@@ -65,12 +65,12 @@ export default function HarmonyPage() {
           {/* Controls */}
           <div className="space-y-6">
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Base Color</h2>
+              <h2 className="text-sm font-medium mb-4">Base Color</h2>
               <ColorPicker color={baseColor} onChange={setBaseColor} />
             </div>
 
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Harmony Type</h2>
+              <h2 className="text-sm font-medium mb-4">Harmony Type</h2>
               <div className="space-y-4">
                 <Select
                   label="Harmony"
@@ -115,7 +115,7 @@ export default function HarmonyPage() {
             {palette.length > 0 && (
               <>
                 <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-xl font-semibold mb-4">
+                  <h2 className="text-sm font-medium mb-4">
                     Generated Palette ({palette.length} colors)
                   </h2>
                   <PaletteGrid colors={palette} />
diff --git a/app/(app)/pastel/page.tsx b/app/(app)/pastel/page.tsx
index 720ef4b..4569e45 100644
--- a/app/(app)/pastel/page.tsx
+++ b/app/(app)/pastel/page.tsx
@@ -71,13 +71,13 @@ function PlaygroundContent() {
           {/* Left Column: Color Picker and Display */}
           <div className="space-y-6">
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Color Picker</h2>
+              <h2 className="text-sm font-medium mb-4">Color Picker</h2>
               <ColorPicker color={color} onChange={setColor} />
             </div>
 
             <div className="p-6 border rounded-lg bg-card">
               <div className="flex items-center justify-between mb-4">
-                <h2 className="text-xl font-semibold">Preview</h2>
+                <h2 className="text-sm font-medium">Preview</h2>
                 <Button onClick={handleShare} variant="outline" size="sm">
                   <Share2 className="h-4 w-4 mr-2" />
                   Share
@@ -93,7 +93,7 @@ function PlaygroundContent() {
                 <div className="flex items-center justify-between mb-4">
                   <div className="flex items-center gap-2">
                     <History className="h-5 w-5" />
-                    <h2 className="text-xl font-semibold">Recent Colors</h2>
+                    <h2 className="text-sm font-medium">Recent Colors</h2>
                   </div>
                   <Button
                     onClick={clearHistory}
@@ -143,7 +143,7 @@ function PlaygroundContent() {
           {/* Right Column: Color Information */}
           <div className="space-y-6">
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Color Information</h2>
+              <h2 className="text-sm font-medium mb-4">Color Information</h2>
 
               {isLoading && (
                 <div className="flex items-center justify-center py-12">
@@ -162,7 +162,7 @@ function PlaygroundContent() {
             </div>
 
             <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-xl font-semibold mb-4">Color Manipulation</h2>
+              <h2 className="text-sm font-medium mb-4">Color Manipulation</h2>
               <ManipulationPanel color={color} onColorChange={setColor} />
             </div>
           </div>
diff --git a/app/(app)/pastel/textcolor/page.tsx b/app/(app)/pastel/textcolor/page.tsx
index 1fcf489..8fe284d 100644
--- a/app/(app)/pastel/textcolor/page.tsx
+++ b/app/(app)/pastel/textcolor/page.tsx
@@ -68,7 +68,7 @@ export default function TextColorPage() {
           <div className="space-y-6">
             <div className="p-6 border rounded-lg bg-card">
               <div className="flex items-center justify-between mb-4">
-                <h2 className="text-xl font-semibold">Background Colors</h2>
+                <h2 className="text-sm font-medium">Background Colors</h2>
                 <Button
                   onClick={addBackground}
                   disabled={backgrounds.length >= 10}
@@ -136,7 +136,7 @@ export default function TextColorPage() {
             {results.length > 0 ? (
               <>
                 <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-xl font-semibold mb-4">Optimized Results</h2>
+                  <h2 className="text-sm font-medium mb-4">Optimized Results</h2>
                   <div className="space-y-4">
                     {results.map((result, index) => (
                       <div