diff --git a/package-lock.json b/package-lock.json
index 7ccf63f..01e4a6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,7 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-markdown": "^10.1.0",
-        "remark-gfm": "^4.0.1",
-        "replicate": "^1.0.1"
+        "remark-gfm": "^4.0.1"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -1935,19 +1934,6 @@
         "win32"
       ]
     },
-    "node_modules/abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "event-target-shim": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6.5"
-      }
-    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2251,27 +2237,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2296,31 +2261,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/buffer": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.2.1"
-      }
-    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -3419,26 +3359,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=0.8.x"
-      }
-    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -3911,27 +3831,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true
-    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -6309,16 +6208,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6427,23 +6316,6 @@
         "react": ">=18"
       }
     },
-    "node_modules/readable-stream": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
-      "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "abort-controller": "^3.0.0",
-        "buffer": "^6.0.3",
-        "events": "^3.3.0",
-        "process": "^0.11.10",
-        "string_decoder": "^1.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -6554,21 +6426,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/replicate": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/replicate/-/replicate-1.0.1.tgz",
-      "integrity": "sha512-EY+rK1YR5bKHcM9pd6WyaIbv6m2aRIvHfHDh51j/LahlHTLKemTYXF6ptif2sLa+YospupAsIoxw8Ndt5nI3vg==",
-      "license": "Apache-2.0",
-      "engines": {
-        "git": ">=2.11.0",
-        "node": ">=18.0.0",
-        "npm": ">=7.19.0",
-        "yarn": ">=1.7.0"
-      },
-      "optionalDependencies": {
-        "readable-stream": ">=4.0.0"
-      }
-    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -6665,27 +6522,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -6988,16 +6824,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
diff --git a/package.json b/package.json
index dd1a8dc..0b611db 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1",
-    "replicate": "^1.0.1"
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..52eef33
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "Anything vs Anything - AI Comparison Tool",
+  "short_name": "Anything vs Anything",
+  "description": "Compare any two things with AI-powered analysis",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#3B82F6",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "48x48",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..40bd373
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+Disallow: /api/
+
+Sitemap: https://anything-vs-anything.com/sitemap.xml
\ No newline at end of file
diff --git a/src/app/api/compare/route.ts b/src/app/api/compare/route.ts
index 0e9fb84..c69b8d0 100644
--- a/src/app/api/compare/route.ts
+++ b/src/app/api/compare/route.ts
@@ -1,9 +1,4 @@
 import { NextRequest, NextResponse } from 'next/server';
-import Replicate from 'replicate';
-
-const replicate = new Replicate({
-  auth: process.env.REPLICATE_API_TOKEN,
-});
 
 export async function POST(request: NextRequest) {
   try {
@@ -31,22 +26,37 @@ Please provide a comprehensive comparison in a markdown table format with the fo
 
 The table should have three columns: Aspect, ${item1}, ${item2}`;
 
-    const output = await replicate.run(
-      process.env.REPLICATE_MODEL || "meta/llama-2-70b-chat:02e509c789964a7ea8736978a43525956ef40397be9033abf9fd2badfe68c9e3",
-      {
-        input: {
-          prompt: prompt,
-          max_new_tokens: 1000,
-          temperature: 0.7,
-        },
-      }
-    );
+    const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
+        'Content-Type': 'application/json',
+        'HTTP-Referer': process.env.NEXT_PUBLIC_SITE_URL || 'https://anything-vs-anything.com',
+        'X-Title': 'Anything vs Anything',
+      },
+      body: JSON.stringify({
+        model: process.env.OPENROUTER_MODEL || 'anthropic/claude-3.5-sonnet',
+        messages: [
+          {
+            role: 'user',
+            content: prompt
+          }
+        ],
+        temperature: 0.7,
+        max_tokens: 2000,
+      }),
+    });
 
-    const comparison = Array.isArray(output) ? output.join('') : output;
+    if (!response.ok) {
+      throw new Error(`OpenRouter API error: ${response.status}`);
+    }
+
+    const data = await response.json();
+    const comparison = data.choices[0]?.message?.content || 'No comparison generated';
 
     return NextResponse.json({ comparison });
   } catch (error) {
-    console.error('Error calling Replicate API:', error);
+    console.error('Error calling OpenRouter API:', error);
     return NextResponse.json(
       { error: 'Failed to generate comparison' },
       { status: 500 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 5a728c6..ee5a046 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,6 +25,44 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+/* Mobile optimizations */
+@media (max-width: 640px) {
+  .prose {
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+  
+  .prose table {
+    font-size: 0.75rem;
+  }
+  
+  .prose table th,
+  .prose table td {
+    padding: 0.5rem 0.25rem;
+  }
+}
+
+/* Loading animation keyframes */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Smooth transitions */
+* {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .prose table {
   width: 100%;
   margin: 1rem 0;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f7fa87e..0043798 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,8 +13,57 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Anything vs Anything - AI-Powered Comparison Tool",
+  description: "Compare any two things with our AI-powered analysis tool. Get detailed comparisons of products, services, concepts, and more. Free online comparison generator with intelligent insights.",
+  keywords: "comparison tool, AI comparison, product comparison, service comparison, vs tool, compare anything, analysis tool, decision making",
+  authors: [{ name: "Anything vs Anything" }],
+  creator: "Anything vs Anything",
+  publisher: "Anything vs Anything",
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'https://anything-vs-anything.com'),
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    title: "Anything vs Anything - AI-Powered Comparison Tool",
+    description: "Compare any two things with our AI-powered analysis tool. Get detailed comparisons of products, services, concepts, and more.",
+    url: '/',
+    siteName: "Anything vs Anything",
+    locale: 'en_US',
+    type: 'website',
+    images: [
+      {
+        url: '/og-image.png',
+        width: 1200,
+        height: 630,
+        alt: 'Anything vs Anything - AI Comparison Tool',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: "Anything vs Anything - AI-Powered Comparison Tool",
+    description: "Compare any two things with our AI-powered analysis tool. Get detailed comparisons of products, services, concepts, and more.",
+    images: ['/og-image.png'],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+  verification: {
+    google: process.env.GOOGLE_SITE_VERIFICATION,
+  },
 };
 
 export default function RootLayout({
@@ -24,6 +73,36 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        <link rel="manifest" href="/manifest.json" />
+        <meta name="theme-color" content="#3B82F6" />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              "@context": "https://schema.org",
+              "@type": "WebApplication",
+              "name": "Anything vs Anything",
+              "description": "AI-powered comparison tool that helps you compare any two things with detailed analysis and insights",
+              "url": process.env.NEXT_PUBLIC_SITE_URL || "https://anything-vs-anything.com",
+              "applicationCategory": "Utility",
+              "operatingSystem": "Web",
+              "offers": {
+                "@type": "Offer",
+                "price": "0",
+                "priceCurrency": "USD"
+              },
+              "author": {
+                "@type": "Organization",
+                "name": "Anything vs Anything"
+              }
+            })
+          }}
+        />
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0b8c429..30d90b4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -39,18 +39,33 @@ export default function Home() {
   };
 
   return (
-    <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12">
-      <div className="max-w-4xl mx-auto px-4">
+    <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-6 md:py-12">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
             Anything vs Anything
           </h1>
-          <p className="text-xl text-gray-600">
+          <p className="text-xl md:text-2xl text-gray-600 mb-4">
             Compare any two things using AI-powered analysis
           </p>
+          <p className="text-lg text-gray-500 max-w-3xl mx-auto mb-8">
+            From products and services to concepts and ideas - get comprehensive, unbiased comparisons 
+            powered by artificial intelligence. Make informed decisions with detailed analysis.
+          </p>
+          
+          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 mb-8">
+            <h2 className="text-lg font-semibold text-gray-800 mb-4">Popular Comparisons</h2>
+            <div className="flex flex-wrap justify-center gap-2 sm:gap-3">
+              <span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">iPhone vs Samsung Galaxy</span>
+              <span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">React vs Vue.js</span>
+              <span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">Coffee vs Tea</span>
+              <span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">Netflix vs Disney+</span>
+              <span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">Python vs JavaScript</span>
+            </div>
+          </div>
         </div>
 
-        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
+        <div className={`bg-white rounded-xl shadow-lg p-6 sm:p-8 mb-8 transition-all duration-300 ${isLoading ? 'opacity-75 pointer-events-none' : ''}`}>
           <ComparisonForm onSubmit={handleComparison} isLoading={isLoading} />
         </div>
 
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
new file mode 100644
index 0000000..4537f1a
--- /dev/null
+++ b/src/app/sitemap.ts
@@ -0,0 +1,14 @@
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://anything-vs-anything.com'
+
+  return [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: 'daily',
+      priority: 1,
+    },
+  ]
+}
\ No newline at end of file
diff --git a/src/components/ComparisonForm.tsx b/src/components/ComparisonForm.tsx
index ed04194..bb7ff49 100644
--- a/src/components/ComparisonForm.tsx
+++ b/src/components/ComparisonForm.tsx
@@ -13,6 +13,25 @@ export default function ComparisonForm({ onSubmit, isLoading }: ComparisonFormPr
   const [description1, setDescription1] = useState('');
   const [description2, setDescription2] = useState('');
   const [showDescriptions, setShowDescriptions] = useState(false);
+  
+  const examples = [
+    { item1: 'iPhone 15 Pro', item2: 'Samsung Galaxy S24 Ultra', category: 'Smartphones' },
+    { item1: 'React', item2: 'Vue.js', category: 'Frontend Frameworks' },
+    { item1: 'Tesla Model 3', item2: 'BMW i4', category: 'Electric Cars' },
+    { item1: 'Netflix', item2: 'Disney+', category: 'Streaming Services' },
+    { item1: 'MacBook Pro', item2: 'ThinkPad X1 Carbon', category: 'Laptops' },
+    { item1: 'Coffee', item2: 'Tea', category: 'Beverages' }
+  ];
+  
+  const getRandomExample = () => {
+    return examples[Math.floor(Math.random() * examples.length)];
+  };
+  
+  const fillRandomExample = () => {
+    const example = getRandomExample();
+    setItem1(example.item1);
+    setItem2(example.item2);
+  };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -22,36 +41,65 @@ export default function ComparisonForm({ onSubmit, isLoading }: ComparisonFormPr
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-6">
+    <div className="space-y-6">
+      <div className="text-center mb-6">
+        <h2 className="text-2xl font-bold text-gray-900 mb-2">Start Your Comparison</h2>
+        <p className="text-gray-600 mb-4">Enter any two items you want to compare - products, services, concepts, or ideas</p>
+        <button
+          type="button"
+          onClick={fillRandomExample}
+          className="text-blue-600 hover:text-blue-800 text-sm font-medium underline"
+        >
+          Try a random example
+        </button>
+      </div>
+      
+      <form onSubmit={handleSubmit} className="space-y-6">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div>
           <label htmlFor="item1" className="block text-sm font-medium text-gray-700 mb-2">
             First Item
           </label>
-          <input
-            type="text"
-            id="item1"
-            value={item1}
-            onChange={(e) => setItem1(e.target.value)}
-            placeholder="e.g., iPhone"
-            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            required
-          />
+          <div className="relative">
+            <input
+              type="text"
+              id="item1"
+              value={item1}
+              onChange={(e) => setItem1(e.target.value)}
+              placeholder="e.g., iPhone 15 Pro, React, Tesla Model 3"
+              className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
+              disabled={isLoading}
+              required
+            />
+            {isLoading && (
+              <div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
+                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
+              </div>
+            )}
+          </div>
         </div>
         
         <div>
           <label htmlFor="item2" className="block text-sm font-medium text-gray-700 mb-2">
             Second Item
           </label>
-          <input
-            type="text"
-            id="item2"
-            value={item2}
-            onChange={(e) => setItem2(e.target.value)}
-            placeholder="e.g., Android Phone"
-            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            required
-          />
+          <div className="relative">
+            <input
+              type="text"
+              id="item2"
+              value={item2}
+              onChange={(e) => setItem2(e.target.value)}
+              placeholder="e.g., Samsung Galaxy S24, Vue.js, BMW i4"
+              className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
+              disabled={isLoading}
+              required
+            />
+            {isLoading && (
+              <div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
+                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
@@ -71,28 +119,44 @@ export default function ComparisonForm({ onSubmit, isLoading }: ComparisonFormPr
             <label htmlFor="description1" className="block text-sm font-medium text-gray-700 mb-2">
               Description for {item1 || 'First Item'}
             </label>
-            <textarea
-              id="description1"
-              value={description1}
-              onChange={(e) => setDescription1(e.target.value)}
-              placeholder="Additional details about the first item..."
-              rows={3}
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
+            <div className="relative">
+              <textarea
+                id="description1"
+                value={description1}
+                onChange={(e) => setDescription1(e.target.value)}
+                placeholder="Additional details, specifications, or context about the first item..."
+                rows={3}
+                className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
+                disabled={isLoading}
+              />
+              {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
+                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
+                </div>
+              )}
+            </div>
           </div>
           
           <div>
             <label htmlFor="description2" className="block text-sm font-medium text-gray-700 mb-2">
               Description for {item2 || 'Second Item'}
             </label>
-            <textarea
-              id="description2"
-              value={description2}
-              onChange={(e) => setDescription2(e.target.value)}
-              placeholder="Additional details about the second item..."
-              rows={3}
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
+            <div className="relative">
+              <textarea
+                id="description2"
+                value={description2}
+                onChange={(e) => setDescription2(e.target.value)}
+                placeholder="Additional details, specifications, or context about the second item..."
+                rows={3}
+                className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
+                disabled={isLoading}
+              />
+              {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
+                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
+                </div>
+              )}
+            </div>
           </div>
         </div>
       )}
@@ -101,11 +165,19 @@ export default function ComparisonForm({ onSubmit, isLoading }: ComparisonFormPr
         <button
           type="submit"
           disabled={isLoading || !item1.trim() || !item2.trim()}
-          className="px-8 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="px-8 py-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2"
         >
-          {isLoading ? 'Comparing...' : 'Compare Now'}
+          {isLoading ? (
+            <>
+              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+              Analyzing & Comparing...
+            </>
+          ) : (
+            'Compare Now'
+          )}
         </button>
       </div>
-    </form>
+      </form>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/ComparisonHistory.tsx b/src/components/ComparisonHistory.tsx
new file mode 100644
index 0000000..bf446e9
--- /dev/null
+++ b/src/components/ComparisonHistory.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export interface HistoryItem {
+  id: string;
+  item1: string;
+  item2: string;
+  description1: string;
+  description2: string;
+  result: string;
+  timestamp: number;
+}
+
+interface ComparisonHistoryProps {
+  onSelectHistory: (item: HistoryItem) => void;
+}
+
+export default function ComparisonHistory({ onSelectHistory }: ComparisonHistoryProps) {
+  const [history, setHistory] = useState<HistoryItem[]>([]);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    const loadHistory = () => {
+      try {
+        const stored = localStorage.getItem('comparison-history');
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          setHistory(parsed.slice(0, 10)); // Keep only last 10 items
+        }
+      } catch (error) {
+        console.error('Error loading history:', error);
+      }
+    };
+
+    loadHistory();
+    
+    // Listen for storage changes
+    const handleStorageChange = () => {
+      loadHistory();
+    };
+    
+    window.addEventListener('storage', handleStorageChange);
+    // Custom event for same-page updates
+    window.addEventListener('comparison-history-updated', handleStorageChange);
+    
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener('comparison-history-updated', handleStorageChange);
+    };
+  }, []);
+
+  const clearHistory = () => {
+    localStorage.removeItem('comparison-history');
+    setHistory([]);
+    window.dispatchEvent(new Event('comparison-history-updated'));
+  };
+
+  const formatDate = (timestamp: number) => {
+    return new Date(timestamp).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  if (history.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl font-bold text-gray-900">Comparison History</h2>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="text-blue-600 hover:text-blue-800 text-sm font-medium"
+          >
+            {isExpanded ? 'Show Less' : `Show All (${history.length})`}
+          </button>
+          <button
+            onClick={clearHistory}
+            className="text-red-600 hover:text-red-800 text-sm font-medium"
+          >
+            Clear History
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {(isExpanded ? history : history.slice(0, 3)).map((item) => (
+          <div
+            key={item.id}
+            onClick={() => onSelectHistory(item)}
+            className="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200"
+          >
+            <div className="flex items-center justify-between mb-2">
+              <div className="font-medium text-gray-900">
+                <span className="text-blue-600">{item.item1}</span>
+                <span className="text-gray-400 mx-2">vs</span>
+                <span className="text-green-600">{item.item2}</span>
+              </div>
+              <span className="text-xs text-gray-500">
+                {formatDate(item.timestamp)}
+              </span>
+            </div>
+            {(item.description1 || item.description2) && (
+              <div className="text-sm text-gray-600">
+                {item.description1 && (
+                  <div className="truncate">
+                    <strong>{item.item1}:</strong> {item.description1}
+                  </div>
+                )}
+                {item.description2 && (
+                  <div className="truncate">
+                    <strong>{item.item2}:</strong> {item.description2}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {!isExpanded && history.length > 3 && (
+        <div className="text-center mt-4">
+          <button
+            onClick={() => setIsExpanded(true)}
+            className="text-blue-600 hover:text-blue-800 text-sm font-medium"
+          >
+            View {history.length - 3} more comparisons...
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ComparisonResults.tsx b/src/components/ComparisonResults.tsx
index 9c3f24a..440985b 100644
--- a/src/components/ComparisonResults.tsx
+++ b/src/components/ComparisonResults.tsx
@@ -11,7 +11,7 @@ export default function ComparisonResults({ results }: ComparisonResultsProps) {
   return (
     <div>
       <h2 className="text-2xl font-bold text-gray-900 mb-6">Comparison Results</h2>
-      <div className="prose prose-lg max-w-none">
+      <div className="prose prose-lg max-w-none mb-8">
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
           components={{
@@ -46,6 +46,16 @@ export default function ComparisonResults({ results }: ComparisonResultsProps) {
           {results}
         </ReactMarkdown>
       </div>
+      
+      <div className="mt-8 p-4 bg-gray-50 rounded-lg border-t">
+        <h3 className="text-sm font-semibold text-gray-700 mb-2">💡 Tips for better comparisons:</h3>
+        <ul className="text-sm text-gray-600 space-y-1">
+          <li>• Be specific: &quot;iPhone 15 Pro&quot; vs &quot;iPhone 15&quot;</li>
+          <li>• Add context in descriptions for nuanced analysis</li>
+          <li>• Compare similar categories for meaningful results</li>
+          <li>• Try abstract concepts too: &quot;Remote work&quot; vs &quot;Office work&quot;</li>
+        </ul>
+      </div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/utils/historyStorage.ts b/src/utils/historyStorage.ts
new file mode 100644
index 0000000..2846057
--- /dev/null
+++ b/src/utils/historyStorage.ts
@@ -0,0 +1,54 @@
+import { HistoryItem } from '@/components/ComparisonHistory';
+
+export const saveToHistory = (
+  item1: string,
+  item2: string,
+  description1: string,
+  description2: string,
+  result: string
+) => {
+  try {
+    const historyItem: HistoryItem = {
+      id: Date.now().toString(),
+      item1,
+      item2,
+      description1,
+      description2,
+      result,
+      timestamp: Date.now(),
+    };
+
+    const existing = localStorage.getItem('comparison-history');
+    let history: HistoryItem[] = [];
+    
+    if (existing) {
+      history = JSON.parse(existing);
+    }
+
+    // Add new item to the beginning
+    history.unshift(historyItem);
+    
+    // Keep only last 50 items
+    history = history.slice(0, 50);
+
+    localStorage.setItem('comparison-history', JSON.stringify(history));
+    
+    // Dispatch custom event for same-page updates
+    window.dispatchEvent(new Event('comparison-history-updated'));
+    
+    return historyItem;
+  } catch (error) {
+    console.error('Error saving to history:', error);
+    return null;
+  }
+};
+
+export const getHistory = (): HistoryItem[] => {
+  try {
+    const stored = localStorage.getItem('comparison-history');
+    return stored ? JSON.parse(stored) : [];
+  } catch (error) {
+    console.error('Error loading history:', error);
+    return [];
+  }
+};
\ No newline at end of file