diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 0000000..0a478e8
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,244 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --black: #000000;
+    --white: #ffffff;
+    --dark-grey: #1a1a1a;
+    --light-grey: #333333;
+    --blue: #007bff;
+    --green: #28a745;
+    --yellow: #ffb224;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--black);
+    color: var(--white);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.header {
+    background-color: var(--light-grey);
+    padding: 2rem 0;
+    text-align: center;
+}
+
+h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+}
+
+.content {
+    padding: 2rem 0;
+}
+
+.search-sort {
+    margin-bottom: 2rem;
+}
+
+.content__sort-by {
+    font-size: 1.1rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.filter-and-search {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+}
+
+#searchInput {
+    width: 100%;
+    max-width: 400px;
+    padding: 0.75rem 1rem;
+    border: none;
+    border-radius: 24px;
+    font-size: 1rem;
+    background-color: var(--light-grey);
+    color: var(--white);
+    transition: background-color 0.3s ease;
+}
+
+#searchInput:focus {
+    outline: none;
+    background-color: var(--dark-grey);
+}
+
+.buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.buttons button {
+    background-color: var(--light-grey);
+    color: var(--white);
+    border: none;
+    border-radius: 24px;
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.1s ease;
+}
+
+.buttons button:hover,
+.buttons button.active {
+    background-color: var(--blue);
+    transform: translateY(-2px);
+}
+
+.buttons button .badge {
+    background-color: var(--white);
+    color: var(--black);
+    border-radius: 12px;
+    padding: 2px 8px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-left: 0.5rem;
+}
+
+.volunteers {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1.5rem;
+}
+
+.card {
+    background-color: var(--dark-grey);
+    border-radius: 15px;
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.card__name {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+}
+
+.card-status {
+    font-size: 0.9rem;
+    font-weight: 500;
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    display: inline-block;
+    margin-bottom: 1rem;
+}
+
+.card-status.medical { background-color: var(--blue); }
+.card-status.legal { background-color: var(--green); }
+.card-status.other { background-color: var(--yellow); color: var(--black); }
+
+.card__profession,
+.card__contact,
+.card__location,
+.card__twitter {
+    font-size: 0.9rem;
+    margin-bottom: 0.75rem;
+}
+
+#loading {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid var(--light-grey);
+    border-top: 5px solid var(--white);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@media screen and (min-width: 768px) {
+    .filter-and-search {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    #searchInput {
+        max-width: 300px;
+    }
+
+    .buttons {
+        margin-top: 0;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .volunteers {
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    }
+}
+
+@media screen and (min-width: 1440px) {
+    .container {
+        max-width: 1400px;
+    }
+
+    .volunteers {
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    }
+}
+
+@media (max-width: 767px) {
+    h1 {
+        font-size: 2rem;
+    }
+
+    .buttons button {
+        font-size: 0.9rem;
+        padding: 0.6rem 1rem;
+    }
+
+    .card {
+        padding: 1.5rem;
+    }
+
+    .card__name {
+        font-size: 1.1rem;
+    }
+
+    .card-status,
+    .card__profession,
+    .card__contact,
+    .card__location,
+    .card__twitter {
+        font-size: 0.85rem;
+    }
+}
diff --git a/src/css/styles.css b/src/css/styles.css
deleted file mode 100644
index 488c032..0000000
--- a/src/css/styles.css
+++ /dev/null
@@ -1,399 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700;900&display=swap");
-
-:root {
-    --red: #cb2929;
-    --blue: #007bff;
-    --green: #28a745;
-    --lightergrey: #444;
-    --lightgrey: #333;
-    --white: #fff;
-    --black: #000000;
-    --yellow: #ffb224;
-    --purple: #8e4ec6;
-    --darkred: #800000;
-    --card-bg: #0a0a0a;
-    --card-hover-bg: #1a1a1a;
-}
-
-body, html {
-    margin: 0;
-    padding: 0;
-    font-family: 'Rubik', Arial, sans-serif;
-    background-color: var(--black);
-    color: var(--white);
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-a {
-    color: var(--white);
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-a:hover {
-    color: var(--purple);
-}
-
-button {
-    cursor: pointer;
-    color: var(--white);
-    transition: background-color 0.3s ease, transform 0.1s ease;
-}
-
-button:hover {
-    transform: translateY(-2px);
-}
-
-.header {
-    background-color: var(--lightgrey);
-    padding: 2rem;
-    text-align: center;
-}
-
-.header h1 {
-    margin: 0;
-    font-size: 2.5rem;
-    font-weight: 700;
-}
-
-.header h2 {
-    font-size: 1.3rem;
-    font-weight: 400;
-}
-
-.filters {
-    max-width: 1400px;
-    width: 95%;
-    margin: 2rem auto 0 auto;
-    padding: 1rem 0;
-}
-
-.search-input {
-	margin: 20px;
-	border-radius: 24px;
-}
-
-.content {
-    flex-grow: 1;
-    max-width: 1400px;
-    width: 95%;
-    margin: 2rem auto;
-    padding: 1rem 0;
-}
-
-.search-sort {
-	display: flex;
-	flex-flow: row nowrap;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.search-sort input {
-    margin: 1rem 0;
-    font-size: 0.9rem;
-    padding: 0.6rem 1rem;
-}
-
-.filter-and-search {
-    flex:2;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    /* margin-bottom: 2rem; */
-}
-
-.filter-and-search input {
-    flex: 1;
-    min-width: 250px;
-    padding: 0.75rem;
-    border-radius: 24px;
-    border: none;
-    font-size: 1rem;
-}
-
-.content__buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-.content__buttons button {
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    border-radius: 24px;
-    border: none;
-    background-color: var(--lightergrey);
-    color: var(--white);
-    transition: background-color 0.3s ease, transform 0.1s ease;
-}
-
-.content__buttons button.active {
-    background-color: var(--blue);
-}
-
-.content__buttons button:hover {
-    background-color: var(--blue);
-    transform: translateY(-2px);
-}
-
-.content__buttons button .badge {
-    background-color: #fff;
-    border-radius: 12px;
-    color: var(--black);
-    padding: 2px 8px;
-    margin-left: 10px;
-    font-size: 12px;
-    font-weight: bold;
-    display: inline-block;
-}
-
-.persons {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 1.5rem;
-    justify-content: center;
-}
-
-.card {
-    background-color: var(--card-bg);
-    border-radius: 15px;
-    padding: 1.25rem;
-    text-align: center;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: background-color 0.3s ease, box-shadow 0.3s ease;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.card:hover {
-    background-color: var(--card-hover-bg);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-}
-
-.card-img {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    margin: 0 auto 1rem;
-    object-fit: cover;
-    border: 2px solid var(--white);
-}
-
-.card__name {
-    font-size: 1.2rem;
-    margin-bottom: 0.6rem;
-    font-weight: 700;
-}
-
-.card-status {
-    font-size: 0.8rem;
-    margin-bottom: 1rem;
-    color: var(--white);
-    background-color: var(--purple);
-    display: inline-block;
-    border-radius: 12px;
-    padding: 0.3rem 1rem;
-}
-
-.card-status.remanded { background-color: var(--yellow); color: var(--black); }
-.card-status.fallen { background-color: var(--red); }
-.card-status.missing { background-color: var(--blue); }
-.card-status.released { background-color: var(--green); }
-
-.card__info {
-    margin-bottom: 1rem;
-}
-
-.card__office, .locations, .card__gender {
-    margin-bottom: 0.6rem;
-    font-size: 0.9rem;
-}
-
-.card__twitter {
-    font-size: 0.9rem;
-    margin-bottom: 1rem;
-    word-break: break-all;
-}
-
-.card__currently {
-    font-size: 0.9rem;
-	margin-bottom: 0.6rem;
-    margin-bottom: 1rem;
-    font-weight: 500;
-}
-
-.card__currently-status {
-    font-weight: normal;
-    display: block;
-    margin-top: 0.3rem;
-}
-
-.share-button {
-    background-color: var(--blue);
-    border: none;
-    color: var(--white);
-    padding: 0.7rem;
-    cursor: pointer;
-    border-radius: 20px;
-    width: 100%;
-    font-size: 0.9rem;
-    transition: background-color 0.3s ease;
-    margin-top: auto;
-}
-
-.share-button:hover {
-    background-color: #0056b3;
-}
-
-.footer {
-    background-color: var(--lightgrey);
-    padding: 2rem;
-    color: var(--white);
-}
-
-.footer-content {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-}
-
-.footer-nav {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 0.5rem;
-}
-
-.footer a {
-    color: var(--white);
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-.footer a:hover {
-    color: var(--blue);
-}
-
-.copyright, .current-time {
-    margin: 0;
-    text-align: center;
-    font-size: 0.9rem;
-}
-
-.current-time {
-    font-weight: 500;
-	margin-top: 1rem;
-    color: var(--white);
-}
-
-@media screen and (max-width: 480px) {
-    .footer-nav {
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    .copyright, .current-time {
-        font-size: 0.8rem;
-    }
-}
-
-.hashtag {
-    font-size: 1.25rem;
-    margin: 1rem 0;
-    font-weight: 700;
-}
-
-.rights {
-    font-size: 0.9rem;
-    opacity: 0.8;
-}
-
-@media screen and (max-width: 1400px) {
-    .persons {
-        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    }
-}
-
-@media screen and (max-width: 1200px) {
-    .persons {
-        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    }
-}
-
-@media screen and (max-width: 1080px) {
-
-	.search-sort {
-		display: flex;
-		flex-flow: column;
-	}
-}
-
-@media screen and (max-width: 768px) {
-
-    .persons {
-        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    }
-
-    .header h1 {
-        font-size: 2rem;
-    }
-}
-
-@media screen and (max-width: 480px) {
-    .persons {
-        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-    }
-
-    .card {
-        padding: 1rem;
-    }
-
-    .card-img {
-        width: 80px;
-        height: 80px;
-    }
-
-    .card__name {
-        font-size: 1rem;
-    }
-
-    .card-status, .card__office, .locations, .card__gender, .card__twitter, .card__currently, .share-button {
-        font-size: 0.8rem;
-    }
-
-    .search-sort input,
-    .content__buttons button {
-        font-size: 0.9rem;
-        padding: 0.6rem 1rem;
-    }
-}
-
-/* spinner */
-.loading {
-	display: flex;
-	justify-content: center;
-    padding: 20px;
-}
-
-.spinner {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    border: 5px solid var(--lightgrey);
-    border-top: 5px solid var(--white);
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-canvas {
-    max-height: 400px;
-}
diff --git a/src/js/volunteerData.js b/src/js/volunteerData.js
new file mode 100644
index 0000000..b6d9e50
--- /dev/null
+++ b/src/js/volunteerData.js
@@ -0,0 +1,29 @@
+const volunteerData = [
+    {
+        id: 1,
+        name: "John Kintu",
+        category: "Medical",
+        profession: "Doctor",
+        contact: "0772123123",
+        location: "Central Hospital",
+        twitter: "john_kintu"
+    },
+    {
+        id: 2,
+        name: "Jane Akello",
+        category: "Legal",
+        profession: "Lawyer",
+        contact: "0751123123",
+        location: "City Court",
+        twitter: "jane_akello"
+    },
+    {
+        id: 3,
+        name: "Robert Opio",
+        category: "Other",
+        profession: "Counselor",
+        contact: "0789456789",
+        location: "Community Center",
+        twitter: "robert_opio"
+    }
+];
diff --git a/src/js/volunteers.js b/src/js/volunteers.js
new file mode 100644
index 0000000..4b9b15e
--- /dev/null
+++ b/src/js/volunteers.js
@@ -0,0 +1,89 @@
+const API_URL = `volunteers.json`;  // We need this from the main dashboard if possible
+
+let allVolunteers = [];
+
+function createCard(volunteer) {
+    return `
+        <div class="card" data-category="${volunteer.Category}">
+            <div class="card-inner">
+                <h2 class='card__name'>${volunteer.Name}</h2>
+                <p class='card-status ${volunteer.Category.toLowerCase()}'>${volunteer.Category}</p>
+                <p class='card__profession'>Profession: ${volunteer.Profession}</p>
+                <p class='card__contact'>Contact: ${volunteer.Contact}</p>
+                <p class='card__location'>Location: ${volunteer.Location}</p>
+                <p class='card__twitter'>X: <a target='_blank' href="https://x.com/${volunteer.Twitter}">@${volunteer.Twitter}</a></p>
+            </div>
+        </div>
+    `;
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    const volunteersContainer = document.getElementById('volunteers');
+    const loadingElement = document.getElementById('loading');
+    const searchInput = document.getElementById('searchInput');
+
+    function loadVolunteers() {
+        loadingElement.style.display = 'flex';
+        fetch(API_URL)
+            .then(response => response.json())
+            .then(data => {
+                loadingElement.style.display = 'none';
+                allVolunteers = data;
+                displayVolunteers(allVolunteers);
+                updateCategoryCounters();
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+                loadingElement.textContent = "An error occurred while fetching volunteers";
+            });
+    }
+
+    function displayVolunteers(volunteers) {
+        volunteersContainer.innerHTML = volunteers.map(createCard).join('');
+    }
+
+    function filterCategory(category) {
+        const filteredVolunteers = category === 'All'
+            ? allVolunteers
+            : allVolunteers.filter(volunteer => volunteer.Category === category);
+        displayVolunteers(filteredVolunteers);
+    }
+
+    function searchVolunteers() {
+        const searchTerm = searchInput.value.toLowerCase();
+        const filteredVolunteers = allVolunteers.filter(volunteer =>
+            volunteer.Name.toLowerCase().includes(searchTerm) ||
+            volunteer.Profession.toLowerCase().includes(searchTerm) ||
+            volunteer.Location.toLowerCase().includes(searchTerm)
+        );
+        displayVolunteers(filteredVolunteers);
+    }
+
+    function updateCategoryCounters() {
+        const counts = {
+            All: allVolunteers.length,
+            Medical: allVolunteers.filter(v => v.Category === 'Medical').length,
+            Legal: allVolunteers.filter(v => v.Category === 'Legal').length,
+            Other: allVolunteers.filter(v => v.Category === 'Other').length
+        };
+
+        document.querySelectorAll('.buttons button').forEach(button => {
+            const category = button.getAttribute('data-category');
+            button.querySelector('.badge').textContent = counts[category];
+        });
+    }
+
+    let buttons = document.querySelectorAll('.buttons button');
+    buttons.forEach(button => {
+        button.addEventListener('click', () => {
+            const category = button.getAttribute('data-category');
+            filterCategory(category);
+            buttons.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+        });
+    });
+
+    searchInput.addEventListener('input', searchVolunteers);
+
+    loadVolunteers();
+});
diff --git a/volunteers.html b/volunteers.html
new file mode 100644
index 0000000..e0dedb3
--- /dev/null
+++ b/volunteers.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>#March2Parliament Volunteers</title>
+    <link rel="stylesheet" href="src/css/style.css">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <h1>#March2Parliament Volunteers</h1>
+        </div>
+    </header>
+    <main class="content">
+        <div class="container">
+            <section class="search-sort">
+                <div class="content__sort-by">Filter by:</div>
+                <div class="filter-and-search">
+                    <input type="text" id="searchInput" placeholder="Search volunteers...">
+                    <div class="buttons">
+                        <button data-category="All">All <span class="badge">0</span></button>
+                        <button data-category="Medical">Medical <span class="badge">0</span></button>
+                        <button data-category="Legal">Legal <span class="badge">0</span></button>
+                        <button data-category="Other">Other <span class="badge">0</span></button>
+                    </div>
+                </div>
+            </section>
+            <section class="volunteers" id="volunteers">
+                <!-- Volunteer cards will be dynamically created here -->
+            </section>
+            <div id="loading" class="loading">
+                <div class="spinner"></div>
+            </div>
+        </div>
+    </main>
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2024 #March2Parliament. All rights reserved.</p>
+        </div>
+    </footer>
+    <script src="src/js/volunteers.js"></script>
+</body>
+</html>
diff --git a/volunteers.json b/volunteers.json
new file mode 100644
index 0000000..a219fae
--- /dev/null
+++ b/volunteers.json
@@ -0,0 +1,29 @@
+[
+    {
+        "id": 1,
+        "Name": "John Kintu",
+        "Category": "Medical",
+        "Profession": "Doctor",
+        "Contact": "0772123123",
+        "Location": "Central Hospital",
+        "Twitter": "john_kintu"
+    },
+    {
+        "id": 2,
+        "Name": "Jane Akello",
+        "Category": "Legal",
+        "Profession": "Lawyer",
+        "Contact": "0751123123",
+        "Location": "City Court",
+        "Twitter": "jane_akello"
+    },
+    {
+        "id": 3,
+        "Name": "Robert Opio",
+        "Category": "Other",
+        "Profession": "Counselor",
+        "Contact": "0789456789",
+        "Location": "Community Center",
+        "Twitter": "robert_opio"
+    }
+]