diff --git a/app/page.tsx b/app/page.tsx
index bec06bd..8b53952 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,6 +4,7 @@ import { Mail, Lock, Disc3, Headset } from "lucide-react"
 import { SiGitea, SiAuthentik } from "react-icons/si";
 import Navbar from "@/components/pages/main/Navbar"
 import PoweredBySection from "@/components/pages/main/PoweredBySection"
+import Pricing from "@/components/pages/main/Pricing"
 
 export default function Home() {
   const features = [
@@ -55,6 +56,7 @@ export default function Home() {
           </div>
         </section>
         <PoweredBySection />
+        <Pricing />
       </main>
     </div>
   )
diff --git a/components/pages/main/Pricing.tsx b/components/pages/main/Pricing.tsx
new file mode 100644
index 0000000..f6423ba
--- /dev/null
+++ b/components/pages/main/Pricing.tsx
@@ -0,0 +1,172 @@
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { Check, ChevronRight, Clock } from "lucide-react"
+import { Separator } from "@/components/ui/separator"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { motion } from "framer-motion"
+import Link from "next/link"
+
+export default function Pricing() {
+  const [hoveredCard, setHoveredCard] = useState<number | null>(null)
+
+  const features = {
+    everything: [
+      "Use anything and everything on LibreCloud",
+      "Unlimited Password/Secret Storage with Vaultwarden",
+      "4GB of Email Storage",
+      "Unlimited Git Repositories with Gitea",
+      "Unlimited Fair-Use Actions runs with Gitea",
+      "Priority support via Email/Telegram",
+    ],
+    storage: [
+      "ZERO FEES - You pay the price we pay",
+      "Through some providers, we offer 24/7 monitoring",
+      "Several data storage providers to choose from",
+      "Clone/erase your entire disk at any time (coming soon)",
+      "Do anything with your extra slice... we'll setup email, services, and more at no additional cost",
+    ],
+    ai: [
+      "Flexible options such as OpenRouter and Cloud VPS",
+      "Pay per token or hour at no additional cost from LibreCloud",
+      "Use our open-source chat interface with a range of providers",
+      "Use the latest models such as Anthropic's Claude 3.7 Sonnet and OpenAI's o3-mini"
+    ],
+  }
+
+  const FeatureItem = ({ children }: { children: React.ReactNode }) => (
+    <div className="flex items-start space-x-2 mb-4">
+      <Check className="h-5 w-5 text-primary shrink-0 mt-0.5" />
+      <span className="text-sm text-foreground">{children}</span>
+    </div>
+  )
+
+  const cardVariants = {
+    default: { scale: 1, y: 0 },
+    hover: { scale: 1.03, y: -8 },
+  }
+
+  return (
+    <section id="love" className="py-24">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl font-extrabold text-white mb-4">Pricing You&#39;ll Love</h2>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Simple, transparent pricing with zero additional fees.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          <motion.div
+            className={`relative overflow-hidden rounded-xl border bg-gray-800 text-card-foreground shadow transition-all duration-300 ${hoveredCard === 0 ? "border-gray-700" : "border-border"}`}
+            variants={cardVariants}
+            initial="default"
+            animate={hoveredCard === 0 ? "hover" : "default"}
+            onMouseEnter={() => setHoveredCard(0)}
+            onMouseLeave={() => setHoveredCard(null)}
+          >
+            <div className="p-6">
+              <div className="mb-4 flex items-center justify-between">
+                <h3 className="text-2xl font-bold">Everything</h3>
+                <Badge variant="outline" className="text-xs font-medium bg-gray-900">
+                  Most Popular
+                </Badge>
+              </div>
+              <div className="mb-4">
+                <span className="text-6xl font-bold">$0.00</span>
+                <span className="text-muted-foreground ml-2">/mo</span>
+              </div>
+              <p className="text-sm text-muted-foreground mb-6">
+                All the essential services you need, completely free.
+              </p>
+              <Link href="/account/login">
+                <Button className="w-full" size="lg">
+                  Get Started <ChevronRight className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+            </div>
+            <Separator />
+            <div className="p-6 space-y-4">
+              <h4 className="text-sm font-medium">What&#39;s included:</h4>
+              <div>
+                {features.everything.map((feature, index) => (
+                  <FeatureItem key={index}>{feature}</FeatureItem>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.div
+            className={`relative overflow-hidden rounded-xl border text-card-foreground shadow transition-all duration-300 ${hoveredCard === 1 ? "border-gray-700" : "border-border"}`}
+            variants={cardVariants}
+            initial="default"
+            animate={hoveredCard === 1 ? "hover" : "default"}
+            onMouseEnter={() => setHoveredCard(1)}
+            onMouseLeave={() => setHoveredCard(null)}
+          >
+            <div className="p-6">
+              <h3 className="text-2xl font-bold mb-2">Storage</h3>
+              <div className="text-sm text-muted-foreground mb-2">Starting at</div>
+              <div className="mb-4">
+                <span className="text-6xl font-bold">$0.117</span>
+                <span className="text-muted-foreground ml-2">/GB</span>
+              </div>
+              <p className="text-sm text-muted-foreground mb-6">Flexible storage options with no markup.</p>
+              <Button className="w-full" size="lg" variant="outline" disabled>
+                <Clock /> Coming Soon
+              </Button>
+            </div>
+            <Separator />
+            <div className="p-6 space-y-4">
+              <h4 className="text-sm font-medium">What&#39;s included:</h4>
+              <div>
+                {features.storage.map((feature, index) => (
+                  <FeatureItem key={index}>{feature}</FeatureItem>
+                ))}
+              </div>
+              <div className="pt-4">
+                <p className="text-xs text-muted-foreground">
+                  Calculator price rounded to nearest dollar and based on Namecheap provider, priced at $0.70/GB
+                </p>
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.div
+            className={`relative overflow-hidden rounded-xl border text-card-foreground shadow transition-all duration-300 ${hoveredCard === 2 ? "border-gray-700" : "border-border"}`}
+            variants={cardVariants}
+            initial="default"
+            animate={hoveredCard === 2 ? "hover" : "default"}
+            onMouseEnter={() => setHoveredCard(2)}
+            onMouseLeave={() => setHoveredCard(null)}
+          >
+            <div className="p-6">
+              <h3 className="text-2xl font-bold mb-2">Generative AI</h3>
+              <div className="text-sm text-muted-foreground mb-2">Starting at</div>
+              <div className="mb-4">
+                <span className="text-6xl font-bold">$0.00</span>
+                <span className="text-muted-foreground ml-2">/M tokens</span>
+              </div>
+              <p className="text-sm text-muted-foreground mb-6">Access powerful AI models at cost price.</p>
+              <Button className="w-full" size="lg" variant="outline" disabled>
+                <Clock /> Coming Soon
+              </Button>
+            </div>
+            <Separator />
+            <div className="p-6 space-y-4">
+              <h4 className="text-sm font-medium">What&#39;s included:</h4>
+              <div>
+                {features.ai.map((feature, index) => (
+                  <FeatureItem key={index}>{feature}</FeatureItem>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  )
+}
+