diff --git a/app/layout.tsx b/app/layout.tsx
index adba733..a456fef 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import { Toaster } from 'react-hot-toast';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { ThemeProvider } from '@/components/ThemeProvider';
+import { TransitionProvider } from '@/components/TransitionProvider';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -27,23 +28,25 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
-          <Footer />
-          <BackToTop />
-          <Toaster 
-            position="bottom-right"
-            toastOptions={{
-              duration: 3000,
-              style: {
-                background: 'rgba(255, 255, 255, 0.9)',
-                color: '#1f2937',
-                backdropFilter: 'blur(10px)',
-                borderRadius: '12px',
-                border: '1px solid rgba(255, 255, 255, 0.2)',
-                boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
-              }
-            }}
-          />
+          <TransitionProvider>
+            {children}
+            <Footer />
+            <BackToTop />
+            <Toaster 
+              position="bottom-right"
+              toastOptions={{
+                duration: 3000,
+                style: {
+                  background: 'rgba(255, 255, 255, 0.9)',
+                  color: '#1f2937',
+                  backdropFilter: 'blur(10px)',
+                  borderRadius: '12px',
+                  border: '1px solid rgba(255, 255, 255, 0.2)',
+                  boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
+                }
+              }}
+            />
+          </TransitionProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/app/terms/page.tsx b/app/terms/page.tsx
index bdb156e..a83f581 100644
--- a/app/terms/page.tsx
+++ b/app/terms/page.tsx
@@ -1,4 +1,3 @@
-
 'use client';
 
 import { motion } from 'framer-motion';
@@ -6,90 +5,170 @@ import Link from 'next/link';
 import { ChevronLeft, FileText } from 'lucide-react';
 import { FloatingBackground } from '@/components/FloatingBackground';
 
+const container = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.15
+    }
+  }
+};
+
+const item = {
+  hidden: { opacity: 0, y: 40 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: 'easeOut' }
+  }
+};
+
 export default function TermsOfService() {
-    return (
-        <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 relative overflow-hidden text-gray-100 font-sans">
-            <FloatingBackground />
+  return (
+    <div className="min-h-screen relative overflow-hidden bg-gradient-to-br from-[#0f0c29] via-[#14143b] to-[#0c1025] text-gray-100">
+      
+      <FloatingBackground />
+
+      <div className="relative z-10 max-w-6xl mx-auto px-6 py-16 md:py-24">
 
-            <div className="relative z-10 max-w-4xl mx-auto px-6 py-12 md:py-20">
-                <motion.header
-                    initial={{ opacity: 0, y: -20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5 }}
-                    className="mb-12"
-                >
-                    <Link href="/" className="inline-flex items-center text-purple-300 hover:text-white mb-6 transition-colors group">
-                        <ChevronLeft className="w-5 h-5 mr-1 group-hover:-translate-x-1 transition-transform" />
-                        Back to Home
-                    </Link>
-                    <div className="flex items-center space-x-3 mb-2">
-                        <FileText className="w-8 h-8 text-blue-400" />
-                        <h1 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">
-                            Terms of Service
-                        </h1>
-                    </div>
-                    <p className="text-lg text-gray-300">Last updated: {new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</p>
-                </motion.header>
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: -30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="mb-16"
+        >
+          <Link
+            href="/"
+            className="inline-flex items-center text-indigo-400 hover:text-cyan-400 transition-all duration-300 group mb-8"
+          >
+            <ChevronLeft className="w-5 h-5 mr-2 group-hover:-translate-x-2 transition-transform duration-300" />
+            Back to Home
+          </Link>
 
-                <motion.div
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ delay: 0.2, duration: 0.5 }}
-                    className="bg-white/10 backdrop-blur-md rounded-3xl p-8 md:p-12 shadow-2xl border border-white/10"
-                >
-                    <div className="space-y-8 text-gray-200 leading-relaxed">
-                        <section>
-                            <h2 className="text-2xl font-semibold text-white mb-4">1. Acceptance of Terms</h2>
-                            <p>
-                                By accessing and using InnerHue ("the Service"), you accept and agree to be bound by the terms and provision of this agreement.
-                                In addition, when using the Service, you shall be subject to any posted guidelines or rules applicable to such services.
-                            </p>
-                        </section>
+          <div className="flex items-center space-x-4">
+            <motion.div
+              whileHover={{ rotate: 8, scale: 1.1 }}
+              transition={{ type: 'spring', stiffness: 200 }}
+            >
+              <FileText className="w-10 h-10 text-cyan-400 drop-shadow-lg" />
+            </motion.div>
 
-                        <section>
-                            <h2 className="text-2xl font-semibold text-white mb-4">2. Description of Service</h2>
-                            <p>
-                                InnerHue is a digital wellbeing platform designed to help users track their moods, journal their thoughts, and receive personalized insights.
-                                The Service is for informational and educational purposes only and is not intended as a substitute for professional medical advice, diagnosis, or treatment.
-                            </p>
-                        </section>
+            <h1 className="text-4xl md:text-6xl font-extrabold bg-gradient-to-r from-cyan-400 via-indigo-400 to-purple-500 bg-clip-text text-transparent">
+              Terms of Service
+            </h1>
+          </div>
 
-                        <section>
-                            <h2 className="text-2xl font-semibold text-white mb-4">3. User Conduct</h2>
-                            <p className="mb-4">
-                                You agree to use the Service only for lawful purposes. You are prohibited from posting or transmitting to or from this Site any:
-                            </p>
-                            <ul className="list-disc pl-6 space-y-2 marker:text-blue-400">
-                                <li>Unlawful, threatening, libelous, defamatory, obscene, or pornographic material.</li>
-                                <li>Material that would violate the law or rights of others.</li>
-                                <li>Viruses or other harmful components.</li>
-                            </ul>
-                        </section>
+          <p className="mt-4 text-gray-400 text-lg">
+            Last updated: {new Date().toLocaleDateString('en-US', {
+              month: 'long',
+              day: 'numeric',
+              year: 'numeric'
+            })}
+          </p>
+        </motion.div>
 
-                        <section>
-                            <h2 className="text-2xl font-semibold text-white mb-4">4. Disclaimer of Warranties</h2>
-                            <p>
-                                The Site and its original content, features, and functionality are owned by InnerHue and are protected by international copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws.
-                                The Service is provided on an "as is" and "as available" basis.
-                            </p>
-                        </section>
+        {/* Cards Grid */}
+        <motion.div
+          variants={container}
+          initial="hidden"
+          animate="show"
+          className="grid gap-8 md:grid-cols-2"
+        >
+          {sections.map((section, index) => (
+            <motion.div
+              key={index}
+              variants={item}
+              whileHover={{
+                y: -8,
+                scale: 1.03
+              }}
+              className="relative p-8 rounded-3xl bg-white/5 backdrop-blur-xl border border-white/10 shadow-xl transition-all duration-300 group"
+            >
+              {/* Glow Effect */}
+              <div className="absolute inset-0 rounded-3xl bg-gradient-to-r from-cyan-500/0 via-indigo-500/0 to-purple-500/0 group-hover:from-cyan-500/10 group-hover:via-indigo-500/10 group-hover:to-purple-500/10 transition-all duration-500 pointer-events-none"></div>
 
-                        <section>
-                            <h2 className="text-2xl font-semibold text-white mb-4">5. Limitation of Liability</h2>
-                            <p>
-                                In no event shall InnerHue, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses.
-                            </p>
-                        </section>
+              <h2 className="text-xl font-semibold text-white mb-4 relative z-10">
+                {section.title}
+              </h2>
 
-                        <section>
-                            <h2 className="text-2xl font-semibold text-white mb-4">6. Changes to Terms</h2>
-                            <p>
-                                We reserve the right, at our sole discretion, to modify or replace these Terms at any time. What constitutes a material change will be determined at our sole discretion.
-                            </p>
-                        </section>
-                    </div>
-                </motion.div>
-            </div>
-        </div>
-    );
+              <div className="text-gray-300 leading-relaxed relative z-10">
+                {section.content}
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Footer */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 1 }}
+          className="mt-20 text-center text-gray-500 text-sm"
+        >
+          © {new Date().getFullYear()} InnerHue. All rights reserved.
+        </motion.div>
+
+      </div>
+    </div>
+  );
 }
+
+const sections = [
+  {
+    title: "1. Acceptance of Terms",
+    content: (
+      <p>
+        By accessing and using InnerHue ("the Service"), you agree to be bound
+        by these Terms. If you do not agree, discontinue use immediately.
+      </p>
+    )
+  },
+  {
+    title: "2. Description of Service",
+    content: (
+      <p>
+        InnerHue is a digital wellbeing platform designed to help users track
+        moods, journal thoughts, and receive insights. It does not replace
+        professional medical advice.
+      </p>
+    )
+  },
+  {
+    title: "3. User Conduct",
+    content: (
+      <ul className="list-disc pl-6 space-y-2 marker:text-cyan-400">
+        <li>No unlawful or harmful content.</li>
+        <li>No IP violations.</li>
+        <li>No malware distribution.</li>
+      </ul>
+    )
+  },
+  {
+    title: "4. Disclaimer of Warranties",
+    content: (
+      <p>
+        The Service is provided "as is" and without warranties of any kind,
+        express or implied.
+      </p>
+    )
+  },
+  {
+    title: "5. Limitation of Liability",
+    content: (
+      <p>
+        InnerHue shall not be liable for indirect or consequential damages
+        arising from use of the Service.
+      </p>
+    )
+  },
+  {
+    title: "6. Changes to Terms",
+    content: (
+      <p>
+        We reserve the right to modify these Terms at any time. Continued use
+        constitutes acceptance of changes.
+      </p>
+    )
+  }
+];