diff --git a/frontend/src/components/Hero.tsx b/frontend/src/components/Hero.tsx
index 3b6a00c..dce4b35 100644
--- a/frontend/src/components/Hero.tsx
+++ b/frontend/src/components/Hero.tsx
@@ -3,6 +3,10 @@ import { useNavigate } from "react-router-dom";
 
 const Hero: React.FC = () => {
 	const navigate = useNavigate();
+	function clickHandler(){
+		navigate("/pricing")
+
+	}
 
 	return (
 		<div className="w-screen h-screen bg-[url('https://thumbs.wbm.im/pw/medium/e0a8bf2099861254af1dc34ac38f0934.avif')] bg-cover bg-opacity-30 flex justify-center font-sans overflow-x-hidden">
@@ -21,7 +25,7 @@ const Hero: React.FC = () => {
 				</p>
 
 				<div className="w-full flex justify-center gap-x-6 mt-4">
-					<button className="w-[12rem] h-[3rem] bg-[#2d6930] text-lg font-semibold rounded-lg hover:bg-green-900 hover:border-2 hover:border-white transition-all duration-300">
+					<button className="w-[12rem] h-[3rem] bg-[#2d6930] text-lg font-semibold rounded-lg hover:bg-green-900 hover:border-2 hover:border-white transition-all duration-300" onClick={clickHandler}>
 						Get Started
 					</button>
 					<button
diff --git a/frontend/src/components/VirtualTour.tsx b/frontend/src/components/VirtualTour.tsx
index 0519a45..ac4377a 100644
--- a/frontend/src/components/VirtualTour.tsx
+++ b/frontend/src/components/VirtualTour.tsx
@@ -1,7 +1,13 @@
 import React from "react";
 import Navbar from "./Navbar";
+import { useNavigate } from "react-router-dom";
 
 const VirtualTour: React.FC = () => {
+	const navigate = useNavigate()
+
+	function clickHandler(){
+		navigate("/pricing")
+	}
 	return (
 		<div className="flex flex-col overflow-x-hidden ">
 			<Navbar />
@@ -154,7 +160,7 @@ const VirtualTour: React.FC = () => {
 				</div>
 
 				<div className="w-screen h-[300px] bg-[#f1f1f1] flex items-center justify-center">
-					<button className="p-5 w-[300px] h-[80px] text-white rounded-lg text-2xl bg-[#036a38] hover:bg-[#039750] transition-all">
+					<button className="p-5 w-[300px] h-[80px] text-white rounded-lg text-2xl bg-[#036a38] hover:bg-[#039750] transition-all" onClick={clickHandler}>
 						TAKE ME TO PRICING
 					</button>
 				</div>
diff --git a/frontend/src/pages/Pricing.tsx b/frontend/src/pages/Pricing.tsx
index cde07a6..22d44a8 100644
--- a/frontend/src/pages/Pricing.tsx
+++ b/frontend/src/pages/Pricing.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
 
 const Pricing: React.FC = () => {
     return (
@@ -15,7 +16,7 @@ const Pricing: React.FC = () => {
                         Here at AgroQuality we focus on talent, technology, and potential which can unlock innovation value and drive economic growth.
                     </p>
                 </div>
-                <div className="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0 ">
+                <div className="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-[8rem] lg:space-y-0 ">
                     {/* Pricing Card */}
                     <div className="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-[#2d6930] rounded-lg border border-gray-100 shadow xl:p-8  dark:text-white">
                         <h3 className="mb-4 text-2xl font-semibold">Month</h3>
@@ -109,23 +110,22 @@ const Pricing: React.FC = () => {
                                 </span>
                             </li>
                         </ul>
-                        <a
-                            href="#"
-                            className="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center  dark:focus:ring-primary-900"
+                        <button
+                            className="text-white bg-green-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900 border-[1px] border-green hover:bg-[#19461b]"
                         >
                             Get started
-                        </a>
+                        </button>
                     </div>
 
                     {/* Pricing Card */}
                     <div className="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-[#2d6930] dark:text-white">
                         <h3 className="mb-4 text-2xl font-semibold">Annual</h3>
-                        <p className="font-light text-gray-500 sm:text-lg dark:text-gray-400">
+                        <p className="font-light text-gray-500 sm:text-lg dark:text-white">
                             You can save upto 17% yearly
                         </p>
                         <div className="flex justify-center items-baseline my-8">
                             <span className="mr-2 text-5xl font-extrabold">2900 ₹</span>
-                            <span className="text-gray-500 dark:text-gray-400">/year</span>
+                            <span className="text-gray-500 dark:text-white">/year</span>
                         </div>
                         <ul role="list" className="mb-8 space-y-4 text-left">
                             <li className="flex items-center space-x-3">
@@ -210,18 +210,17 @@ const Pricing: React.FC = () => {
                                 </span>
                             </li>
                         </ul>
-                        <a
-                            href="#"
-                            className="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900"
+                        <button
+                            className="text-white bg-green-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900 border-[1px] border-green hover:bg-[#19461b]"
                         >
                             Get started
-                        </a>
+                        </button>
                     </div>
 
                     {/* Pricing Card */}
                     <div className="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-[#2d6930] dark:text-white">
                         <h3 className="mb-4 text-2xl font-semibold">Half</h3>
-                        <p className="font-light text-gray-500 sm:text-lg dark:text-gray-400">
+                        <p className="font-light text-gray-500 sm:text-lg dark:text-white">
                             Can save upto 10% half yearly
                         </p>
                         <div className="flex justify-center items-baseline my-8">
@@ -311,16 +310,16 @@ const Pricing: React.FC = () => {
                                 </span>
                             </li>
                         </ul>
-                        <a
-                            href="#"
-                            className="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900"
+                        <button
+                            className="text-white bg-green-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900 border-[1px] border-green hover:bg-[#19461b]"
                         >
                             Get started
-                        </a>
+                        </button>
                     </div>
                 </div>
             </div>
         </section>
+        <Footer></Footer>
         </>
     );
 };