diff --git a/public/index.html b/public/index.html
index 42480db..d377b1b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,286 +8,142 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
   <!-- fontawesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
     integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <title>CareerZunction</title>
-
-
   <style>
-    /* Default Theme (Dark Mode) */
-    
-    body {
-      background-color: black;
-      color: white;
-    }
-
-    .container {
-      background-color: black;
-      height: 100vh;
-      width: 100vw;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .loading {
-      -webkit-animation: sk-scaleout 1s infinite ease-in-out;
-      animation: sk-scaleout 1s infinite ease-in-out;
-      background-color: rgb(148, 22, 233);
-      border-radius: 100%;
-      height: 4em;
-      width: 4em;
-    }
-
-    @keyframes sk-scaleout {
-      0% {
-        -webkit-transform: scale(0);
-        transform: scale(0);
-      }
-
-      100% {
-        -webkit-transform: scale(1);
-        opacity: 0.5;
-        transform: scale(1);
-      }
-    }
-
 
   
     .circle {
-
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      pointer-events: none;
-      background: radial-gradient(circle, rgba(63, 18, 93, 0.8), rgba(201, 24, 255, 0.5));
-      transition: transform 0.1s, left 0.1s, top 0.1s;
-    }
-
-    .circle-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 9999;
-    }
-
-    @media (max-width: 768px) {
-      .circle-container {
-        display: none;
-      }
-    }
-
-    #theme-toggle-btn {
-      position: fixed;
-      top: 10px;
-      left: 10px;
-      background: #fff;
-      border: none;
-      border-radius: 50%;
-      padding: 5px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-      cursor: pointer;
-      z-index: 10000;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      overflow: hidden; /* Ensure only one icon is visible */
-    }
-
-    #theme-toggle-btn i {
-      color: #000;
-      font-size: 20px;
-      display: none; /* Hide all icons by default */
-    }
-
-    #theme-toggle-btn .dark-theme {
-      display: block; /* Show sun icon for dark theme */
-    }
-
-    body.light-theme #theme-toggle-btn .dark-theme {
-      display: none; /* Hide sun icon for light theme */
-    }
-
-    body.light-theme #theme-toggle-btn .light-theme {
-      display: block; /* Show moon icon for light theme */
-    }
-
-    #scrollToTopBtn {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      background: #fff;
-      border: none;
-      border-radius: 50%;
-      padding: 8px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-      cursor: pointer;
-      z-index: 10000;
-      display: none;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    #scrollToTopBtn.show {
-      display: flex;
-    }
-
-    #scrollToTopBtn i {
-      color: #000;
-      font-size: 20px;
-    }
-
-    .noscript-message {
-      color: #f00;
-      background: #fff;
-      padding: 10px;
-      border: 1px solid #f00;
-      border-radius: 5px;
-      text-align: center;
-    }
-
-    /* Light Theme Styles */
-    body.light-theme {
-      background-color: white;
-      color: black;
-    }
-
-    body.light-theme .container {
-      background-color: white;
-    }
-
-    body.light-theme #theme-toggle-btn {
-      background: #971df4;
-    }
-
-    body.light-theme #theme-toggle-btn i {
-      color: #fff;
-    }
-
-
+            position: absolute;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            pointer-events: none;
+            background: radial-gradient(circle, rgba(63, 18, 93, 0.8), rgba(201, 24, 255, 0.5));
+            transition: transform 0.1s, left 0.1s, top 0.1s;
+        }
+
+        .circle-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 99999;
+        } 
+
+        @media (max-width: 768px) {
+          .circle-container{
+            display: none;
+          }
+        }
+        
   </style>
 </head>
 
 <body>
-
-
-  <button id="theme-toggle-btn">
-    <i class="fa-solid fa-sun dark-theme"></i>
-    <i class="fa-solid fa-moon light-theme"></i>
-  </button>
-
-  <!-- Existing content here -->
-  <div id="spinner" class="container">
-    <div class="loading"></div>
-  </div>
-  
-
   <div id="root"></div>
 
   <div class="circle-container">
     <div class="circle"></div>
-    <!-- Add more circles as needed -->
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
   </div>
-
-  <!-- Scroll to Top Button -->
-  <button id="scrollToTopBtn"><i class="fa-solid fa-arrow-up"></i></button>
-
-  <noscript>
-    <div class="noscript-message">
-      You need to enable JavaScript to run this app.
-    </div>
-  </noscript>
-
   <script>
- document.addEventListener("DOMContentLoaded", function () {
-  const coords = { x: 0, y: 0 };
-  const circles = document.querySelectorAll(".circle");
-
-  circles.forEach(function (circle) {
-    circle.x = 0;
-    circle.y = 0;
-  });
-
-  window.addEventListener("mousemove", function (e) {
-    coords.x = e.pageX;
-    coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-  });
-
-  function animateCircles() {
-    let x = coords.x;
-    let y = coords.y;
-
-    circles.forEach(function (circle, index) {
-      circle.style.left = `${x - 10}px`;
-      circle.style.top = `${y - 10}px`;
-      circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
-
-      const nextCircle = circles[index + 1] || circles[0];
-      circle.x = x;
-      circle.y = y;
-
+    document.addEventListener("DOMContentLoaded", function () {
+      const coords = { x: 0, y: 0 };
+      const circles = document.querySelectorAll(".circle");
+
+      circles.forEach(function (circle) {
+        circle.x = 0;
+        circle.y = 0;
+      });
+
+      window.addEventListener("mousemove", function (e) {
+        coords.x = e.pageX;
+        coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+      });
+
+      function animateCircles() {
+        let x = coords.x;
+        let y = coords.y;
+
+        circles.forEach(function (circle, index) {
+          circle.style.left = `${x - 12}px`;
+          circle.style.top = `${y - 12}px`;
+          circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+
+          const nextCircle = circles[index + 1] || circles[0];
+          circle.x = x;
+          circle.y = y;
+
+          x += (nextCircle.x - x) * 0.3;
+          y += (nextCircle.y - y) * 0.3;
+        });
+
+        requestAnimationFrame(animateCircles);
+      }
 
-      x += (nextCircle.x - x) * 0.3;
-      y += (nextCircle.y - y) * 0.3;
+      animateCircles();
     });
 
-    requestAnimationFrame(animateCircles);
-  }
-
-  animateCircles();
-
-  // Theme Toggle Button Functionality
-  const themeToggleButton = document.getElementById('theme-toggle-btn');
-
-  const updateThemeIcon = () => {
-    const isLightTheme = document.body.classList.contains('light-theme');
-    // Set icon based on the current theme
-    document.querySelector('.dark-theme').style.display = isLightTheme ? 'none' : 'block';
-    document.querySelector('.light-theme').style.display = isLightTheme ? 'block' : 'none';
-  };
-
-  themeToggleButton.addEventListener('click', () => {
-    document.body.classList.toggle('light-theme');
-    updateThemeIcon();
-  });
-
-  // Initial icon update
-  updateThemeIcon();
-
-  // Scroll to Top Button Functionality
-  let mybutton = document.getElementById("scrollToTopBtn");
-
-  window.onscroll = function () {
-    scrollFunction();
-  };
+  </script>
 
-  function scrollFunction() {
-    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-      mybutton.classList.add("show");
-    } else {
-      mybutton.classList.remove("show");
-    }
-  }
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
 
-  mybutton.onclick = function () {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-});
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
 
-  </script>
-  
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Component/Licensing.jsx b/src/Component/Licensing.jsx
index 861735e..d6c08e8 100644
--- a/src/Component/Licensing.jsx
+++ b/src/Component/Licensing.jsx
@@ -22,7 +22,7 @@ const Paragraph = styled.p`
   font-size: 1em;
   line-height: 1.6;
   margin-bottom: 20px; /* Increased margin for more spacing */
-  color: gray;
+  color: white;
 `;
 
 const Subtitle = styled.h2`
@@ -30,9 +30,7 @@ const Subtitle = styled.h2`
   margin-bottom: 20px; /* Increased margin for more spacing */
   justify-content: left;
   padding: 0;
-
-  color: gray;
-
+  color: #8a2be2;
 `;
 
 const Footer = styled.div`
diff --git a/src/Component/Terms.jsx b/src/Component/Terms.jsx
index 5e136aa..5f1a5b4 100644
--- a/src/Component/Terms.jsx
+++ b/src/Component/Terms.jsx
@@ -104,7 +104,6 @@ const TermsWrapper = styled.div`
 
   section {
     margin-bottom: 40px; 
-    color:gray
   }
 
   section:last-of-type {