diff --git a/src/pages/achievements.astro b/src/pages/achievements.astro
index e69de29..0abfb18 100644
--- a/src/pages/achievements.astro
+++ b/src/pages/achievements.astro
@@ -0,0 +1,329 @@
+---
+import '../styles/achivements-pages.scss';
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout>
+  <div class="filter-container">
+    <div class="filter-label">Filter by:</div>
+      <div class="filter-select">
+        <select id="filter-year">
+          <option value="default" hidden></option>
+          <option value="default" class="filter-text">Default</option>
+          <option value="2020" class="filter-text">2020</option>
+          <option value="2021" class="filter-text">2021</option>
+          <option value="2022" class="filter-text">2022</option>
+          <option value="2023" class="filter-text">2023</option>
+        </select>
+      
+        <select id="filter-community">
+          <option value="default" hidden></option>
+          <option value="default" class="filter-text">Default</option>
+          <option value="AgriBot" class="filter-text">AgriBot</option>
+          <option value="AgriUX" class="filter-text">AgriUX</option>
+          <option value="CP" class="filter-text">CP</option>
+          <option value="CSI" class="filter-text">CSI</option>
+          <option value="Daming" class="filter-text">Daming</option>
+          <option value="GARY" class="filter-text">GARY</option>
+          <option value="IWDC" class="filter-text">IWDC</option>
+          <option value="MAD" class="filter-text">MAD</option>
+        </select>
+      </div>
+    </div>
+  </div>
+  
+
+  <div class="card-achievements-container">
+    <div class="container-achievements">
+      <div class="card-achievements" data-year="2020" data-community="AgriBot">
+        <div class="card-achievements-before">
+          <div class="card-achievements-image" style="background-image: url('achievement-1.png');"></div>
+          <div class="card-achievements-title">2nd winner</div>
+          <div class="card-achievements-text-2">Nama Tim/Solo</div>
+          <div class="card-achievements-text-3">Kategori Lomba</div>
+        </div>
+        <div class="card-achievements-after">
+          <div class="card-achievements-image" style="background-image: url('achievement-1.png'); filter: blur(2px); background-color: lightgray; background-size: cover; background-repeat: no-repeat;"></div>
+            <div class="cover-member">  
+              <div class="member">
+                <div class="card-achievements-member">Made Althaaf Naufal Gusendra</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Aljay</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Amm diketu</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Kotop</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Kotop</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Made Althaaf Naufal Gusendra</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+            </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-achievements">
+      <div class="card-achievements" data-year="2022" data-community="AgriUX">
+        <div class="card-achievements-before">
+          <div class="card-achievements-image" style="background-image: url('achievement-1.png');"></div>
+          <div class="card-achievements-title">2nd winner</div>
+          <div class="card-achievements-text-2">Nama Tim/Solo</div>
+          <div class="card-achievements-text-3">Kategori Lomba</div>
+        </div>
+        <div class="card-achievements-after">
+          <div class="card-achievements-image" style="background-image: url('achievement-1.png'); filter: blur(2px); background-color: lightgray; background-size: cover; background-repeat: no-repeat;"></div>
+            <div class="cover-member">  
+              <div class="member">
+                <div class="card-achievements-member">Made Althaaf Naufal Gusendra</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Aljay</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Amm diketu</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Kotop</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Kotop</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Made Althaaf Naufal Gusendra</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+            </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-achievements">
+      <div class="card-achievements" data-year="2023" data-community="IWDC">
+        <div class="card-achievements-before">
+          <div class="card-achievements-image" style="background-image: url('achievement-1.png');"></div>
+          <div class="card-achievements-title">2nd winner</div>
+          <div class="card-achievements-text-2">Nama Tim/Solo</div>
+          <div class="card-achievements-text-3">Kategori Lomba</div>
+        </div>
+        <div class="card-achievements-after">
+          <div class="card-achievements-image" style="background-image: url('achievement-1.png'); filter: blur(2px); background-color: lightgray; background-size: cover; background-repeat: no-repeat;"></div>
+            <div class="cover-member">  
+              <div class="member">
+                <div class="card-achievements-member">Made Althaaf Naufal Gusendra</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Aljay</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Amm diketu</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Kotop</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Kotop</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Made Althaaf Naufal Gusendra</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+            </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-achievements">
+      <div class="card-achievements" data-year="2021" data-community="MAD">
+        <div class="card-achievements-before">
+          <div class="card-achievements-image" style="background-image: url('achievement-1.png');"></div>
+          <div class="card-achievements-title">2nd winner</div>
+          <div class="card-achievements-text-2">Nama Tim/Solo</div>
+          <div class="card-achievements-text-3">Kategori Lomba</div>
+        </div>
+        <div class="card-achievements-after">
+          <div class="card-achievements-image" style="background-image: url('achievement-1.png'); filter: blur(2px); background-color: lightgray; background-size: cover; background-repeat: no-repeat;"></div>
+            <div class="cover-member">  
+              <div class="member">
+                <div class="card-achievements-member">Made Althaaf Naufal Gusendra</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Aljay</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Amm diketu</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Kotop</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Kotop</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Made Althaaf Naufal Gusendra</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+            </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-achievements">
+      <div class="card-achievements" data-year="2020" data-community="AgriBot">
+        <div class="card-achievements-before">
+          <div class="card-achievements-image" style="background-image: url('achievement-1.png');"></div>
+          <div class="card-achievements-title">2nd winner</div>
+          <div class="card-achievements-text-2">Nama Tim/Solo</div>
+          <div class="card-achievements-text-3">Kategori Lomba</div>
+        </div>
+        <div class="card-achievements-after">
+          <div class="card-achievements-image" style="background-image: url('achievement-1.png'); filter: blur(2px); background-color: lightgray; background-size: cover; background-repeat: no-repeat;"></div>
+            <div class="cover-member">  
+              <div class="member">
+                <div class="card-achievements-member">Made Althaaf Naufal Gusendra</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Aljay</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Amm diketu</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Kotop</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Kotop</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+              <div class="member">
+                <div class="card-achievements-member">Made Althaaf Naufal Gusendra</div>
+                <a href="#" class="button">LinkedIn</a>
+              </div>
+
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</Layout>
+
+
+<script>
+const filterYear = document.getElementById("filter-year");
+const filterCommunity = document.getElementById("filter-community");
+const cardContainer = document.querySelector(".card-achievements-container");
+
+filterYear.options[0].textContent = "Tahun";
+
+filterCommunity.options[0].textContent = "Komunitas";
+
+
+function centerOptionText(selectElement) {
+  const options = selectElement.options;
+  for (let i = 0; i < options.length; i++) {
+    const option = options[i];
+    option.style.textAlign = 'center'; 
+    option.style.lineHeight = '1.5';
+  }
+}
+
+centerOptionText(filterYear);
+centerOptionText(filterCommunity);
+
+filterYear.addEventListener("change", filterAndSortCards);
+filterCommunity.addEventListener("change", filterAndSortCards);
+
+function filterAndSortCards() {
+  const selectedYear = filterYear.value;
+  const selectedCommunity = filterCommunity.value;
+
+  const cards = Array.from(cardContainer.querySelectorAll(".container-achievements"));
+
+  cards.forEach((card) => {
+    const cardYear = card.querySelector(".card-achievements").getAttribute("data-year");
+    const cardCommunity = card.querySelector(".card-achievements").getAttribute("data-community");
+
+    const yearMatch = selectedYear === "default" || selectedYear === cardYear;
+    const communityMatch = selectedCommunity === "default" || selectedCommunity === cardCommunity;
+
+    if (yearMatch && communityMatch) {
+      card.style.display = "block";
+    } else {
+      card.style.display = "none";
+    }
+  });
+
+  cards.sort((a, b) => {
+    const orderA = parseInt(a.querySelector(".card-achievements").getAttribute("data-order"), 10);
+    const orderB = parseInt(b.querySelector(".card-achievements").getAttribute("data-order"), 10);
+    return orderA - orderB;
+  });
+
+  cards.forEach((card) => {
+    cardContainer.appendChild(card);
+  });
+}
+
+filterAndSortCards();
+
+
+</script>
diff --git a/src/styles/achivements-pages.scss b/src/styles/achivements-pages.scss
new file mode 100644
index 0000000..dcc5b38
--- /dev/null
+++ b/src/styles/achivements-pages.scss
@@ -0,0 +1,236 @@
+.card-achievements-container {
+    display: flex;
+    justify-content: center; 
+    flex-wrap: wrap;
+    margin: 0 auto;
+  align-items: center;
+}
+
+
+
+.card-achievements-before {
+    width: 293.998px;
+    height: 321.077px;
+    margin: 10px;
+    flex-direction: column;
+    border-radius: 120px 24px 24px 8px;
+    border: 10px solid var(--Grad-C, #BED4FF);
+    background: #FFF;
+    margin: 10px;
+    position: absolute;
+    backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+}
+
+.card-achievements-after {
+    width: 293.998px;
+    height: 321.077px;
+    margin: 10px;
+    flex-direction: column;
+    border-radius: 120px 24px 24px 8px;
+    border: 10px solid var(--Grad-C, #BED4FF);
+    background: #FFF;
+    margin: 10px;
+    position: absolute;
+    backface-visibility: hidden;
+    transform: rotateY(180deg);
+    display: flex;
+    flex-direction: column;
+}
+
+
+
+.card-achievements-title {
+    color: var(--cool-gray-90, #21272A);
+    text-align: center;
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    margin-bottom: 15px;
+}
+
+.card-achievements-text-2 {
+    text-align: center;
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    background: var(--Grad-A, linear-gradient(90deg, #0F18ED 0%, #E70FEB 100%));
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 15px;
+    transition: background-color 0.3s ease; 
+    cursor: pointer; 
+}
+
+.card-achievements-text-3 {
+    align-self: stretch;
+    color: var(--cool-gray-90, #21272A);
+    text-align: center;
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin-bottom: 15px;
+}
+
+.cover-member {
+    justify-content: space-between;
+    align-items: center;
+    overflow: scroll;   
+}
+
+.member {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 20px;
+    margin-bottom: 20px;
+    margin-right: 20px;
+}
+
+.card-achievements-member {
+    color: #000;
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 18ch; 
+}
+
+.button {
+    display: flex;
+    width: 53.924px;
+    height: 15.717px;
+    padding: 3.317px 6.634px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 13.268px;
+    background: var(--primary-p-200, #383FF0);
+    gap: 6.634px;
+    color: #fff;
+    text-decoration: none;
+    font-family: Plus Jakarta Sans;
+    font-size: 8px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+}
+
+.card-achievements-image {
+    display: flex;
+    height: 170.21px;
+    justify-content: center;
+    align-items: center;
+    gap: 7.737px;
+    flex-shrink: 0;
+    align-self: stretch;
+    border-radius: 110px 12px 0px 0px;   
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin-bottom: 20px;
+    -webkit-backface-visibility: hidden; /* Safari */
+    backface-visibility: hidden;
+}
+
+.container-achievements {
+  width: 350px;
+  height: 400px;
+  perspective: 800px;
+  display: contents;
+  justify-content: center;
+}
+
+.container-achievements:hover > .card-achievements {
+  cursor: pointer;
+  transform: rotateY(180deg);
+}
+
+.card-achievements {
+  height: 100%;
+  transition: transform 1500ms;
+  display: flex;
+  justify-content: center;
+  transform-style: preserve-3d;
+}
+
+.filter-container {
+    display: flex;
+    gap: 10px;
+    padding-left: 37px;
+    padding-top: 80px;
+    padding-bottom: 80px;
+    height: auto;
+    align-items: center;
+    flex-wrap: wrap;
+}
+  
+  
+.filter-label {
+    color: #000;
+    font-family: Plus Jakarta Sans;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    
+}
+
+#filter-year, #filter-community{
+    display: flex;
+    margin: 0 auto;
+    width: 160px;
+    height: auto;
+    gap: 10px;
+    flex-shrink: 0;
+    border-radius: 10px;
+    background: #FFF;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    box-shadow: 0 0 10px rgba(0, 168, 255, 0.7);
+    font-family: Plus Jakarta Sans;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    text-align: center;
+}
+  
+.filter-label {
+  margin-right: 10px;
+}
+  
+.filter-select {
+  display: flex;
+  align-items: center; 
+  gap: 10px;
+  text-align: center;
+  flex-wrap: wrap;
+  text-align-last: center;
+}
+
+.filter-text {
+    font-weight: 500;
+    text-align: center;
+    align-items: center;
+    align-content: center;
+}
+
+.filter-select select {
+    text-align-last: center;
+    -webkit-text-align-last: center;
+    -moz-text-align-last: center;
+    -ms-text-align-last: center;
+  }
+  
\ No newline at end of file