diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml
index 1568113db..877f600be 100644
--- a/src/pages/_data/menu.yml
+++ b/src/pages/_data/menu.yml
@@ -17,6 +17,10 @@ base:
     blank:
       title: Blank page
       url: blank.html
+    badges:
+      url: badges.html
+      title: Badges
+      badge: New
     buttons:
       url: buttons.html
       title: Buttons
diff --git a/src/pages/_includes/layout/navbar-menu.html b/src/pages/_includes/layout/navbar-menu.html
index 512063ed7..adaa668d0 100644
--- a/src/pages/_includes/layout/navbar-menu.html
+++ b/src/pages/_includes/layout/navbar-menu.html
@@ -57,7 +57,7 @@
 						{{ level-2[1].title }}
 
 						{% if level-2[1].badge %}
-						<span class="badge badge-sm bg-green text-uppercase ms-2">{{ level-2[1].badge }}</span>
+						<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">{{ level-2[1].badge }}</span>
 						{% endif %}
 					</a>
 
@@ -68,7 +68,7 @@
 							{{ level-3[1].title }}
 
 							{% if level-3[1].badge %}
-							<span class="badge badge-sm bg-green text-uppercase ms-2">{{ level-3[1].badge }}</span>
+							<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">{{ level-3[1].badge }}</span>
 							{% endif %}
 						</a>
 						{% endfor %}
diff --git a/src/pages/badges.html b/src/pages/badges.html
new file mode 100644
index 000000000..418da3685
--- /dev/null
+++ b/src/pages/badges.html
@@ -0,0 +1,97 @@
+---
+title: Badges
+page-header: Badges
+menu: base.badges
+---
+
+<div class="row row-cards">
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h1>Example heading <span class="badge">New</span></h1>
+				<h2>Example heading <span class="badge">New</span></h2>
+				<h3>Example heading <span class="badge">New</span></h3>
+				<h4>Example heading <span class="badge">New</span></h4>
+				<h5>Example heading <span class="badge">New</span></h5>
+				<h6>Example heading <span class="badge">New</span></h6>
+			</div>
+		</div>
+	</div>
+	<div class="col-8">
+		<div class="row row-cards">
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<div class="badges-list">
+							{% for color in site.colors %}
+							<span class="badge bg-{{ color[0] }}">{{ color[1].title }}</span>
+							{% endfor %}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<div class="badges-list">
+							{% for color in site.colors %}
+							<span class="badge bg-{{ color[0] }}-lt">{{ color[1].title }}</span>
+							{% endfor %}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<div class="badges-list">
+							{% for color in site.colors %}
+							<span class="badge badge-outline text-{{ color[0] }}">{{ color[1].title }}</span>
+							{% endfor %}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-sm-6 col-lg-3">
+		{% include ui/dropdown-menu.html show=true badge=true arrow=true %}
+	</div>
+	<div class="col-sm-6 col-lg-9">
+		<div class="row row-cards">
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<div class="btn-list">
+							{% for color in site.colors %}
+							<button class="btn">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} ms-2">{{ forloop.index }}</span></button>
+							{% endfor %}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<div class="btn-list">
+							{% for color in site.colors %}
+							<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} badge-notification badge-pill">{{ forloop.index }}</span></button>
+							{% endfor %}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-12">
+				<div class="card">
+					<div class="card-body">
+						<div class="btn-list">
+							{% for color in site.colors %}
+							<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} badge-notification badge-blink"></span></button>
+							{% endfor %}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/scss/_core.scss b/src/scss/_core.scss
index 9bfa6e4f8..fae98573e 100644
--- a/src/scss/_core.scss
+++ b/src/scss/_core.scss
@@ -4,6 +4,7 @@
 @import "fonts/webfonts";
 
 @import "layout/root";
+@import "layout/animations";
 @import "layout/core";
 @import "layout/navbar";
 @import "layout/page";
diff --git a/src/scss/layout/_animations.scss b/src/scss/layout/_animations.scss
new file mode 100644
index 000000000..3c72a0d9c
--- /dev/null
+++ b/src/scss/layout/_animations.scss
@@ -0,0 +1,62 @@
+@keyframes pulse {
+  from {
+    opacity: 1;
+    transform: scale3d(.8, .8, .8)
+  }
+
+  50% {
+    transform: scale3d(1, 1, 1);
+    opacity: 1
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(.8, .8, .8)
+  }
+}
+
+@keyframes tada {
+  0% {
+    transform: scale3d(1, 1, 1)
+  }
+
+  10%, 5% {
+    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
+  }
+
+  15%, 25%, 35%, 45% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg)
+  }
+
+  20%, 30%, 40% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg)
+  }
+
+  50% {
+    transform: scale3d(1, 1, 1)
+  }
+}
+
+@keyframes rotate-360 {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes blink {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/scss/mixins/_mixins.scss b/src/scss/mixins/_mixins.scss
index 460271b51..0523703bb 100644
--- a/src/scss/mixins/_mixins.scss
+++ b/src/scss/mixins/_mixins.scss
@@ -101,4 +101,14 @@
   --#{$prefix}btn-disabled-border-color: transparent;
   --#{$prefix}gradient: none;
   --#{$prefix}btn-box-shadow: none;
+}
+
+//
+// Elements list
+//
+@mixin elements-list($gap: .5rem) {
+  --#{$prefix}list-gap: #{$gap};
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--#{$prefix}list-gap);
 }
\ No newline at end of file
diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss
index 09500a419..dfaddafd7 100644
--- a/src/scss/ui/_avatars.scss
+++ b/src/scss/ui/_avatars.scss
@@ -52,18 +52,7 @@
 
 
 .avatar-list {
-  display: inline-flex;
-  padding: 0;
-  margin: 0 0 -.5rem;
-  flex-wrap: wrap;
-
-  .avatar {
-    margin-bottom: .5rem;
-
-    &:not(:last-child) {
-      margin-right: .5rem;
-    }
-  }
+  @include elements-list;
 
   a.avatar {
     &:hover {
diff --git a/src/scss/ui/_badges.scss b/src/scss/ui/_badges.scss
index 7883ee890..2a0b0cde5 100644
--- a/src/scss/ui/_badges.scss
+++ b/src/scss/ui/_badges.scss
@@ -40,18 +40,39 @@
   }
 }
 
-.badge-sm {
-  font-size: $h6-font-size;
-  line-height: $h6-line-height;
-  padding: 0 .25rem;
-}
-
-// bordered
+//
+// Outline badge
+//
 .badge-outline {
   background-color: transparent;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) currentColor;
 }
 
+//
+// Pill badge
+//
 .badge-pill {
   border-radius: $border-radius-pill;
+}
+
+//
+// Badges list
+//
+.badges-list {
+  @include elements-list;
+}
+
+//
+// Notification badge
+//
+.badge-notification {
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  transform: translate(50%, -50%);
+  z-index: 1;
+}
+
+.badge-blink {
+  animation: blink 2s infinite;
 }
\ No newline at end of file
diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss
index 8f55ad2a9..252e8e470 100644
--- a/src/scss/ui/_buttons.scss
+++ b/src/scss/ui/_buttons.scss
@@ -150,14 +150,7 @@
 // Button list
 //
 .btn-list {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: -.5rem !important;
-  margin-right: -.5rem;
-
-  > * {
-    margin: 0 .5rem .5rem 0 !important;
-  }
+  @include elements-list;
 }
 
 //
diff --git a/src/scss/ui/_icons.scss b/src/scss/ui/_icons.scss
index 62eab7bf4..f236afc2c 100644
--- a/src/scss/ui/_icons.scss
+++ b/src/scss/ui/_icons.scss
@@ -1,7 +1,11 @@
+//
+// Icon component
+//
 .icon {
-  width: $font-size-base * $line-height-base;
-  height: $font-size-base * $line-height-base;
-  font-size: $font-size-base * $line-height-base;
+  --#{$prefix}icon-size: #{$font-size-base * $line-height-base};
+  width: var(--#{$prefix}icon-size);
+  height: var(--#{$prefix}icon-size);
+  font-size: var(--#{$prefix}icon-size);
   vertical-align: bottom;
 
   @if $icon-stroke-width {
@@ -13,91 +17,56 @@
   }
 }
 
+//
+// Inline icon
+//
 .icon-inline {
-  width: 1rem;
-  height: 1rem;
-  font-size: 1rem;
+  --#{$prefix}icon-size: 1rem;
   vertical-align: -.2rem;
 }
 
+//
+// Filled icon
+//
 .icon-filled {
   fill: currentColor;
 }
 
+//
+// Icon size
+//
 .icon-sm {
-  width: 1rem;
-  height: 1rem;
+  --#{$prefix}icon-size: 1rem;
   stroke-width: 1;
 }
 
 .icon-md {
-  width: 2.5rem;
-  height: 2.5rem;
+  --#{$prefix}icon-size: 2.5rem;
   stroke-width: 1;
 }
 
 .icon-lg {
-  width: 3.5rem;
-  height: 3.5rem;
+  --#{$prefix}icon-size: 3.5rem;
   stroke-width: 1;
 }
 
-@keyframes icon-pulse {
-  from {
-    opacity: 1;
-    transform: scale3d(.8, .8, .8)
-  }
-  50% {
-    transform: scale3d(1, 1, 1);
-    opacity: 1
-  }
-  to {
-    opacity: 1;
-    transform: scale3d(.8, .8, .8)
-  }
-}
-
+//
+// Icons animation
+//
 .icon-pulse {
   transition: all .15s ease 0s;
-  animation: icon-pulse 2s ease infinite;
+  animation: pulse 2s ease infinite;
   animation-fill-mode: both
 }
 
-@keyframes icon-tada {
-  0% {
-    transform: scale3d(1, 1, 1)
-  }
-  10%, 5% {
-    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
-  }
-  15%, 25%, 35%, 45% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg)
-  }
-  20%, 30%, 40% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg)
-  }
-  50% {
-    transform: scale3d(1, 1, 1)
-  }
-}
-
 .icon-tada {
   transition: all .15s ease 0s;
-  animation: icon-tada 3s ease infinite;
+  animation: tada 3s ease infinite;
   animation-fill-mode: both
 }
 
-@keyframes icon-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .icon-rotate {
   transition: all .15s ease 0s;
-  animation: icon-rotate 3s linear infinite;
+  animation: rotate-360 3s linear infinite;
   animation-fill-mode: both
 }
\ No newline at end of file
diff --git a/src/scss/ui/_loaders.scss b/src/scss/ui/_loaders.scss
index 619e7592a..341d90f07 100644
--- a/src/scss/ui/_loaders.scss
+++ b/src/scss/ui/_loaders.scss
@@ -1,13 +1,3 @@
-@keyframes loader {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .loader {
   position: relative;
   display: block;
@@ -29,7 +19,7 @@
     border-left-color: currentColor;
 
     border-radius: $border-radius-pill;
-    animation: loader .6s linear;
+    animation: rotate-360 .6s linear;
     animation-iteration-count: infinite;
   }
 }