diff --git a/static/script.js b/static/script.js
index d4de221..8dae49c 100644
--- a/static/script.js
+++ b/static/script.js
@@ -206,7 +206,33 @@ if (isIndexPage) {
     syncSuggestionsA11yState();
   }
 
+  // Skills expansion state (shared across multiple function calls)
+  var skillsExpanded = false;
+
+  // Initialize toggle button once (moved outside updateQuickPickState to prevent duplicate listeners)
+  (function initToggleButton() {
+    var toggleBtn = document.getElementById("toggleSkillsBtn");
+    if (toggleBtn) {
+      toggleBtn.addEventListener("click", function () {
+        var hiddenSkills = document.querySelectorAll(".extra-skill");
+
+        for (var i = 0; i < hiddenSkills.length; i++) {
+          hiddenSkills[i].style.display = skillsExpanded
+            ? "none"
+            : "inline-flex";
+        }
+
+        skillsExpanded = !skillsExpanded;
+
+        toggleBtn.textContent = skillsExpanded
+          ? "Show Less"
+          : "Show More";
+      });
+    }
+  })();
+
   function updateQuickPickState() {
+    // Update the quick-pick chip states based on selected skills
     quickPickChips.forEach(function (chip) {
       var isActive = isSkillSelected(chip.getAttribute("data-skill") || "");
       chip.classList.toggle("active", isActive);
diff --git a/static/style.css b/static/style.css
index 3b11ca9..7199065 100644
--- a/static/style.css
+++ b/static/style.css
@@ -986,12 +986,35 @@ label {
   cursor: pointer;
   transition: background var(--t), border-color var(--t), color var(--t);
 }
+.extra-skill {
+  display: none;
+}
+
 .skill-chip:hover, .skill-chip.active {
   background: var(--indigo-700);
   border-color: var(--indigo-700);
   color: var(--white);
+}/* Hide extra skill chips initially */
+
+
+/* Toggle button for extra skills */
+.toggle-skills-btn {
+  margin-top: 12px;
+  background: transparent;
+  border: none;
+  color: var(--indigo-600);
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 4px 0;
+  transition: color var(--t);
 }
 
+.toggle-skills-btn:hover {
+  color: var(--indigo-800);
+}
+
+
 /* Select wrapper with custom chevron */
 .select-wrap { position: relative; }
 .select-wrap::after {
diff --git a/templates/index.html b/templates/index.html
index 05ad04c..ca94952 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -378,25 +378,29 @@ <h2 class="section-title">Find Your Next Project</h2>
             </div>
 
             <!-- Quick-select skill chips -->
-            <div class="skill-chips-row" id="skill-chips-available">
-              <button type="button" class="skill-chip" data-skill="Python">Python</button>
-              <button type="button" class="skill-chip" data-skill="JavaScript">JavaScript</button>
-              <button type="button" class="skill-chip" data-skill="HTML">HTML</button>
-              <button type="button" class="skill-chip" data-skill="CSS">CSS</button>
-              <button type="button" class="skill-chip" data-skill="Flask">Flask</button>
-              <button type="button" class="skill-chip" data-skill="SQL">SQL</button>
-              <button type="button" class="skill-chip" data-skill="React">React</button>
-              <button type="button" class="skill-chip" data-skill="Node.js">Node.js</button>
-              <button type="button" class="skill-chip" data-skill="C++">C++</button>
-              <button type="button" class="skill-chip" data-skill="Java">Java</button>
-              <button type="button" class="skill-chip" data-skill="TypeScript">TypeScript</button>
-              <button type="button" class="skill-chip" data-skill="Go">Go</button>
-              <button type="button" class="skill-chip" data-skill="Rust">Rust</button>
-              <button type="button" class="skill-chip" data-skill="C#">C#</button>
-              <button type="button" class="skill-chip" data-skill="Kotlin">Kotlin</button>
-
-            </div>
+            
+          <div class="skill-chips-row" id="skill-chips-available">
+            <button type="button" class="skill-chip" data-skill="Python">Python</button>
+            <button type="button" class="skill-chip" data-skill="JavaScript">JavaScript</button>
+            <button type="button" class="skill-chip" data-skill="HTML">HTML</button>
+            <button type="button" class="skill-chip" data-skill="CSS">CSS</button>
+            <button type="button" class="skill-chip" data-skill="Flask">Flask</button>
+            <button type="button" class="skill-chip" data-skill="SQL">SQL</button>
+
+            <button type="button" class="skill-chip extra-skill" data-skill="React">React</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="Node.js">Node.js</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="C++">C++</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="Java">Java</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="TypeScript">TypeScript</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="Go">Go</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="Rust">Rust</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="C#">C#</button>
+            <button type="button" class="skill-chip extra-skill" data-skill="Kotlin">Kotlin</button>
+          </div>
 
+          <button type="button" id="toggleSkillsBtn" class="toggle-skills-btn">
+            Show More
+          </button>
             <!-- Level + Interest in a row -->
             <div class="form-row">
               <div class="form-group">