diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 6d6fec5..18e9249 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 
 <head>
+    
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-4FVJXEZ1TV"></script>
   <script>
@@ -31,6 +32,7 @@
   <link rel="stylesheet" href="styles-header.css">
   <link rel="stylesheet" href="./styles-type.css">
   <link rel="stylesheet" href="styles-footer.css">
+
 </head>
 
 <body>
@@ -42,7 +44,7 @@
     </div>
     <div class="header-icons">
       <div class="footer-item">
-        <a class="footer-icons" href="" target="_blank">
+        <a class="footer-icons" href="javascript:void(0);">
           <i class="fa fa-paint-brush"></i>
         </a>
       </div>
@@ -63,9 +65,149 @@
     </div>
   </div>
 
-  <!--  Type started (Riya Ahlawat and Samriddhi) -->
+
+<!-- Colour palette by Advika and Pulak -->
+
+<style>
+  .theme-selector {
+      display: none;
+      position: fixed;
+      top: 50px;
+      right: 20px;
+      width: 400px;
+      z-index: 1000;
+      background-color: #073642;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      padding: 20px;
+  }
+
+  .theme-selector.show {
+      display: block;
+  }
+</style>
+
+<div class="theme-selector">
+  <div class="container">
+      <div class="search-bar">
+          <i class="fa-solid fa-magnifying-glass"></i>
+          <input type="text" placeholder="Search..." id="search-input">
+      </div>
+      <ul id="theme-list">
+          <li class="theme-item" data-theme-class="theme-bento">
+              <span class="theme-name"><b>bento</b></span>
+              <div class="color-palette">
+                  <span class="color-button" style="background: #2d394d;"></span>
+                  <span class="color-button" style="background: #ff7a90;"></span>
+                  <span class="color-button" style="background: #fffaf8;"></span>
+              </div>
+          </li>
+
+          <li class="theme-item" data-theme-class="theme-blue-dolphin">
+              <span class="theme-name">blue dolphin</span>
+              <div class="color-palette">
+                  <span class="color-button" style="background: #00e4ff;"></span>
+                  <span class="color-button" style="background: #014961;"></span>
+                  <span class="color-button" style="background: #ffcefb;"></span>
+              </div>
+          </li>
+
+          <li class="theme-item" data-theme-class="theme-monokai">
+            <span class="theme-name">monokai</span>
+            <div class="color-palette">
+                <span class="color-button" style="background: #a6e22e;"></span>
+                <span class="color-button" style="background: #e6db74;"></span>
+                <span class="color-button" style="background: #e2e2dc;"></span>
+            </div>
+        </li>
+      
+        <li class="theme-item" data-theme-class="theme-fledling">
+          <span class="theme-name">fledling</span>
+          <div class="color-palette">
+              <span class="color-button" style="background: #fc6e83;"></span>
+              <span class="color-button" style="background: #474747;"></span>
+              <span class="color-button" style="background: #e6d5d3;"></span>
+          </div>
+      </li>
+
+      <li class="theme-item" data-theme-class="theme-lavender">
+          <span class="theme-name">lavender</span>
+          <div class="color-palette">
+              <span class="color-button" style="background: #ada6c2;"></span>
+              <span class="color-button" style="background: #e4e3e9;"></span>
+              <span class="color-button" style="background: #2f2a41;"></span>
+          </div>
+      </li>
+
+      <li class="theme-item" data-theme-class="theme-dark">
+          <span class="theme-name">dark</span>
+          <div class="color-palette">
+              <span class="color-button" style="background: #eee;"></span>
+              <span class="color-button" style="background: #444;"></span>
+              <span class="color-button" style="background: #191919;"></span>
+          </div>
+      </li>
+
+      <li class="theme-item" data-theme-class="theme-bushido">
+          <span class="theme-name">bushido</span>
+          <div class="color-palette">
+              <span class="color-button" style="background: #ec4c56;"></span>
+              <span class="color-button" style="background: #596172;"></span>
+              <span class="color-button" style="background: #f6f0e9;"></span>
+          </div>
+      </li>
+
+      <li class="theme-item" data-theme-class="theme-lime">
+          <span class="theme-name">lime</span>
+          <div class="color-palette">
+              <span class="color-button" style="background: #93c247;"></span>
+              <span class="color-button" style="background: #4b5257;"></span>
+              <span class="color-button" style="background: #bfcfdc;"></span>
+          </div>
+      </li>
+      </ul>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+      const themeItems = document.querySelectorAll('.theme-item');
+  
+      themeItems.forEach(item => {
+          item.addEventListener('click', function() {
+              themeItems.forEach(item => item.classList.remove('selected'));
+              this.classList.add('selected');
+
+              const themeClass = this.getAttribute('data-theme-class');
+              document.body.className = themeClass;
+          });
+      });
+  
+      const searchInput = document.getElementById('search-input');
+      if (searchInput) {
+          searchInput.addEventListener('input', function() {
+              const filter = searchInput.value.toLowerCase();
+              themeItems.forEach(item => {
+                  const themeName = item.querySelector('.theme-name').textContent.toLowerCase();
+                  if (themeName.includes(filter)) {
+                      item.style.display = '';
+                  } else {
+                      item.style.display = 'none';
+                  }
+              });
+          });
+      }
+  
+      document.querySelector('.fa-paint-brush').addEventListener('click', function() {
+          document.querySelector('.theme-selector').classList.toggle('show');
+      });
+  });
+</script>
+
+    <!--  Type started (Riya Ahlawat and Samriddhi) -->
   <main>
     <!-- <div id="header">
+
             <div id="info"></div>
             <div id="buttons">
                 <button id="newGameBtn">New game</button>
diff --git a/palette.css b/palette.css
new file mode 100644
index 0000000..9a39fd1
--- /dev/null
+++ b/palette.css
@@ -0,0 +1,202 @@
+/* Color palette by Advika and Pulak */
+.theme-selector {
+    display: flex;
+    left: 35%;
+    top: 0%;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    margin: -20px;
+    padding: 10px;
+    background-color: var(--bg-color, #002b36);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: var(--text-color, #eee);
+    
+}
+
+.theme-selector.container {
+    width: 400px;
+    max-width: 100%;
+    background-color: var(--sub-alt-color, #073642);
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.theme-selector .search-bar {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background-color: var(--sub-alt-color, #073642);
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+.theme-selector .search-bar i {
+    color: var(--text-color,#eee);
+    margin-right: 10px;
+}
+
+.theme-selector .search-bar input {
+    width: 100%;
+    padding: 5px;
+    border: none;
+    background: transparent;
+    color:  var(--text-color, #eee);
+    font-size: 1rem;
+    outline: none;
+}
+
+.theme-selector #theme-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.theme-selector .theme-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: var(--sub-alt-color, #002b36);
+    border-radius: 5px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.theme-selector .theme-name {
+    font-size: 1rem;
+    color:  var(--text-color, #eee);
+}
+
+.theme-selector .color-palette {
+    display: flex;
+}
+
+.theme-selector .color-button {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    margin-left: 5px;
+    cursor: pointer;
+    border: 1px solid var(--sub-alt-color, #073642);
+}
+
+
+/* Color - theme options*/
+
+.theme-bento {
+  --sub-alt-color:#30466d;
+  --bgColor: #2d394d;
+  --textColor: #fffaf8;
+  --black: #ff7a90;
+  --incorrect: #bc42ba;
+  --hover: #4a768d;
+  --correct: #263041;
+  --wrong-highlighted: #fc2032;
+  --neon: #f04040;
+}
+
+.theme-blue-dolphin {
+  --sub-alt-color:#689da3;
+  --bgColor: #003950;
+  --textColor: #82eaff;
+  --black: #ffcefb;
+  --incorrect: #ffbde6;
+  --hover: #00e4ff;
+  --correct: #014961;
+  --wrong-highlighted: #d1a5fd;
+  --neon: #ff8188;
+
+}
+
+.theme-monokai {
+    --sub-alt-color:#717f54;
+    --bgColor: #272822;
+    --black: #a6e22e;
+    --hover: #e6db74;
+    --correct: #1f201b;
+    --textColor: #e2e2dc;
+    --incorrect: #ad637e;
+    --neon: #fd971f;
+    --wrong-highlighted: #f92672;
+  }
+
+.theme-fledling {
+  --bgColor: #3b363f;
+  --black: #fc6e83;
+  --hover: #8e5568;
+  --sub-alt-color: #fc6e83;
+  --textColor: #e6d5d3;
+  --incorrect: #f52443;
+  --neon: #bd001c;
+  --wrong-highlighted: #ff0a2f;
+  --correct: #c5cd54;
+}
+
+.theme-lavender {
+  --sub-alt-color:#a19bb9;
+  --bgColor: #ada6c2;
+  --black: #e4e3e9;
+  --hover: #e4e3e9;
+  --correct: #a19bb9;
+  --textColor: #2f2a41;
+  --incorrect: #ca4754;
+  --neon: #7e2a33;
+  --wrong-highlighted: #ca4754;
+}
+
+nav .textButton {
+  border-radius: 10rem !important;
+  background: var(--text-color);
+  color: var(--main-color);
+}
+
+nav .textButton:hover {
+  color: var(--bg-color);
+  background: var(--text-color);
+}
+
+body.crtmode nav .textButton {
+  box-shadow: 3px 0 1px var(--crt-text-color-glow),
+    -3px 0 var(--crt-text-color-glow), 0 0 3px;
+}
+
+.theme-dark {
+  --bgColor: #111;
+  --black: #eee;
+  --hover: #444;
+  --sub-alt-color: #191919;
+  --correct: #191919;
+  --textColor: #eee;
+  --inncorrect: #da3333;
+  --wrong-highlighted: #da3333;
+  --neon: #791717;
+}
+
+.theme-bushido {
+  --bgColor: #242933;
+  --black: #ec4c56;
+  --hover: #596172;
+  --sub-alt-color: #1c222d;
+  --textColor: #f6f0e9;
+  --incorrect: #ec4c56;
+  --wrong-highlighted: #9b333a;
+  --correct: #ecdc4c;
+  --neon: #bdb03d;
+}
+
+.theme-lime {
+  --bgColor: #7c878e;
+  --black: #93c247;
+  --hover: #4b5257;
+  --sub-alt-color: #737d82;
+  --textColor: #bfcfdc;
+  --incorrect: #ea4221;
+  --wrong-highlighted: #7e2a33;
+  --correct: #ea4221;
+  --neon: #7e2a33;
+}
