diff --git a/index.html b/index.html
index a88087d..1869c02 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,12 @@
     <title>Mentorship LocalStorage</title>
     <link rel="stylesheet" href="styles.css" />
   </head>
-  <body>
+  <body onload="getGrades();">
+    <h1>Students Directory</h1>
+    <div class="filterTool">
+      <select onchange="showCard()" id="filterGrade"></select>
+      <button onclick="reset()">Reset</button>
+    </div>
     <div id="root"></div>
   </body>
   <script src="index.js"></script>
diff --git a/index.js b/index.js
index c868c54..3059da6 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,4 @@
+let getGradeElement = ["All"];
 const root = document.getElementById("root");
 
 fetch("./students.json")
@@ -26,7 +27,10 @@ function displayStudent(student) {
 }
 
 function renderSingleStudent(student, parents) {
-  return `<details class="student-card" id="${student.guid}"><summary><span class="student name" data-type="name">${student.name}</span></summary><p>Email: <span class="student email" data-type="email">${student.email}</span></p><p>Section: <span class="student section" data-type="section">${student.section}</span></p><p>Grade: <span class="student grade" data-type="grade">${student.grade}</span></p><button onclick="makeEditable('${student.guid}', 'student')">Edit</button><h3>${parents.length ? "Parents" : "No parents registered"}</h3>${parents}</details>`;
+  if (student.grade != null) {
+    getGradeElement.push(`${student.grade}`);
+  }
+  return `<details class="student-card ${student.grade} show" id="${student.guid}"><summary><span class="student name" data-type="name">${student.name}</span></summary><p>Email: <span class="student email" data-type="email">${student.email}</span></p><p>Section: <span class="student section" data-type="section">${student.section}</span></p><p>Grade: <span class="student grade" data-type="grade">${student.grade}</span></p><button onclick="makeEditable('${student.guid}', 'student')">Edit</button><h3>${parents.length ? "Parents" : "No parents registered"}</h3>${parents}</details>`;
 }
 
 function displayParent(parents, studentID) {
@@ -84,3 +88,45 @@ function findParent(studentID, parentGuid) {
   let student = JSON.parse(localStorage.getItem(studentID));
   return student.parents.find((parent) => parent.guid === parentGuid);
 }
+
+function getGrades() {
+  let grades = removeDuplicates(getGradeElement);
+  var selectElem = document.getElementById("filterGrade");
+  for (var i = 0; i < grades.length; i++) {
+    var element = document.createElement("option");
+    element.innerText = grades[i];
+    selectElem.append(element);
+  }
+}
+
+function removeDuplicates(getGradeElement) {
+  getGradeElement.sort(function (a, b) {
+    return b - a;
+  });
+  let uniqueValues = [];
+  getGradeElement.forEach((element) => {
+    if (!uniqueValues.includes(element)) {
+      uniqueValues.push(element);
+    }
+  });
+  return uniqueValues;
+}
+
+function showCard() {
+  let selector = document.getElementById("filterGrade").value;
+  let allCards = document.getElementsByClassName("student-card");
+  for (var i = 0; i < allCards.length; i++) {
+    if (selector === "All") {
+      allCards[i].classList.replace("hide", "show");
+    } else if (allCards[i].classList.contains(`${selector}`)) {
+      allCards[i].classList.replace("hide", "show");
+    } else {
+      allCards[i].classList.replace("show", "hide");
+    }
+  }
+}
+
+function reset() {
+  document.getElementById("filterGrade").value = "All";
+  document.getElementById("filterGrade").dispatchEvent(new Event("change"));
+}
diff --git a/styles.css b/styles.css
index ae0c326..8f3304c 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,12 @@
+* {
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+}
 body {
-  background-color: #f7f7f7;
+  background-color: #02cd4d;
+}
+h1 {
+  margin-left: 15px;
+  color: white;
 }
 h3 {
   font-size: 16px;
@@ -10,8 +17,11 @@ h3 {
   grid-gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(350px, 2fr));
   grid-auto-rows: 50px;
-  /* grid-auto-flow: column; */
   grid-gap: 20px;
+  background-color: white;
+  padding: 30px;
+  min-height: 80vh;
+  border-radius: 25px 25px 0px 0px;
 }
 
 .parent-card {
@@ -19,14 +29,31 @@ h3 {
 }
 
 .student-card {
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
-    rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.hide {
+  display: none;
 }
 
 details {
   color: #686868;
   padding: 5px;
   min-height: 50px;
+  font-size: 18px;
+  padding-left: 30px;
+}
+
+summary {
+  padding-top: 12px;
+}
+
+details.show {
+  display: block;
+}
+details.show details {
+  display: block;
 }
 
 details[open] {
@@ -37,9 +64,9 @@ details[open] {
 }
 
 [contenteditable="true"] {
-  padding: .25em .5em;
+  padding: 0.25em 0.5em;
   margin: 1em 0;
-  transition: padding .3s ease-in-out;
+  transition: padding 0.3s ease-in-out;
   width: 100%;
   background: #e0e0e0;
   outline: 2px solid slategray;
@@ -47,5 +74,27 @@ details[open] {
 
 [contenteditable="true"]:hover,
 [contenteditable="true"]:focus {
-  padding: .25em;
+  padding: 0.25em;
+}
+
+.filterTool {
+  display: flex;
+  justify-content: flex-end;
+  margin: 30px;
+}
+select {
+  min-width: 200px;
+  font-size: 18px;
+  padding: 5px;
+  border-radius: 5px;
+}
+button {
+  margin-left: 10px;
+  padding: 5px;
+  font-size: 18px;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 5px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
+    rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 }
