diff --git a/src/main/resources/static/sass/components/_pagination.scss b/src/main/resources/static/sass/components/_pagination.scss
new file mode 100644
index 0000000..904a989
--- /dev/null
+++ b/src/main/resources/static/sass/components/_pagination.scss
@@ -0,0 +1,102 @@
+// -----------------------------------------------------------------------------
+// Pagination Component
+// Based on Figma design: node-id=985-1102
+// -----------------------------------------------------------------------------
+
+// Pagination variables
+$pagination-gap: 13px;
+$pagination-icon-size: 24px;
+$pagination-font-size: 18px;
+$pagination-text-active: #212529;
+$pagination-text-inactive: #5f666c;
+$pagination-text-disabled: #adb5bd;
+
+.pagination {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: $pagination-gap;
+
+ // Page navigation buttons (first, prev, next, last)
+ .page-first,
+ .page-prev,
+ .page-next,
+ .page-last {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: $pagination-icon-size;
+ height: $pagination-icon-size;
+ color: $pagination-text-active;
+ text-decoration: none;
+ cursor: pointer;
+ transition: $transition-fast;
+
+ &:hover:not(.disabled) {
+ color: $primary-blue;
+ }
+
+ &.disabled {
+ color: $pagination-text-disabled;
+ cursor: not-allowed;
+ pointer-events: none;
+ }
+
+ // SVG icons inherit color from parent
+ svg {
+ width: $pagination-icon-size;
+ height: $pagination-icon-size;
+ flex-shrink: 0;
+ }
+ }
+
+ // Page number links
+ .page-num {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 10px;
+ height: 21px;
+ font-family: $font-family-primary;
+ font-size: $pagination-font-size;
+ font-weight: $font-weight-regular;
+ color: $pagination-text-inactive;
+ text-decoration: none;
+ text-align: center;
+ line-height: 1;
+ cursor: pointer;
+ transition: $transition-fast;
+
+ &:hover:not(.page-current) {
+ color: $primary-blue;
+ }
+
+ // Current active page
+ &.page-current {
+ font-weight: $font-weight-bold;
+ color: $pagination-text-active;
+ cursor: default;
+ }
+ }
+
+ // Screen reader only text
+ .blind {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+ }
+}
+
+// Pagination wrapper for alignment
+.pagination-wrapper {
+ display: flex;
+ justify-content: center;
+ padding: $spacing-lg 0;
+ margin-top: $spacing-lg;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/views/fragment/pagination.html b/src/main/resources/templates/views/fragment/pagination.html
index 4186256..0cd3567 100644
--- a/src/main/resources/templates/views/fragment/pagination.html
+++ b/src/main/resources/templates/views/fragment/pagination.html
@@ -6,35 +6,117 @@
+
+
+