diff --git a/docs/src/Router.tsx b/docs/src/Router.tsx
index 02bb2708..69542be7 100644
--- a/docs/src/Router.tsx
+++ b/docs/src/Router.tsx
@@ -1,7 +1,13 @@
-import { createHashRouter } from 'react-router-dom';
+import { Navigate, createHashRouter, redirect } from 'react-router-dom';
 
-import Changelog from './app/Changelog';
 import Docs from './app/Docs';
+import PageBeat from './app/Docs/pages/Beat';
+import Changelog from './app/Docs/pages/Changelog';
+import PageFade from './app/Docs/pages/Fade';
+import PageFlip from './app/Docs/pages/Flip';
+import PageInstallation from './app/Docs/pages/Installation';
+import PageRotate from './app/Docs/pages/Rotate';
+import PageSpin from './app/Docs/pages/Spin';
 import Error from './app/Error';
 import Home from './app/Home';
 import Icon from './app/Icon';
@@ -27,11 +33,42 @@ const router = createHashRouter([
       },
       {
         path: '/docs',
-        element: <Docs />
-      },
-      {
-        path: '/docs/changelog',
-        element: <Changelog />
+        element: <Docs />,
+        errorElement: <Error />,
+        children: [
+          {
+            index: true,
+            element: <Navigate to="installation" replace />
+          },
+          {
+            path: 'installation',
+            element: <PageInstallation />
+          },
+          {
+            path: 'spin',
+            element: <PageSpin />
+          },
+          {
+            path: 'rotate',
+            element: <PageRotate />
+          },
+          {
+            path: 'flip',
+            element: <PageFlip />
+          },
+          {
+            path: 'beat',
+            element: <PageBeat />
+          },
+          {
+            path: 'fade',
+            element: <PageFade />
+          },
+          {
+            path: 'changelog',
+            element: <Changelog />
+          }
+        ]
       }
     ]
   }
diff --git a/docs/src/app/Changelog.tsx b/docs/src/app/Changelog.tsx
deleted file mode 100644
index 5408eca0..00000000
--- a/docs/src/app/Changelog.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import { Container, Stack, Typography } from '@mui/joy';
-
-import Code from '@/design/components/Code';
-import Header from '@/design/layout/LayoutElements/Header';
-
-import Release from './Release';
-
-export default function Changelog() {
-  return (
-    <>
-      <Header>
-        <Typography level="h1" fontSize={48}>
-          Changelog
-        </Typography>
-      </Header>
-      <Container sx={{ my: 5 }}>
-        <Stack gap={5}>
-          <Release
-            name="Amicons 1.0 alpha 7"
-            date="February 2024"
-            version="1.0.0-alpha.7"
-            added={[
-              <>Introduces a brand new documentation website with improved component documentation with playground, this changelog, and much more.</>,
-              <>
-                The <Code>AmaranthIcon</Code> component has been renamed to <Code>Amicon</Code>.
-              </>,
-              <>
-                The <Code>Amicon</Code> component now supports the <Code>beat</Code> and <Code>fade</Code> property.
-              </>
-            ]}
-            changed={[
-              <>
-                We're updating our branding from Amaranth to Amicons, with a brand new logo and mascot to boot. While the <Code>Amaranth</Code> and{' '}
-                <Code>Amicons</Code> icons have existed at the same time in the previous version, we consider the removal of the <Code>Amaranth</Code> icon a
-                rename.
-              </>,
-              <>
-                The default values for all properties of our <Code>Amicon</Code> component are now being set to <Code>Undefined</Code> rather than a default
-                truthy value.
-              </>,
-              <>
-                The various CSS variables have been renamed to be more consistent with new variables introduced in this update. See the documentation for more
-                info.
-              </>,
-              <>
-                You can now pass properties to the <Code>Amicon</Code> component.
-              </>,
-              <>Various updates to the categorization of icons in the documentation.</>
-            ]}
-            fixed={[
-              <>
-                Fixed the <Code>expand</Code> icon including excessive shapes.
-              </>,
-              <>
-                Fixed the misalignment in the <Code>heading-2</Code> icon to better map the icon to a pixel grid.
-              </>,
-              <>
-                Fixes various issues with the CSS variables in the <Code>Amicon</Code> component.
-              </>
-            ]}
-            newIcons={[
-              '0',
-              '1',
-              '2',
-              '3',
-              '4',
-              '5',
-              '6',
-              '7',
-              '8',
-              '9',
-              'a',
-              'arrow-up-right-from-square',
-              'b',
-              'battery-charging',
-              'battery-empty',
-              'battery-exclamation',
-              'battery-full',
-              'battery-half',
-              'battery-low',
-              'battery-quarter',
-              'battery-slash',
-              'battery-three-quarter',
-              'broom',
-              'c',
-              'calculator',
-              'camera',
-              'car-side',
-              'clipboard',
-              'command',
-              'computer-mouse-scroll-wheel',
-              'computer-mouse',
-              'crop',
-              'cursor',
-              'd',
-              'dice-five',
-              'dice-four',
-              'dice-one',
-              'dice-six',
-              'dice-three',
-              'dice-two',
-              'dice',
-              'e',
-              'ellipsis-h',
-              'envelope-open',
-              'export',
-              'f',
-              'flask',
-              'folder-min',
-              'folder-open',
-              'folder-plus',
-              'frame',
-              'g',
-              'h',
-              'i',
-              'icons',
-              'j',
-              'k',
-              'keyboard-brightness-high',
-              'keyboard-brightness-low',
-              'keyboard',
-              'l',
-              'loader',
-              'm',
-              'n',
-              'o',
-              'option',
-              'p',
-              'q',
-              'r',
-              'road',
-              's',
-              'share-nodes',
-              'spinner',
-              'square-dashed',
-              'square',
-              'studio-384',
-              't',
-              'threads',
-              'toast',
-              'train-track',
-              'triangle-dashed',
-              'triangle',
-              'truck-pickup',
-              'truck-tow',
-              'u',
-              'v',
-              'w',
-              'x',
-              'y',
-              'z'
-            ]}
-            updatedIcons={[
-              'a-gum',
-              'envelope',
-              'facebook',
-              'heading-1',
-              'heading-2',
-              'heading-3',
-              'heading-4',
-              'heading-5',
-              'heading-6',
-              'patreon',
-              'safari',
-              'shuffle',
-              'translate',
-              'triangle-exclamation',
-              'volume-0',
-              'volume-1',
-              'volume-2',
-              'volume-3',
-              'volume-slash'
-            ]}
-            renamedIcons={[
-              { old: 'amaranth', new: 'amicons' },
-              { old: 'ellipsis', new: 'ellipsis-h' }
-            ]}
-            removedIcons={['amaranth', 'bootstrap', 'font-awesome']}
-          />
-          <Release
-            name="Amicons 1.0 alpha 6"
-            version="1.0.0-alpha.6"
-            date="30 January 2024"
-            newIcons={['align-center', 'align-justify', 'align-left', 'align-right', 'amicons', 'subscript', 'superscript']}
-          />
-          <Release name="Amicons 1.0 alpha 5" version="1.0.0-alpha.5" date="17 November 2023" newIcons={['circle']} />
-          <Release
-            name="Amicons 1.0 alpha 4"
-            version="1.0.0-alpha.4"
-            date="17 November 2023"
-            newIcons={[
-              'arrow-down-from-cloud',
-              'arrow-right-from-file',
-              'arrow-right-from-smartphone',
-              'arrow-right-to-file',
-              'arrow-up-to-cloud',
-              'compare',
-              'people-xmark',
-              'person-xmark',
-              'react'
-            ]}
-          />
-          <Release
-            name="Amicons 1.0 alpha 3"
-            version="1.0.0-alpha.3"
-            date="23 August 2023"
-            removed={[<>The repository no longer provides font files or CSS files.</>]}
-            newIcons={[
-              'table-cell-merge',
-              'table-column-insert-left',
-              'table-column-insert-right',
-              'table-column-min',
-              'table-header-cell',
-              'table-min',
-              'table-row-insert-bottom',
-              'table-row-insert-top',
-              'table-row-min'
-            ]}
-            updatedIcons={['chart-pie', 'circle-dashed', 'table-clcok', 'table-header-column', 'table-header-row', 'table', 'tag-geear', 'tag-plus', 'tag']}
-          />
-          <Release name="Amicons 1.0 alpha 2" version="1.0.0-alpha.2" date="22 August 2023" changed={[<>Migrations from ChangeWindows to Studio 384</>]} />
-        </Stack>
-      </Container>
-    </>
-  );
-}
diff --git a/docs/src/app/Docs.tsx b/docs/src/app/Docs.tsx
index 13366c3b..525888e1 100644
--- a/docs/src/app/Docs.tsx
+++ b/docs/src/app/Docs.tsx
@@ -1,14 +1,10 @@
+import { Outlet } from 'react-router-dom';
+
 import { Box, Container, Stack, Typography } from '@mui/joy';
 
 import Header from '@/design/layout/LayoutElements/Header';
 
 import DocsNavigation from './Docs/Navigation';
-import PageBeat from './Docs/pages/Beat';
-import PageFade from './Docs/pages/Fade';
-import PageFlip from './Docs/pages/Flip';
-import PageInstallation from './Docs/pages/Installation';
-import PageRotate from './Docs/pages/Rotate';
-import PageSpin from './Docs/pages/Spin';
 
 export default function Docs() {
   return (
@@ -30,12 +26,7 @@ export default function Docs() {
             <DocsNavigation />
           </Box>
           <Stack gap={4}>
-            <PageInstallation />
-            <PageSpin />
-            <PageRotate />
-            <PageFlip />
-            <PageBeat />
-            <PageFade />
+            <Outlet />
           </Stack>
         </Box>
       </Container>
diff --git a/docs/src/app/Docs/Navigation.tsx b/docs/src/app/Docs/Navigation.tsx
index f95b5b7e..eeb4338e 100644
--- a/docs/src/app/Docs/Navigation.tsx
+++ b/docs/src/app/Docs/Navigation.tsx
@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 
 import { List, ListItem, ListItemButton, ListItemContent, ListSubheader, Typography } from '@mui/joy';
 
@@ -15,6 +15,8 @@ import Amicon, {
 } from '@studio384/amaranth';
 
 export default function DocsNavigation() {
+  const location = useLocation();
+
   const pages = [
     {
       title: 'Get started',
@@ -23,7 +25,7 @@ export default function DocsNavigation() {
         {
           title: 'Installation',
           icon: aiAmicons,
-          link: '#installation'
+          link: '/docs/installation'
         }
       ]
     },
@@ -34,27 +36,27 @@ export default function DocsNavigation() {
         {
           title: 'Spin',
           icon: aiSpinner,
-          link: '#spin'
+          link: '/docs/spin'
         },
         {
           title: 'Rotate',
           icon: aiArrowRotateRight,
-          link: '#rotate'
+          link: '/docs/rotate'
         },
         {
           title: 'Flip',
           icon: aiArrowsDownLeftRightUpCenter,
-          link: '#flip'
+          link: '/docs/flip'
         },
         {
           title: 'Beat',
           icon: aiHeart,
-          link: '#beat'
+          link: '/docs/beat'
         },
         {
           title: 'Fade',
           icon: aiCircleHalfInner,
-          link: '#fade'
+          link: '/docs/fade'
         }
       ]
     },
@@ -92,7 +94,7 @@ export default function DocsNavigation() {
           </ListSubheader>
           {category.pages.map((page) => (
             <ListItem key={page.link}>
-              <ListItemButton component={NavLink} to={page.link} color="primary">
+              <ListItemButton component={NavLink} to={page.link} color="primary" selected={location.pathname.includes(page.link)}>
                 <ListItemContent>
                   <Typography noWrap>{page.title}</Typography>
                 </ListItemContent>
diff --git a/docs/src/app/Docs/pages/Beat.tsx b/docs/src/app/Docs/pages/Beat.tsx
index 7308af6c..b14c5640 100644
--- a/docs/src/app/Docs/pages/Beat.tsx
+++ b/docs/src/app/Docs/pages/Beat.tsx
@@ -44,15 +44,15 @@ export default function PageBeat() {
   };
 
   return (
-    <Stack id="beat" gap={2} sx={{ scrollMarginTop: 58 + 32 }}>
-      <Typography level="h3">Beat</Typography>
+    <Stack gap={2}>
+      <Typography level="h2">Beat</Typography>
       <Typography>
         With the <Code>beat</Code> property gives you a basic beat animation.
       </Typography>
 
       <Playground config={playgroundConfig} />
 
-      <Typography level="h4">API</Typography>
+      <Typography level="h3">API</Typography>
 
       <ApiTable cssVariables={playgroundConfig.cssVariables as IIconCssVariables[]} />
     </Stack>
diff --git a/docs/src/app/Docs/pages/Changelog.tsx b/docs/src/app/Docs/pages/Changelog.tsx
new file mode 100644
index 00000000..7767c3f5
--- /dev/null
+++ b/docs/src/app/Docs/pages/Changelog.tsx
@@ -0,0 +1,217 @@
+import { Stack } from '@mui/joy';
+
+import Code from '@/design/components/Code';
+
+import Release from './_Release';
+
+export default function Changelog() {
+  return (
+    <Stack gap={5}>
+      <Release
+        name="Amicons 1.0 alpha 7"
+        date="February 2024"
+        version="1.0.0-alpha.7"
+        added={[
+          <>
+            Introduces a brand new documentation website with improved icon previews, component documentation with interactive playground, this changelog, and
+            much more. And best of all; it's now available online instead of needing to be compiled by you.
+          </>,
+          <>
+            The <Code>AmaranthIcon</Code> component has been renamed to <Code>Amicon</Code>.
+          </>,
+          <>
+            The <Code>Amicon</Code> component now supports the <Code>beat</Code> and <Code>fade</Code> property.
+          </>
+        ]}
+        changed={[
+          <>
+            We're updating our branding from Amaranth to Amicons, with a brand new logo and mascot to boot. While the <Code>Amaranth</Code> and{' '}
+            <Code>Amicons</Code> icons have existed at the same time in the previous version, we consider the removal of the <Code>Amaranth</Code> icon arename.
+          </>,
+          <>
+            The default values for all properties of our <Code>Amicon</Code> component are now being set to <Code>Undefined</Code> rather than a default
+            truthyvalue.
+          </>,
+          <>
+            The various CSS variables have been renamed to be more consistent with new variables introduced in this update. See the documentation for more info.
+          </>,
+          <>
+            You can now pass properties to the <Code>Amicon</Code> component.
+          </>,
+          <>Various updates to the categorization of icons in the documentation.</>
+        ]}
+        fixed={[
+          <>
+            Fixed the <Code>expand</Code> icon including excessive shapes.
+          </>,
+          <>
+            Fixed the misalignment in the <Code>heading-2</Code> icon to better map the icon to a pixel grid.
+          </>,
+          <>
+            Fixes various issues with the CSS variables in the <Code>Amicon</Code> component.
+          </>
+        ]}
+        newIcons={[
+          '0',
+          '1',
+          '2',
+          '3',
+          '4',
+          '5',
+          '6',
+          '7',
+          '8',
+          '9',
+          'a',
+          'arrow-up-right-from-square',
+          'b',
+          'battery-charging',
+          'battery-empty',
+          'battery-exclamation',
+          'battery-full',
+          'battery-half',
+          'battery-low',
+          'battery-quarter',
+          'battery-slash',
+          'battery-three-quarter',
+          'broom',
+          'c',
+          'calculator',
+          'camera',
+          'car-side',
+          'clipboard',
+          'command',
+          'computer-mouse-scroll-wheel',
+          'computer-mouse',
+          'crop',
+          'cursor',
+          'd',
+          'dice-five',
+          'dice-four',
+          'dice-one',
+          'dice-six',
+          'dice-three',
+          'dice-two',
+          'dice',
+          'e',
+          'ellipsis-h',
+          'envelope-open',
+          'export',
+          'f',
+          'flask',
+          'folder-min',
+          'folder-open',
+          'folder-plus',
+          'frame',
+          'g',
+          'h',
+          'i',
+          'icons',
+          'j',
+          'k',
+          'keyboard-brightness-high',
+          'keyboard-brightness-low',
+          'keyboard',
+          'l',
+          'loader',
+          'm',
+          'n',
+          'o',
+          'option',
+          'p',
+          'q',
+          'r',
+          'road',
+          's',
+          'share-nodes',
+          'spinner',
+          'square-dashed',
+          'square',
+          'studio-384',
+          't',
+          'threads',
+          'toast',
+          'train-track',
+          'triangle-dashed',
+          'triangle',
+          'truck-pickup',
+          'truck-tow',
+          'u',
+          'v',
+          'w',
+          'x',
+          'y',
+          'z'
+        ]}
+        updatedIcons={[
+          'a-gum',
+          'envelope',
+          'facebook',
+          'heading-1',
+          'heading-2',
+          'heading-3',
+          'heading-4',
+          'heading-5',
+          'heading-6',
+          'patreon',
+          'safari',
+          'shuffle',
+          'translate',
+          'triangle-exclamation',
+          'volume-0',
+          'volume-1',
+          'volume-2',
+          'volume-3',
+          'volume-slash'
+        ]}
+        renamedIcons={[
+          { old: 'amaranth', new: 'amicons' },
+          { old: 'ellipsis', new: 'ellipsis-h' }
+        ]}
+        removedIcons={['amaranth', 'bootstrap', 'font-awesome']}
+      />
+      <Release
+        name="Amicons 1.0 alpha 6"
+        version="1.0.0-alpha.6"
+        date="30 January 2024"
+        newIcons={['align-center', 'align-justify', 'align-left', 'align-right', 'amicons', 'subscript', 'superscript']}
+      />
+      <Release name="Amicons 1.0 alpha 5" version="1.0.0-alpha.5" date="17 November 2023" newIcons={['circle']} />
+      <Release
+        name="Amicons 1.0 alpha 4"
+        version="1.0.0-alpha.4"
+        date="17 November 2023"
+        newIcons={[
+          'arrow-down-from-cloud',
+          'arrow-right-from-file',
+          'arrow-right-from-smartphone',
+          'arrow-right-to-file',
+          'arrow-up-to-cloud',
+          'compare',
+          'people-xmark',
+          'person-xmark',
+          'react'
+        ]}
+      />
+      <Release
+        name="Amicons 1.0 alpha 3"
+        version="1.0.0-alpha.3"
+        date="23 August 2023"
+        removed={[<>The repository no longer provides font files or CSS files.</>]}
+        newIcons={[
+          'table-cell-merge',
+          'table-column-insert-left',
+          'table-column-insert-right',
+          'table-column-min',
+          'table-header-cell',
+          'table-min',
+          'table-row-insert-bottom',
+          'table-row-insert-top',
+          'table-row-min'
+        ]}
+        updatedIcons={['chart-pie', 'circle-dashed', 'table-clcok', 'table-header-column', 'table-header-row', 'table', 'tag-geear', 'tag-plus', 'tag']}
+      />
+      <Release name="Amicons 1.0 alpha 2" version="1.0.0-alpha.2" date="22 August 2023" changed={[<>Migrations from ChangeWindows to Studio 384</>]} />
+    </Stack>
+  );
+}
diff --git a/docs/src/app/Docs/pages/Fade.tsx b/docs/src/app/Docs/pages/Fade.tsx
index bc266a69..57b798db 100644
--- a/docs/src/app/Docs/pages/Fade.tsx
+++ b/docs/src/app/Docs/pages/Fade.tsx
@@ -44,15 +44,15 @@ export default function PageFade() {
   };
 
   return (
-    <Stack id="fade" gap={2} sx={{ scrollMarginTop: 58 + 32 }}>
-      <Typography level="h3">Fade</Typography>
+    <Stack gap={2}>
+      <Typography level="h2">Fade</Typography>
       <Typography>
         With the <Code>fade</Code> property gives you a basic fade animation.
       </Typography>
 
       <Playground config={playgroundConfig} />
 
-      <Typography level="h4">API</Typography>
+      <Typography level="h3">API</Typography>
 
       <ApiTable cssVariables={playgroundConfig.cssVariables as IIconCssVariables[]} />
     </Stack>
diff --git a/docs/src/app/Docs/pages/Flip.tsx b/docs/src/app/Docs/pages/Flip.tsx
index 8a019eb7..21806f10 100644
--- a/docs/src/app/Docs/pages/Flip.tsx
+++ b/docs/src/app/Docs/pages/Flip.tsx
@@ -21,8 +21,8 @@ export default function PageFlip() {
   };
 
   return (
-    <Stack id="flip" gap={2} sx={{ scrollMarginTop: 58 + 32 }}>
-      <Typography level="h3">Flip</Typography>
+    <Stack gap={2}>
+      <Typography level="h2">Flip</Typography>
       <Typography>
         With the <Code>flip</Code> property you can mirror your icon on its x-axis, y-axis or both.
       </Typography>
diff --git a/docs/src/app/Docs/pages/Installation.tsx b/docs/src/app/Docs/pages/Installation.tsx
index 280c0175..278a5f71 100644
--- a/docs/src/app/Docs/pages/Installation.tsx
+++ b/docs/src/app/Docs/pages/Installation.tsx
@@ -4,8 +4,8 @@ import Codeblock from '@/design/components/Codeblock';
 
 export default function PageInstallation() {
   return (
-    <Stack id="installation" gap={2} sx={{ scrollMarginTop: 58 + 32 }}>
-      <Typography level="h3">Install Amicons</Typography>
+    <Stack gap={2}>
+      <Typography level="h2">Install Amicons</Typography>
       <Typography>Get started with Amicons by running the following command in your project.</Typography>
       <Codeblock>npm install @studio384/amaranth</Codeblock>
     </Stack>
diff --git a/docs/src/app/Docs/pages/Rotate.tsx b/docs/src/app/Docs/pages/Rotate.tsx
index dff940db..c08bf55f 100644
--- a/docs/src/app/Docs/pages/Rotate.tsx
+++ b/docs/src/app/Docs/pages/Rotate.tsx
@@ -34,15 +34,15 @@ export default function PageRotate() {
   };
 
   return (
-    <Stack id="rotate" gap={2} sx={{ scrollMarginTop: 58 + 32 }}>
-      <Typography level="h3">Rotate</Typography>
+    <Stack gap={2}>
+      <Typography level="h2">Rotate</Typography>
       <Typography>
         With the <Code>rotate</Code> property you can change the default rotation of your icon.
       </Typography>
 
       <Playground config={playgroundConfig} />
 
-      <Typography level="h4">API</Typography>
+      <Typography level="h3">API</Typography>
 
       <ApiTable cssVariables={playgroundConfig.cssVariables as IIconCssVariables[]} />
     </Stack>
diff --git a/docs/src/app/Docs/pages/Spin.tsx b/docs/src/app/Docs/pages/Spin.tsx
index fcb634e1..35dd2ce4 100644
--- a/docs/src/app/Docs/pages/Spin.tsx
+++ b/docs/src/app/Docs/pages/Spin.tsx
@@ -52,15 +52,15 @@ export default function PageSpin() {
   };
 
   return (
-    <Stack id="spin" gap={2} sx={{ scrollMarginTop: 58 + 32 }}>
-      <Typography level="h3">Spin</Typography>
+    <Stack gap={2}>
+      <Typography level="h2">Spin</Typography>
       <Typography>
         With the <Code>spin</Code> property you can make your icons play a rotation animation.
       </Typography>
 
       <Playground config={playgroundConfig} />
 
-      <Typography level="h4">API</Typography>
+      <Typography level="h3">API</Typography>
 
       <Typography>
         When setting the property to <Code>pulse</Code>, some additional variables are available while some defaults are changed.
diff --git a/docs/src/app/Release.tsx b/docs/src/app/Docs/pages/_Release.tsx
similarity index 99%
rename from docs/src/app/Release.tsx
rename to docs/src/app/Docs/pages/_Release.tsx
index 25583bc2..b7343f0f 100644
--- a/docs/src/app/Release.tsx
+++ b/docs/src/app/Docs/pages/_Release.tsx
@@ -8,7 +8,7 @@ import { ILibraryIcon } from '@/types';
 
 import Amicon, { aiArrowRight, aiBoxOpenFull, aiBug, aiPen, aiPlus, aiTrashCan } from '@studio384/amaranth';
 
-import IconCard from './Components/IconCard';
+import IconCard from '../../Components/IconCard';
 
 export default function Release({
   name,
diff --git a/docs/src/app/Icons.tsx b/docs/src/app/Icons.tsx
index 5c7c4d75..b7d7c009 100644
--- a/docs/src/app/Icons.tsx
+++ b/docs/src/app/Icons.tsx
@@ -132,7 +132,7 @@ export default function Icons() {
                   <ListItem key={_category.slug}>
                     <ListItemButton
                       onClick={() => setSearchQuery('c', _category.slug)}
-                      variant={searchCategories.includes(_category.slug) ? 'soft' : 'plain'}
+                      selected={searchCategories.includes(_category.slug)}
                       color="primary"
                     >
                       <ListItemDecorator>