diff --git a/pages/skillMatcher.html b/pages/skillMatcher.html
new file mode 100644
index 00000000..7c8192a9
--- /dev/null
+++ b/pages/skillMatcher.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GitHub User Skill Search</title>
+    <style>
+        /* Styles remain the same */
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            background-color: #f6f8fa;
+            color: #24292e;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        h1 {
+            font-size: 24px;
+            font-weight: 600;
+            margin-bottom: 20px;
+        }
+
+        .search-form {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .search-form input {
+            flex: 1;
+            padding: 8px 12px;
+            border: 1px solid #d1d5da;
+            border-radius: 6px;
+            font-size: 14px;
+            margin-right: 10px;
+        }
+
+        .search-form button {
+            padding: 8px 16px;
+            background-color: #2ea44f;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+        }
+
+        .search-form button:hover {
+            background-color: #2c974b;
+        }
+
+        #results {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            grid-gap: 20px;
+        }
+
+        .user-card {
+            background-color: white;
+            border: 1px solid #d1d5da;
+            border-radius: 6px;
+            padding: 16px;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+        }
+
+        .user-card:hover {
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        }
+
+        .user-avatar {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            margin-right: 16px;
+        }
+
+        .user-info h3 {
+            font-size: 16px;
+            font-weight: 600;
+            margin: 0;
+        }
+
+        .user-info p {
+            font-size: 14px;
+            color: #586069;
+            margin: 4px 0 0 0;
+        }
+
+        .user-info .additional-info {
+            font-size: 12px;
+            color: #6a737d;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h1>GitHub User Skill Search</h1>
+        <form id="searchForm" class="search-form">
+            <input type="text" id="skill" placeholder="Enter a skill (e.g., JavaScript)" required>
+            <button type="submit">Search</button>
+        </form>
+        <div id="results"></div>
+    </div>
+
+    <script>
+        document.getElementById("searchForm").addEventListener("submit", async function (event) {
+            event.preventDefault();
+            const skill = document.getElementById("skill").value.trim();
+            if (!skill) {
+                alert("Please enter a skill.");
+                return;
+            }
+            fetchUsersBySkill(skill);
+        });
+
+        async function fetchUsersBySkill(skill) {
+            const resultsContainer = document.getElementById("results");
+            resultsContainer.innerHTML = "<p>Loading...</p>";
+
+            try {
+                const response = await fetch(
+                    `https://api.github.com/search/repositories?q=${skill}+in:description&per_page=10`,
+                    {
+                        headers: {
+                            'Accept': 'application/vnd.github.v3+json'
+                        }
+                    }
+                );
+                const data = await response.json();
+
+                if (data.items && data.items.length > 0) {
+                    resultsContainer.innerHTML = "";
+                    for (const item of data.items) {
+                        const userResponse = await fetch(item.owner.url, {
+                            headers: {
+                                'Accept': 'application/vnd.github.v3+json'
+                            }
+                        });
+                        const userData = await userResponse.json();
+
+                        const userElement = document.createElement("div");
+                        userElement.classList.add("user-card");
+                        userElement.addEventListener("click", () => {
+                            window.open(userData.html_url, "_blank");
+                        });
+
+                        userElement.innerHTML = `
+                            <img src="${userData.avatar_url}" alt="${userData.login}" class="user-avatar">
+                            <div class="user-info">
+                                <h3>${userData.login}</h3>
+                                <p>${item.description || "No description available"}</p>
+                                <div class="additional-info">
+                                    <p>Followers: ${userData.followers}</p>
+                                    <p>Public Repos: ${userData.public_repos}</p>
+                                    <p>GitHub User: ${userData.name || "N/A"}</p>
+                                    <p>Location: ${userData.location || "N/A"}</p>
+                                </div>
+                            </div>
+                        `;
+                        resultsContainer.appendChild(userElement);
+                    }
+                } else {
+                    resultsContainer.innerHTML = "<p>No repositories found with that skill.</p>";
+                }
+            } catch (error) {
+                resultsContainer.innerHTML = "<p>Error fetching data. Please try again later.</p>";
+                console.error("Error fetching users:", error);
+            }
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
