diff --git a/src/backend/views/components/button.twig b/src/backend/views/components/button.twig
new file mode 100644
index 0000000..7c8bc0c
--- /dev/null
+++ b/src/backend/views/components/button.twig
@@ -0,0 +1,25 @@
+{#
+  Reusable button component.
+  Available props:
+    - label
+    - icon
+    - name
+    - style: primary, secondary or warning
+    - size: small, default
+
+  Usage example:
+    {% include 'components/button.twig' with {label: 'Label', icon: 'checklist', style: 'secondary', size: 'default'} %}
+#}
+
+{% set mainClass = 'docs-button' %}
+
+<button name={{ name }} class="{{mainClass}} {{mainClass}}--{{style|default('primary')}} {{mainClass}}--{{size|default('default')}} {{icon ? mainClass ~ '--with-icon' : ''}}">
+  {% if icon %}
+    <div class="{{mainClass}}__icon">
+      {{ svg(icon) }}
+    </div>
+  {% endif %}
+  <span>
+    {{ label }}
+  </span>
+</button>
\ No newline at end of file
diff --git a/src/frontend/styles/components/button.pcss b/src/frontend/styles/components/button.pcss
new file mode 100644
index 0000000..bb2d9d2
--- /dev/null
+++ b/src/frontend/styles/components/button.pcss
@@ -0,0 +1,74 @@
+.docs-button {
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  height: var(--height);
+  padding-left: 12px;
+  padding-right: 12px;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition-property: background-color;
+  transition-duration: 0.1s;
+
+  &--default {
+    --height: 40px;
+  }
+
+  &--small {
+    --height: 32px;
+  }
+
+  &--primary {
+    background: var(--color-button-primary);
+
+    &:hover {
+      background: var(--color-button-primary-hover);
+    }
+
+    &:active {
+      background: var(--color-button-primary-active);
+    }
+  }
+
+  &--secondary {
+    background: var(--color-button-secondary);
+    color: var(--color-text-main);
+
+    &:hover {
+      background: var(--color-button-secondary-hover);
+    }
+
+    &:active {
+      background: var(--color-button-secondary-active);
+    }
+  }
+
+  &--warning {
+    background: var(--color-button-warning);
+
+    &:hover {
+      background: var(--color-button-warning-hover);
+    }
+
+    &:active {
+      background: var(--color-button-warning-active);
+    }
+  }
+
+  &--with-icon {
+    padding-left: 8px;
+  }
+
+  &__icon {
+    margin-right: 4px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+      display: block;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/frontend/styles/main.pcss b/src/frontend/styles/main.pcss
index d00b43b..1c77bc7 100644
--- a/src/frontend/styles/main.pcss
+++ b/src/frontend/styles/main.pcss
@@ -8,6 +8,7 @@
 @import './components/page.pcss';
 @import './components/landing.pcss';
 @import './components/auth.pcss';
+@import './components/button.pcss';
 
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index c292aa3..7454d32 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -7,6 +7,19 @@
   --color-bg-light: #f8f7fa;
   --color-page-active: #ff1767;
 
+  --color-button-primary: #3389FF;
+  --color-button-primary-hover: #2E7AE6;
+  --color-button-primary-active: #296DCC;
+
+  --color-button-secondary: #F3F6F8;
+  --color-button-secondary-hover: #D9DCDE;
+  --color-button-secondary-active: #C0C3C4;
+
+  --color-button-warning: #EF5C5C;
+  --color-button-warning-hover: #D65151;
+  --color-button-warning-active: #BD4848;
+
+
   /**
    * Site layout sizes
    */
diff --git a/src/frontend/svg/bin.svg b/src/frontend/svg/bin.svg
new file mode 100644
index 0000000..8c60f99
--- /dev/null
+++ b/src/frontend/svg/bin.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.25 7H16.25V6.25C16.25 5.65326 16.0129 5.08097 15.591 4.65901C15.169 4.23705 14.5967 4 14 4H12.5C11.9033 4 11.331 4.23705 10.909 4.65901C10.4871 5.08097 10.25 5.65326 10.25 6.25V7H7.25C7.05109 7 6.86032 7.07902 6.71967 7.21967C6.57902 7.36032 6.5 7.55109 6.5 7.75C6.5 7.94891 6.57902 8.13968 6.71967 8.28033C6.86032 8.42098 7.05109 8.5 7.25 8.5H8L8.75 16.75C8.75 17.3467 8.98705 17.919 9.40901 18.341C9.83097 18.7629 10.4033 19 11 19H15.5C16.0967 19 16.669 18.7629 17.091 18.341C17.5129 17.919 17.75 17.3467 17.75 16.75L18.5 8.5H19.25C19.4489 8.5 19.6397 8.42098 19.7803 8.28033C19.921 8.13968 20 7.94891 20 7.75C20 7.55109 19.921 7.36032 19.7803 7.21967C19.6397 7.07902 19.4489 7 19.25 7ZM11.75 6.25C11.75 6.05109 11.829 5.86032 11.9697 5.71967C12.1103 5.57902 12.3011 5.5 12.5 5.5H14C14.1989 5.5 14.3897 5.57902 14.5303 5.71967C14.671 5.86032 14.75 6.05109 14.75 6.25V7H11.75V6.25ZM16.25 16.75C16.25 16.9489 16.171 17.1397 16.0303 17.2803C15.8897 17.421 15.6989 17.5 15.5 17.5H11C10.8011 17.5 10.6103 17.421 10.4697 17.2803C10.329 17.1397 10.25 16.9489 10.25 16.75L9.5 8.5H17L16.25 16.75Z" fill="currentColor"/>
+</svg>
diff --git a/src/frontend/svg/checklist.svg b/src/frontend/svg/checklist.svg
new file mode 100644
index 0000000..3688f2b
--- /dev/null
+++ b/src/frontend/svg/checklist.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.676 9.432L11.244 12.872L9.924 11.552C9.85228 11.4683 9.76403 11.4002 9.66478 11.3522C9.56553 11.3042 9.45742 11.2772 9.34724 11.273C9.23707 11.2687 9.1272 11.2873 9.02454 11.3275C8.92188 11.3677 8.82865 11.4287 8.75068 11.5067C8.67272 11.5846 8.61171 11.6779 8.57149 11.7805C8.53127 11.8832 8.51271 11.9931 8.51696 12.1032C8.52122 12.2134 8.5482 12.3215 8.59622 12.4208C8.64424 12.52 8.71226 12.6083 8.796 12.68L10.676 14.568C10.7508 14.6421 10.8394 14.7008 10.9369 14.7406C11.0343 14.7804 11.1387 14.8006 11.244 14.8C11.4539 14.7991 11.655 14.7158 11.804 14.568L15.804 10.568C15.879 10.4936 15.9385 10.4051 15.9791 10.3077C16.0197 10.2102 16.0406 10.1056 16.0406 10C16.0406 9.89439 16.0197 9.78982 15.9791 9.69234C15.9385 9.59485 15.879 9.50637 15.804 9.432C15.6541 9.283 15.4513 9.19936 15.24 9.19936C15.0287 9.19936 14.8259 9.283 14.676 9.432ZM12.5 4C10.9178 4 9.37103 4.46919 8.05544 5.34824C6.73985 6.22729 5.71447 7.47672 5.10897 8.93853C4.50347 10.4003 4.34504 12.0089 4.65372 13.5607C4.9624 15.1126 5.72433 16.538 6.84315 17.6569C7.96197 18.7757 9.38743 19.5376 10.9393 19.8463C12.4911 20.155 14.0997 19.9965 15.5615 19.391C17.0233 18.7855 18.2727 17.7602 19.1518 16.4446C20.0308 15.129 20.5 13.5822 20.5 12C20.5 10.9494 20.2931 9.90914 19.891 8.93853C19.489 7.96793 18.8997 7.08601 18.1569 6.34315C17.414 5.60028 16.5321 5.011 15.5615 4.60896C14.5909 4.20693 13.5506 4 12.5 4ZM12.5 18.4C11.2342 18.4 9.99683 18.0246 8.94435 17.3214C7.89188 16.6182 7.07157 15.6186 6.58717 14.4492C6.10277 13.2797 5.97603 11.9929 6.22298 10.7514C6.46992 9.50994 7.07946 8.36957 7.97452 7.47452C8.86958 6.57946 10.0099 5.96992 11.2514 5.72297C12.4929 5.47603 13.7797 5.60277 14.9492 6.08717C16.1186 6.57157 17.1182 7.39187 17.8214 8.44435C18.5246 9.49682 18.9 10.7342 18.9 12C18.9 13.6974 18.2257 15.3252 17.0255 16.5255C15.8253 17.7257 14.1974 18.4 12.5 18.4Z" fill="currentColor"/>
+</svg>