diff --git a/Terms.html b/Terms.html
index 8604839..d610541 100644
--- a/Terms.html
+++ b/Terms.html
@@ -102,15 +102,15 @@
                 </div>
             </nav>
 
-            <div class="wrapper flex_align_justify" style="background-color: blue;">
+            <div class="wrapper flex_align_justify" style="background-color: rgba(219, 127, 219, 0.9);">
                 <div class="terms_service">
                     <div class="tc_item tc_head flex_align_justify">
                         <div class="icon flex_align_justify">
                             <ion-icon name="terminal-outline"></ion-icon>
                         </div>
                         <div class="text">
-                            <h2>Terms and Conditions</h2>
-                            <p>Welcome to Visuak-sort!</p>
+                            <h1>Terms and Conditions</h1>
+                            <p>Welcome to Visual-sort!</p>
                         </div>
                     </div>
                     
@@ -269,93 +269,82 @@ <h3>
 
         <section class="style">
 
-        <footer class="container py py-md px px-md" style="padding: 16px;">
-            <div class="row d-flex justify-content-center align-items-center text-center" style="background-color: aqua;">
+            <footer class="container py py-md px px-md footer">
+                <div class="row d-flex justify-content-center align-items-center text-center footer-header"></div>
+                <div class="row mt footer-content">
+                    <div class="col-md-4 mb-3 footer-section">
+                        <a class="d-inline-flex align-items-center mb-2 footer-title" href="/" aria-label="Visual Sort">
+                            Visual Sort
+                        </a>
+                        <div class="vs">
+                            <ul class="list-unstyled small">
+                                <li class="mb-2 footer-description">Visual Sort is a web-based sorting algorithm visualization tool which provides an
+                                    interactive way to visualize various sorting algorithms in action, helping users understand how
+                                    different algorithms work and their efficiency in sorting data</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="col-6 col-md-2 mb-3 footer-section">
+                        <h5 class="footer-header-title">Home</h5>
+                        <ul class="nav flex-column">
+                            <li class="nav-item mb-2"><a href="#home-section" class="nav-link p-0">Home</a></li>
+                            <li class="nav-item mb-2"><a href="#algorithm-section" class="nav-link p-0">Algorithms</a></li>
+                            <li class="nav-item mb-2"><a href="#programs-section" class="nav-link p-0">Programs</a></li>
+                        </ul>
+                    </div>
             
-            </div>
-            <div class="row mt" style="background-color: aqua;">
-              <div class="col-md-4 mb-3" style="background-color: aqua;">
-                <a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none footer-title" 
-                  href="/" aria-label="Visual Sort">
-                  Visual Sort
-                </a>
-                <div class="vs" style="padding: 20px; background-color: aqua;">
-                <ul class="list-unstyled small">
-                  <li class="mb-2" style="color: yellow;">Visual Sort is a web-based sorting algorithm visualization tool which provides an
-                    interactive way to visualize various sorting algorithms in action, helping users understand how
-                    different algorithms work and their efficiency in sorting data</li>
-                </ul>
-                </div>
-              </div>
-              <div class="col-6 col-md-2 mb-3" style="background-color: aqua;">
-                <h5 style="color: aliceblue; background-color: aqua;">Home</h5>
-                <ul class="nav flex-column" style="padding: 20px;">
-                  <li class="nav-item mb-2"><a href="#home-section" class="nav-link p-0 text-body-secondary">Home</a></li>
-                  <li class="nav-item mb-2"><a href="#algorithm-section"
-                      class="nav-link p-0 text-body-secondary">Algorithms</a></li>
-                  <li class="nav-item mb-2"><a href="#programs-section"
-                      class="nav-link p-0 text-body-secondary">Programs</a></li>
-                </ul>
-              </div>
-        
-              <div class="col-6 col-md-2 mb-3">
-                <h5 style="color: aliceblue;">About</h5>
-                <ul class="nav flex-column" style="padding: 20px;">
-                  <li class="nav-item mb-2"><a href="#about-us-section" class="nav-link p-0 text-body-secondary">About</a></li>
-                  <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Our Contributors</a></li>
-                </ul>
-              </div>
-        
-              <div class="col-6 col-md-2 mb-3">
-                <h5 style="color: aliceblue;">Support</h5>
-                <ul class="nav flex-column" style="padding: 20px;">
-                  <li class="nav-item mb-2"><a href="#faq" class="nav-link p-0 text-body-secondary">FAQs</a></li>
-                  <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Contact</a></li>
-                </ul>
-              </div>
-        
-              <div class="col-6 col-md-2 mb-3">
-                <h5 style="color: aliceblue;">Legal</h5>
-                <ul class="nav flex-column" style="padding: 20px;">
-        
-                  
-                  <li class="nav-item mb-2"><a href="privacy-policy.html" class="nav-link p-0 text-body-secondary">Privacy Policy</a></li>
-        
-                  <li class="nav-item mb-2"><a href="Terms.html" class="nav-link p-0 text-body-secondary">Terms & Conditions</a></li>
-                  <li class="nav-item mb-2"><a href="license.html" class="nav-link p-0 text-body-secondary">Licensing</a></li>
-                </ul>
-              </div>
-              
-            </div>
-        
-             <div id="topbtn" class="topbtn">
-              <a class="gotopbtn" href="#"><i class="fa-solid fa-angles-up"></i></a>
-          </div>
-          
-        
-           
-            <div class="foot">
-              <div class="icons">
-                <div class="linkedin">
-                <a href="https://www.linkedin.com/in/mastan-sayyad-126904223/"><i class="fa-brands fa-linkedin"></i></a>
+                    <div class="col-6 col-md-2 mb-3 footer-section">
+                        <h5 class="footer-header-title">About</h5>
+                        <ul class="nav flex-column">
+                            <li class="nav-item mb-2"><a href="#about-us-section" class="nav-link p-0">About</a></li>
+                            <li class="nav-item mb-2"><a href="#" class="nav-link p-0">Our Contributors</a></li>
+                        </ul>
+                    </div>
+            
+                    <div class="col-6 col-md-2 mb-3 footer-section">
+                        <h5 class="footer-header-title">Support</h5>
+                        <ul class="nav flex-column">
+                            <li class="nav-item mb-2"><a href="#faq" class="nav-link p-0">FAQs</a></li>
+                            <li class="nav-item mb-2"><a href="#" class="nav-link p-0">Contact</a></li>
+                        </ul>
+                    </div>
+            
+                    <div class="col-6 col-md-2 mb-3 footer-section">
+                        <h5 class="footer-header-title">Legal</h5>
+                        <ul class="nav flex-column">
+                            <li class="nav-item mb-2"><a href="privacy-policy.html" class="nav-link p-0">Privacy Policy</a></li>
+                            <li class="nav-item mb-2"><a href="Terms.html" class="nav-link p-0">Terms & Conditions</a></li>
+                            <li class="nav-item mb-2"><a href="license.html" class="nav-link p-0">Licensing</a></li>
+                        </ul>
+                    </div>
                 </div>
-                <div class="github">
-                 <a href="https://github.com/MastanSayyad"><i class="fa-brands fa-github"></i></a>  
+            
+                <div id="topbtn" class="topbtn">
+                    <a class="gotopbtn" href="#"><i class="fa-solid fa-angles-up"></i></a>
                 </div>
-                <div class="instagram">
-                 <a href=""><i class="fa-brands fa-instagram"></i></a>
+            
+                <div class="foot">
+                    <div class="icons">
+                        <div class="linkedin">
+                            <a href="https://www.linkedin.com/in/mastan-sayyad-126904223/"><i class="fa-brands fa-linkedin"></i></a>
+                        </div>
+                        <div class="github">
+                            <a href="https://github.com/MastanSayyad"><i class="fa-brands fa-github"></i></a>
+                        </div>
+                        <div class="instagram">
+                            <a href=""><i class="fa-brands fa-instagram"></i></a>
+                        </div>
+                        <div class="twitter">
+                            <a href=""><i class="fa fa-twitter"></i></a>
+                        </div>
+                    </div>
                 </div>
-                <div class="twitter">
-                 <a href=""><i class="fa fa-twitter"></i></a>
+            
+                <div class="d-flex flex-column flex-sm-row justify-content-center py-4 my-4 border-top footer-bottom">
+                    <p>© 2024 Visual Sort - Mastan Sayyad, Inc. All rights reserved.</p>
                 </div>
-            </div>
-        
-            </div>
-          
-          <div class="d-flex flex-column flex-sm-row justify-content-center py-4 my-4 border-top">
-            <p>© 2024 Visual Sort - Mastan Sayyad, Inc. All rights reserved.</p>
-          </div>
-        </footer>
+            </footer>
+            
     </section>
 
             <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
diff --git a/terms.css b/terms.css
index 643bd3e..55f879f 100644
--- a/terms.css
+++ b/terms.css
@@ -1,11 +1,11 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");
 
 :root {
-  --bg-clr: #6c00f9;
+  --bg-clr: #d19cd9;
   --white: #fff;
-  --primary-text-clr: #212121;
-  --secondary-text-clr: #8c8c8c;
-  --bg-hvr: #5803c7;
+  --primary-text-clr: #333;
+  --secondary-text-clr: #8c8c8c; 
+  --bg-hvr: #b67dc8; 
 }
 
 * {
@@ -15,47 +15,48 @@
   font-family: "Open Sans", sans-serif;
 }
 
-body{
-  background: blue;
+body {
+  background-color: #f9f9f9;
   font-size: 12px;
-  
+  color: #333; 
 }
 
-.flex_align_justify{
+.flex_align_justify {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.flex_align{
+.flex_align {
   display: flex;
   align-items: center;
 }
 
-.wrapper{
+.wrapper {
   min-height: 100vh;
   padding: 0 20px;
 }
 
-.terms_service{
+.terms_service {
   width: 800px;
   max-width: 100%;
   height: 650px;
-  background: lightcyan;
-  border-radius: 3px;
-  box-shadow: 0px 0px 3px rgba(0,0,0,0.15);
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
-.terms_service .tc_item{
+.terms_service .tc_item {
   padding: 20px 40px;
 }
 
-.terms_service .tc_head{
-  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+.terms_service .tc_head {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
   height: 90px;
+  border-bottom: 2px solid var(--bg-clr); 
 }
 
-.terms_service .tc_head .icon{
+.terms_service .tc_head .icon {
   width: 50px;
   height: 50px;
   background: var(--bg-clr);
@@ -65,38 +66,43 @@ body{
   color: var(--white);
 }
 
-.terms_service .tc_body{
+.terms_service .tc_body {
   height: calc(100% - 170px);
   overflow: auto;
   padding-right: 20px;
 }
 
-.terms_service .tc_body ol li{
+.terms_service .tc_body ol li {
   margin-bottom: 15px;
 }
 
-.terms_service .tc_body ol li h3{
+.terms_service .tc_body ol li h3 {
   margin-bottom: 5px;
+  color: var(--bg-clr); 
 }
 
-.terms_service .tc_foot{
-  box-shadow: 0 -1px 2px rgba(0,0,0,0.15);
+.terms_service .tc_foot {
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.15);
   justify-content: space-between;
   height: 80px;
 }
 
-.terms_service .tc_foot button{
+.terms_service .tc_foot button {
   width: 100%;
   border: 1px solid var(--bg-clr);
   padding: 10px 20px;
   border-radius: 3px;
   cursor: pointer;
   transition: all 0.5s ease;
+  background-color: var(--bg-clr);
+  color: var(--white); 
 }
-.txt h3{
-    color: red;
-    font-size: larger;
+
+.txt h3 {
+  color: rgb(219, 127, 219);
+  font-size: larger;
 }
-.footer{
-  background-color: aqua;
+
+.footer {
+  background-color: rgba(0, 0, 0, 0.05);
 }