diff --git a/src/pages/terms-service/index.module.css b/src/pages/terms-service/index.module.css
new file mode 100644
index 00000000..1d62eb38
--- /dev/null
+++ b/src/pages/terms-service/index.module.css
@@ -0,0 +1,232 @@
+/* ---------------------------------- */
+/* 1. Color Variables                 */
+/* ---------------------------------- */
+
+:root {
+  --page-bg: #eef0f4;
+  --card-bg: #eef0f4;
+  --text-color: #3b4353;
+  --text-color-light: #6e7a91;
+  --accent-color: rgb(105, 81, 161);
+  --accent-gradient-light: linear-gradient(
+    135deg,
+    #5c6c9a 0%,
+    #76698f 50%,
+    #9a6d82 100%
+  );
+
+  --border-color: #d1d9e6;
+  --shadow-light: -8px -8px 16px #ffffff;
+  --shadow-dark: 8px 8px 16px #d1d9e6;
+  --inset-shadow-light: inset 6px 6px 12px #d1d9e6;
+  --inset-shadow-dark: inset -6px -6px 12px #ffffff;
+}
+
+
+[data-theme="dark"] {
+  --page-bg: #1a1a2e;
+  --card-bg: #1a1a2e;
+  --text-color: #ffffff;
+  --text-color-light: #94a3b8;
+  --accent-color: #7b8ab8;
+  --accent-gradient: linear-gradient(
+    135deg,
+    #7b8ab8 0%,
+    #8f7db0 50%,
+    #c4a9d9 100%
+  );
+
+  --border-color: rgba(255, 255, 255, 0.1);
+  --shadow-light: -8px -8px 16px #232342;
+  --shadow-dark: 8px 8px 16px #12121e;
+  --inset-shadow-light: inset 6px 6px 12px #12121e;
+  --inset-shadow-dark: inset -6px -6px 12px #232342;
+}
+
+/* ---------------------------------- */
+/* 2. Main Page Layout                */
+/* ---------------------------------- */
+.pageWrapper {
+  background-color: var(--page-bg);
+  transition: background-color 0.3s ease;
+}
+.pageContainer {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.7;
+  background-color: var(--card-bg);
+  color: var(--text-color);
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 2.5rem 3rem;
+  border-radius: 20px;
+  box-shadow: var(--shadow-dark), var(--shadow-light);
+  transition: all 0.3s ease;
+}
+
+/* ---------------------------------- */
+/* 3. Typography                      */
+/* ---------------------------------- */
+.mainTitle {
+  text-align: center;
+  font-size: 2.75rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  color: var(--text-color);
+  letter-spacing: -1px;
+}
+.introText {
+  text-align: center;
+  margin-bottom: 3rem;
+  font-size: 1.1rem;
+  color: var(--text-color-light);
+}
+.link {
+  color: var(--accent-color);
+  text-decoration: none;
+  font-weight: 600;
+}
+.link:hover {
+  text-decoration: underline;
+}
+.list {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+}
+.list li {
+  margin-bottom: 1.25rem;
+}
+.list li::marker {
+  font-weight: 600;
+  color: var(--accent-color);
+}
+
+/* ---------------------------------- */
+/* 4. Section Accordion               */
+/* ---------------------------------- */
+.section {
+  margin-bottom: 1.5rem;
+}
+
+.sectionButton {
+  width: 100%;
+  background-color: var(--card-bg);
+  border: none;
+  padding: 1rem 1.25rem;
+  border-radius: 12px;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: var(--shadow-dark), var(--shadow-light);
+  transition: all 0.3s ease;
+}
+.sectionButton:hover {
+  transform: translateY(-2px);
+  box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 20px var(--shadow-light);
+}
+.sectionButton.open {
+  box-shadow: var(--inset-shadow-light), var(--inset-shadow-dark);
+}
+.sectionButton.open:hover {
+  transform: none;
+  box-shadow: var(--inset-shadow-light), var(--inset-shadow-dark);
+}
+
+.sectionTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-color);
+  transition: color 0.3s ease;
+}
+
+.sectionButton.open .sectionTitle,
+.sectionButton.open .icon {
+  color: var(--accent-color);
+}
+
+.iconContainer {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: var(--card-bg);
+  box-shadow: var(--shadow-dark), var(--shadow-light);
+  transition: all 0.3s ease;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sectionButton.open .iconContainer {
+  box-shadow: var(--inset-shadow-light), var(--inset-shadow-dark);
+}
+
+.icon {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--text-color-light);
+  position: absolute;
+  opacity: 0;
+  transform: rotate(-90deg);
+  transition: all 0.3s ease-in-out;
+}
+
+.iconMinus {
+  position: relative;
+  top: -1px;
+}
+
+.iconVisible {
+  opacity: 1;
+  transform: rotate(0deg);
+}
+
+/* ---------------------------------- */
+/* 5. Collapsible Content             */
+/* ---------------------------------- */
+.sectionContent {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease-out, opacity 0.3s ease-in,
+    padding 0.3s ease-out;
+  border-radius: 12px;
+  margin-top: 1rem;
+  background-color: var(--card-bg);
+  box-shadow: var(--inset-shadow-light), var(--inset-shadow-dark);
+}
+.sectionContent.open {
+  max-height: 1000px; /* arbitrary large value */
+  opacity: 1;
+}
+.contentInner {
+  padding: 1.5rem 2rem;
+  text-align: left;
+  color: var(--text-color-light);
+}
+
+/* ----------------------------------------- */
+/* 6. Gradient Text for BOTH Modes           */
+/* ----------------------------------------- */
+
+/* This applies the MUTED LIGHT mode gradient */
+.sectionButton.open .sectionTitle,
+.sectionButton.open .icon {
+  background: var(--accent-gradient-light, var(--accent-color));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent; /* Fallback */
+}
+
+/* This OVERRIDES with the MUTED DARK mode gradient */
+[data-theme="dark"] .sectionButton.open .sectionTitle,
+[data-theme="dark"] .sectionButton.open .icon {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent; /* Fallback */
+}
\ No newline at end of file
diff --git a/src/pages/terms-service/index.tsx b/src/pages/terms-service/index.tsx
index f6f979bd..e6165ea2 100644
--- a/src/pages/terms-service/index.tsx
+++ b/src/pages/terms-service/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import Layout from "@theme/Layout";
+import styles from "./index.module.css"; // Created a Modular CSS file
 
 interface SectionProps {
   id: string;
@@ -8,17 +9,47 @@ interface SectionProps {
 }
 
 const Section: React.FC<SectionProps> = ({ id, title, children }) => {
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(id === "acceptance");
+
+  // Helper to dynamically build class names
+  const getButtonClasses = () =>
+    `${styles.sectionButton} ${open ? styles.open : ""}`;
+
+  const getContentClasses = () =>
+    `${styles.sectionContent} ${open ? styles.open : ""}`;
+
   return (
-    <div id={id} className="mb-6 border-b border-gray-200 pb-4">
+    <div id={id} className={styles.section}>
       <button
-        className="w-full text-left text-xl font-bold mb-2 flex justify-between items-center"
+        className={getButtonClasses()}
         onClick={() => setOpen(!open)}
+        aria-expanded={open}
       >
-        {title}
-        <span className="text-gray-500">{open ? "▲" : "▼"}</span>
+        {/* The title is now wrapped in a span to allow styling */}
+        <span className={styles.sectionTitle}>{title}</span>
+
+        {/* New Icon Container */}
+        <div className={styles.iconContainer}>
+          <span
+            className={`${styles.icon} ${styles.iconPlus} ${
+              !open ? styles.iconVisible : ""
+            }`}
+          >
+            &#43;
+          </span>
+          <span
+            className={`${styles.icon} ${styles.iconMinus} ${
+              open ? styles.iconVisible : ""
+            }`}
+          >
+            &minus;
+          </span>
+        </div>
       </button>
-      {open && <div className="pl-2 text-justify">{children}</div>}
+
+      <div className={getContentClasses()}>
+        <div className={styles.contentInner}>{children}</div>
+      </div>
     </div>
   );
 };
@@ -28,18 +59,22 @@ const TermsOfService: React.FC = () => {
     <Layout
       title="Terms and Conditions of RecodeHive"
       description="Terms of Service Page for RecodeHive learners and users"
+      wrapperClassName={styles.pageWrapper}
     >
-      <div className="mx-auto mt-8 mb-8 max-w-3xl rounded-lg p-6 font-sans text-base leading-relaxed shadow-lg bg-white dark:bg-gray-100">
-        <h1 className="mb-6 text-center text-3xl font-bold">Terms of Service</h1>
-        <p className="mb-6">
-          Welcome to <b>RecodeHive</b>, operated by <strong>Sanjay Viswanathan</strong>.
-          These Terms of Service govern your use of www.recodehive.com. Please read
-          carefully. If you have any questions, contact us at{" "}
-          <a href="mailto:sanjay@recodehive.com" className="text-blue-600 underline">
+      <div className={styles.pageContainer}>
+        <h1 className={styles.mainTitle}>Terms of Service</h1>
+        <p className={styles.introText}>
+          Welcome to <b>RecodeHive</b>, operated by{" "}
+          <strong>Sanjay Viswanathan</strong>. These Terms of Service govern
+          your use of www.recodehive.com. Please read carefully. If you have any
+          questions, contact us at{" "}
+          <a href="mailto:sanjay@recodehive.com" className={styles.link}>
             sanjay@recodehive.com
-          </a>.
+          </a>
+          .
         </p>
 
+        {/* Grammatical mistakes are corrected with more formal language  */}
         <Section id="acceptance" title="Acceptance of Terms">
           By accessing or using RecodeHive, you agree to comply with these Terms
           and any other guidelines provided by us. If you do not agree, please
@@ -47,39 +82,70 @@ const TermsOfService: React.FC = () => {
         </Section>
 
         <Section id="use-of-service" title="Use of the Service">
-          <ol className="list-decimal pl-6">
-            <li className="mb-4">
-              <strong>Usage Instructions:</strong> Do not use the website in any way
-              that could impair its performance, corrupt content, or reduce overall functionality.
-            </li>
-            <li className="mb-4">
-              <strong>License:</strong> We grant a limited, non-exclusive, non-transferable,
-              revocable license for personal or internal business use only. Commercial use
-              is prohibited without prior consent.
+          <ol className={styles.list}>
+            <li>
+              <strong>License to Use:</strong> We grant you a limited,
+              non-exclusive, non-transferable, and revocable license to access
+              and use the Service for your personal or internal business
+              purposes, strictly in accordance with these Terms.
             </li>
-            <li className="mb-4">
-              <strong>User Conduct:</strong> Do not compromise website security,
-              attempt unauthorized access, or access sensitive information you are
-              not permitted to view.
+            <li>
+              <strong>Prohibited Uses:</strong> You agree not to:
+              {/* Using inline styles for a nested list to avoid CSS conflicts */}
+              <ul
+                style={{
+                  listStyleType: "circle",
+                  paddingLeft: "20px",
+                  marginTop: "12px",
+                }}
+              >
+                <li style={{ marginBottom: "8px" }}>
+                  Use the Service in any manner that could disable, overburden,
+                  damage, or impair the site.
+                </li>
+                <li style={{ marginBottom: "8px" }}>
+                  Attempt to gain unauthorized access to any part of the
+                  Service, or any data, servers, or networks connected to the
+                  Service.
+                </li>
+                <li style={{ marginBottom: "8px" }}>
+                  Compromise the security of the Service or access sensitive
+                  information you are not permitted to view.
+                </li>
+                <li>
+                  Use the Service for any illegal purpose or in violation of any
+                  local, state, national, or international law.
+                </li>
+              </ul>
             </li>
           </ol>
         </Section>
 
-        <Section id="content" title="Content">
-          <ol className="list-decimal pl-6">
-            <li className="mb-4">
-              <strong>User Content:</strong> You retain ownership of content you
-              submit. By submitting, you grant RecodeHive a worldwide, royalty-free,
-              non-exclusive license to use, reproduce, modify, distribute, and display it.
+        <Section id="content" title="Content & Intellectual Property">
+          <ol className={styles.list}>
+            <li>
+              <strong>User-Generated Content:</strong> You retain all ownership
+              rights to the content you submit ("User Content"). By submitting
+              User Content, you grant RecodeHive a worldwide, royalty-free,
+              non-exclusive, sublicensable license to use, reproduce, modify,
+              adapt, publish, distribute, and display such User Content solely
+              in connection with providing the Service.
             </li>
-            <li className="mb-4">
-              <strong>Intellectual Property:</strong> All trademarks, logos, and other
-              intellectual property remain the property of Sanjay Viswanathan or its licensors.
-              Usage requires prior written consent.
+            <li>
+              <strong>Our Intellectual Property:</strong> The Service and its
+              original content (excluding User Content), features, and
+              functionality are and will remain the exclusive property of Sanjay
+              Viswanathan and his licensors. Usage of any trademarks, logos, or
+              service marks requires our prior written consent.
             </li>
-            <li className="mb-4">
-              <strong>Compensation:</strong> You are responsible for any claims, expenses,
-              or legal fees arising from violations of these Terms.
+            <li>
+              <strong>Indemnification:</strong> You agree to defend, indemnify,
+              and hold harmless RecodeHive and Sanjay Viswanathan from and
+              against any and all claims, damages, obligations, losses,
+              liabilities, costs or debt, and expenses (including but not
+              limited to attorney's fees) arising from: (i) your use of and
+              access to the Service; (ii) your violation of any term of these
+              Terms; or (iii) your violation of any third-party right.
             </li>
           </ol>
         </Section>
@@ -90,7 +156,7 @@ const TermsOfService: React.FC = () => {
             href="/privacy-policy/"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-blue-600 underline"
+            className={styles.link}
           >
             Privacy Policy
           </a>{" "}
@@ -98,25 +164,28 @@ const TermsOfService: React.FC = () => {
         </Section>
 
         <Section id="termination" title="Termination">
-          We reserve the right to suspend or terminate access to the Service at any time,
-          with or without cause, and without prior notice or liability.
+          We reserve the right to suspend or terminate access to the Service at
+          any time, with or without cause, and without prior notice or
+          liability.
         </Section>
 
         <Section id="governing-law" title="Governing Law">
-          These Terms are governed by the laws of India, without regard to conflicts of law.
+          These Terms are governed by the laws of India, without regard to
+          conflicts of law.
         </Section>
 
         <Section id="changes-to-terms" title="Changes to the Terms">
-          RecodeHive may update or modify these Terms at any time. Continued use of the
-          Service constitutes acceptance of the updated Terms. Users are responsible for
-          reviewing changes regularly.
+          RecodeHive may update or modify these Terms at any time. Continued use
+          of the Service constitutes acceptance of the updated Terms. Users are
+          responsible for reviewing changes regularly.
         </Section>
 
         <Section id="contact" title="Contact Us">
           If you have any questions regarding these Terms, contact us at{" "}
-          <a href="mailto:sanjay@recodehive.com" className="text-blue-600 underline">
+          <a href="mailto:sanjay@recodehive.com" className={styles.link}>
             sanjay@recodehive.com
-          </a>.
+          </a>
+          .
         </Section>
       </div>
     </Layout>