diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk
index 06a0e64..e7192a0 100644
--- a/docs/_includes/default.njk
+++ b/docs/_includes/default.njk
@@ -24,14 +24,46 @@
 
   </head>
   <body>
-    {# Menu trigger #}
-    <a class="menu-trigger text-muted" href="#nav">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
-        <path d="M4 6l16 0" />
-        <path d="M4 12l16 0" />
-        <path d="M4 18l16 0" />
-      </svg>
-    </a>
+    <header>
+      {# Menu trigger #}
+      <a class="menu-trigger text-muted" href="#nav">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
+          <path d="M4 6l16 0" />
+          <path d="M4 12l16 0" />
+          <path d="M4 18l16 0" />
+        </svg>
+      </a>
+
+      <div class="controls">
+        <div>
+          <a class="button hollow neutral rounded-full" href="#search" onclick="focusSearch()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+            Search
+          </a>
+        </div>
+        <div class="theme-mode">
+          <button id="light-mode" onclick="setLight()" class="ghost neutral rounded-full">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+          </button>
+          <button id="dark-mode" onclick="setDark()" class="ghost neutral rounded-full">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+          </button>
+        </div>
+      </div>
+    </header>
+
+    {# Search result #}
+    <div id="search">
+      <input type="search" placeholder="Search" autofocus />
+      <hr />
+      <div id="result">
+        <div class="state empty">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3" /><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3" /><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7" /><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1" /><path d="M17 12h.01" /><path d="M13 12h.01" /></svg>
+          <h4>Waiting for search input</h4>
+          <p class="text-muted">Please type something into the search field.</p>
+        </div>
+      </div>
+    </div>
 
     {# Global navigation #}
     <aside id="nav">
@@ -47,11 +79,11 @@
         </div>
         <div class="actions">
           <a href="{{ repoUrl }}" target="_blank" class="button hollow neutral sm">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
             GitHub
           </a>
           <a href="{{ donationUrl }}" target="_blank" class="button hollow sm">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
             Support
           </a>
         </div>
diff --git a/docs/assets/scripts/docs.js b/docs/assets/scripts/docs.js
index 24bb1c1..da711d8 100644
--- a/docs/assets/scripts/docs.js
+++ b/docs/assets/scripts/docs.js
@@ -1,3 +1,73 @@
+// Theming
+const lightToggle = document.querySelector('#light-mode');
+const darkToggle = document.querySelector('#dark-mode');
+const setDark = () => {
+  localStorage.setItem('sloth.css/theme', 'dark');
+  document.documentElement.style.colorScheme = 'dark';
+  darkToggle.classList.add(['text-accent']);
+  lightToggle.classList.remove(['text-accent']);
+};
+const setLight = () => {
+  localStorage.setItem('sloth.css/theme', 'light');
+  document.documentElement.style.colorScheme = 'light';
+  lightToggle.classList.add(['text-accent']);
+  darkToggle.classList.remove(['text-accent']);
+};
+
+// Search
+let index = [];
+fetch('/assets/scripts/searchIndex.json')
+  .then((response) => response.json())
+  .then((data) => { index = data; });
+
+const search = document.querySelector('#search');
+const searchInput = search.querySelector('input');
+const searchResult = search.querySelector('#result');
+searchInput.addEventListener('input', (event) => {
+  const query = event.target.value.toLowerCase();
+
+  // Handle empty input
+  if (!query.length) {
+    searchResult.innerHTML = `<div class="state empty">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3" /><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3" /><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7" /><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1" /><path d="M17 12h.01" /><path d="M13 12h.01" /></svg>
+      <h4>Waiting for search input</h4>
+      <p class="text-muted">Please type something into the search field.</p>
+    </div>`;
+    return;
+  }
+
+  // Calculate search result
+  const result = index.filter((e) => (`${e.title} ${e.text} ${e.tags}`).toLowerCase().includes(query));
+
+  // Handle search results
+  if (result.length) {
+    searchResult.innerHTML = result.reduce((p, c) => {
+      const icon = {
+        'getting-started': '<path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3" /><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3" /><path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
+        'core': '<path d="M6 17.6l-2 -1.1v-2.5" /><path d="M4 10v-2.5l2 -1.1" /><path d="M10 4.1l2 -1.1l2 1.1" /><path d="M18 6.4l2 1.1v2.5" /><path d="M20 14v2.5l-2 1.12" /><path d="M14 19.9l-2 1.1l-2 -1.1" /><path d="M12 12l2 -1.1" /><path d="M18 8.6l2 -1.1" /><path d="M12 12l0 2.5" /><path d="M12 18.5l0 2.5" /><path d="M12 12l-2 -1.12" /><path d="M6 8.6l-2 -1.1" />',
+        'utilities': '<path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5" />',
+        'components': '<path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z" /><path d="M15 4h1a1 1 0 0 1 1 1v3.5" /><path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374" />',
+      }[c.cat];
+      return `${p}<a href="${c.url}" class="entry">
+        <div class="text-muted">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">${icon}</svg>
+        </div>
+        <div>
+          <h5>${c.name}</h5>
+          <div class="text-muted">${c.text}</div>
+        </div>
+      </a>`;
+    }, '')
+  } else {
+    searchResult.innerHTML = `<div class="state empty">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M3 7v4a1 1 0 0 0 1 1h3" /><path d="M7 7v10" /><path d="M10 8v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1z" /><path d="M17 7v4a1 1 0 0 0 1 1h3" /><path d="M21 7v10" /></svg>
+      <h4>Sorry, no matching pages found</h4>
+      <p class="text-muted">Please try changing the search term.</p>
+    </div>`;
+  }
+});
+const focusSearch = () => setTimeout(() => searchInput.focus(), 50);
+
 // Component: Toast
 const toast = document.querySelector('#toast');
 const toggleToast = () => toast.classList.toggle('active');
@@ -11,3 +81,16 @@ const colorToast = (col) => {
   toastColors.forEach(c => toast.classList.remove(c));
   toast.classList.add(col);
 }
+
+// Ready? Let's go!
+(() => {
+  // Handle initial theme mode
+  if (localStorage.getItem('sloth.css/theme') === 'dark') {
+    document.documentElement.style.colorScheme = 'dark';
+    darkToggle.classList.add('text-accent');
+  }
+  if (localStorage.getItem('sloth.css/theme') === 'light') {
+    document.documentElement.style.colorScheme = 'light';
+    lightToggle.classList.add('text-accent');
+  }
+})();
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 133033c..2758961 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -1,3 +1,7 @@
+html {
+  scrollbar-width: thin;
+}
+
 /* Page layout with collapsible sidebar menu (CSS only) */
 body {
   position: relative;
@@ -8,14 +12,137 @@ body {
   margin: 0;
   padding: 0;
 
-  & > .menu-trigger {
+  & > header {
     display: flex;
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-    padding: .5rem;
-    transition: none;
-    z-index: 1;
+    justify-content: space-between;
+    position: fixed;
+    z-index: 15;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 1rem;
+    background-color: color-mix(in srgb, var(--color-bg-page) 75%, transparent);
+    backdrop-filter: blur(10px);
+
+    .menu-trigger {
+      display: flex;
+      top: 1rem;
+      left: 1rem;
+      padding: .5rem;
+      transition: none;
+      z-index: 1;
+    }
+
+    .controls {
+      background-color: transparent;
+      backdrop-filter: initial;
+      margin: -1rem 1rem 0 0;
+      padding: 1rem 0 0 0;
+      border-bottom-left-radius: 2rem;
+      border-bottom-right-radius: 2rem;
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+
+      .theme-mode {
+        display: flex;
+        align-items: center;
+
+        button:has(.icon:only-child) {
+          color: var(--color-neutral);
+          padding: .5rem;
+
+          &.text-accent {
+            color: var(--color-accent);
+          }
+        }
+      }
+    }
+  }
+
+  & > #search {
+    display: none;
+    position: fixed;
+    width: calc(100% - 2rem);
+    margin: 0 auto;
+    max-width: var(--screen-sm);
+    overflow: visible;
+    background-color: var(--color-bg-base);
+    z-index: 40;
+    top: 10vh;
+    left: 0;
+    right: 0;
+    border-radius: .25rem;
+    box-shadow: black 0 .5rem 1.5rem -.8rem;
+
+    input[type='search'] {
+      font-size: 1.5rem;
+      padding: 1.5rem;
+      position: sticky;
+      z-index: 45;
+      top: 0;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    hr {
+      margin: 0;
+    }
+
+    & > #result {
+      max-height: 50vh;
+      box-sizing: border-box;
+      overflow-y: auto;
+      padding-top: 1rem;
+      padding-bottom: 2rem;
+
+      & > .state {
+        background-color: transparent;
+
+        .icon {
+          width: 4rem;
+          height: 4rem;
+        }
+      }
+
+      & > .entry {
+        padding: .75rem 2rem;
+        text-decoration: none;
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+
+        &:hover {
+          background-color: var(--color-border);
+        }
+
+        .icon {
+          width: 2.5rem;
+          height: 2.5rem;
+          stroke-width: 1;
+        }
+
+        div:nth-child(2) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          h5 {
+            margin-bottom: 0;
+            text-transform: capitalize;
+          }
+        }
+      }
+    }
+
+    &:target,
+    &.active {
+      display: block;
+
+      & ~ aside ~ .menu-overlay {
+        display: block;
+        z-index: 25;
+      }
+    }
   }
 
   & > aside {
@@ -23,6 +150,8 @@ body {
     position: fixed;
     width: 14rem;
     overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
     bottom: 0;
     top: 0;
     left: 0;
@@ -34,12 +163,11 @@ body {
     &:target,
     &.active {
       transform: translateX(0);
-    }
 
-    &:target ~ .menu-overlay,
-    &.active ~ .menu-overlay {
-      display: block;
-      z-index: 10;
+      & ~ .menu-overlay {
+        display: block;
+        z-index: 18;
+      }
     }
 
     header {
@@ -61,6 +189,10 @@ body {
         display: flex;
         align-items: center;
         gap: .75rem;
+
+        a {
+          flex-grow: 1;
+        }
       }
     }
     
@@ -89,6 +221,10 @@ body {
     box-sizing: border-box;
     transition: var(--transition-spacing);
 
+    #content {
+      transition: opacity .15s ease;;
+    }
+
     footer {
       margin: 4rem 0;
     }
@@ -96,7 +232,7 @@ body {
 
   &>.menu-overlay {
     position: fixed;
-    background: #00000055;
+    background: #00000077;
     border: none;
     bottom: 0;
     display: none;
@@ -118,13 +254,24 @@ body {
       transform: none;
     }
 
+    &>header {
+      background-color: transparent;
+      backdrop-filter: initial;
+
+      .controls {
+        padding: 1rem;
+        background-color: color-mix(in srgb, var(--color-bg-page) 75%, transparent);
+        backdrop-filter: blur(10px);
+      }
+    }
+
     &>main {
       padding-top: 2rem;
       padding-left: 18rem;
     }
 
     &>.menu-overlay {
-      display: none !important;
+      display: none;
     }
   }
 }
@@ -175,6 +322,7 @@ body {
 pre[class^='language-'] {
   position: relative;
   max-height: 20rem;
+  scrollbar-width: thin;
 
   &::before {
     content: 'code';
diff --git a/docs/pages/components/badge.md b/docs/pages/components/badge.md
index 4880484..f53d399 100644
--- a/docs/pages/components/badge.md
+++ b/docs/pages/components/badge.md
@@ -1,11 +1,12 @@
 ---
 title: 'Components: Badge - Sloth.css'
-description: Badge component of Sloth.css.
+description: Status, event or count indicators on text elements or buttons
+tags: text button notification pulse
 ---
 
 ## Badge
 
-Badges indicate the status of an element, the appearance of an event or counts on buttons or other elements.
+Badges indicate the status of an element, the appearance of an event or counts on text elements or buttons.
 
 ### Basic text badges
 
diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md
index d9e3aa5..1329965 100644
--- a/docs/pages/components/breadcrumb.md
+++ b/docs/pages/components/breadcrumb.md
@@ -1,13 +1,12 @@
 ---
 title: 'Components: Breadcrumb - Sloth.css'
-description: Breadcrumb component of Sloth.css.
+description: Lists of links for vertical (depth) navigation
+tags: menu navigate path
 ---
 
 ## Breadcrumb
 
-Breadcrumbs are a list of links to return from the depths of a website's page hierarchy
-to higher levels again. Wrapping is disabled for breadcrumbs. If the list overflows its container,
-a horizontal scrollbar appears.
+Breadcrumbs are lists of links to navigate from the depths of a website's page hierarchy back to higher levels again. Wrapping is disabled for breadcrumbs. If the list overflows its container, a horizontal scrollbar appears.
 
 ### Basic breadcrumb path
 
diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md
index 3a4aa5b..3ba64dc 100644
--- a/docs/pages/components/button.md
+++ b/docs/pages/components/button.md
@@ -1,6 +1,7 @@
 ---
 title: 'Components: Button - Sloth.css'
-description: Button component of Sloth.css.
+description: Buttons indicate actions the user can trigger on click
+tags: variants accent neutral success alert disabled size secondary outline link pill ghost icon busy loading group
 ---
 
 ## Button
diff --git a/docs/pages/components/callout.md b/docs/pages/components/callout.md
index 67884c4..e83105f 100644
--- a/docs/pages/components/callout.md
+++ b/docs/pages/components/callout.md
@@ -1,11 +1,12 @@
 ---
 title: 'Components: Callout - Sloth.css'
-description: Callout component of Sloth.css.
+description: Static and embedded message boxes
+tags: variants accent success alert neutral symbol
 ---
 
 ## Callout
 
-A callout is a static message component, that is embedded and always visible within its context.
+A callout is a static message box, that is embedded and always visible within its context.
 
 ### Basic callout
 
@@ -26,7 +27,7 @@ Use the `callout` class to create a box that emphasizes its content.
 <p class="callout">...</p>
 ```
 
-### Colored callout
+### Callout variants
 
 Use the `accent`, `success` or `alert` classes to give the callout more meaning.
 
diff --git a/docs/pages/components/loader.md b/docs/pages/components/loader.md
index cb2d904..0732a59 100644
--- a/docs/pages/components/loader.md
+++ b/docs/pages/components/loader.md
@@ -1,13 +1,14 @@
 ---
 title: 'Components: Loader - Sloth.css'
-description: Loader component of Sloth.css.
+description: Loaders indicates a busy state or ongoing process
+tags: variants accent success alert neutral size double button
 ---
 
 ## Loader
 
 A loader indicates a busy state, giving visual feedback for users that a process currently takes some time. This reassures the user, that an action got triggered in the first place and is still working or progressing.
 
-### Loader colors
+### Loader variants
 
 Use the `loader` class to add a loading indicator. The loadinng indicator is in accent colors per default. Use the `neutral`, `success` and `alert` classes to change the color accordingly.
 
diff --git a/docs/pages/components/separator.md b/docs/pages/components/separator.md
index 3fe8dfb..b5f5a35 100644
--- a/docs/pages/components/separator.md
+++ b/docs/pages/components/separator.md
@@ -1,6 +1,7 @@
 ---
 title: 'Components: Separator - Sloth.css'
-description: Separator component of Sloth.css.
+description: Separators divide content into different parts
+tags: horizontal vertical
 ---
 
 ## Separator
diff --git a/docs/pages/components/state.md b/docs/pages/components/state.md
index d790ca5..0954ddc 100644
--- a/docs/pages/components/state.md
+++ b/docs/pages/components/state.md
@@ -1,12 +1,12 @@
 ---
 title: 'Components: State - Sloth.css'
-description: State component of Sloth.css.
+description: Placeholder areas that indicate a empty or highlighted state
+tags: placeholder empty highlight
 ---
 
 ## State
 
-The state component can be used for areas that indicate a certain state for users to get information,
-that something is missing or needs to be done first to achieve a goal.
+The state component can be used for areas that indicate a certain state for users to get information, that something is missing or needs to be done first to achieve a goal.
 
 ### Empty state
 
diff --git a/docs/pages/components/toast.md b/docs/pages/components/toast.md
index 6ce4359..5d2ad81 100644
--- a/docs/pages/components/toast.md
+++ b/docs/pages/components/toast.md
@@ -1,6 +1,7 @@
 ---
 title: 'Components: Toast - Sloth.css'
-description: Toast notification component of Sloth.css.
+description: Dynamic notification callout extension
+tags: callout position variants neutral accent success alert
 ---
 
 ## Toast
@@ -56,7 +57,7 @@ Use the `br`, `tr`, `tl` and `bl` classes to position the toast notification on
 <div class="toast callout br">...</div>
 ```
 
-### Colored toasts
+### Toast variants
 
 Use the `accent`, `success` or `alert` classes to give the toast notification a different meaning.
 
diff --git a/docs/pages/core/embeds.md b/docs/pages/core/embeds.md
index b2b6816..e7abec7 100644
--- a/docs/pages/core/embeds.md
+++ b/docs/pages/core/embeds.md
@@ -1,6 +1,7 @@
 ---
 title: 'Core: Embeds - Sloth.css'
-description: Drop-in styles of Sloth.css for media and other embedded elements.
+description: Media elements like images and figures and other embeddable elements
+tags: image meter progress
 ---
 
 ## Embeds
diff --git a/docs/pages/core/form.md b/docs/pages/core/form.md
index f7768aa..0f2c65c 100644
--- a/docs/pages/core/form.md
+++ b/docs/pages/core/form.md
@@ -1,6 +1,7 @@
 ---
 title: 'Core: Form - Sloth.css'
-description: Drop-in styles of Sloth.css for all kinds of input elements and buttons.
+description: Form control elements like inputs, selects and buttons
+tags: input textarea picker choice checkbox radio button select state fieldset
 ---
 
 ## Form
diff --git a/docs/pages/core/typography.md b/docs/pages/core/typography.md
index 1b8b2bb..644ba0b 100644
--- a/docs/pages/core/typography.md
+++ b/docs/pages/core/typography.md
@@ -1,6 +1,7 @@
 ---
 title: 'Core: Typography - Sloth.css'
-description: Drop-in styles of Sloth.css for all typography related HTML tags.
+description: Consistent text presentation
+tags: heading paragraph blockquote list rule table code inline strong emphasized italic
 ---
 
 ## Typography
diff --git a/docs/pages/getting-started/changelog.md b/docs/pages/getting-started/changelog.md
index 0edca82..7e88c4d 100644
--- a/docs/pages/getting-started/changelog.md
+++ b/docs/pages/getting-started/changelog.md
@@ -1,6 +1,7 @@
 ---
 title: 'Changelog - Sloth.css'
-description: Getting started with Sloth.css, see what's new.
+description: Overview of all versions and see what's new
+tags: release version changes
 ---
 
 ## Changelog
diff --git a/docs/pages/getting-started/contributing.md b/docs/pages/getting-started/contributing.md
index 2ba30b2..f5940d4 100644
--- a/docs/pages/getting-started/contributing.md
+++ b/docs/pages/getting-started/contributing.md
@@ -1,6 +1,7 @@
 ---
 title: 'Contributing - Sloth.css'
-description: Getting started with Sloth.css, how to contribute.
+description: Contribution guidelines
+tags: support report bug suggest enhancment issue git commit testing
 ---
 
 ## Contributing
diff --git a/docs/pages/getting-started/installation.md b/docs/pages/getting-started/installation.md
index b9bbfbf..2ee9d6e 100644
--- a/docs/pages/getting-started/installation.md
+++ b/docs/pages/getting-started/installation.md
@@ -1,6 +1,7 @@
 ---
 title: 'Installation - Sloth.css'
-description: Getting started with Sloth.css, how to install it.
+description: Installation instructions and how to get started
+tags: cdn npm drop-in
 ---
 
 ## Installation
diff --git a/docs/pages/getting-started/usage.md b/docs/pages/getting-started/usage.md
index e34de23..4bcf605 100644
--- a/docs/pages/getting-started/usage.md
+++ b/docs/pages/getting-started/usage.md
@@ -1,6 +1,7 @@
 ---
 title: 'Usage - Sloth.css'
-description: Getting started with Sloth.css, how to use it.
+description: How to use Sloth.css
+tags: drop-in utility component customizing
 ---
 
 ## Usage
diff --git a/docs/pages/index.md b/docs/pages/index.md
index b1ce811..31a4833 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -1,6 +1,6 @@
 ---
 title: 'Sloth.css: A drop-in utility component CSS library for lazy mammals.'
-description: Hand-crafted core styles, utility classes and components for dropping in.
+description: Hand-crafted core styles, utility classes and components for dropping in
 ---
 
 <header role="banner" class="text-center">
diff --git a/docs/pages/utilities/border.md b/docs/pages/utilities/border.md
index 1c35d1b..015492a 100644
--- a/docs/pages/utilities/border.md
+++ b/docs/pages/utilities/border.md
@@ -1,6 +1,7 @@
 ---
 title: 'Utilities: Border - Sloth.css'
-description: Utility classes of Sloth.css for border related styles.
+description: Controlling the border of elements
+tags: rounded shape
 ---
 
 ## Border
diff --git a/docs/pages/utilities/color.md b/docs/pages/utilities/color.md
index 00618cd..93c977e 100644
--- a/docs/pages/utilities/color.md
+++ b/docs/pages/utilities/color.md
@@ -1,6 +1,7 @@
 ---
 title: 'Utilities: Color - Sloth.css'
-description: Utility classes of Sloth.css for color related styles.
+description: Controlling colors of text and backgrounds
+tags: colour accent muted neutral success alert inverted
 ---
 
 ## Color
diff --git a/docs/pages/utilities/cursor.md b/docs/pages/utilities/cursor.md
index 33a44c9..1c742ff 100644
--- a/docs/pages/utilities/cursor.md
+++ b/docs/pages/utilities/cursor.md
@@ -1,6 +1,7 @@
 ---
 title: 'Utilities: Cursor - Sloth.css'
-description: Utility classes of Sloth.css for cursors.
+description: Controlling cursor types
+tags: default pointer help not-allowed
 ---
 
 ## Cursor
diff --git a/docs/pages/utilities/dimension.md b/docs/pages/utilities/dimension.md
index d5237fb..6de9d67 100644
--- a/docs/pages/utilities/dimension.md
+++ b/docs/pages/utilities/dimension.md
@@ -1,6 +1,7 @@
 ---
 title: 'Utilities: Dimension - Sloth.css'
-description: Utility classes of Sloth.css for size related styles.
+description: Controlling the size of elements
+tags: width height maximum screen
 ---
 
 ## Dimension
diff --git a/docs/pages/utilities/display.md b/docs/pages/utilities/display.md
index 2eb2cd1..3958b50 100644
--- a/docs/pages/utilities/display.md
+++ b/docs/pages/utilities/display.md
@@ -1,6 +1,7 @@
 ---
 title: 'Utilities: Display - Sloth.css'
-description: Utility classes of Sloth.css for display types.
+description: Controlling the display type of elements
+tags: flex grid column wrap inline block visibility hidden
 ---
 
 ## Display
diff --git a/docs/pages/utilities/effects.md b/docs/pages/utilities/effects.md
index a8fdfe3..5263fd6 100644
--- a/docs/pages/utilities/effects.md
+++ b/docs/pages/utilities/effects.md
@@ -1,6 +1,7 @@
 ---
 title: 'Utilities: Effects - Sloth.css'
-description: Utility classes of Sloth.css for special effects.
+description: Controlling elevation and transformation of elements
+tags: shadow rotate
 ---
 
 ## Effects
diff --git a/docs/pages/utilities/positioning.md b/docs/pages/utilities/positioning.md
index 0525818..8caff6e 100644
--- a/docs/pages/utilities/positioning.md
+++ b/docs/pages/utilities/positioning.md
@@ -1,6 +1,7 @@
 ---
 title: 'Utilities: Positioning - Sloth.css'
-description: Utility classes of Sloth.css for positions, alignment and overflow.
+description: Controlling position, alignment and overflow of elements
+tags: relative absolute fixed sticky center scroll
 ---
 
 ## Positioning
diff --git a/docs/pages/utilities/spacing.md b/docs/pages/utilities/spacing.md
index 7561691..b925408 100644
--- a/docs/pages/utilities/spacing.md
+++ b/docs/pages/utilities/spacing.md
@@ -1,6 +1,7 @@
 ---
 title: 'Utilities: Spacing - Sloth.css'
-description: Utility classes of Sloth.css for margins, paddings and the space in between positioned elements.
+description: Controlling margins, paddings and the space in between elements
+tags: gap placement inset left right bottom top
 ---
 
 ## Spacing
diff --git a/docs/pages/utilities/text.md b/docs/pages/utilities/text.md
index f2692fa..076a099 100644
--- a/docs/pages/utilities/text.md
+++ b/docs/pages/utilities/text.md
@@ -1,6 +1,7 @@
 ---
 title: 'Utilities: Text - Sloth.css'
-description: Utility classes of Sloth.css for text.
+description: Controlling text and font appearance
+tags: underline line-through transnform uppercase lowercase capitalize font-weight font-family size truncate balance whitespace-nowrap vertical
 ---
 
 ## Text
diff --git a/eleventy.config.js b/eleventy.config.js
index 2840be2..330a3f2 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,9 +1,53 @@
+const fs = require('fs');
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 
 module.exports = function(eleventyConfig) {
+  // Get utility sections
+  // Those can be retrieved from the single _utilities.css file.
+  // Every section is a single line CSS comment
+  const slothUtilitySections = [];
+  fs.readFileSync('src/_utilities.css').toString().split("\n").filter((l) => l.startsWith('/*')).forEach((section) => {
+    slothUtilitySections.push(section.trim().slice(2, -2).trim().toLowerCase());
+  });
+
+  // Get components
+  // Those can be retrieved by all files existing in the components/ directory
+  const slothComponents = [];
+  fs.readdirSync('src/components').forEach(file => {
+    slothComponents.push(file.slice(1, -4));
+  });
+
   // Init plugins
   eleventyConfig.addPlugin(syntaxHighlight);
 
+  // Build search index
+  const index = [];
+  const docsSrc = 'docs/pages/';
+  const dirs = fs.readdirSync(docsSrc, { withFileTypes: true }).filter((e) => e.isDirectory()).map((d) => d.name);
+  dirs.forEach((d) => {
+    fs.readdirSync(`${docsSrc}${d}`).forEach(file => {
+      const name = file.slice(0, -3);
+      const meta = fs.readFileSync(`${docsSrc}${d}/${file}`).toString().split("\n", 5);
+      const title = meta.filter((l) => l.startsWith('title:')).join().slice(6).trim();
+      const text = meta.filter((l) => l.startsWith('description:')).join().slice(12).trim();
+      const tags = meta.filter((l) => l.startsWith('tags:')).join().slice(5).trim();
+      index.push({
+        title: title,
+        name: name,
+        url: `/${d}/${name}`,
+        text: text,
+        tags: tags,
+        cat: d
+      });
+    });
+  });
+
+  // Sort entries alphabetically by title
+  index.sort((a, b) => a.title.localeCompare(b.title));
+
+  // Write search index to file
+  fs.writeFileSync('docs/public/assets/scripts/searchIndex.json', JSON.stringify(index));
+
   // Global data
   eleventyConfig.addGlobalData('baseUrl', 'https://slothcss.devmount.com');
   eleventyConfig.addGlobalData('repoUrl', 'https://github.com/devmount/sloth.css');
@@ -16,27 +60,8 @@ module.exports = function(eleventyConfig) {
     title: 'Sloth.css',
     version: '0.1.1',
     description: 'A drop-in utility component CSS library for lazy mammals.',
-    utilitySections: [
-      'border',
-      'color',
-      'dimension',
-      'display',
-      'positioning',
-      'spacing',
-      'cursor',
-      'text',
-      'effects',
-    ],
-    components: [
-      'badge',
-      'breadcrumb',
-      'button',
-      'callout',
-      'loader',
-      'separator',
-      'state',
-      'toast',
-    ],
+    utilitySections: slothUtilitySections,
+    components: slothComponents,
   });
 
   // Layout aliases
diff --git a/src/_utilities.css b/src/_utilities.css
index 623086e..8221b2a 100644
--- a/src/_utilities.css
+++ b/src/_utilities.css
@@ -6,7 +6,7 @@
   border-radius: 9999px;
 }
 
-/* Colors */
+/* Color */
 .text-accent {
   color: var(--color-accent);
 }
@@ -51,7 +51,7 @@
   background-color: var(--color-bg-alert);
 }
 
-/* Dimensions */
+/* Dimension */
 .w-8 {
   width: 2rem;
 }
@@ -309,7 +309,7 @@
   inset: 1rem;
 }
 
-/* Cursors */
+/* Cursor */
 .cursor-default {
   cursor: default;
 }
diff --git a/src/components/_button.css b/src/components/_button.css
index 1431cf3..2339526 100644
--- a/src/components/_button.css
+++ b/src/components/_button.css
@@ -1,8 +1,9 @@
-input[type="submit"],
 input[type="button"],
 input[type="reset"],
+input[type="submit"],
 button,
 a.button {
+  align-items: center;
   appearance: none;
   background-color: var(--color-bg-accent);
   border-radius: .25rem;
@@ -11,12 +12,11 @@ a.button {
   box-sizing: border-box;
   color: white;
   display: inline-flex;
-  align-items: center;
-  gap: .5rem;
   font-family: inherit;
   font-size: .875rem;
+  gap: .5rem;
+  justify-content: center;
   padding: .75rem 1rem;
-  text-align: center;
   text-decoration: none;
   transition:
     var(--transition-outline),
@@ -187,6 +187,7 @@ a.button {
   }
   &.rounded-full:has(.icon:only-child) {
     padding: .75rem;
+    border-radius: 9999px;
   }
 }
 
diff --git a/src/core/_form.css b/src/core/_form.css
index abc71ca..06207e2 100644
--- a/src/core/_form.css
+++ b/src/core/_form.css
@@ -175,6 +175,7 @@ input[type="range"] {
     }
   }
   &:focus, &:focus-within {
+    box-shadow: none;
     outline: none;
 
     &::-webkit-slider-runnable-track,
