diff --git a/src/App.jsx b/src/App.jsx
index da4af3d..80c21e3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,7 +3,6 @@ import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { importFile, exportFile } from "./utils";
 import { allThemes } from "./data/themes";
-
 import { useUndoRedo } from "./hooks/useUndoRedo";
 
 // Components
@@ -14,6 +13,8 @@ import About from "./components/About";
 import Welcome from "./components/Welcome";
 import Footer from "./components/Footer";
 import BackToTopButton from "./components/BackToTopButton";
+import TermsOfUse from "./components/TermsOfUse";
+import PrivacyPolicy from "./components/PrivacyPolicy";
 
 function App() {
   const { t } = useTranslation();
@@ -34,7 +35,7 @@ function App() {
     redo,
     canUndo,
     canRedo,
-    reset: resetHistory
+    reset: resetHistory,
   } = useUndoRedo("", 50);
 
   const handleFileImport = (file) => {
@@ -50,7 +51,6 @@ function App() {
     );
   };
 
-  // Export handler
   const handleExport = () => {
     exportFile(text, "exported_text.txt");
     showAlert(t("alerts.textExported"), "success");
@@ -61,33 +61,10 @@ function App() {
   const theme = currentTheme.category === "light" ? "light" : "dark";
 
   const showAlert = (message, type) => {
-    setAlert({
-      msg: message,
-      type: type,
-    });
-    setTimeout(() => {
-      setAlert(null);
-    }, 1500);
+    setAlert({ msg: message, type });
+    setTimeout(() => setAlert(null), 1500);
   };
 
-  // const toggleTheme = () => {
-  //   if (theme === "light") {
-  //     // Switch to dark mode
-  //     setTheme("dark");
-  //     setColorTheme("linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)");
-  //   } else {
-  //     setTheme("light");
-  //     setColorTheme("linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%)");
-  //   }
-  // };
-
-  // const addColorTheme = (colorName, bgColor) => {
-  //   if (theme === "dark") {
-  //     setColorTheme(bgColor);
-  //     showAlert(`${colorName} theme applied!`, "success");
-  //   } else {
-  //     showAlert("Enable Dark Mode to use color themes.", "warning");
-  //   }
   const handleThemeSelect = (themeId, gradient) => {
     setCurrentThemeId(themeId);
     setColorTheme(gradient);
@@ -100,82 +77,74 @@ function App() {
   };
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setShowWelcome(false);
-    }, 2500);
+    const timer = setTimeout(() => setShowWelcome(false), 2500);
     return () => clearTimeout(timer);
   }, []);
 
   return (
-      <Router>
-        {showWelcome ? (
-          <div
-            style={{
-              background: colorTheme,
-            }}
-          >
-            <Welcome theme={theme} />
-          </div>
-        ) : (
-          // WRAP EVERYTHING IN A FLEX CONTAINER
-          <div
-            // key={currentThemeId}. to do not reset animations on theme change
-            className="min-h-screen flex flex-col"
-            style={{
-              background: colorTheme,
-              transition: "background 0.15s ease-in-out",
-            }}
-          >
-            <Navbar
-              title="WordWizard"
-              theme={theme}
-              currentThemeId={currentThemeId}
-              onThemeSelect={handleThemeSelect}
-              text={text}
-              onFileImport={handleFileImport}
-              onExport={handleExport}
-            />
-
-            <Alert alert={alert} theme={theme} />
-
-            {/* ADD flex-1 TO MAIN CONTENT */}
-            <main className="flex-1">
-              <Routes>
-                <Route
-                  path="/"
-                  element={
-                    <TextForm
-                      heading="Enter Your Text to Analyse"
-                      showAlert={showAlert}
-                      theme={theme}
-                      colorTheme={colorTheme}
-                      text={text}
-                      setText={addToHistory}
-                      onFileImport={handleFileImport}
-                      onExport={handleExport}
-                      undo={undo}
-                      redo={redo}
-                      canUndo={canUndo}
-                      canRedo={canRedo}
-                      resetHistory={resetHistory}
-                    />
-                  }
-                />
-                <Route
-                  path="/about"
-                  element={<About showAlert={showAlert} theme={theme} />}
-                />
-              </Routes>
-            </main>
-
-            {/* ADD FOOTER HERE */}
-            <Footer theme={theme} />
-            
-            {/* Floating Back to Top Button */}
-            <BackToTopButton theme={theme} />
-          </div>
-        )}
-      </Router>
+    <Router>
+      {showWelcome ? (
+        <div style={{ background: colorTheme }}>
+          <Welcome theme={theme} />
+        </div>
+      ) : (
+        <div
+          className="min-h-screen flex flex-col"
+          style={{
+            background: colorTheme,
+            transition: "background 0.15s ease-in-out",
+          }}
+        >
+          <Navbar
+            title="WordWizard"
+            theme={theme}
+            currentThemeId={currentThemeId}
+            onThemeSelect={handleThemeSelect}
+            text={text}
+            onFileImport={handleFileImport}
+            onExport={handleExport}
+          />
+
+          <Alert alert={alert} theme={theme} />
+
+          {/* MAIN CONTENT */}
+          <main className="flex-1">
+            <Routes>
+              <Route
+                path="/"
+                element={
+                  <TextForm
+                    heading="Enter Your Text to Analyse"
+                    showAlert={showAlert}
+                    theme={theme}
+                    colorTheme={colorTheme}
+                    text={text}
+                    setText={addToHistory}
+                    onFileImport={handleFileImport}
+                    onExport={handleExport}
+                    undo={undo}
+                    redo={redo}
+                    canUndo={canUndo}
+                    canRedo={canRedo}
+                    resetHistory={resetHistory}
+                  />
+                }
+              />
+              <Route
+                path="/about"
+                element={<About showAlert={showAlert} theme={theme} />}
+              />
+              <Route path="/terms" element={<TermsOfUse />} />
+              {/* ✅ Added Privacy Policy Route inside Routes */}
+              <Route path="/privacy-policy" element={<PrivacyPolicy theme={theme} />} />
+            </Routes>
+          </main>
+
+          <Footer theme={theme} />
+          <BackToTopButton theme={theme} />
+        </div>
+      )}
+    </Router>
   );
 }
 
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 0b37aeb..3b02b39 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -59,6 +59,28 @@ const Footer = ({ theme }) => {
                   {t("footer.about")}
                 </a>
               </li>
+              {/* ✅ Added Terms of Use link */}
+              <li>
+                <a
+                  href="#/terms"
+                  className={`transition-colors hover:underline ${
+                    isDark ? "hover:text-blue-400" : "hover:text-blue-600"
+                  }`}
+                >
+                  Terms of Use
+                </a>
+              </li>
+              {/* ✅ Added Privacy Policy link */}
+              <li>
+                <a
+                  href="#/privacy-policy"
+                  className={`transition-colors hover:underline ${
+                    isDark ? "hover:text-blue-400" : "hover:text-blue-600"
+                  }`}
+                >
+                  Privacy Policy
+                </a>
+              </li>
             </ul>
           </div>
 
diff --git a/src/components/PrivacyPolicy.jsx b/src/components/PrivacyPolicy.jsx
new file mode 100644
index 0000000..34a2f4b
--- /dev/null
+++ b/src/components/PrivacyPolicy.jsx
@@ -0,0 +1,166 @@
+import React from "react";
+import { Lock, Eye, Shield, CheckCircle, Calendar } from "lucide-react";
+
+const PrivacyPolicy = () => {
+  const privacyCards = [
+    {
+      id: 1,
+      icon: <Eye className="w-8 h-8" />,
+      title: "Information We Collect",
+      content: "We may collect limited data like text input and preferences for improving user experience. No personal data is shared or sold.",
+      iconColor: "text-cyan-400"
+    },
+    {
+      id: 2,
+      icon: <Shield className="w-8 h-8" />,
+      title: "How We Protect Your Data",
+      content: "We implement industry-standard security measures to protect your information. Your data is encrypted and stored securely.",
+      iconColor: "text-purple-400"
+    },
+    {
+      id: 3,
+      icon: <CheckCircle className="w-8 h-8" />,
+      title: "Your Consent",
+      content: "By using this app, you consent to this Privacy Policy. You have the right to access, modify, or delete your data at any time.",
+      iconColor: "text-green-400"
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
+      <div className="max-w-6xl mx-auto">
+        {/* Header Section */}
+        <div className="text-center mb-12 animate-fadeIn">
+          <div className="inline-flex p-4 bg-slate-800 bg-opacity-50 backdrop-blur-sm rounded-full mb-6 text-purple-400 border border-slate-700">
+            <Lock className="w-12 h-12" />
+          </div>
+          <h1 className="text-5xl font-bold mb-4 text-white">
+            Privacy Policy
+          </h1>
+          <p className="text-lg text-gray-300 max-w-2xl mx-auto">
+            Your privacy is important to us. This Privacy Policy explains how we collect, use, and protect your personal information when you use <span className="font-semibold text-white">WordWizard</span>.
+          </p>
+        </div>
+
+        {/* Grid Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+          {privacyCards.map((card, index) => (
+            <div
+              key={card.id}
+              className="group relative bg-slate-800 bg-opacity-50 backdrop-blur-sm rounded-2xl p-6 border border-slate-700 hover:border-slate-600 transition-all duration-300 transform hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/20"
+              style={{
+                animation: `slideUp 0.5s ease-out ${index * 0.1}s both`
+              }}
+            >
+              <div className="relative z-10">
+                {/* Icon */}
+                <div className={`inline-flex p-3 rounded-xl bg-slate-900 ${card.iconColor} mb-4 transform group-hover:scale-110 transition-transform duration-300`}>
+                  {card.icon}
+                </div>
+                
+                <h2 className="text-xl font-bold mb-3 text-white">
+                  {card.title}
+                </h2>
+                
+                <p className="text-gray-300 leading-relaxed text-sm">
+                  {card.content}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Additional Information Card */}
+        <div 
+          className="bg-slate-800 bg-opacity-50 backdrop-blur-sm border border-slate-700 rounded-2xl p-8 mb-8 transform hover:scale-[1.02] hover:border-slate-600 transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/20"
+          style={{
+            animation: 'slideUp 0.5s ease-out 0.3s both'
+          }}
+        >
+          <h2 className="text-2xl font-bold mb-4 text-white">Your Rights</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="flex items-start gap-3">
+              <CheckCircle className="w-5 h-5 text-green-400 mt-1 flex-shrink-0" />
+              <div>
+                <h3 className="font-semibold text-white mb-1">Access Your Data</h3>
+                <p className="text-gray-300 text-sm">Request a copy of your personal information at any time.</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <CheckCircle className="w-5 h-5 text-green-400 mt-1 flex-shrink-0" />
+              <div>
+                <h3 className="font-semibold text-white mb-1">Data Deletion</h3>
+                <p className="text-gray-300 text-sm">Request deletion of your data from our systems.</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <CheckCircle className="w-5 h-5 text-green-400 mt-1 flex-shrink-0" />
+              <div>
+                <h3 className="font-semibold text-white mb-1">No Third-Party Sharing</h3>
+                <p className="text-gray-300 text-sm">We never sell or share your data with third parties.</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <CheckCircle className="w-5 h-5 text-green-400 mt-1 flex-shrink-0" />
+              <div>
+                <h3 className="font-semibold text-white mb-1">Transparent Practices</h3>
+                <p className="text-gray-300 text-sm">Clear communication about how we handle your information.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer Card */}
+        <div 
+          className="bg-slate-800 bg-opacity-50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6 flex items-center justify-between flex-wrap gap-4"
+          style={{
+            animation: 'slideUp 0.5s ease-out 0.4s both'
+          }}
+        >
+          <div className="flex items-center gap-3">
+            <Calendar className="w-6 h-6 text-purple-400" />
+            <div>
+              <p className="text-sm text-gray-400">Last updated</p>
+              <p className="text-white font-semibold">{new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
+            </div>
+          </div>
+          <a 
+            href="mailto:support@wordwizard.com" 
+            className="bg-slate-700 text-white font-semibold px-6 py-2 rounded-lg hover:bg-slate-600 transition-all duration-300 text-sm"
+          >
+            Contact Us
+          </a>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes slideUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .animate-fadeIn {
+          animation: fadeIn 0.8s ease-out;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default PrivacyPolicy;
\ No newline at end of file
diff --git a/src/components/TermsOfUse.jsx b/src/components/TermsOfUse.jsx
new file mode 100644
index 0000000..b5424dc
--- /dev/null
+++ b/src/components/TermsOfUse.jsx
@@ -0,0 +1,130 @@
+import React from "react";
+import { Scale, Shield, FileText, RefreshCw, Mail } from "lucide-react";
+
+const TermsOfUse = () => {
+  const termsCards = [
+    {
+      id: 1,
+      icon: <FileText className="w-8 h-8" />,
+      title: "Use of the Website",
+      content: "You may use this website for personal and non-commercial purposes only. Any misuse or attempt to disrupt the functionality of the site is strictly prohibited.",
+      iconColor: "text-cyan-400"
+    },
+    {
+      id: 2,
+      icon: <Shield className="w-8 h-8" />,
+      title: "Intellectual Property",
+      content: "All content, design, and code within WordWizard are protected by copyright. Unauthorized copying or redistribution is prohibited.",
+      iconColor: "text-purple-400"
+    },
+    {
+      id: 3,
+      icon: <Scale className="w-8 h-8" />,
+      title: "Disclaimer",
+      content: "The information provided on this site is for general purposes only. We do not guarantee the accuracy or reliability of any content.",
+      iconColor: "text-pink-400"
+    },
+    {
+      id: 4,
+      icon: <RefreshCw className="w-8 h-8" />,
+      title: "Changes to Terms",
+      content: "We reserve the right to update these terms at any time. Please review this page periodically for changes.",
+      iconColor: "text-yellow-400"
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
+      <div className="max-w-6xl mx-auto">
+        {/* Header Section */}
+        <div className="text-center mb-12 animate-fadeIn">
+          <h1 className="text-5xl font-bold mb-4 text-white">
+            Terms of Use
+          </h1>
+          <p className="text-lg text-gray-300 max-w-2xl mx-auto">
+            Welcome to <span className="font-semibold text-white">WordWizard</span>. By accessing or using this website, you agree to comply with and be bound by the following terms and conditions.
+          </p>
+        </div>
+
+        {/* Grid Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+          {termsCards.map((card, index) => (
+            <div
+              key={card.id}
+              className="group relative bg-slate-800 bg-opacity-50 backdrop-blur-sm rounded-2xl p-6 border border-slate-700 hover:border-slate-600 transition-all duration-300 transform hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/20"
+              style={{
+                animation: `slideUp 0.5s ease-out ${index * 0.1}s both`
+              }}
+            >
+              <div className="relative z-10">
+                {/* Icon */}
+                <div className={`inline-flex p-3 rounded-xl bg-slate-900 ${card.iconColor} mb-4 transform group-hover:scale-110 transition-transform duration-300`}>
+                  {card.icon}
+                </div>
+                
+                <h2 className="text-2xl font-bold mb-3 text-white">
+                  {card.id}. {card.title}
+                </h2>
+                
+                <p className="text-gray-300 leading-relaxed">
+                  {card.content}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Contact Card */}
+        <div 
+          className="bg-slate-800 bg-opacity-50 backdrop-blur-sm border border-slate-700 rounded-2xl p-8 text-center transform hover:scale-105 hover:border-slate-600 transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/20"
+          style={{
+            animation: 'slideUp 0.5s ease-out 0.4s both'
+          }}
+        >
+          <div className="inline-flex p-4 bg-slate-900 rounded-full mb-4 text-cyan-400">
+            <Mail className="w-10 h-10" />
+          </div>
+          <h2 className="text-3xl font-bold mb-3 text-white">Get in Touch</h2>
+          <p className="text-lg mb-4 text-gray-300">
+            If you have any questions about these Terms, please contact us at
+          </p>
+          <a 
+            href="mailto:support@wordwizard.com" 
+            className="inline-block bg-slate-700 text-white font-semibold px-8 py-3 rounded-lg hover:bg-slate-600 transition-all duration-300 transform hover:scale-105"
+          >
+            support@wordwizard.com
+          </a>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes slideUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .animate-fadeIn {
+          animation: fadeIn 0.8s ease-out;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default TermsOfUse;
\ No newline at end of file