diff --git a/pages/about.html b/pages/about.html
index a34dcdb..d594a1c 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -5,7 +5,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>About Us</title>
-  <link rel="stylesheet" href="/styles/about.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
@@ -17,128 +16,407 @@
   <link rel="shortcut icon" href="../assets/favicon.ico" type="image/x-icon" />
 
   <style>
-   html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  background-color: #e7b537;
-  scroll-behavior: smooth;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-}
-
-main {
-  flex: 1; 
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center; 
-}
-
-
-
-.circle {
-  position: absolute;
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  pointer-events: none;
-  background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 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;
-  }
-}
-
-.navbar {
-  width: 100%;
-  background-color: #333;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  transition: background-color 0.3s ease-in-out;
-}
-
-.logo a {
-  text-decoration: none;
-  font-size: 24px;
-  font-family: "Arial", sans-serif;
-  font-weight: bold;
-  letter-spacing: 2px;
-  color: #fff;
-  margin-left: 15px;
-}
-
-.navlinks {
-  display: flex;
-  gap: 20px;
-  margin-right: 53px;
-
-}
-
-.navlinks a {
-  text-decoration: none;
-  color: #fff;
-  font-size: 18px;
-  font-family: "Arial", sans-serif;
-  font-weight: bold;
-  letter-spacing: 2px;
-}
-
-.navlinks a:hover {
-  color: #e7b537;
-}
-
-.logo a:hover {
-  color: yellow;
-}
-
-/* Responsive Styles */
-@media screen and (max-width: 769px) {
-  .navbar {
-    flex-direction: column;
-    padding: 20px;
-  }
-
-  .logo a {
-    font-size: 20px;
-  }
-
-  .navlinks {
-    flex-direction: column;
-    align-items: center;
-    margin-top: 10px;
-  }
-
-  .navlinks a {
-    font-size: 16px;
-    margin: 5px 0;
-  }
-}
-
-@media screen and (max-width: 450px) {
-  .logo a {
-    font-size: 18px;
-  }
-}
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      background-color: #e7b537;
+      scroll-behavior: smooth;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+    }
+
+    main {
+      flex: 1;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+
+
+    .circle {
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      pointer-events: none;
+      background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 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;
+      }
+    }
+
+    .navbar {
+      width: 100%;
+      background-color: #333;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      transition: background-color 0.3s ease-in-out;
+    }
+
+    .logo a {
+      text-decoration: none;
+      font-size: 24px;
+      font-family: "Arial", sans-serif;
+      font-weight: bold;
+      letter-spacing: 2px;
+      color: #fff;
+      margin-left: 15px;
+    }
+
+    .navlinks {
+      display: flex;
+      gap: 20px;
+      margin-right: 53px;
+
+    }
+
+    .navlinks a {
+      text-decoration: none;
+      color: #fff;
+      font-size: 18px;
+      font-family: "Arial", sans-serif;
+      font-weight: bold;
+      letter-spacing: 2px;
+    }
+
+    .navlinks a:hover {
+      color: #e7b537;
+    }
+
+    .logo a:hover {
+      color: yellow;
+    }
+
+    /* Responsive Styles */
+    @media screen and (max-width: 769px) {
+      .navbar {
+        flex-direction: column;
+        padding: 20px;
+      }
+
+      .logo a {
+        font-size: 20px;
+      }
+
+      .navlinks {
+        flex-direction: column;
+        align-items: center;
+        margin-top: 10px;
+      }
+
+      .navlinks a {
+        font-size: 16px;
+        margin: 5px 0;
+      }
+    }
+
+    @media screen and (max-width: 450px) {
+      .logo a {
+        font-size: 18px;
+      }
+    }
+  </style>
+
+  <style>
+    /* Adding style.css here beacuse after deployment server is not loading it */
+
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      background-color: #e7b537;
+      scroll-behavior: smooth;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .about-header {
+      font-family: "Anton", sans-serif;
+      background-color: transparent;
+      color: #0e0e0e;
+      padding: 15px;
+      text-shadow: 2px 2px 10px white;
+      text-align: center;
+      font-size: 2.5rem;
+      transition: background-color 0.3s ease;
+    }
+
+    .about-header:hover {
+      background-color: #e59253;
+    }
+
+    h1 {
+      margin: 0;
+    }
+
+    main {
+      padding: 20px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    p {
+      color: #333;
+      line-height: 1.6;
+      text-align: justify;
+      max-width: 750px;
+      margin: 0 auto;
+      font-size: 16px;
+    }
+
+    .functionalities,
+    .how-to-play {
+      flex: 1 1 320px;
+      max-width: 320px;
+      height: 350px;
+      margin: 10px;
+      color: #ffffff;
+      font-family: 'Poppins', sans-serif;
+      background: linear-gradient(135deg, #5f4c9b, #3540e3);
+      border-radius: 10px;
+      padding: 0px 204px;
+      box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5);
+      transition: all 0.3s ease;
+      overflow: hidden;
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 352px;
+    }
+
+    .functionalities h2,
+    .how-to-play h2 {
+      font-size: 24px;
+      margin-bottom: 10px;
+      font-family: 'Poppins', sans-serif;
+      font-weight: 700;
+      text-align: center;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      transition: all 0.3s ease;
+    }
+
+    .functionalities .content,
+    .how-to-play .content {
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      font-weight: 500;
+      position: absolute;
+      top: 60px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding: 20px;
+    }
+
+    .functionalities::after,
+    .how-to-play::after {
+      content: "(Hover here to know more)";
+      position: absolute;
+      bottom: 20px;
+      left: 0;
+      right: 0;
+      text-align: center;
+      opacity: 0.7;
+      transition: opacity 0.3s ease;
+    }
+
+    .functionalities:hover::after,
+    .how-to-play:hover::after {
+      opacity: 0;
+    }
+
+    .functionalities:hover h2,
+    .how-to-play:hover h2 {
+      top: 10px;
+      transform: translateX(-50%);
+    }
+
+    .functionalities:hover .content,
+    .how-to-play:hover .content {
+      opacity: 1;
+    }
+
+    ul {
+      list-style: none;
+      padding-left: 0;
+      margin: 0;
+    }
+
+    li {
+      margin-bottom: 8px;
+      line-height: 1.6;
+    }
+
+    .functionalities ul,
+    .how-to-play p {
+      color: #ffffff;
+      font-size: 14px;
+    }
+
+    .navbar {
+      width: 100%;
+      background-color: #333;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+      transition: background-color 0.3s ease-in-out;
+    }
+
+    .logo a {
+      text-decoration: none;
+      font-size: 24px;
+      font-family: "Arial", sans-serif;
+      font-weight: bold;
+      letter-spacing: 2px;
+      color: #fff;
+      margin-left: 15px;
+    }
+
+    .navlinks {
+      display: flex;
+      gap: 20px;
+    }
+
+    .navlinks a {
+      text-decoration: none;
+      color: #fff;
+      font-size: 18px;
+      font-family: "Arial", sans-serif;
+      font-weight: bold;
+      letter-spacing: 2px;
+    }
+
+    .navlinks a:hover {
+      color: #e7b537;
+    }
+
+    .logo a:hover {
+      color: yellow;
+    }
+
+    .author {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: linear-gradient(to right, #00093c, #2d0b00);
+      color: #fff;
+      padding: 15px;
+      position: sticky;
+      bottom: 0;
+      z-index: 1000;
+    }
+
+    .author .fotbar {
+      display: flex;
+      gap: 20px;
+    }
+
+    .author .fotbar a {
+      color: white;
+      text-decoration: none;
+      padding: 10px;
+      border-radius: 5px;
+      font-size: 18px;
+      background-color: transparent;
+    }
+
+    ::-webkit-scrollbar {
+      display: none;
+    }
+
+    .author p {
+      color: white;
+      padding: 10px;
+      margin-right: 10px;
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    .author .social-icons {
+      display: flex;
+      gap: 10px;
+      margin-right: 20px;
+    }
+
+    .author a {
+      color: white !important;
+    }
+
+    .author .social-icons a {
+      color: white;
+      text-decoration: none;
+      font-size: 20px;
+    }
+
+    /* Responsive Styles */
+    @media screen and (max-width: 769px) {
+      .navbar {
+        flex-direction: column;
+        padding: 20px;
+      }
+
+      .logo a {
+        font-size: 20px;
+      }
+
+      .navlinks {
+        flex-direction: column;
+        align-items: center;
+        margin-top: 10px;
+      }
+
+      .navlinks a {
+        font-size: 16px;
+        margin: 5px 0;
+      }
+    }
+
+    @media screen and (max-width: 450px) {
+      .logo a {
+        font-size: 18px;
+      }
+    }
   </style>
 
 </head>
diff --git a/pages/contributors.html b/pages/contributors.html
index 5d4fb62..6f2d294 100644
--- a/pages/contributors.html
+++ b/pages/contributors.html
@@ -36,74 +36,12 @@
     }
   </style>
 </head>
-    <div class="center">
-      <a href="../index.html">
-        <img src="../assets/images/Home.jpeg" style="position: absolute; top: 75px; left: 12px; height: 100px; width: 100px; margin: 0;">
-      </a>     
-    </div>
-    <script src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js" async></script>
-<div class="settings">
-  <video autoplay muted class="video" loop id="myVideo">
-    <source src="../assets/videos/default.mp4" type="video/mp4" />
-  </video>
-  <div class="whole-background">
-    <nav class="navbarr">
-      <div class="logo">
-        <a href="../index.html">Dots & Boxes ⚄</a>
-      </div>
-      <ul class="nav-links">
-        <li><a href="../index.html">Home</a></li>
-        <li><a href="../pages/about.html">About Us</a></li>
-        <li><a href="../pages/FAQs.html">FAQs</a></li>
-
-        <li><a href="../pages/contributors.html">
-          Contributors
-        </a></li>
-        <button><a href="../pages/game.html">Let's Go</a></button>
-      </ul>
-      <div class="hamburger">
-        <i class="fas fa-bars"></i>
-      </div>
-    </nav>
-    <div class="form">
-      <h1 class="heading">
-        Our Contributors</h1>
-      <p class="contributors-description">
-        We are grateful to the following contributors for their hard work
-        and dedication in making this project a success:
-      </p>
-      <div class="contributors-list">
-
-        <a href="https://github.com/ChromeGaming/Dot-Box/graphs/contributors">
-
-          <img src="https://contrib.rocks/image?repo=ChromeGaming/Dot-Box" />
-        </a>
-
-      </div>
-    </div>
-  </div>
-  <div class="author">
-    <div class="fotbar">
-      <a href="../pages/howtoplay.html">HowToPlay?</a>
-      <a href="../pages/termsofservice.html">TermsOfService</a>
-      <a href="../pages/privacypolicy.html">PrivacyPolicy</a>
-    </div>
-    <p>
-      Created with ❤️ by <a href="https://github.com/ChromeGaming">Chrome Gaming</a>
-    </p>
-    <div class="social-icons">
-      <a href="https://github.com/ChromeGaming/Dot-Box" target="_blank"><i class="fab fa-github"></i></a>
-      <a href="https://discord.gg/2HTCFrSvPB" target="_blank"><i class="fab fa-discord"></i></a>
-    </div>
-  </div>
-</div>
+
+
+
 
 <body>
-  <div class="center">
-    <a href="../index.html">
-      <img src="../assets/images/Home.jpeg" style="position: absolute; top: 15px; left: 5px; height: 100px; width: 100px; margin: 0;">
-    </a> 
-  <script src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js" async></script>
+
   <div class="circle-container">
     <div class="circle"></div>
     <div class="circle"></div>
@@ -247,4 +185,4 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">${contribu
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/styles/about.css b/styles/about.css
deleted file mode 100644
index d928997..0000000
--- a/styles/about.css
+++ /dev/null
@@ -1,268 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
-
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  background-color: #e7b537;
-  scroll-behavior: smooth;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-}
-
-.about-header {
-  font-family: "Anton", sans-serif;
-  background-color: transparent;
-  color: #0e0e0e;
-  padding: 15px;
-  text-shadow: 2px 2px 10px white;
-  text-align: center;
-  font-size: 2.5rem;
-  transition: background-color 0.3s ease;
-}
-
-.about-header:hover {
-  background-color: #e59253;
-}
-
-h1 {
-  margin: 0;
-}
-
-main {
-  padding: 20px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-p {
-  color: #333;
-  line-height: 1.6;
-  text-align: justify;
-  max-width: 750px;
-  margin: 0 auto;
-  font-size: 16px;
-}
-
-.functionalities,
-.how-to-play {
-  flex: 1 1 320px;
-  max-width: 320px;
-  height: 350px;
-  margin: 10px;
-  color: #ffffff;
-  font-family: 'Poppins', sans-serif;
-  background: linear-gradient(135deg, #5f4c9b, #3540e3);
-  border-radius: 10px;
-  padding: 0px 204px;
-  box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5);
-  transition: all 0.3s ease;
-  overflow: hidden;
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 352px;
-}
-
-.functionalities h2,
-.how-to-play h2 {
-  font-size: 24px;
-  margin-bottom: 10px;
-  font-family: 'Poppins', sans-serif;
-  font-weight: 700;
-  text-align: center;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  transition: all 0.3s ease;
-}
-
-.functionalities .content,
-.how-to-play .content {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  font-weight: 500;
-  position: absolute;
-  top: 60px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 20px;
-}
-
-.functionalities::after,
-.how-to-play::after {
-  content: "(Hover here to know more)";
-  position: absolute;
-  bottom: 20px;
-  left: 0;
-  right: 0;
-  text-align: center;
-  opacity: 0.7;
-  transition: opacity 0.3s ease;
-}
-
-.functionalities:hover::after,
-.how-to-play:hover::after {
-  opacity: 0;
-}
-
-.functionalities:hover h2,
-.how-to-play:hover h2 {
-  top: 10px;
-  transform: translateX(-50%);
-}
-
-.functionalities:hover .content,
-.how-to-play:hover .content {
-  opacity: 1;
-}
-
-ul {
-  list-style: none;
-  padding-left: 0;
-  margin: 0;
-}
-
-li {
-  margin-bottom: 8px;
-  line-height: 1.6;
-}
-
-.functionalities ul,
-.how-to-play p {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.navbar {
-  width: 100%;
-  background-color: #333;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-  transition: background-color 0.3s ease-in-out;
-}
-
-.logo a {
-  text-decoration: none;
-  font-size: 24px;
-  font-family: "Arial", sans-serif;
-  font-weight: bold;
-  letter-spacing: 2px;
-  color: #fff;
-  margin-left: 15px;
-}
-
-.navlinks {
-  display: flex;
-  gap: 20px;
-}
-
-.navlinks a {
-  text-decoration: none;
-  color: #fff;
-  font-size: 18px;
-  font-family: "Arial", sans-serif;
-  font-weight: bold;
-  letter-spacing: 2px;
-}
-
-.navlinks a:hover {
-  color: #e7b537;
-}
-
-.logo a:hover {
-  color: yellow;
-}
-
-.author {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: linear-gradient(to right, #00093c, #2d0b00);
-  color: #fff;
-  padding: 15px;
-  position: sticky;
-  bottom: 0;
-  z-index: 1000;
-}
-
-.author .fotbar {
-  display: flex;
-  gap: 20px;
-}
-
-.author .fotbar a {
-  color: white;
-  text-decoration: none;
-  padding: 10px;
-  border-radius: 5px;
-  font-size: 18px;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar{
-  display: none;
-}
-
-.author p {
-  color: white;
-  padding: 10px;
-  margin-right: 10px;
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.author .social-icons {
-  display: flex;
-  gap: 10px;
-  margin-right: 20px;
-}
-
-.author a {
-  color: white !important;
-}
-
-.author .social-icons a {
-  color: white;
-  text-decoration: none;
-  font-size: 20px;
-}
-/* Responsive Styles */
-@media screen and (max-width: 769px) {
-  .navbar {
-    flex-direction: column;
-    padding: 20px;
-  }
-  .logo a {
-    font-size: 20px;
-  }
-  .navlinks {
-    flex-direction: column;
-    align-items: center;
-    margin-top: 10px;
-  }
-  .navlinks a {
-    font-size: 16px;
-    margin: 5px 0;
-  }
-}
-
-@media screen and (max-width: 450px) {
-  .logo a {
-    font-size: 18px;
-  }
-}