diff --git a/src/frontend/src/components/UI/SortButton.vue b/src/frontend/src/components/UI/SortButton.vue
new file mode 100644
index 0000000..576a284
--- /dev/null
+++ b/src/frontend/src/components/UI/SortButton.vue
@@ -0,0 +1,63 @@
+<template>
+  <button
+      @click="$emit('click')"
+      class="sort-button"
+      :class="{ 'active': active }"
+  >
+    <PhArrowCircleUp weight="fill"
+        :size="24"
+        class="sort-icon"
+        :class="{ 'rotate': direction === 'asc' }"
+    />
+  </button>
+</template>
+
+<script>
+import {PhArrowCircleUp, PhFunnelSimple} from '@phosphor-icons/vue';
+
+export default {
+  name: "SortButton",
+  components: {
+    PhArrowCircleUp,
+    PhFunnelSimple
+  },
+  emits: ['click'],
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    direction: {
+      type: String,
+      default: 'desc',
+      validator: (d) => (d === 'desc' || d === 'asc'),
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sort-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+}
+
+.sort-icon {
+  color: #6B869C;
+  transition: transform 0.3s ease, color 0.2s ease;
+}
+
+.sort-button.active .sort-icon {
+  color: #002F54;
+}
+
+.sort-icon.rotate {
+  transform: rotate(180deg);
+}
+</style>
\ No newline at end of file