diff --git a/public/components.html b/public/components.html
index 51098f3..6e33946 100644
--- a/public/components.html
+++ b/public/components.html
@@ -603,8 +603,17 @@
Sidebar
-<div class="progress">
- <div class="progress__inner" style="width: 20%;"></div>
+<div class="sidebar">
+ <div class="sidebar__inner">
+ <div class="sidebar__body">
+
+ </div>
+ <div class="sidebar__footer">
+ <button type="button" class="button m-bottom-0">
+ Close
+ </button>
+ </div>
+ </div>
</div>
@@ -638,8 +647,31 @@
Sidebar + Bar
-<div class="progress">
- <div class="progress__inner" style="width: 20%;"></div>
+<div class="sidebar">
+ <div class="sidebar__inner">
+
+ <div class="bar">
+ <div class="bar__main">
+ Sidebar
+ </div>
+ <div class="bar__end">
+ <button class="button button--transparent" type="button">
+ <svg class="icon fill-text-contrast" aria-hidden="true">
+ <use xlink:href="/symbol-defs.svg#icon-close"></use>
+ </svg>
+ </button>
+ </div>
+ </div>
+
+ <div class="sidebar__body">
+
+ </div>
+ <div class="sidebar__footer">
+ <button type="button" class="button m-bottom-0">
+ Close
+ </button>
+ </div>
+ </div>
</div>