diff --git a/src/app/quote/page.tsx b/src/app/quote/page.tsx
new file mode 100644
index 0000000..ef5a49b
--- /dev/null
+++ b/src/app/quote/page.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import React, { useState } from "react";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Input from "@/components/form/Input";
+import ButtonHoverBubble from "@/components/button/ButtonHoverBubble";
+import { Calculator } from "lucide-react";
+
+export default function QuoteCalculatorPage() {
+    const [departurePort, setDeparturePort] = useState("");
+    const [arrivalPort, setArrivalPort] = useState("");
+    const [cargoType, setCargoType] = useState("");
+    const [weight, setWeight] = useState("");
+    const [volume, setVolume] = useState("");
+    const [shippingOption, setShippingOption] = useState(""); // 'Charter' or 'Line'
+    const [costEstimate, setCostEstimate] = useState<string | null>(null);
+
+    const handleCalculateQuote = () => {
+        // Placeholder for actual calculation logic
+        // In a real application, this would involve API calls or complex calculations
+        const baseCost = 1000;
+        const weightFactor = parseFloat(weight || "0") * 5;
+        const volumeFactor = parseFloat(volume || "0") * 10;
+        const typeFactor = cargoType.toLowerCase().includes("container") ? 200 : 100;
+        const optionFactor = shippingOption.toLowerCase() === "charter" ? 1.5 : 1;
+
+        const totalEstimate = (baseCost + weightFactor + volumeFactor + typeFactor) * optionFactor;
+        setCostEstimate(`$${totalEstimate.toFixed(2)}`);
+    };
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="solid"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={[
+                        { name: "About", id: "about" },
+                        { name: "Services", id: "services" },
+                        { name: "Destinations", id: "destinations" },
+                        { name: "Map Routes", id: "/map-routes" },
+                        { name: "Quote", id: "/quote" },
+                        { name: "Blog", id: "blog" },
+                        { name: "Reviews", id: "reviews" },
+                        { name: "Contact", id: "/contact" }
+                    ]}
+                    brandName="Maritime Solutions"
+                    button={{ text: "Connect With Us", href: "/contact" }}
+                />
+                <div id="quote-calculator" data-section="quote-calculator" className="min-h-screen py-20 bg-gray-900 text-white flex flex-col items-center justify-center">
+                    <div className="relative z-10 text-center max-w-4xl mx-auto px-4">
+                        <Calculator className="mx-auto mb-4 h-12 w-12 text-blue-400" />
+                        <h1 className="text-5xl font-bold mb-4">Instant Shipping Quote Calculator</h1>
+                        <p className="text-lg text-gray-300 mb-8">
+                            Get an instant estimate for your maritime cargo. Select your ports, cargo details, and service type for a quick cost overview.
+                        </p>
+                        <div className="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md space-y-6">
+                            <Input
+                                value={departurePort}
+                                onChange={setDeparturePort}
+                                placeholder="Departure Port (e.g., Singapore)"
+                                ariaLabel="Departure Port"
+                            />
+                            <Input
+                                value={arrivalPort}
+                                onChange={setArrivalPort}
+                                placeholder="Arrival Port (e.g., Shanghai)"
+                                ariaLabel="Arrival Port"
+                            />
+                            <Input
+                                value={cargoType}
+                                onChange={setCargoType}
+                                placeholder="Cargo Type (e.g., Containers, Bulk)"
+                                ariaLabel="Cargo Type"
+                            />
+                            <Input
+                                value={weight}
+                                onChange={setWeight}
+                                type="number"
+                                placeholder="Weight (KG)"
+                                ariaLabel="Weight in kilograms"
+                            />
+                            <Input
+                                value={volume}
+                                onChange={setVolume}
+                                type="number"
+                                placeholder="Volume (CBM)"
+                                ariaLabel="Volume in cubic meters"
+                            />
+                            {/* Using Input as a placeholder for a select dropdown for simplicity */}
+                            <Input
+                                value={shippingOption}
+                                onChange={setShippingOption}
+                                placeholder="Shipping Option (Charter or Line)"
+                                ariaLabel="Shipping Option"
+                            />
+                            <ButtonHoverBubble
+                                text="Estimate Cost"
+                                onClick={handleCalculateQuote}
+                                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-md transition-colors"
+                            />
+                            {costEstimate && (
+                                <div className="mt-6 text-xl font-semibold text-green-400">
+                                    Estimated Cost: {costEstimate}
+                                </div>
+                            )}
+                            <ButtonHoverBubble
+                                text="Request Detailed Offer"
+                                href="/contact" // Link to contact page for detailed offer
+                                className="w-full mt-4 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-md transition-colors"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}