diff --git a/assets/css_files/games.css b/assets/css_files/games.css
index 3b2a19d..12d1ceb 100644
--- a/assets/css_files/games.css
+++ b/assets/css_files/games.css
@@ -236,6 +236,56 @@ main {
   content: '🎯'; /* Word Guess game */
 }
 
+/* Place favorites button to the right */
+.favorites-toggle {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0px 30px -30px 30px;
+  padding: 0;
+  background: none;
+}
+
+#favoritesToggleBtn {
+  padding: 10px 20px;
+  font-size: 16px;
+  background: linear-gradient(to right, #7c3aed, #9333ea);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background 0.3s ease;
+}
+
+#favoritesToggleBtn:hover {
+  background: linear-gradient(to right, #a855f7, #9333ea);
+  box-shadow: 0 6px 16px rgba(137, 39, 228, 0.6);
+  transform: translateY(-2px);
+}
+
+.category-card {
+  position: relative; /* needed for absolute positioning */
+}
+
+.fav-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: none;
+  border: none;
+  font-size: 21px;
+  color: #8966e1 ;
+  cursor: pointer;
+  z-index: 2;
+  transition: transform 0.2s ease;
+}
+
+.fav-btn:hover {
+  transform: scale(1.25);
+}
+
+
 /* Animations */
 @keyframes slideInUp {
   from {
diff --git a/assets/css_files/ml.css b/assets/css_files/ml.css
index 9ccecee..0a79628 100644
--- a/assets/css_files/ml.css
+++ b/assets/css_files/ml.css
@@ -188,6 +188,50 @@ a {
   flex: 1;
 }
 
+.fav-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: none;
+  border: none;
+  font-size: 21px;
+  color: #8966e1 ;
+  cursor: pointer;
+  z-index: 2;
+  transition: transform 0.2s ease;
+}
+
+.fav-btn:hover {
+  transform: scale(1.25);
+}
+
+.favorites-toggle {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0px 30px 70px 30px;
+  padding: 0;
+  background: none;
+}
+
+#favoritesToggleBtn {
+  padding: 10px 20px;
+  font-size: 16px;
+  background: linear-gradient(to right, #7c3aed, #9333ea);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background 0.3s ease;
+}
+
+#favoritesToggleBtn:hover {
+  background: linear-gradient(to right, #a855f7, #9333ea);
+  box-shadow: 0 6px 16px rgba(137, 39, 228, 0.6);
+  transform: translateY(-2px);
+}
+
 /* Tech Stack Tags */
 .tech-stack {
   display: flex;
diff --git a/assets/html_files/games.html b/assets/html_files/games.html
index b7e0a69..a07a992 100644
--- a/assets/html_files/games.html
+++ b/assets/html_files/games.html
@@ -75,15 +75,25 @@
                 <i class="fas fa-arrow-left"></i> Back to Home</a>
         </div>
     </nav>
+
   <header>
     <h1>Games</h1>
   </header>
-  <main class="category-container">
-    <div class="category-card">
-      <h3>Memory Match</h3>
-      <p>A fun card-flipping memory game built with JavaScript.</p>
-      <a href="../../Games/Memory_Match/index.html" class="play-button">Play Now</a>
-      <a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Memory_Match" class="code-button">View Code <i class="fab fa-github"></i></a>
+  <main>
+    <!-- FAVORITES FILTER BUTTON -->
+    <div class="favorites-toggle">
+        <button id="favoritesToggleBtn" onclick="toggleFavorites()">Show Favorites</button>
+    </div>
+    <div class="category-container">
+        <div class="category-card">
+        <h3>Memory Match</h3>
+        <p>A fun card-flipping memory game built with JavaScript.</p>
+        <a href="../../Games/Memory_Match/index.html" class="play-button">Play Now</a>
+        <a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Memory_Match" class="code-button">View Code <i class="fab fa-github"></i></a>
+        <!-- Favorite Button -->
+        <button class="fav-btn" onclick="toggleFavorite(this)">
+        <i class="fa-regular fa-star"></i>
+        </button>
     </div>
    
     <div class="category-card">
@@ -91,6 +101,9 @@ <h3>Snake Game</h3>
       <p>Classic snake game implemented in HTML5 canvas.</p>
       <a href="../../Games/Snake_Game/index.html" class="play-button" target="_blank">Play Now</a>
       <a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Snake_Game" class="code-button">View Code <i class="fab fa-github"></i></a>
+      <button class="fav-btn" onclick="toggleFavorite(this)">
+      <i class="fa-regular fa-star"></i>
+      </button>
     </div>
     
     <div class="category-card">
@@ -98,42 +111,63 @@ <h3>Simon Says Game</h3>
       <p>Test Your Memory and Reflexes in This Classic Command Game!.</p>
       <a href="../../Games/Simon_Says_Game/index.html" class="play-button" target="_blank">Play Now</a>
       <a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Simon_Says_Game" class="code-button">View Code <i class="fab fa-github"></i></a>
+      <button class="fav-btn" onclick="toggleFavorite(this)">
+      <i class="fa-regular fa-star"></i>
+      </button>
     </div>
     <div class="category-card">
       <h3>Reflex Tester</h3>
       <p>Test your reaction time and reflexes with this interactive game.</p>
       <a href="../../Games/Reflex_tester/index.html" class="play-button" target="_blank">Play Now</a>
       <a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Reflex_tester" class="code-button">View Code <i class="fab fa-github"></i></a>
+      <button class="fav-btn" onclick="toggleFavorite(this)">
+      <i class="fa-regular fa-star"></i>
+      </button>
     </div>
     <div class="category-card">
       <h3>Minesweeper</h3>
       <p>Classic minesweeper game with grid-based puzzle solving!.</p>
       <a href="../../Games/Minesweeper/index.html" class="play-button" target="_blank">Play Now</a>
       <a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Minesweeper" class="code-button">View Code <i class="fab fa-github"></i></a>
+      <button class="fav-btn" onclick="toggleFavorite(this)">
+      <i class="fa-regular fa-star"></i>
+      </button>
     </div>
     <div class="category-card">
       <h3>Word Guess Game</h3>
       <p>A Wordle-style 5-letter puzzle game with scoring and clues.</p>
       <a href="../../Games/Word_guess/index.html" class="play-button" target="_blank">Play Now</a>
       <a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/" class="code-button">View Code <i class="fab fa-github"></i></a>
+      <button class="fav-btn" onclick="toggleFavorite(this)">
+      <i class="fa-regular fa-star"></i>
+      </button>
     </div>
     <div class="category-card">
       <h3>Candy Crush</h3>
       <p>Match colorful candies in this addictive puzzle game with special combinations and power-ups!</p>
       <a href="../../Games/Candy_Crush/index.html" class="play-button" target="_blank">Play Now</a>
       <a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Candy_Crush" class="code-button">View Code <i class="fab fa-github"></i></a>
+      <button class="fav-btn" onclick="toggleFavorite(this)">
+      <i class="fa-regular fa-star"></i>
+      </button>
     </div>
     <div class="category-card">
         <h3>Typing Speed Game</h3>
         <p>Test your typing speed in a fun and interactive way!</p>
         <a href="../../Games/Typing_Speed_Test/index.html" class="play-button" target="_blank">Play Now</a>
         <a href=" " class="code-button">View Code <i class="fab fa-github"></i></a> <!-- Link to be updated -->
-      </div>
+        <button class="fav-btn" onclick="toggleFavorite(this)">
+        <i class="fa-regular fa-star"></i>
+        </button>
+    </div>
       <div class="category-card">
         <h3>CSS Math Duel</h3>
         <p>Two-player speed math race with beautiful animations and competitive gameplay!</p>
         <a href="../../Games/CSS_Math_Duel/index.html" class="play-button" target="_blank">Play Now</a>
         <a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/CSS_Math_Duel" class="code-button">View Code <i class="fab fa-github"></i></a>
+        <button class="fav-btn" onclick="toggleFavorite(this)">
+        <i class="fa-regular fa-star"></i>
+        </button>
       </div>
     <div class="category-card">
         <h3>Lights Out Puzzle</h3>
diff --git a/assets/html_files/miscellaneous.html b/assets/html_files/miscellaneous.html
index 5792f4f..c62e1c3 100644
--- a/assets/html_files/miscellaneous.html
+++ b/assets/html_files/miscellaneous.html
@@ -54,6 +54,10 @@ <h1>Miscellaneous Projects</h1>
   </header>
 
   <main class=".webfolio-main">
+    <!-- FAVORITES FILTER BUTTON -->
+    <div class="favorites-toggle">
+      <button id="favoritesToggleBtn" onclick="toggleFavoritesView()">Show Favorites</button>
+    </div>
     <div class="category-container">
 
       <div class="category-card">
@@ -62,11 +66,81 @@ <h3>Face Recognition Login System</h3>
           learning basic computer vision and authentication.</p>
         <a href="https://github.com/pavitraag/Project-Vault/tree/main/Miscellaneous/face-recognition-login"
           class="view-button">View Code</a><br>
+        <button class="fav-btn" onclick="toggleFavorite(this)">
+          <i class="fa-regular fa-star"></i>
+        </button>
       </div>
     </div>
   </main>
 
   <div id="footer-placeholder"></div>
+  <script>
+  function toggleFavorite(btn) {
+    const card = btn.closest('.category-card');
+    const title = card.querySelector('h3').innerText;
+    const icon = btn.querySelector('i');
+    const pageKey = window.location.pathname.split("/").pop().replace(".html", "");
+    const storageKey = `favorites-${pageKey}`;
+    const favorites = JSON.parse(localStorage.getItem(storageKey)) || [];
+
+    card.classList.toggle('favorited');
+    const isFav = card.classList.contains('favorited');
+
+    icon.classList.toggle('fa-regular', !isFav);
+    icon.classList.toggle('fa-solid', isFav);
+
+    if (isFav) {
+      if (!favorites.includes(title)) favorites.push(title);
+    } else {
+      const index = favorites.indexOf(title);
+      if (index !== -1) favorites.splice(index, 1);
+    }
+
+    localStorage.setItem(storageKey, JSON.stringify(favorites));
+  }
+
+  function loadFavorites() {
+    const pageKey = window.location.pathname.split("/").pop().replace(".html", "");
+    const storageKey = `favorites-${pageKey}`;
+    const favorites = JSON.parse(localStorage.getItem(storageKey)) || [];
+
+    document.querySelectorAll('.category-card').forEach(card => {
+      const title = card.querySelector('h3').innerText;
+      const icon = card.querySelector('.fav-btn i');
+      if (favorites.includes(title)) {
+        card.classList.add('favorited');
+        icon.classList.remove('fa-regular');
+        icon.classList.add('fa-solid');
+      }
+    });
+  }
+
+  function toggleFavoritesView() {
+    const btn = document.getElementById('favoritesToggleBtn');
+    const showOnlyFavorites = btn.classList.toggle('showing');
+    const pageKey = window.location.pathname.split("/").pop().replace(".html", "");
+    const storageKey = `favorites-${pageKey}`;
+    const favorites = JSON.parse(localStorage.getItem(storageKey)) || [];
+
+    document.querySelectorAll('.category-card').forEach(card => {
+      const title = card.querySelector('h3').innerText;
+      card.style.display = (showOnlyFavorites && !favorites.includes(title)) ? 'none' : 'block';
+    });
+
+    btn.innerText = showOnlyFavorites ? 'Show All' : 'Show Favorites';
+  }
+
+  window.addEventListener('DOMContentLoaded', loadFavorites);
+</script>
+
+  <script>
+  fetch("/footer.html")
+    .then(response => response.text())
+    .then(data => {
+      document.getElementById("footer-placeholder").innerHTML = data;
+    });
+</script>
+
   <script>
     fetch("../../footer.html")
       .then(response => response.text())
diff --git a/assets/html_files/ml.html b/assets/html_files/ml.html
index 73c33b2..afbb136 100644
--- a/assets/html_files/ml.html
+++ b/assets/html_files/ml.html
@@ -12,8 +12,8 @@
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
   />
-  <link rel="stylesheet" href="../css_files/ml.css" />
   <link rel="stylesheet" href="../../style.css">
+  <link rel="stylesheet" href="../css_files/ml.css" />
 
   <title>Websites - Project Vault</title>
   <link rel="stylesheet" href="/Project-Vault/style.css" />
@@ -90,6 +90,9 @@ <h1> ML Projects</h1>
   </header>
 
   <main class="ml-main">
+    <div class="favorites-toggle">
+    <button id="favoritesToggleBtn" onclick="toggleFavorites()">Show Favorites</button>
+    </div>
     <div class="projects-container">
       <div class="project-card fade-in" style="animation-delay: 0.1s">
         <div class="project-icon">
@@ -98,6 +101,10 @@ <h1> ML Projects</h1>
         <div class="project-content">
           <h3>Restaurant Recommender</h3>
           <p>ML-based recommendation system using KNN and clustering algorithms to suggest restaurants based on user preferences and dining history.</p>
+          <!-- Favorite Button -->
+          <button class="fav-btn" onclick="toggleFavorite(this)">
+          <i class="fa-regular fa-star"></i>
+          </button>
           <div class="tech-stack">
             <span class="tech-tag">Python</span>
             <span class="tech-tag">KNN</span>
@@ -117,6 +124,9 @@ <h3>Restaurant Recommender</h3>
         <div class="project-content">
           <h3>Anemia Prediction</h3>
           <p>Machine learning model that predicts anemia risk based on various health parameters and blood test results.</p>
+          <button class="fav-btn" onclick="toggleFavorite(this)">
+          <i class="fa-regular fa-star"></i>
+          </button>
           <div class="tech-stack">
             <span class="tech-tag">Python</span>
             <span class="tech-tag">Classification</span>
@@ -136,6 +146,9 @@ <h3>Anemia Prediction</h3>
         <div class="project-content">
           <h3>Fake News Classifier</h3>
           <p>Machine learning model that predicts whether a given news article is real or fake based on its textual content.</p>
+          <button class="fav-btn" onclick="toggleFavorite(this)">
+          <i class="fa-regular fa-star"></i>
+          </button>
           <div class="tech-stack">
             <span class="tech-tag">Python</span>
             <span class="tech-tag">Classification</span>
@@ -146,6 +159,16 @@ <h3>Fake News Classifier</h3>
           </a>
         </div>
       </div>
+ 
+
+
+    <div class="category-card">
+      <h3>Anemia Prediction</h3>
+      <p>Predicts Anemia</p>
+      <button class="fav-btn" onclick="toggleFavorite(this)">
+      <i class="fa-regular fa-star"></i>
+      </button>
+      <a href="https://github.com/VEERESH069/Project-Vault/blob/prediction_pipeline_feature_add/ML/Anemia_prediction/anemia_prediction_pipeline.ipynb"  class = "play-button" target="_blank">View Code</a>
 
       <div class="project-card fade-in" style="animation-delay: 0.2s">
         <div class="project-icon">
@@ -166,6 +189,7 @@ <h3>Loan Approval Predictor</h3>
         </div>
       </div>
 
+
       <div class="project-card fade-in" style="animation-delay: 0.2s">
         <div class="project-icon">
           <i class="fa-solid fa-battery-quarter"></i>
@@ -185,6 +209,25 @@ <h3>Student Burnout Detector</h3>
         </div>
       </div>
 
+
+   <div class="category-card">
+    <h3>Loan Approval Predictor</h3>
+    <p>Predicts whether a loan will be approved based on applicant data</p>
+    <button class="fav-btn" onclick="toggleFavorite(this)">
+    <i class="fa-regular fa-star"></i>
+    </button>
+    <a href="https://github.com/roshni866/Project-Vault/blob/loan-approval-section/ML/Loan_approval_predictor/loan_predictions.ipynb" class="play-button" target="_blank">View Code</a>
+  </div>
+  <div class="category-card">
+    <h3>Student Burnout Detector</h3>
+    <p>Predicts student burnout based on various factors</p>
+    <button class="fav-btn" onclick="toggleFavorite(this)">
+    <i class="fa-regular fa-star"></i>
+    </button>
+    <a href="https://github.com/roshni866/Project-Vault/blob/student_burnout/ML/Student_burnout_detector/predict.ipynb" class="play-button" target="_blank">View Code</a>
+  </div>
+    <!-- Add more project cards -->
+
       <!-- Add more project cards -->
 
 
diff --git a/assets/html_files/respwebsites.html b/assets/html_files/respwebsites.html
index 86378fa..5f5c0e8 100644
--- a/assets/html_files/respwebsites.html
+++ b/assets/html_files/respwebsites.html
@@ -3,6 +3,10 @@
 <head>
   <meta charset="UTF-8" />
   <title>Websites - Project Vault</title>
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+  />
   <link rel="stylesheet" href="/style.css" />
 </head>
 <body>
@@ -10,22 +14,36 @@
     <h1>🌐Interactive Websites</h1>
     <a href="website.html" class="back-button">← Back to Home</a>
   </header>
-  <main class="category-container">
-    <div class="category-card">
-      <h3>NetFlix</h3>
-      <p>Website offering movies.</p>
-      <a href="../../website/Netflix/index.html" class="play-button">View Project</a>
-      <a href="https://github.com/pavitraag/Project-Vault/tree/main/website/Static_Websites/NetFlix" class="play-button">View Code <i class="fab fa-github"></i></a>
-    </div>
-    <div class="category-card">
-      <h3>Portfolio Prototype</h3>
-      <p>A Responsive portfolio prototype for developers to bring out their skills and work.</p>
-      <a href="../../website/Responsive_Websites/Portfolio/index.html" class="play-button">View Project</a>
+  <main>
+     <!-- FAVORITES FILTER BUTTON -->
+    <div class="favorites-toggle">
+        <button id="favoritesToggleBtn" onclick="toggleFavoritesView()">Show Favorites</button>
     </div>
+    <div class="category-container">
+      <div class="category-card">
+        <h3>NetFlix</h3>
+        <p>Website offering movies.</p>
+        <a href="../../website/Netflix/index.html" class="play-button">View Project</a>
+        <a href="https://github.com/pavitraag/Project-Vault/tree/main/website/Static_Websites/NetFlix" class="play-button">View Code <i class="fab fa-github"></i></a>
+        <button class="fav-btn" onclick="toggleFavorite(this)">
+          <i class="fa-regular fa-star"></i>
+        </button>
+      </div>
+      <div class="category-card">
+        <h3>Portfolio Prototype</h3>
+        <p>A Responsive portfolio prototype for developers to bring out their skills and work.</p>
+        <a href="../../website/Responsive_Websites/Portfolio/index.html" class="play-button">View Project</a>
+        <button class="fav-btn" onclick="toggleFavorite(this)">
+          <i class="fa-regular fa-star"></i>
+        </button>
+      </div>
       <div class="category-card">
         <h3>Too-Doo App</h3>
         <p>a feature-packed, intuitive, and beautifully designed Task & Notes Manager 🗂️✨. With a live body background 🌟, smart reminders ⏰📍, offline support 📶, haptic feedback 📳, and a digital clock ⏳, this app helps you organize your life efficiently! Built with Progressive Web App (PWA) capabilities, it works seamlessly offline & online.</p>
         <a href="https://github.com/pavitraag/Project-Vault/tree/main/website/Responsive_Websites/To-Do App/index.html" class="play-button">View Project</a>
+        <button class="fav-btn" onclick="toggleFavorite(this)">
+          <i class="fa-regular fa-star"></i>
+        </button>
       </div>
 
     <!-- Blogging website code-->
@@ -57,6 +75,7 @@ <h3>Shopify</h3>
 
     <!-- Add more project cards -->
   </main>
+
   <script>
   fetch("/footer.html")
     .then(response => response.text())
@@ -81,5 +100,6 @@ <h3>Shopify</h3>
           });
       }
 </script>
+<script src="../js_files/favorite.js"></script>
 </body>
 </html>
diff --git a/assets/html_files/staticwebsites.html b/assets/html_files/staticwebsites.html
index c2abd03..58f2f07 100644
--- a/assets/html_files/staticwebsites.html
+++ b/assets/html_files/staticwebsites.html
@@ -3,6 +3,11 @@
 <head>
   <meta charset="UTF-8" />
   <title>Websites - Project Vault</title>
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+  />
+  <link rel="stylesheet" href="/style.css" />
   <link rel="stylesheet" href="../../style.css" />
 </head>
 <body>
@@ -10,18 +15,30 @@
     <h1>🌐Static Websites</h1>
     <a href="website.html" class="back-button">← Back to Home</a>
   </header>
-  <main class="category-container">
-    <div class="category-card">
-      <h3>NetFlix</h3>
-      <p>Website offering movies.</p>
-      <a href="../../website/Static_Websites/Netflix/index.html" class="play-button">View Project</a>
-      <a href="https://github.com/pavitraag/Project-Vault/tree/main/website/Static_Websites/NetFlix" class="play-button">View Code <i class="fab fa-github"></i></a>
+  <main>
+    <!-- FAVORITES FILTER BUTTON -->
+    <div class="favorites-toggle">
+      <button id="favoritesToggleBtn" onclick="toggleFavoritesView()">Show Favorites</button>
     </div>
+    <div class="category-container">
+      <div class="category-card">
+        <h3>NetFlix</h3>
+        <p>Website offering movies.</p>
+        <a href="../../website/Static_Websites/Netflix/index.html" class="play-button">View Project</a>
+        <a href="https://github.com/pavitraag/Project-Vault/tree/main/website/Static_Websites/NetFlix" class="play-button">View Code <i class="fab fa-github"></i></a>
+        <button class="fav-btn" onclick="toggleFavorite(this)">
+        <i class="fa-regular fa-star"></i>
+        </button>
+      </div>
+
     <div class="category-card">
       <h3>3D_Rotate_Tube</h3>
       <p>Website offering movies.</p>
       <a href="../../website/Static_Websites/3D_Rotate_Tube/index.html" class="play-button">View Project</a>
       <a href="https://github.com/pavitraag/Project-Vault/tree/main/website/Static_Websites/3D_Rotate_Tube" class="play-button">View Code <i class="fab fa-github"></i></a>
+      <button class="fav-btn" onclick="toggleFavorite(this)">
+      <i class="fa-regular fa-star"></i>
+      </button>
     </div>
   
     <!-- Add more project cards -->
@@ -29,12 +46,18 @@ <h3>3D_Rotate_Tube</h3>
       <h3>Amazon</h3>
       <p>Website for Online shopping.</p>
       <a href="../../website/Static_Websites/Amazon/index.html" class="play-button">View Project</a>
+      <button class="fav-btn" onclick="toggleFavorite(this)">
+      <i class="fa-regular fa-star"></i>
+      </button>
     </div>
     <div class="category-card">
   <h3>HostWise</h3>
   <p>Website for Rentals></p>
   <a href="../../website/Static_Websites/hostwise-site/index.html" class="play-button" target="_blank">🌐 View Project</a>
   <a href="https://github.com/abinayagoudjandhyala/Project-Vault/tree/add-hostwise-site/website/Static_Websites/hostwise-site" class="play-button" target="_blank">💻 View Code</a>
+  <button class="fav-btn" onclick="toggleFavorite(this)">
+    <i class="fa-regular fa-star"></i>
+  </button>
 </div>
     <div class="category-card">
       <h3>SunNotScreen</h3>
@@ -49,6 +72,8 @@ <h3>KeyBlaze</h3>
 
   </main>
   <div id="footer-placeholder"></div>
+
+<script src="../js_files/favorite.js"></script>
 <script>  fetch("../../footer.html")
     .then(response => response.text())
     .then(data => {
diff --git a/assets/js_files/favorite.js b/assets/js_files/favorite.js
new file mode 100644
index 0000000..5320349
--- /dev/null
+++ b/assets/js_files/favorite.js
@@ -0,0 +1,56 @@
+function toggleFavorite(btn) {
+  const card = btn.closest('.project-card') || btn.closest('.category-card');
+  const title = card.querySelector('h3').innerText;
+  const icon = btn.querySelector('i');
+  const pageKey = window.location.pathname.split("/").pop().replace(".html", "");
+  const storageKey = `favorites-${pageKey}`;
+  const favorites = JSON.parse(localStorage.getItem(storageKey)) || [];
+
+  card.classList.toggle('favorited');
+  const isFav = card.classList.contains('favorited');
+
+  icon.classList.toggle('fa-regular', !isFav);
+  icon.classList.toggle('fa-solid', isFav);
+
+  if (isFav) {
+    if (!favorites.includes(title)) favorites.push(title);
+  } else {
+    const index = favorites.indexOf(title);
+    if (index !== -1) favorites.splice(index, 1);
+  }
+
+  localStorage.setItem(storageKey, JSON.stringify(favorites));
+}
+
+function loadFavorites() {
+  const pageKey = window.location.pathname.split("/").pop().replace(".html", "");
+  const storageKey = `favorites-${pageKey}`;
+  const favorites = JSON.parse(localStorage.getItem(storageKey)) || [];
+
+  document.querySelectorAll('.project-card, .category-card').forEach(card => {
+    const title = card.querySelector('h3').innerText;
+    const icon = card.querySelector('.fav-btn i');
+    if (favorites.includes(title)) {
+      card.classList.add('favorited');
+      icon.classList.remove('fa-regular');
+      icon.classList.add('fa-solid');
+    }
+  });
+}
+
+function toggleFavoritesView() {
+  const btn = document.getElementById('favoritesToggleBtn');
+  const showOnlyFavorites = btn.classList.toggle('showing');
+  const pageKey = window.location.pathname.split("/").pop().replace(".html", "");
+  const storageKey = `favorites-${pageKey}`;
+  const favorites = JSON.parse(localStorage.getItem(storageKey)) || [];
+
+  document.querySelectorAll('.project-card, .category-card').forEach(card => {
+    const title = card.querySelector('h3').innerText;
+    card.style.display = (showOnlyFavorites && !favorites.includes(title)) ? 'none' : 'block';
+  });
+
+  btn.innerText = showOnlyFavorites ? 'Show All' : 'Show Favorites';
+}
+
+window.addEventListener('DOMContentLoaded', loadFavorites);
diff --git a/assets/js_files/games.js b/assets/js_files/games.js
index dc8c4dd..83b3aa9 100644
--- a/assets/js_files/games.js
+++ b/assets/js_files/games.js
@@ -255,3 +255,49 @@ const handleResize = debounce(() => {
 }, 250);
 
 window.addEventListener("resize", handleResize);
+
+
+document.addEventListener("DOMContentLoaded", () => {
+  const favoriteButtons = document.querySelectorAll(".fav-btn");
+  const favoritesToggleBtn = document.getElementById("favoritesToggleBtn");
+
+  // ⭐ Toggle star icon on each card
+  favoriteButtons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      btn.classList.toggle("favorited");
+
+      const icon = btn.querySelector("i");
+      icon.classList.toggle("fa-regular");
+      icon.classList.toggle("fa-solid");
+
+      // Optional: Make the star gold if favorited
+      if (btn.classList.contains("favorited")) {
+        icon.style.color = "light purple";
+      } else {
+        icon.style.color = "inherit";
+      }
+    });
+  });
+
+  // 🔄 Show Favorites / Show All toggle
+  favoritesToggleBtn.addEventListener("click", () => {
+    const isFiltering = favoritesToggleBtn.innerText === "Show All";
+    const allCards = document.querySelectorAll(".category-card");
+
+    allCards.forEach((card) => {
+      const starBtn = card.querySelector(".fav-btn");
+      const isFavorited = starBtn && starBtn.classList.contains("favorited");
+
+      if (isFiltering) {
+        // Show all cards
+        card.style.display = "block";
+      } else {
+        // Show only favorited cards
+        card.style.display = isFavorited ? "block" : "none";
+      }
+    });
+
+    // Toggle button text
+    favoritesToggleBtn.innerText = isFiltering ? "Show Favorites" : "Show All";
+  });
+});
diff --git a/assets/js_files/ml.js b/assets/js_files/ml.js
index c4ab74a..53a5334 100644
--- a/assets/js_files/ml.js
+++ b/assets/js_files/ml.js
@@ -95,3 +95,96 @@ function updateProjectStats() {
     `ML Projects Dashboard: ${totalProjects} projects using ${uniqueTechnologies.size} technologies`
   );
 }
+
+let favoriteProjects = JSON.parse(localStorage.getItem("favorites")) || [];
+let showingFavorites = false; // flag for toggle
+
+function toggleFavorite(btn) {
+  const card = btn.closest(".category-card");
+  const projectName = card.querySelector("h3").innerText;
+  const icon = btn.querySelector("i");
+
+  if (favoriteProjects.includes(projectName)) {
+    favoriteProjects = favoriteProjects.filter(p => p !== projectName);
+    icon.classList.remove("fa-solid");
+    icon.classList.add("fa-regular");
+  } else {
+    favoriteProjects.push(projectName);
+    icon.classList.remove("fa-regular");
+    icon.classList.add("fa-solid");
+  }
+
+  localStorage.setItem("favorites", JSON.stringify(favoriteProjects));
+}
+
+function toggleFavorites() {
+  const cards = document.querySelectorAll(".category-card");
+  const btn = document.getElementById("favoritesToggleBtn");
+
+  if (!showingFavorites) {
+    // Show only favorites
+    cards.forEach(card => {
+      const title = card.querySelector("h3")?.innerText;
+      if (!favoriteProjects.includes(title)) {
+        card.style.display = "none";
+      } else {
+        card.style.display = "block";
+      }
+    });
+    btn.innerText = "Show All";
+    showingFavorites = true;
+  } else {
+    // Show all projects
+    cards.forEach(card => {
+      card.style.display = "block";
+    });
+    btn.innerText = "Show Favorites";
+    showingFavorites = false;
+  }
+}
+
+// Highlight stars on reload
+window.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".category-card").forEach(card => {
+    const title = card.querySelector("h3")?.innerText;
+    const icon = card.querySelector(".fav-btn i");
+    if (title && favoriteProjects.includes(title) && icon) {
+      icon.classList.remove("fa-regular");
+      icon.classList.add("fa-solid");
+    }
+  });
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+  const favoriteButtons = document.querySelectorAll(".fav-btn");
+  const favoritesToggleBtn = document.getElementById("favoritesToggleBtn");
+
+  // Toggle single card's favorite state
+  favoriteButtons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const icon = btn.querySelector("i");
+      icon.classList.toggle("fa-solid");
+      icon.classList.toggle("fa-regular");
+      icon.style.color = icon.classList.contains("fa-solid") ? "light purple" : "inherit";
+    });
+  });
+  
+  // Toggle Show Favorites / Show All
+  favoritesToggleBtn.addEventListener("click", () => {
+    const isFiltering = favoritesToggleBtn.innerText === "Show Favorites";
+
+    // Get all types of cards
+    const allCards = document.querySelectorAll(".project-card, .category-card");
+
+    allCards.forEach((card) => {
+      const btn = card.querySelector(".fav-btn");
+      const icon = btn?.querySelector("i");
+      const isFavorited = icon && icon.classList.contains("fa-solid");
+
+      // Show only favorited if filtering, else show all
+      card.style.display = (isFiltering && !isFavorited) ? "none" : "block";
+    });
+
+    favoritesToggleBtn.innerText = isFiltering ? "Show All" : "Show Favorites";
+  });
+});
diff --git a/style.css b/style.css
index 8c67798..5ed1852 100644
--- a/style.css
+++ b/style.css
@@ -441,6 +441,67 @@ header h1 {
   background: #e73370;
 }
 
+/* Favorite Star Button */
+.fav-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 21px;
+  color: #8966e1;
+  transition: color 0.2s ease;
+}
+
+.fav-btn:hover {
+  transform: scale(1.25);
+}
+
+.category-card {
+  position: relative;
+  padding: 20px;
+  margin: 15px 0;
+  border: 1px solid #ddd;
+  border-radius: 12px;
+  background-color: #fff;
+}
+
+/* When favorited */
+.category-card.favorited .fav-btn i {
+  color:#8966e1;
+}
+
+/* Toggle Button Style */
+.favorites-toggle {
+  text-align: center;
+  display: flex;
+  justify-content: flex-end;
+  margin: 60px 60px 0px 30px;
+  padding: 0;
+  background: none;
+}
+
+#favoritesToggleBtn {
+  padding: 10px 20px;
+  font-size: 16px;
+  background: linear-gradient(to right, #7c3aed, #9333ea);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background 0.3s ease;
+}
+
+#favoritesToggleBtn:hover {
+  background: linear-gradient(to right, #a855f7, #9333ea);
+  box-shadow: 0 6px 16px rgba(137, 39, 228, 0.6);
+  transform: translateY(-2px); 
+}
+
+
 /* ========== FOOTER ========== */
 footer {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);