diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.eot b/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.eot
new file mode 100644
index 0000000..cf2a252
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.eot differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.ttf b/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.ttf
new file mode 100644
index 0000000..407ed3e
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.ttf differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.woff b/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.woff
new file mode 100644
index 0000000..a6f5e8a
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.woff differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.woff2 b/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.woff2
new file mode 100644
index 0000000..adb5b15
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Bold.woff2 differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.eot b/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.eot
new file mode 100644
index 0000000..70968d6
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.eot differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.ttf b/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.ttf
new file mode 100644
index 0000000..784c2d0
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.ttf differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.woff b/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.woff
new file mode 100644
index 0000000..f0d6ed7
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.woff differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.woff2 b/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.woff2
new file mode 100644
index 0000000..3cc80cd
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-BoldItalic.woff2 differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.eot b/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.eot
new file mode 100644
index 0000000..53c1e62
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.eot differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.ttf b/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.ttf
new file mode 100644
index 0000000..dad4dcc
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.ttf differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.woff b/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.woff
new file mode 100644
index 0000000..fb690ec
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.woff differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.woff2 b/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.woff2
new file mode 100644
index 0000000..30cbd0d
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Italic.woff2 differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.eot b/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.eot
new file mode 100644
index 0000000..26e5357
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.eot differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.ttf b/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.ttf
new file mode 100644
index 0000000..9510ac8
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.ttf differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.woff b/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.woff
new file mode 100644
index 0000000..939ec2a
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.woff differ
diff --git a/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.woff2 b/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.woff2
new file mode 100644
index 0000000..2c23a36
Binary files /dev/null and b/packages/react-common-docs/public/fonts/mononoki/mononoki-Regular.woff2 differ
diff --git a/packages/react-common-docs/public/theme.css b/packages/react-common-docs/public/theme.css
index f34f5f7..f745c23 100644
--- a/packages/react-common-docs/public/theme.css
+++ b/packages/react-common-docs/public/theme.css
@@ -2,50 +2,102 @@
   font-family: 'Encode Sans';
   font-stretch: semi-expanded;
   font-weight: 400;
+  font-display: swap;
   src:
     local('Encode Sans Semi Expanded'),
-    local('Encode Sans');
+    local('Encode Sans'),
+    url(https://fonts.gstatic.com/s/encodesanssemiexpanded/v6/ke83OhAPMEZs-BDuzwftTNJ85JvwMOzE9d9Cca5TO401LgrjKXY.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Encode Sans';
   font-stretch: semi-expanded;
   font-weight: 700;
+  font-display: swap;
   src:
     local('Encode Sans Semi Expanded Bold'),
     local('Encode Sans Semi Expanded'),
-    local('Encode Sans');
+    local('Encode Sans'),
+    url(https://fonts.gstatic.com/s/encodesanssemiexpanded/v6/ke8yOhAPMEZs-BDuzwftTNJ85JvwMOzE9d9Cca5TMzYQOyfBJFyUGWQ.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Encode Sans';
   font-stretch: condensed;
   font-weight: 100;
+  font-display: swap;
   src:
     local('Encode Sans Condensed Thin'),
     local('Encode Sans Condensed'),
-    local('Encode Sans');
+    local('Encode Sans'),
+    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_76_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-5Z-OJwsnIHKQ.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Encode Sans';
   font-stretch: condensed;
   font-weight: 200;
+  font-display: swap;
   src:
     local('Encode Sans Condensed ExtraLight'),
     local('Encode Sans Condensed Extra Light'),
     local('Encode Sans Condensed'),
-    local('Encode Sans');
+    local('Encode Sans'),
+    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_46_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-SY6ZAC4ICHiYFQ.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Encode Sans';
   font-stretch: condensed;
   font-weight: 300;
+  font-display: swap;
   src:
     local('Encode Sans Condensed Light'),
     local('Encode Sans Condensed'),
-    local('Encode Sans');
+    local('Encode Sans'),
+    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_46_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-LY2ZAC4ICHiYFQ.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'mononoki';
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local('mononoki'),
+    url(fonts/mononoki/mononoki-Regular.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'mononoki';
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local('mononoki Bold'),
+    local('mononoki'),
+    url(fonts/mononoki/mononoki-Bold.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'mononoki';
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+  src:
+    local('mononoki'),
+    url(fonts/mononoki/mononoki-Italic.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'mononoki';
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+  src:
+    local('mononoki Bold'),
+    local('mononoki'),
+    url(fonts/mononoki/mononoki-BoldItalic.woff2) format('woff2');
 }
 
 :root {
diff --git a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
index 7786482..ce12f44 100644
--- a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
+++ b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
@@ -78,9 +78,10 @@ const SidebarToggle = styled('a')({
 
 const Actions = styled('div')({
   marginBottom: '4rem',
-  display: 'flex',
+  display: 'grid',
   gap: '1rem',
   alignItems: 'center',
+  gridTemplateColumns: 'auto auto',
 })
 
 const NavWrapper = styled('nav')({