diff --git a/src/main/resources/static/sass/components/_breadcrumb.scss b/src/main/resources/static/sass/components/_breadcrumb.scss
new file mode 100644
index 0000000..a844ca0
--- /dev/null
+++ b/src/main/resources/static/sass/components/_breadcrumb.scss
@@ -0,0 +1,212 @@
+// -----------------------------------------------------------------------------
+// Breadcrumb Navigation Component
+// Based on Figma: node 1339-3649
+// Background: #e9f8ff, Height: 60px
+// -----------------------------------------------------------------------------
+
+.breadcrumb-container {
+  background-color: #e9f8ff;
+  height: 60px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  max-width: $container-max-width;
+  margin: 0 auto;
+  padding: 0 $spacing-lg;
+  width: 100%;
+
+  @media (max-width: $breakpoint-sm) {
+    gap: 12px;
+    padding: 0 $spacing-md;
+  }
+
+  // Home icon
+  &-home {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+
+    svg {
+      width: 18px;
+      height: 17px;
+      fill: #8c959f;
+      transition: $transition-fast;
+    }
+
+    &:hover svg {
+      fill: $primary-blue;
+    }
+  }
+
+  // Separator arrow icon
+  &-separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+
+    svg {
+      width: 6.5px;
+      height: 12px;
+      fill: #5f666c;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      width: 16px;
+      height: 16px;
+
+      svg {
+        width: 5px;
+        height: 10px;
+      }
+    }
+  }
+
+  // Breadcrumb item (text link)
+  &-item {
+    font-family: $font-family-primary;
+    font-size: 16px;
+    font-weight: $font-weight-regular;
+    line-height: 1;
+    color: #5f666c;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: $transition-fast;
+
+    &:hover {
+      color: $primary-blue;
+    }
+
+    // Current/Active item (last item)
+    &--active {
+      font-weight: $font-weight-bold;
+      color: #212529;
+
+      &:hover {
+        color: #212529;
+        cursor: default;
+      }
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: 14px;
+    }
+  }
+}
+
+// Alternative: Using list structure
+.breadcrumb-nav {
+  background-color: #e9f8ff;
+  height: 60px;
+  width: 100%;
+
+  @media (max-width: $breakpoint-sm) {
+    height: 48px;
+  }
+
+  .breadcrumb-list {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    max-width: $container-max-width;
+    margin: 0 auto;
+    padding: 0 $spacing-3xl;
+    height: 100%;
+    list-style: none;
+
+    @media (max-width: $breakpoint-sm) {
+      gap: 12px;
+      padding: 0 $spacing-md;
+    }
+  }
+
+  .breadcrumb-list-item {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+
+    @media (max-width: $breakpoint-sm) {
+      gap: 12px;
+    }
+
+    // Add separator after each item except last
+    &:not(:last-child)::after {
+      content: '';
+      display: block;
+      width: 6.5px;
+      height: 12px;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%235F666C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+
+      @media (max-width: $breakpoint-sm) {
+        width: 5px;
+        height: 10px;
+      }
+    }
+
+    a {
+      font-family: $font-family-primary;
+      font-size: 16px;
+      font-weight: $font-weight-regular;
+      line-height: 1;
+      color: #5f666c;
+      text-decoration: none;
+      white-space: nowrap;
+      transition: $transition-fast;
+
+      &:hover {
+        color: $primary-blue;
+      }
+
+      @media (max-width: $breakpoint-sm) {
+        font-size: 14px;
+      }
+    }
+
+    // Current page (last item)
+    &:last-child a {
+      font-weight: $font-weight-bold;
+      color: #212529;
+      pointer-events: none;
+    }
+
+    // Home icon styling
+    &:first-child a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      font-size: 0; // Hide text, show only icon
+
+      &::before {
+        content: '';
+        display: block;
+        width: 18px;
+        height: 17px;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%238C959F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        transition: $transition-fast;
+      }
+
+      &:hover::before {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%230049B4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      }
+    }
+  }
+}