diff --git a/app/cv/page.tsx b/app/cv/page.tsx
index e9e62168..f9140a5c 100644
--- a/app/cv/page.tsx
+++ b/app/cv/page.tsx
@@ -10,9 +10,9 @@ export default function CVPage() {
       <div className="floating-orb w-32 h-32 sm:w-48 sm:h-48 bolt-gradient opacity-15 top-20 -left-24"></div>
       <div className="floating-orb w-24 h-24 sm:w-36 sm:h-36 bolt-gradient opacity-20 bottom-20 -right-18"></div>
       <div className="floating-orb w-40 h-40 sm:w-56 sm:h-56 bolt-gradient opacity-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
-      
+
       {/* Grid pattern overlay */}
-      <div 
+      <div
         className="absolute inset-0 opacity-[0.02]"
         style={{
           backgroundImage: `url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23000000' fill-opacity='1'%3e%3ccircle cx='30' cy='30' r='1'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e")`,
@@ -20,7 +20,7 @@ export default function CVPage() {
       />
 
       <SiteHeader />
-      <main className="flex-1 relative z-10">
+      <main className="flex-1 relative z-10 mx-auto">
         <div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
           {/* Enhanced Header */}
           <div className="text-center mb-8 sm:mb-12">
@@ -29,7 +29,7 @@ export default function CVPage() {
               <span className="text-sm font-medium">CV Builder</span>
               <Award className="h-4 w-4 text-blue-500" />
             </div>
-            
+
             <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 sm:mb-6 leading-tight">
               Build Your{" "}
               <span className="bolt-gradient-text relative inline-block">
@@ -39,46 +39,64 @@ export default function CVPage() {
                 </div>
               </span>
             </h1>
-            
+
             <p className="text-base sm:text-lg lg:text-xl leading-7 sm:leading-8 text-muted-foreground max-w-2xl lg:max-w-3xl mx-auto px-4 sm:px-0">
               Create a comprehensive{" "}
               <span className="font-semibold text-yellow-600">academic CV</span>{" "}
               highlighting your{" "}
               <span className="font-semibold text-blue-600">achievements</span>,{" "}
-              <span className="font-semibold text-purple-600">research</span>, and{" "}
-              <span className="font-semibold bolt-gradient-text">career progression</span>
+              <span className="font-semibold text-purple-600">research</span>,
+              and{" "}
+              <span className="font-semibold bolt-gradient-text">
+                career progression
+              </span>
             </p>
 
             {/* Stats bar */}
             <div className="mt-6 sm:mt-8 flex flex-wrap justify-center gap-4 sm:gap-6">
               <div className="glass-effect px-4 py-2 rounded-full hover:scale-105 transition-transform duration-300">
-                <span className="bolt-gradient-text font-bold text-sm">Academic</span>
-                <span className="text-muted-foreground text-xs ml-1">Focus</span>
+                <span className="bolt-gradient-text font-bold text-sm">
+                  Academic
+                </span>
+                <span className="text-muted-foreground text-xs ml-1">
+                  Focus
+                </span>
               </div>
               <div className="glass-effect px-4 py-2 rounded-full hover:scale-105 transition-transform duration-300">
-                <span className="bolt-gradient-text font-bold text-sm">Research</span>
-                <span className="text-muted-foreground text-xs ml-1">Ready</span>
+                <span className="bolt-gradient-text font-bold text-sm">
+                  Research
+                </span>
+                <span className="text-muted-foreground text-xs ml-1">
+                  Ready
+                </span>
               </div>
               <div className="glass-effect px-4 py-2 rounded-full hover:scale-105 transition-transform duration-300">
-                <span className="bolt-gradient-text font-bold text-sm">Detailed</span>
-                <span className="text-muted-foreground text-xs ml-1">Format</span>
+                <span className="bolt-gradient-text font-bold text-sm">
+                  Detailed
+                </span>
+                <span className="text-muted-foreground text-xs ml-1">
+                  Format
+                </span>
               </div>
             </div>
           </div>
-          
+
           {/* Enhanced Generator Container */}
           <div className="glass-effect p-6 sm:p-8 rounded-2xl border border-yellow-400/20 relative overflow-hidden">
             {/* Background shimmer effect */}
             <div className="absolute inset-0 shimmer opacity-20"></div>
-            
+
             {/* Decorative elements */}
             <div className="absolute top-4 right-4">
               <Sparkles className="h-5 w-5 text-yellow-500 animate-pulse" />
             </div>
             <div className="absolute bottom-4 left-4">
-              <Star className="h-4 w-4 text-blue-500 animate-spin" style={{animationDuration: '3s'}} />
+              <Star
+                className="h-4 w-4 text-blue-500 animate-spin"
+                style={{ animationDuration: "3s" }}
+              />
             </div>
-            
+
             <div className="relative z-10">
               <ResumeGenerator />
             </div>
@@ -91,20 +109,27 @@ export default function CVPage() {
               <div className="relative z-10">
                 <div className="flex items-center justify-center gap-2 mb-4">
                   <Zap className="h-5 w-5 text-yellow-500 animate-pulse" />
-                  <span className="font-semibold bolt-gradient-text text-lg">Ready to showcase your expertise?</span>
+                  <span className="font-semibold bolt-gradient-text text-lg">
+                    Ready to showcase your expertise?
+                  </span>
                   <Star className="h-5 w-5 text-blue-500 animate-pulse" />
                 </div>
                 <p className="text-muted-foreground text-sm mb-4">
-                  Create a CV that highlights your academic and professional journey
+                  Create a CV that highlights your academic and professional
+                  journey
                 </p>
                 <div className="flex flex-wrap justify-center gap-3">
                   <div className="glass-effect px-4 py-2 rounded-full text-xs hover:scale-105 transition-transform duration-300">
                     <Award className="inline h-3 w-3 text-yellow-500 mr-1" />
-                    <span className="bolt-gradient-text font-semibold">Academic Standard</span>
+                    <span className="bolt-gradient-text font-semibold">
+                      Academic Standard
+                    </span>
                   </div>
                   <div className="glass-effect px-4 py-2 rounded-full text-xs hover:scale-105 transition-transform duration-300">
                     <Zap className="inline h-3 w-3 text-blue-500 mr-1" />
-                    <span className="bolt-gradient-text font-semibold">Comprehensive</span>
+                    <span className="bolt-gradient-text font-semibold">
+                      Comprehensive
+                    </span>
                   </div>
                 </div>
               </div>
@@ -114,4 +139,4 @@ export default function CVPage() {
       </main>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/diagram/page.tsx b/app/diagram/page.tsx
index 9c240b4c..445cb966 100644
--- a/app/diagram/page.tsx
+++ b/app/diagram/page.tsx
@@ -31,7 +31,7 @@ export default function DiagramPage() {
       />
 
       <SiteHeader />
-      <main className="flex-1 relative z-10">
+      <main className="flex-1 relative z-10 mx-auto">
         <div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
           {/* Enhanced Header */}
           <div className="text-center mb-8 sm:mb-12">
@@ -53,10 +53,7 @@ export default function DiagramPage() {
 
             <p className="text-base sm:text-lg lg:text-xl leading-7 sm:leading-8 text-muted-foreground max-w-2xl lg:max-w-3xl mx-auto px-4 sm:px-0">
               Design{" "}
-              <span className="font-semibold text-yellow-600">
-                flowcharts
-              </span>
-              ,{" "}
+              <span className="font-semibold text-yellow-600">flowcharts</span>,{" "}
               <span className="font-semibold text-blue-600">
                 system architectures
               </span>
@@ -116,11 +113,7 @@ export default function DiagramPage() {
             </div>
 
             <div className="relative z-10">
-              {isLoading ? (
-                <DiagramGeneratorSkeleton />
-              ) : (
-                <DiagramGenerator />
-              )}
+              {isLoading ? <DiagramGeneratorSkeleton /> : <DiagramGenerator />}
             </div>
           </div>
 
@@ -137,7 +130,8 @@ export default function DiagramPage() {
                   <Star className="h-5 w-5 text-blue-500 animate-pulse" />
                 </div>
                 <p className="text-muted-foreground text-sm mb-4">
-                  Create professional diagrams that communicate complex concepts clearly
+                  Create professional diagrams that communicate complex concepts
+                  clearly
                 </p>
                 <div className="flex flex-wrap justify-center gap-3">
                   <div className="glass-effect px-4 py-2 rounded-full text-xs hover:scale-105 transition-transform duration-300">
@@ -160,4 +154,4 @@ export default function DiagramPage() {
       </main>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/letter/page.tsx b/app/letter/page.tsx
index ffb12769..b65c5ec0 100644
--- a/app/letter/page.tsx
+++ b/app/letter/page.tsx
@@ -30,7 +30,7 @@ export default function LetterPage() {
       />
 
       <SiteHeader />
-      <main className="flex-1 relative z-10">
+      <main className="flex-1 relative z-10 mx-auto">
         <div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
           {/* Enhanced Header */}
           <div className="text-center mb-8 sm:mb-12">
diff --git a/app/presentation/page.tsx b/app/presentation/page.tsx
index cb614a76..77232d3d 100644
--- a/app/presentation/page.tsx
+++ b/app/presentation/page.tsx
@@ -37,7 +37,7 @@ export default function PresentationPage() {
       />
 
       <SiteHeader />
-      <main className="flex-1 relative z-10">
+      <main className="flex-1 relative z-10 mx-auto">
         <div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
           {/* Enhanced Header */}
           <div className="text-center mb-8 sm:mb-12">
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index e983a96d..52a001cc 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -1,6 +1,18 @@
-"use client"
-import React from 'react';
-import { Check, Star, Zap, Crown, Sparkles, Wand2, ArrowDown, Shield, Globe, Heart, Coffee } from 'lucide-react';
+"use client";
+import React from "react";
+import {
+  Check,
+  Star,
+  Zap,
+  Crown,
+  Sparkles,
+  Wand2,
+  ArrowDown,
+  Shield,
+  Globe,
+  Heart,
+  Coffee,
+} from "lucide-react";
 import { SiteHeader } from "@/components/site-header";
 
 interface PricingFeature {
@@ -16,7 +28,7 @@ interface PricingPlan {
   features: PricingFeature[];
   popular?: boolean;
   ctaText: string;
-  ctaVariant: 'primary' | 'secondary' | 'premium';
+  ctaVariant: "primary" | "secondary" | "premium";
   icon: React.ReactNode;
 }
 
@@ -26,7 +38,8 @@ export default function PricingPage() {
       name: "Free",
       price: "$0",
       period: "/month",
-      description: "Perfect for individuals getting started with document automation",
+      description:
+        "Perfect for individuals getting started with document automation",
       icon: <Star className="w-6 h-6" />,
       features: [
         { text: "5 documents per month", included: true },
@@ -39,13 +52,14 @@ export default function PricingPage() {
         { text: "Priority support", included: false },
       ],
       ctaText: "Get Started",
-      ctaVariant: "secondary"
+      ctaVariant: "secondary",
     },
     {
       name: "Professional",
       price: "$19",
       period: "/month",
-      description: "Ideal for professionals and small teams who need more power",
+      description:
+        "Ideal for professionals and small teams who need more power",
       icon: <Zap className="w-6 h-6" />,
       popular: true,
       features: [
@@ -59,7 +73,7 @@ export default function PricingPage() {
         { text: "Priority support", included: false },
       ],
       ctaText: "Start Free Trial",
-      ctaVariant: "primary"
+      ctaVariant: "primary",
     },
     {
       name: "Enterprise",
@@ -78,19 +92,20 @@ export default function PricingPage() {
         { text: "Dedicated account manager", included: true },
       ],
       ctaText: "Contact Sales",
-      ctaVariant: "premium"
-    }
+      ctaVariant: "premium",
+    },
   ];
 
   const getButtonClasses = (variant: string, popular?: boolean) => {
-    const baseClasses = "w-full py-3 px-6 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105";
-    
+    const baseClasses =
+      "w-full py-3 px-6 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105";
+
     switch (variant) {
-      case 'primary':
+      case "primary":
         return `${baseClasses} bg-blue-600 text-white hover:bg-blue-700 shadow-lg hover:shadow-xl`;
-      case 'secondary':
+      case "secondary":
         return `${baseClasses} bg-gray-100 text-gray-800 hover:bg-gray-200 border border-gray-300`;
-      case 'premium':
+      case "premium":
         return `${baseClasses} bg-gradient-to-r from-purple-600 to-indigo-600 text-white hover:from-purple-700 hover:to-indigo-700 shadow-lg hover:shadow-xl`;
       default:
         return baseClasses;
@@ -99,68 +114,86 @@ export default function PricingPage() {
 
   return (
     <div className="min-h-screen flex flex-col relative overflow-hidden">
-        {/* Animated background elements matching landing page */}
-          <div className="absolute inset-0 mesh-gradient opacity-20"></div>
-          
-          {/* Floating orbs - matching landing page */}
-          <div className="floating-orb w-40 h-40 sm:w-64 sm:h-64 bolt-gradient opacity-15 top-20 -left-20 sm:-left-32"></div>
-          <div className="floating-orb w-32 h-32 sm:w-48 sm:h-48 bolt-gradient opacity-20 -top-10 right-10 sm:right-20"></div>
-          <div className="floating-orb w-48 h-48 sm:w-72 sm:h-72 bolt-gradient opacity-10 bottom-10 left-1/3"></div>
-          
-          {/* Grid pattern overlay */}
-          <div 
-            className="absolute inset-0 opacity-[0.02]"
-            style={{
-              backgroundImage: `url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23000000' fill-opacity='1'%3e%3ccircle cx='30' cy='30' r='1'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e")`,
-            }}
-          />
+      {/* Animated background elements matching landing page */}
+      <div className="absolute inset-0 mesh-gradient opacity-20"></div>
+
+      {/* Floating orbs - matching landing page */}
+      <div className="floating-orb w-40 h-40 sm:w-64 sm:h-64 bolt-gradient opacity-15 top-20 -left-20 sm:-left-32"></div>
+      <div className="floating-orb w-32 h-32 sm:w-48 sm:h-48 bolt-gradient opacity-20 -top-10 right-10 sm:right-20"></div>
+      <div className="floating-orb w-48 h-48 sm:w-72 sm:h-72 bolt-gradient opacity-10 bottom-10 left-1/3"></div>
+
+      {/* Grid pattern overlay */}
+      <div
+        className="absolute inset-0 opacity-[0.02]"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23000000' fill-opacity='1'%3e%3ccircle cx='30' cy='30' r='1'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e")`,
+        }}
+      />
       <SiteHeader />
-      <main className="flex-1 relative z-10">
+      <main className="flex-1 relative z-10 mx-auto">
         {/* Pricing Section with matching background elements */}
-        <section className="py-16 sm:py-24 lg:py-32 relative overflow-hidden">
-            
-          <div className="container relative z-10 px-4 sm:px-6 lg:px-8">            
+        <section className="py-16 sm:py-24 lg:py-32 relative overflow-hidden ">
+          <div className="container relative z-10 px-4 sm:px-6 lg:px-8">
             {/* Header matching landing page style */}
             <div className="text-center mb-12 sm:mb-16 lg:mb-20">
               {/* Badge matching landing page style */}
               <div className="inline-flex items-center gap-2 px-4 sm:px-6 py-2 sm:py-3 rounded-full glass-effect mb-6 sm:mb-8 shimmer">
                 <Sparkles className="h-4 w-4 sm:h-5 sm:w-5 text-yellow-500 animate-pulse" />
-                <span className="text-sm sm:text-base font-medium">Pricing Plans</span>
+                <span className="text-sm sm:text-base font-medium">
+                  Pricing Plans
+                </span>
                 <Wand2 className="h-4 w-4 sm:h-5 sm:w-5 text-blue-500 animate-bounce" />
               </div>
-              
+
               {/* Modern heading matching landing page typography */}
-              <h1 className="modern-display text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-center mb-6 sm:mb-8">
+              <h1 className="modern-display text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-center mb-6 sm:mb-8 mto">
                 Choose Your{" "}
                 <span className="bolt-gradient-text relative inline-block">
                   Perfect Plan
                   <div className="absolute -top-1 sm:-top-2 -right-1 sm:-right-2">
-                    <Star className="h-5 w-5 sm:h-6 sm:w-6 lg:h-8 lg:w-8 text-yellow-500 animate-spin" style={{animationDuration: '3s'}} />
+                    <Star
+                      className="h-5 w-5 sm:h-6 sm:w-6 lg:h-8 lg:w-8 text-yellow-500 animate-spin"
+                      style={{ animationDuration: "3s" }}
+                    />
                   </div>
                 </span>
               </h1>
-              
+
               {/* Modern subtitle matching landing page style */}
               <p className="modern-body text-base sm:text-lg lg:text-xl text-muted-foreground max-w-2xl lg:max-w-3xl mx-auto px-4 sm:px-0">
                 Transform your document workflow with{" "}
                 <span className="font-semibold text-yellow-600">DocMagic</span>{" "}
                 Start free and scale as you grow with{" "}
-                <span className="font-semibold bolt-gradient-text">magical precision</span>
+                <span className="font-semibold bolt-gradient-text">
+                  magical precision
+                </span>
               </p>
-              
+
               {/* Stats bar matching landing page */}
               <div className="mt-8 sm:mt-12 flex flex-wrap justify-center gap-4 sm:gap-8">
                 <div className="glass-effect px-4 sm:px-6 py-2 sm:py-3 rounded-full hover:scale-105 transition-transform duration-300">
-                  <span className="bolt-gradient-text font-bold text-sm sm:text-base">3</span>
-                  <span className="text-muted-foreground text-xs sm:text-sm ml-1">Plans Available</span>
+                  <span className="bolt-gradient-text font-bold text-sm sm:text-base">
+                    3
+                  </span>
+                  <span className="text-muted-foreground text-xs sm:text-sm ml-1">
+                    Plans Available
+                  </span>
                 </div>
                 <div className="glass-effect px-4 sm:px-6 py-2 sm:py-3 rounded-full hover:scale-105 transition-transform duration-300">
-                  <span className="bolt-gradient-text font-bold text-sm sm:text-base">FREE</span>
-                  <span className="text-muted-foreground text-xs sm:text-sm ml-1">Trial</span>
+                  <span className="bolt-gradient-text font-bold text-sm sm:text-base">
+                    FREE
+                  </span>
+                  <span className="text-muted-foreground text-xs sm:text-sm ml-1">
+                    Trial
+                  </span>
                 </div>
                 <div className="glass-effect px-4 sm:px-6 py-2 sm:py-3 rounded-full hover:scale-105 transition-transform duration-300">
-                  <span className="bolt-gradient-text font-bold text-sm sm:text-base">24/7</span>
-                  <span className="text-muted-foreground text-xs sm:text-sm ml-1">Support</span>
+                  <span className="bolt-gradient-text font-bold text-sm sm:text-base">
+                    24/7
+                  </span>
+                  <span className="text-muted-foreground text-xs sm:text-sm ml-1">
+                    Support
+                  </span>
                 </div>
               </div>
             </div>
@@ -170,8 +203,10 @@ export default function PricingPage() {
               {plans.map((plan, index) => (
                 <div
                   key={plan.name}
-                  className={`animate-bounce-in delay-${(index + 1) * 100} will-change-transform relative professional-card rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 ${
-                    plan.popular ? 'ring-2 ring-blue-500 scale-105' : ''
+                  className={`animate-bounce-in delay-${
+                    (index + 1) * 100
+                  } will-change-transform relative professional-card rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 ${
+                    plan.popular ? "ring-2 ring-blue-500 scale-105" : ""
                   }`}
                 >
                   {/* Popular Badge */}
@@ -186,17 +221,29 @@ export default function PricingPage() {
                   <div className="p-8">
                     {/* Plan Header */}
                     <div className="text-center mb-8">
-                      <div className={`inline-flex items-center justify-center w-16 h-16 rounded-full mb-4 glass-effect ${
-                        plan.popular ? 'bolt-gradient-text' : 'text-muted-foreground'
-                      }`}>
+                      <div
+                        className={`inline-flex items-center justify-center w-16 h-16 rounded-full mb-4 glass-effect ${
+                          plan.popular
+                            ? "bolt-gradient-text"
+                            : "text-muted-foreground"
+                        }`}
+                      >
                         {plan.icon}
                       </div>
-                      <h3 className="text-2xl font-bold mb-2 bolt-gradient-text">{plan.name}</h3>
+                      <h3 className="text-2xl font-bold mb-2 bolt-gradient-text">
+                        {plan.name}
+                      </h3>
                       <div className="flex items-baseline justify-center mb-2">
-                        <span className="text-5xl font-bold bolt-gradient-text">{plan.price}</span>
-                        <span className="text-muted-foreground ml-1">{plan.period}</span>
+                        <span className="text-5xl font-bold bolt-gradient-text">
+                          {plan.price}
+                        </span>
+                        <span className="text-muted-foreground ml-1">
+                          {plan.period}
+                        </span>
                       </div>
-                      <p className="text-muted-foreground">{plan.description}</p>
+                      <p className="text-muted-foreground">
+                        {plan.description}
+                      </p>
                     </div>
 
                     {/* Features List */}
@@ -204,16 +251,22 @@ export default function PricingPage() {
                       <ul className="space-y-4">
                         {plan.features.map((feature, featureIndex) => (
                           <li key={featureIndex} className="flex items-start">
-                            <div className={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5 mr-3 ${
-                              feature.included 
-                                ? 'bg-green-100 text-green-600' 
-                                : 'bg-gray-100 text-gray-400'
-                            }`}>
+                            <div
+                              className={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5 mr-3 ${
+                                feature.included
+                                  ? "bg-green-100 text-green-600"
+                                  : "bg-gray-100 text-gray-400"
+                              }`}
+                            >
                               <Check className="w-3 h-3" />
                             </div>
-                            <span className={`text-sm ${
-                              feature.included ? 'text-foreground' : 'text-muted-foreground'
-                            }`}>
+                            <span
+                              className={`text-sm ${
+                                feature.included
+                                  ? "text-foreground"
+                                  : "text-muted-foreground"
+                              }`}
+                            >
                               {feature.text}
                             </span>
                           </li>
@@ -222,7 +275,12 @@ export default function PricingPage() {
                     </div>
 
                     {/* CTA Button */}
-                    <button className={getButtonClasses(plan.ctaVariant, plan.popular)}>
+                    <button
+                      className={getButtonClasses(
+                        plan.ctaVariant,
+                        plan.popular
+                      )}
+                    >
                       {plan.ctaText}
                     </button>
                   </div>
@@ -235,7 +293,7 @@ export default function PricingPage() {
               <div className="professional-card p-8 max-w-4xl mx-auto rounded-2xl relative overflow-hidden hover:scale-105 transition-transform duration-300">
                 {/* Background shimmer effect */}
                 <div className="absolute inset-0 shimmer opacity-30"></div>
-                
+
                 <div className="relative z-10">
                   <div className="flex items-center justify-center gap-2 mb-4">
                     <Zap className="h-5 w-5 sm:h-6 sm:w-6 text-yellow-500 animate-pulse" />
@@ -245,7 +303,8 @@ export default function PricingPage() {
                     <Sparkles className="h-5 w-5 sm:h-6 sm:w-6 text-blue-500 animate-pulse" />
                   </div>
                   <p className="text-muted-foreground mb-6">
-                    Contact our sales team to discuss enterprise features, custom integrations, and volume discounts.
+                    Contact our sales team to discuss enterprise features,
+                    custom integrations, and volume discounts.
                   </p>
                   <div className="flex flex-col sm:flex-row gap-4 justify-center">
                     <button className="px-8 py-3 glass-effect rounded-lg font-semibold hover:scale-105 transition-all duration-300">
@@ -261,12 +320,16 @@ export default function PricingPage() {
 
             {/* Trust Indicators matching landing page style */}
             <div className="text-center mt-12">
-              <p className="text-sm text-muted-foreground mb-4">Trusted by 10,000+ professionals worldwide</p>
+              <p className="text-sm text-muted-foreground mb-4">
+                Trusted by 10,000+ professionals worldwide
+              </p>
               <div className="flex items-center justify-center space-x-2 text-yellow-400">
                 {[...Array(5)].map((_, i) => (
                   <Star key={i} className="w-5 h-5 fill-current" />
                 ))}
-                <span className="text-muted-foreground ml-2">4.9/5 from 2,500+ reviews</span>
+                <span className="text-muted-foreground ml-2">
+                  4.9/5 from 2,500+ reviews
+                </span>
               </div>
             </div>
           </div>
@@ -279,34 +342,40 @@ export default function PricingPage() {
         <div className="absolute inset-0 mesh-gradient opacity-10"></div>
         <div className="floating-orb w-32 h-32 sm:w-48 sm:h-48 bolt-gradient opacity-10 top-10 -left-16"></div>
         <div className="floating-orb w-24 h-24 sm:w-36 sm:h-36 bolt-gradient opacity-15 bottom-10 -right-12"></div>
-        
+
         {/* Grid pattern overlay */}
-        <div 
+        <div
           className="absolute inset-0 opacity-[0.01]"
           style={{
             backgroundImage: `url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23000000' fill-opacity='1'%3e%3ccircle cx='30' cy='30' r='1'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e")`,
           }}
         />
-        
-        <div className="container px-4 sm:px-6 lg:px-8 py-12 sm:py-16 mx-auto relative z-10 "> 
+
+        <div className="container px-4 sm:px-6 lg:px-8 py-12 sm:py-16 mx-auto relative z-10 ">
           {/* Professional Stats section */}
           <div className="flex flex-wrap justify-center items-center gap-4 sm:gap-8 mb-8">
             <div className="professional-card px-4 sm:px-6 py-3 sm:py-4 rounded-full hover:scale-105 transition-transform duration-300">
               <div className="flex items-center gap-2">
                 <Shield className="h-4 w-4 text-emerald-500" />
-                <span className="text-xs sm:text-sm font-medium professional-text">Secure & Private</span>
+                <span className="text-xs sm:text-sm font-medium professional-text">
+                  Secure & Private
+                </span>
               </div>
             </div>
             <div className="professional-card px-4 sm:px-6 py-3 sm:py-4 rounded-full hover:scale-105 transition-transform duration-300">
               <div className="flex items-center gap-2">
                 <Zap className="h-4 w-4 text-amber-500" />
-                <span className="text-xs sm:text-sm font-medium professional-text">Lightning Fast</span>
+                <span className="text-xs sm:text-sm font-medium professional-text">
+                  Lightning Fast
+                </span>
               </div>
             </div>
             <div className="professional-card px-4 sm:px-6 py-3 sm:py-4 rounded-full hover:scale-105 transition-transform duration-300">
               <div className="flex items-center gap-2">
                 <Star className="h-4 w-4 text-blue-500" />
-                <span className="text-xs sm:text-sm font-medium professional-text">5-Star Rated</span>
+                <span className="text-xs sm:text-sm font-medium professional-text">
+                  5-Star Rated
+                </span>
               </div>
             </div>
           </div>
@@ -314,4 +383,4 @@ export default function PricingPage() {
       </footer>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/resume/page.tsx b/app/resume/page.tsx
index 737c84c9..5a7be3cd 100644
--- a/app/resume/page.tsx
+++ b/app/resume/page.tsx
@@ -33,17 +33,17 @@ export default function ResumePage() {
       />
 
       <SiteHeader />
-      <main className="flex-1 relative z-10">
-        <div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
+      <main className="flex-1 relative z-10 items-center justify-center">
+        <div className="flex flex-col container py-8 sm:py-12 px-4 sm:px-6 lg:px-8 mx-auto text-center">
           {/* Enhanced Header */}
-          <div className="text-center mb-8 sm:mb-12">
+          <div className="text-center mb-8 sm:mb-12 items-center">
             <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-effect mb-4 sm:mb-6 shimmer">
               <FileText className="h-4 w-4 text-yellow-500" />
               <span className="text-sm font-medium">Resume Tools</span>
               <Sparkles className="h-4 w-4 text-blue-500" />
             </div>
 
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 sm:mb-6 leading-tight">
+            <h1 className="justify-center items-center text-3xl sm:text-4xl md:text-5xl font-bold mb-4 sm:mb-6 leading-tight">
               Create & Optimize Your{" "}
               <span className="bolt-gradient-text relative inline-block">
                 Professional Resume
diff --git a/app/templates/page.tsx b/app/templates/page.tsx
index 1f8943eb..e60dcb0a 100644
--- a/app/templates/page.tsx
+++ b/app/templates/page.tsx
@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { TemplateList } from "@/components/templates/template-list";
 import { Template } from "@/types/templates";
 import { useToast } from "@/hooks/use-toast";
@@ -21,22 +21,22 @@ export default function TemplatesPage() {
         setIsLoading(true);
 
         // Use the API route which has fallback to mock data
-        const response = await fetch('/api/templates');
+        const response = await fetch("/api/templates");
 
         if (!response.ok) {
-          throw new Error('Failed to fetch templates');
+          throw new Error("Failed to fetch templates");
         }
 
         const allTemplates = await response.json();
         setTemplates(allTemplates);
         setError(null);
       } catch (error) {
-        console.error('Error fetching templates:', error);
-        setError('Failed to load templates. Please try again.');
+        console.error("Error fetching templates:", error);
+        setError("Failed to load templates. Please try again.");
         toast({
-          title: 'Error',
-          description: 'Failed to load templates. Please try again.',
-          variant: 'destructive',
+          title: "Error",
+          description: "Failed to load templates. Please try again.",
+          variant: "destructive",
         });
       } finally {
         setIsLoading(false);
@@ -69,7 +69,9 @@ export default function TemplatesPage() {
             <div className="flex justify-center items-center h-64">
               <div className="glass-effect p-8 rounded-2xl">
                 <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mx-auto"></div>
-                <p className="text-muted-foreground mt-4 text-center">Loading templates...</p>
+                <p className="text-muted-foreground mt-4 text-center">
+                  Loading templates...
+                </p>
               </div>
             </div>
           </div>
@@ -87,7 +89,7 @@ export default function TemplatesPage() {
         <div className="floating-orb w-24 h-24 sm:w-36 sm:h-36 bolt-gradient opacity-20 bottom-20 -right-18"></div>
 
         <SiteHeader />
-        <main className="flex-1 relative z-10">
+        <main className="flex-1 relative z-10 mx-auto">
           <div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
             <div className="text-center">
               <div className="glass-effect p-8 rounded-2xl max-w-md mx-auto">
@@ -118,10 +120,10 @@ export default function TemplatesPage() {
       />
 
       <SiteHeader />
-      <main className="flex-1 relative z-10">
-        <div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
+      <main className="flex-1 relative z-10 mx-auto">
+        <div className="container py-8 sm:py-12 px-4 sm:px-6 lg:px-8 mx-auto">
           {/* Enhanced Header */}
-          <div className="text-center mb-8 sm:mb-12">
+          <div className="text-center mb-8 sm:mb-12 mx-auto">
             <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-effect mb-4 sm:mb-6 shimmer">
               <BookOpen className="h-4 w-4 text-yellow-500" />
               <span className="text-sm font-medium">Template Library</span>
@@ -216,7 +218,8 @@ export default function TemplatesPage() {
                   <Star className="h-5 w-5 text-blue-500 animate-pulse" />
                 </div>
                 <p className="text-muted-foreground text-sm mb-4">
-                  Start with a template or build your own from scratch with AI assistance
+                  Start with a template or build your own from scratch with AI
+                  assistance
                 </p>
                 <div className="flex flex-wrap justify-center gap-3">
                   <div className="glass-effect px-4 py-2 rounded-full text-xs hover:scale-105 transition-transform duration-300">