diff --git a/100_projects/52-filter-image-gallery/css/style.css b/100_projects/52-filter-image-gallery/css/style.css
new file mode 100644
index 0000000..06872ad
--- /dev/null
+++ b/100_projects/52-filter-image-gallery/css/style.css
@@ -0,0 +1,63 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body{
+  background: #F5FFFA;
+}
+section{
+  padding: 20px;
+  margin: 40px auto;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  min-height: 100vh;
+}
+section ul{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+section ul li{
+  list-style: none;
+  text-transform: uppercase;
+  background: #FFF5EE;
+  padding: 12px 20px;
+  margin: 5px;
+  cursor: pointer;
+  transition: .3s;
+}
+section ul li.active,
+section ul li:hover{
+  color: #fff;
+  background: #D2B48C;
+}
+.menu{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+section .menu .item{
+  position: relative;
+  width: 200px;
+  height: 200px;
+  margin: 5px;
+  display: block;
+}
+section .menu .item.hide{
+  display: none;
+}
+section .menu .item img{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
\ No newline at end of file
diff --git a/100_projects/52-filter-image-gallery/img/appetizer.jpg b/100_projects/52-filter-image-gallery/img/appetizer.jpg
new file mode 100644
index 0000000..528f43b
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/appetizer.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/appetizer1.jpg b/100_projects/52-filter-image-gallery/img/appetizer1.jpg
new file mode 100644
index 0000000..fd508aa
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/appetizer1.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/breakfast.jpg b/100_projects/52-filter-image-gallery/img/breakfast.jpg
new file mode 100644
index 0000000..bcb34e2
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/breakfast.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/breakfast2.jpg b/100_projects/52-filter-image-gallery/img/breakfast2.jpg
new file mode 100644
index 0000000..06af266
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/breakfast2.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/breakfast3.jpg b/100_projects/52-filter-image-gallery/img/breakfast3.jpg
new file mode 100644
index 0000000..87f056b
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/breakfast3.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/breakfast4.jpg b/100_projects/52-filter-image-gallery/img/breakfast4.jpg
new file mode 100644
index 0000000..8bf6c26
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/breakfast4.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/breakfast5.jpg b/100_projects/52-filter-image-gallery/img/breakfast5.jpg
new file mode 100644
index 0000000..73d294a
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/breakfast5.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/breakfast6.jpg b/100_projects/52-filter-image-gallery/img/breakfast6.jpg
new file mode 100644
index 0000000..924ec16
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/breakfast6.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/candies.jpg b/100_projects/52-filter-image-gallery/img/candies.jpg
new file mode 100644
index 0000000..1b24493
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/candies.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/candies1.jpg b/100_projects/52-filter-image-gallery/img/candies1.jpg
new file mode 100644
index 0000000..25a077f
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/candies1.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/candies2.jpg b/100_projects/52-filter-image-gallery/img/candies2.jpg
new file mode 100644
index 0000000..f90d309
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/candies2.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/dinner.jpg b/100_projects/52-filter-image-gallery/img/dinner.jpg
new file mode 100644
index 0000000..97ea839
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/dinner.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/dinner1.jpg b/100_projects/52-filter-image-gallery/img/dinner1.jpg
new file mode 100644
index 0000000..1e7f3c6
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/dinner1.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/dinner2.jpg b/100_projects/52-filter-image-gallery/img/dinner2.jpg
new file mode 100644
index 0000000..09de666
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/dinner2.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/juice.jpg b/100_projects/52-filter-image-gallery/img/juice.jpg
new file mode 100644
index 0000000..65e4129
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/juice.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/juice1.jpg b/100_projects/52-filter-image-gallery/img/juice1.jpg
new file mode 100644
index 0000000..0932f2d
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/juice1.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/juice2.jpg b/100_projects/52-filter-image-gallery/img/juice2.jpg
new file mode 100644
index 0000000..7bdd62f
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/juice2.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/lunch.jpg b/100_projects/52-filter-image-gallery/img/lunch.jpg
new file mode 100644
index 0000000..8f7e542
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/lunch.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/lunch1.jpg b/100_projects/52-filter-image-gallery/img/lunch1.jpg
new file mode 100644
index 0000000..3e520ef
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/lunch1.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/lunch2.jpg b/100_projects/52-filter-image-gallery/img/lunch2.jpg
new file mode 100644
index 0000000..84e07ae
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/lunch2.jpg differ
diff --git a/100_projects/52-filter-image-gallery/img/lunch3.jpg b/100_projects/52-filter-image-gallery/img/lunch3.jpg
new file mode 100644
index 0000000..ee6e6f7
Binary files /dev/null and b/100_projects/52-filter-image-gallery/img/lunch3.jpg differ
diff --git a/100_projects/52-filter-image-gallery/index.html b/100_projects/52-filter-image-gallery/index.html
new file mode 100644
index 0000000..489d213
--- /dev/null
+++ b/100_projects/52-filter-image-gallery/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/style.css">
+  <title>Document</title>
+</head>
+<body>
+  <section>
+    <ul>
+      <li class="list active" data-filter="all">All</li>
+      <li class="list" data-filter="breakfast">BreakFast</li>
+      <li class="list" data-filter="lunch">Lunch</li>
+      <li class="list" data-filter="dinner">dinner</li>
+      <li class="list" data-filter="appetizer">Appetizer</li>
+      <li class="list" data-filter="candies">Candies</li>
+      <li class="list" data-filter="juices">Juices</li>
+    </ul>
+    <div class="menu">
+      <div class="item" data-item="breakfast"><img src="img/breakfast.jpg" ></div>
+      <div class="item" data-item="lunch"><img src="img/lunch.jpg" ></div>
+      <div class="item" data-item="dinner"><img src="img/dinner.jpg" ></div>
+      <div class="item" data-item="dinner"><img src="img/dinner1.jpg" ></div>
+      <div class="item" data-item="dinner"><img src="img/dinner2.jpg" ></div>
+      <div class="item" data-item="candies"><img src="img/candies2.jpg" ></div>
+      <div class="item" data-item="juices"><img src="img/juice.jpg" ></div>
+      <div class="item" data-item="juices"><img src="img/juice1.jpg" ></div>
+      <div class="item" data-item="breakfast"><img src="img/breakfast2.jpg" ></div>
+      <div class="item" data-item="breakfast"><img src="img/breakfast3.jpg" ></div>
+      <div class="item" data-item="breakfast"><img src="img/breakfast4.jpg" ></div>
+      <div class="item" data-item="breakfast"><img src="img/breakfast5.jpg" ></div>
+      <div class="item" data-item="breakfast"><img src="img/breakfast6.jpg" ></div>
+      <div class="item" data-item="lunch"><img src="img/lunch1.jpg" ></div>
+      <div class="item" data-item="lunch"><img src="img/lunch2.jpg" ></div>
+      <div class="item" data-item="lunch"><img src="img/lunch3.jpg" ></div>
+      <div class="item" data-item="appetizer"><img src="img/appetizer.jpg" ></div>
+      <div class="item" data-item="appetizer"><img src="img/appetizer1.jpg" ></div>
+      <div class="item" data-item="candies"><img src="img/candies.jpg" ></div>
+      <div class="item" data-item="candies"><img src="img/candies1.jpg" ></div>
+      <div class="item" data-item="juices"><img src="img/juice2.jpg" ></div>
+    </div>
+  </section>
+  <script src="js/main.js">
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/100_projects/52-filter-image-gallery/js/main.js b/100_projects/52-filter-image-gallery/js/main.js
new file mode 100644
index 0000000..62d62b3
--- /dev/null
+++ b/100_projects/52-filter-image-gallery/js/main.js
@@ -0,0 +1,25 @@
+let list = document.querySelectorAll('.list');
+let item = document.querySelectorAll('.item');
+
+for(let i = 0; i < list.length; i++){
+  list[i].addEventListener('click', function(){
+    for(let j = 0; j < list.length; j++){
+      list[j].classList.remove('active');
+    }
+    this.classList.add('active');
+
+
+    let dataFilter = this.getAttribute('data-filter');
+
+    for(let k = 0; k < item.length; k++){
+      item[k].classList.remove('active');
+      item[k].classList.add('hide');
+
+      if(item[k].getAttribute('data-item') == dataFilter ||
+      dataFilter == "all"){
+        item[k].classList.remove('hide');
+        item[k].classList.add('active');
+      }
+    }
+  })
+}
\ No newline at end of file