diff --git a/__pycache__/app.cpython-311.pyc b/__pycache__/app.cpython-311.pyc
index 4d0cd4a..482b441 100644
Binary files a/__pycache__/app.cpython-311.pyc and b/__pycache__/app.cpython-311.pyc differ
diff --git a/templates/generate.html b/templates/generate.html
index c4b45da..847f315 100644
--- a/templates/generate.html
+++ b/templates/generate.html
@@ -2,21 +2,57 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Agrotourism Service Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body>
-    <h2>Agrotourism Service Description Generator</h2>
-    <form method="post">
-        <label for="service_name">Enter the Agrotourism Service Name:</label><br>
-        <input type="text" id="service_name" name="service_name" required><br>
-        <input type="submit" value="Generate">
-    </form>
-    {% if response %}
-        <h3>Generated Description for "{{ service_name }}":</h3>
-        {% for section, text in response.items() %}
-            <h4>{{ section }}</h4>
-            <p>{{ text }}</p>
-        {% endfor %}
-    {% endif %}
+<body class="bg-gray-100">
+    <div class="flex justify-center px-6 py-12">
+        <div class="w-full max-w-4xl">
+            <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+                <div class="px-4 py-5 sm:px-6">
+                    <h2 class="text-2xl leading-6 font-medium text-gray-900">
+                        Create a Plan
+                    </h2>
+                </div>
+                <div class="border-t border-gray-200">
+                    <dl>
+                        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt class="text-sm font-medium text-gray-500">
+                                Enter the Agrotourism Service Name:
+                            </dt>
+                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                <form method="post" class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4">
+                                    <div class="flex-grow">
+                                        <input type="text" id="service_name" name="service_name" required 
+                                            class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
+                                    </div>
+                                    <div>
+                                        <button type="submit" 
+                                            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                                            Create Plan
+                                        </button>
+                                    </div>
+                                </form>
+                            </dd>
+                        </div>
+                        {% if response %}
+                            <div class="px-4 py-5 sm:px-6">
+                                <h3 class="text-lg leading-6 font-medium text-gray-900">
+                                    Generated Description for "{{ service_name }}":
+                                </h3>
+                                <div class="mt-4">
+                                    {% for section, text in response.items() %}
+                                        <h4 class="text-md font-bold text-gray-900">{{ section }}</h4>
+                                        <p class="mt-1 text-sm text-gray-600">{{ text }}</p>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        {% endif %}
+                    </dl>
+                </div>
+            </div>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index e7b2d3d..27e7412 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -8,27 +8,74 @@
 <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 <link rel="stylesheet" href="../static/styles.css">
+<style>
+  /* Custom styles for broader hero section and minimal footer */
+  .hero-section {
+    padding: 40px 0; /* Increase padding for a broader look */
+    background-color: #f0f9ff; /* Light green background */
+    color: #333; /* Adjust text color for better contrast */
+  }
+  .footer {
+    background-color: #f0f9ff; /* Footer background to match the theme */
+    color: #333; /* Footer text color */
+    padding: 20px 0;
+    text-align: center;
+  }
+</style>
 </head>
 <body>
-<div class="container mx-auto px-4">
+  <div class="container mx-auto px-4">
     <nav class="flex justify-between items-center py-6">
-        <a href="#" class="text-2xl font-bold text-gray-800">Chalo Kisaan</a>
-        <div class="menu-toggle" onclick="toggleMenu()">
-          <i class="fas fa-bars fa-2x"></i>
-        </div>
-        <div class="nav-links">
-          <a href="/predict" class="text-gray-600 mx-2">Start Planning</a>
-          <a href="/generate" class="text-gray-600 mx-2">Generate</a>
-          <a href="#" class="text-blue-600 mx-2">Sign In</a>
-        </div>
+      <a href="#" class="text-2xl font-bold text-gray-800">Chalo Kisaan</a>
+      <div class="menu-toggle" onclick="toggleMenu()">
+        <i class="fas fa-bars fa-2x"></i>
+      </div>
+      <div class="nav-links hidden md:flex">
+        <a href="/predict" class="text-gray-600 mx-2">Start Planning</a>
+        <a href="/generate" class="text-gray-600 mx-2">Generate</a>
+        <a href="#" class="text-blue-600 mx-2">How it works?</a>
+      </div>
     </nav>
 
-  <section>
-    <header class="text-center py-10">
-        <h1 class="text-5xl font-bold text-gray-800 mb-4">Discover Agrotourism With Us</h1>
-        <p class="text-xl text-gray-600 mb-4">Embark on a unique journey with Chalo Kisaan Agrotourism Planner. Connect with the roots of local agriculture, experience farm life, and indulge in the freshest farm-to-table meals. Our platform tailors your visit to local farms, ensuring an enriching and authentic experience.</p>
-        <a href="/predict" class="start-planning-btn">Start Planning</a>
-    </header>
+    <!-- Hero Banner with Value Proposition -->
+    <div class="hero-section text-center py-20 bg-green-50">
+      <h1 class="text-5xl font-bold">Generate the optimal agrotourism plan for your farm with AI</h1>
+      <p class="text-xl mt-4">Empower your farm's potential with cutting-edge AI technology.</p>
+    </div>
+
+  <!-- Section: Vibrant Images of Farms -->
+  <!-- Section: Before and After Image Generator Examples -->
+<section class="py-10">
+  <h2 class="text-3xl font-bold text-gray-800 text-center mb-6">Image Generator for Farm Services</h2>
+  <p class="text-xl text-gray-600 text-center mb-6">See the transformation your farm can undergo with our Image Generator. Compare the original farm state with the envisioned service implemented.</p>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <!-- Before Image -->
+      <div class="text-center">
+          <p class="text-lg text-gray-800 mb-2">Original Farm</p>
+          <img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpr5b01cr48vdvck3k20r.png" alt="Original Farm" class="mx-auto shadow-lg rounded-lg">
+      </div>
+      <!-- After Image -->
+      <div class="text-center">
+          <p class="text-lg text-gray-800 mb-2">Farm with Service Implemented</p>
+          <img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpr5b01cr48vdvck3k20r.png" alt="Farm with Service Implemented" class="mx-auto shadow-lg rounded-lg">
+      </div>
+  </div>
+</section>
+
+
+  <!-- Section: Video Explainer -->
+  <section class="py-10">
+      <h2 class="text-3xl font-bold text-gray-800 text-center mb-6">How It Works</h2>
+      <div class="flex justify-center">
+          <video controls width="70%">
+              <source src="path/to/your-video.mp4" type="video/mp4">
+              Sorry, your browser doesn't support embedded videos.
+          </video>
+      </div>
+  </section>
+
+  <h2 class="text-4xl font-bold text-gray-800 text-center my-10">Features</h2>
+
 
   <section class="flex flex-col md:flex-row justify-between items-center py-10">
       <div class="w-full md:w-1/2 mb-4 md:mb-0">
@@ -90,6 +137,9 @@ <h3 class="text-2xl font-semibold text-gray-800 mb-2">Comprehensive Service Buil
     </div>
 
   </section>
+  <footer class="footer bg-green-50">
+    <p class="text-gray-800">&copy; 2024 Chalo Kisaan. All rights reserved.</p>
+  </footer>
 
 </div>
 
diff --git a/templates/predict.html b/templates/predict.html
index 8dd1227..3b19e18 100644
--- a/templates/predict.html
+++ b/templates/predict.html
@@ -28,7 +28,7 @@ <h1 class="text-4xl font-bold mb-6 text-green-700">Plan your next agrotourism se
     <form>
       <div class="form-section">
           <label class="font-semibold text-lg mb-2 block">Land Size</label>
-          <img id="farmImage" class="mt-4 hidden" src="" alt="Farm Image" />
+          <img id="farmImage" class="mt-4 hidden" src="https://placehold.co/600x400" alt="Farm Image" />
           <input type="number" id="landSizeInput" class="form-input" placeholder="Enter land size in hectares" aria-label="Land Size" oninput="updateFarmImage()" required>
       </div>
 
