diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js
index 6b94846..b606251 100644
--- a/packages/docusaurus-playground/docusaurus.config.js
+++ b/packages/docusaurus-playground/docusaurus.config.js
@@ -28,7 +28,7 @@ const config = {
       '@acid-info/logos-docusaurus-preset',
       /** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
       ({
-        businessUnit: 'Nimbus',
+        businessUnit: 'Waku',
         theme: {
           name: 'default',
           options: {
diff --git a/packages/docusaurus-playground/package.json b/packages/docusaurus-playground/package.json
index 2d0ddea..5880225 100644
--- a/packages/docusaurus-playground/package.json
+++ b/packages/docusaurus-playground/package.json
@@ -15,7 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.0",
+    "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.4",
     "@docusaurus/core": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
     "@docusaurus/theme-mermaid": "^2.4.1",
diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
index d78fde3..2724e33 100644
--- a/packages/docusaurus-playground/src/pages/index.mdx
+++ b/packages/docusaurus-playground/src/pages/index.mdx
@@ -5,10 +5,12 @@ import {
   HeroActions,
   HeroAction,
   CallToActionSection,
+  CallToActionButton,
   FeatureList,
   Showcase,
   HeroModel,
   HeroInfo,
+  Box,
 } from '../components/mdx'
 
 <Hero size="large">
@@ -68,41 +70,77 @@ import {
         "Waku's native incentivization mechanisms ensure a wide node distribution, making it highly secure and strengthening its privacy assurances.",
     },
   ]}
-/>
+>
+  <CallToActionButton variant="outlined" href="https://docs.waku.org">
+    Decentralize your DApp
+  </CallToActionButton>
+</FeatureList>
 
-<CallToActionSection
-  title="User adoptions"
-  description="Waku has brought private, censorship-resistant communications to several notable web3 DApps, decentralizing their messaging components:"
-  label="Decentralize your DApp"
-  href="/join"
-/>
+<Box top={{ xs: 144, lg: 216 }}>
+  <CallToActionSection
+    title="Team"
+    columns={1}
+    description="Waku is built and maintained by a global team of experienced and driven software developers and researchers that share a passion for privacy and decentralized technologies. "
+    label="Read more"
+    href="/about/team"
+  />
+</Box>
 
-<Showcase
-  id="showcase"
-  items={[
-    {
-      name: 'XMTP',
-      logo: '/showcase/xmtp-mark-white.svg',
-      description:
-        "Inter-blockchain account messaging protocol XMTP uses Waku's Go implementation to facilitate communication between nodes in its currently permissioned network.",
-    },
-    {
-      name: 'Status',
-      logo: '/showcase/status-mark-white.svg',
-      description:
-        "Waku powers many of the Status super app's features, including its private messaging.",
-    },
-    {
-      name: 'Railgun',
-      logo: '/showcase/railgun-mark-white.svg',
-      description:
-        'The privacy-focused DeFi protocol Railgun anonymizes Ethereum transactions with Waku. ',
-    },
-  ]}
-/>
+<Box top={{ xs: 144, lg: 216 }}>
+  <CallToActionSection
+    title="Used by"
+    columns={2}
+    description="Waku has brought private, censorship-resistant communications to several notable web3 DApps, decentralizing their messaging components:"
+    label="Decentrialize your DApp"
+    href="https://docs.waku.org"
+  />
+</Box>
 
-<CallToActionSection
-  title="Join the community to discover what Waku can bring to your DApp"
-  label="Decentralize your DApp"
-  href="/join"
-/>
+<Box top={{ xs: 64, lg: 100 }}>
+  <Showcase
+    id="showcase"
+    items={[
+      {
+        name: 'XMTP',
+        logo: '/showcase/xmtp-mark-white.svg',
+        description:
+          "Inter-blockchain account messaging protocol XMTP uses Waku's Go implementation to facilitate communication between nodes in its currently permissioned network.",
+      },
+      {
+        name: 'TheGraph',
+        logo: '/showcase/the-graph-mark-white.svg',
+        description:
+          'Waku powers the Graphcast SDK, enabling the development of gossip-powered applications within The Graph ecosystem.',
+      },
+      {
+        name: 'Status',
+        logo: '/showcase/status-mark-white.svg',
+        description:
+          "Waku powers many of the Status super app's features, including its private messaging.",
+      },
+      {
+        name: 'Railgun',
+        logo: '/showcase/railgun-mark-white.svg',
+        description:
+          'The privacy-focused DeFi protocol Railgun anonymizes Ethereum transactions with Waku. ',
+      },
+    ]}
+  />
+</Box>
+
+<Box top={{ xs: 144, lg: 216 }}>
+  <CallToActionSection
+    title="Development roadmap"
+    description="Waku has the ambitious goal of attracting and supporting millions of simultaneous users, truly serving as the communications standard across web3. Our development roadmap focuses on achieving secure scalability before implementing incentivization mechanisms to sustain Waku."
+    label="Read more"
+    href="/about/development-roadmap"
+  />
+</Box>
+
+<Box top={{ xs: 144, lg: 336 }} bottom={{ lg: 16, xs: 64 }}>
+  <CallToActionSection
+    title="Join the community to discover what Waku can bring to your DApp"
+    label="Decentralize your DApp"
+    href="/join"
+  />
+</Box>
diff --git a/packages/docusaurus-playground/static/showcase/the-graph-mark-white.svg b/packages/docusaurus-playground/static/showcase/the-graph-mark-white.svg
new file mode 100644
index 0000000..b742361
--- /dev/null
+++ b/packages/docusaurus-playground/static/showcase/the-graph-mark-white.svg
@@ -0,0 +1,3 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6666 33.111C19.7939 33.111 14.2222 27.5397 14.2222 20.6666C14.2222 13.7935 19.7939 8.2222 26.6666 8.2222C33.5397 8.2222 39.111 13.7935 39.111 20.6666C39.111 27.5397 33.5397 33.111 26.6666 33.111ZM26.6666 2C36.9759 2 45.3332 10.3574 45.3332 20.6666C45.3332 30.9758 36.9759 39.3332 26.6666 39.3332C16.3574 39.3332 8 30.9758 8 20.6666C8 10.3574 16.3574 2 26.6666 2ZM44.4221 40.2443C45.6371 41.4593 45.6371 43.4289 44.4221 44.644L31.9773 57.0887C30.7623 58.3038 28.7927 58.3038 27.5777 57.0887C26.3627 55.8737 26.3627 53.9041 27.5777 52.6891L40.0225 40.2443C41.2375 39.0293 43.2071 39.0293 44.4221 40.2443ZM51.5554 5.1111C51.5554 6.82956 50.1628 8.2222 48.4447 8.2222C46.7262 8.2222 45.3336 6.82956 45.3336 5.1111C45.3336 3.39264 46.7262 2 48.4447 2C50.1628 2 51.5554 3.39264 51.5554 5.1111Z" fill="white"/>
+</svg>
diff --git a/packages/logos-docusaurus-theme/src/client/components/Modal/Modal.tsx b/packages/logos-docusaurus-theme/src/client/components/Modal/Modal.tsx
index e1d69e8..560e9d2 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Modal/Modal.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/Modal/Modal.tsx
@@ -1,4 +1,3 @@
-import { useLockBodyScroll } from '@docusaurus/theme-common/internal'
 import clsx from 'clsx'
 import React from 'react'
 import { useKeyPressEvent } from 'react-use'
@@ -26,7 +25,6 @@ export const Modal: React.FC<ModalProps> = ({
     onClose && onClose()
   }
 
-  useLockBodyScroll(open)
   useKeyPressEvent(
     (key) => key.code === 'Escape',
     (event) => {
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Box/Box.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Box/Box.scss
new file mode 100644
index 0000000..d0888c8
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Box/Box.scss
@@ -0,0 +1,32 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-box {
+  padding-top: var(--mdx-box-top);
+  padding-bottom: var(--mdx-box-bottom);
+
+  @include utils.responsive('xs', 'up') {
+    --mdx-box-top: var(--mdx-box-top-xs);
+    --mdx-box-bottom: var(--mdx-box-bottom-xs);
+  }
+
+  @include utils.responsive('sm', 'up') {
+    --mdx-box-top: var(--mdx-box-top-sm);
+    --mdx-box-bottom: var(--mdx-box-bottom-sm);
+  }
+
+  @include utils.responsive('md', 'up') {
+    --mdx-box-top: var(--mdx-box-top-md);
+    --mdx-box-bottom: var(--mdx-box-bottom-md);
+  }
+
+  @include utils.responsive('lg', 'up') {
+    --mdx-box-top: var(--mdx-box-top-lg);
+    --mdx-box-bottom: var(--mdx-box-bottom-lg);
+  }
+
+  @include utils.responsive('xl', 'up') {
+    --mdx-box-top: var(--mdx-box-top-xl);
+    --mdx-box-bottom: var(--mdx-box-bottom-xl);
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Box/Box.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Box/Box.tsx
new file mode 100644
index 0000000..b6162e6
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Box/Box.tsx
@@ -0,0 +1,68 @@
+import clsx from 'clsx'
+import React from 'react'
+import { makeStyle } from '../../../lib/makeStyle'
+import './Box.scss'
+
+type BreakpointsStyle<T> = {
+  xs?: T
+  sm?: T
+  md?: T
+  lg?: T
+  xl?: T
+}
+
+function vars(
+  key: string,
+  _val: BreakpointsStyle<string | number> | string | number,
+  defaultValue: string | number,
+  unit?: string,
+) {
+  const val =
+    typeof _val === 'string' || typeof _val === 'number' ? { xs: _val } : _val
+
+  const variables: string[][] = []
+
+  const format = (value: any) => {
+    return typeof value === 'number' && unit ? `${value}${unit}` : `${value}`
+  }
+
+  ;['xs', 'sm', 'md', 'lg', 'xl'].forEach((bp, index) => {
+    const value = val[bp]
+    if (!value) {
+      const prev = variables[index - 1]?.[1]
+      variables.push([`${key}-${bp}`, prev ? prev : format(defaultValue)])
+    } else variables.push([`${key}-${bp}`, format(value)])
+  })
+
+  return Object.fromEntries(variables)
+}
+
+export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
+  top?: BreakpointsStyle<number> | number
+  bottom?: BreakpointsStyle<number> | number
+}
+
+export const Box: React.FC<BoxProps> = ({
+  top = 0,
+  bottom = 0,
+  className,
+  style = {},
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={clsx(className, 'mdx-box')}
+      style={makeStyle(
+        { ...style },
+        {
+          ...vars('mdx-box-top', top, 0, 'px'),
+          ...vars('mdx-box-bottom', bottom, 0, 'px'),
+        },
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Box/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/Box/index.ts
new file mode 100644
index 0000000..332601e
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Box/index.ts
@@ -0,0 +1 @@
+export * from './Box'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.scss
new file mode 100644
index 0000000..55e8a47
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.scss
@@ -0,0 +1,30 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-cta-button {
+  margin-top: 2rem;
+
+  &:hover {
+    &,
+    * {
+      text-decoration: none !important;
+    }
+  }
+
+  button,
+  button span {
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+  }
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-cta-button {
+    @include lsd.typography('label2');
+
+    button {
+      padding: 6px 12px;
+    }
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.tsx
new file mode 100644
index 0000000..a4dcf82
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.tsx
@@ -0,0 +1,36 @@
+import { Button, ButtonProps, Typography } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React from 'react'
+import './CallToActionButton.scss'
+
+export type CallToActionButtonProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'title'
+> & {
+  href?: string
+  size?: ButtonProps['size']
+  variant?: ButtonProps['variant']
+}
+
+export const CallToActionButton: React.FC<CallToActionButtonProps> = ({
+  href,
+  className,
+  variant = 'filled',
+  size = 'large',
+  children,
+  ...props
+}) => {
+  return (
+    <Typography
+      className={clsx('mdx-cta-button', className)}
+      variant="body1"
+      component="a"
+      href={href}
+      target="_blank"
+    >
+      <Button size={size} variant={variant}>
+        {children}
+      </Button>
+    </Typography>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/index.ts
new file mode 100644
index 0000000..b6e1a3d
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/index.ts
@@ -0,0 +1 @@
+export * from './CallToActionButton'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss
index 3df3968..2a8dbb3 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss
@@ -1,16 +1,17 @@
 @use '../../../css/utils';
+@use '../../../css/lsd';
 
 .mdx-cta-section {
   display: grid;
-  margin-top: 260px;
-  padding-top: 1.5rem;
   border-top: 1px solid rgb(var(--lsd-border-primary));
 }
 
 .mdx-cta-section__title {
+  margin-top: 1.5rem;
 }
 
 .mdx-cta-section__description {
+  margin-top: 2rem;
 }
 
 .mdx-cta-section__link {
@@ -25,16 +26,22 @@
 }
 
 .mdx-cta-section--with-description {
+}
+
+.mdx-cta-section--cols-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
+  padding-top: 1.5rem;
 
   .mdx-cta-section__title {
     grid-column: 1 / 2;
+    margin-top: 0;
   }
 
   .mdx-cta-section__description {
     grid-column: 2 / 3;
+    margin-top: 0;
   }
 
   .mdx-cta-section__link {
@@ -50,3 +57,36 @@
     }
   }
 }
+
+@include utils.responsive('lg', 'down') {
+  .mdx-cta-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .mdx-cta-section__title {
+    @include lsd.typography('subtitle1');
+    margin-top: 1rem;
+  }
+
+  .mdx-cta-section__description {
+    @include lsd.typography('h5');
+    margin-top: 1.5rem !important;
+  }
+
+  .mdx-cta-section__link {
+    @include lsd.typography('label2');
+    margin-top: 2rem;
+
+    button {
+      padding: 6px 12px;
+    }
+  }
+
+  .mdx-cta-section:not(.mdx-cta-section--with-description) {
+    .mdx-cta-section__title {
+      @include lsd.typography('h5');
+    }
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
index be06d98..7ef5375 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
@@ -1,6 +1,7 @@
 import { Button, Typography } from '@acid-info/lsd-react'
 import clsx from 'clsx'
 import React from 'react'
+import { CallToActionButton } from '../index'
 import './CallToActionSection.scss'
 
 export type CallToActionSectionProps = Omit<
@@ -9,6 +10,7 @@ export type CallToActionSectionProps = Omit<
 > & {
   title?: React.ReactNode
   description?: React.ReactNode
+  columns?: 1 | 2
   href?: string
   label?: string
 }
@@ -17,49 +19,43 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
   label,
   href,
   title = '',
+  columns = 1,
   description,
   className,
   children,
   ...props
 }) => {
+  const singleCol = columns === 1
+
   return (
     <div
-      variant="h1"
-      component="h1"
       className={clsx(
         className,
         'mdx-cta-section',
+        `mdx-cta-section--cols-${columns}`,
         description && 'mdx-cta-section--with-description',
       )}
       {...(props as any)}
     >
       <Typography
-        variant={description ? 'h6' : 'h1'}
-        component="span"
+        variant={singleCol && !description ? 'h1' : 'h6'}
+        component="h2"
         className="mdx-cta-section__title"
       >
         {title}
       </Typography>
       {description && (
         <Typography
-          variant="h4"
-          component="span"
+          variant={singleCol ? 'h2' : 'h4'}
+          component="h3"
           className="mdx-cta-section__description"
         >
           {description}
         </Typography>
       )}
-      <Typography
-        className="mdx-cta-section__link"
-        variant="body1"
-        component="a"
-        href={href}
-        target="_blank"
-      >
-        <Button size="large" variant="filled">
-          {label}
-        </Button>
-      </Typography>
+      <CallToActionButton href={href} className="mdx-cta-section__link">
+        {label}
+      </CallToActionButton>
     </div>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss
index 7605a8e..b47530f 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss
@@ -1,3 +1,6 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
 .mdx-feature-list {
   border-top: 1px solid rgb(var(--lsd-surface-secondary));
   position: relative;
@@ -44,3 +47,58 @@
 .mdx-feature-list__feature-description {
   margin-top: 8.625rem;
 }
+
+.mdx-feature-list__extra {
+  margin-top: 3.5rem;
+  padding: 0 1rem;
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-feature-list {
+  }
+
+  .mdx-feature-list__extra {
+    margin-top: 2rem;
+    padding: 0;
+  }
+
+  .mdx-feature-list__title {
+    @include lsd.typography('subtitle1');
+    padding: 1rem 0;
+  }
+
+  .mdx-feature-list__list {
+    grid-template-columns: 1fr;
+  }
+
+  .mdx-feature-list__feature {
+    border: none;
+    padding: 1.5rem 0;
+    border-top: 1px solid rgb(var(--lsd-border-primary));
+
+    .mdx-feature-list__feature-index {
+      @include lsd.typography('subtitle2');
+      width: 1.625rem;
+      height: 1.625rem;
+    }
+
+    .mdx-feature-list__feature-title {
+      @include lsd.typography('h5');
+      margin-top: 1rem;
+    }
+
+    .mdx-feature-list__feature-description {
+      @include lsd.typography('subtitle1');
+      margin-top: 3rem;
+    }
+
+    .mdx-feature-list__feature-inner {
+    }
+
+    &:nth-child(odd) {
+      .mdx-feature-list__feature-inner {
+        border: none;
+      }
+    }
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx
index c4784bc..1c7c1c4 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx
@@ -27,7 +27,7 @@ export const FeatureList: React.FC<FeatureListProps> = ({
     <div className={clsx(className, 'mdx-feature-list')} {...props}>
       <Typography
         variant="h6"
-        component="div"
+        component="h1"
         className="mdx-feature-list__title"
       >
         {title}
@@ -45,14 +45,14 @@ export const FeatureList: React.FC<FeatureListProps> = ({
               </Typography>
               <Typography
                 variant="h3"
-                component="div"
+                component="h2"
                 className="mdx-feature-list__feature-title"
               >
                 {feature.title}
               </Typography>
               <Typography
                 variant="h6"
-                component="div"
+                component="h3"
                 className="mdx-feature-list__feature-description"
               >
                 {feature.description}
@@ -61,6 +61,7 @@ export const FeatureList: React.FC<FeatureListProps> = ({
           </div>
         ))}
       </div>
+      <div className="mdx-feature-list__extra">{children}</div>
     </div>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.scss
index 6527679..c312407 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.scss
@@ -1,6 +1,5 @@
 .mdx-hero {
   position: relative;
-  border-top: 1px solid rgb(var(--lsd-surface-secondary));
 }
 
 .mdx-hero--large {
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.scss
index 9c326e6..9faed4e 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroAction/HeroAction.scss
@@ -1,4 +1,4 @@
-@use '../../../css/lsd';
+@use '../../../css/utils';
 
 .mdx-hero-action {
 }
@@ -8,3 +8,11 @@
     padding: 10px 64px;
   }
 }
+
+@include utils.responsive('lg', 'down') {
+  .mdx-hero-action {
+    button {
+      padding: 6px 12px !important;
+    }
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroActions/HeroActions.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroActions/HeroActions.scss
index 23efa06..6769c9e 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroActions/HeroActions.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroActions/HeroActions.scss
@@ -1,3 +1,5 @@
+@use '../../../css/utils';
+
 .mdx-hero-actions {
   margin-top: 2rem;
   display: flex;
@@ -8,3 +10,20 @@
   position: relative;
   z-index: 98;
 }
+
+@include utils.responsive('lg', 'down') {
+  .mdx-hero-actions {
+    width: 100%;
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: stretch;
+
+    > a,
+    > a > button {
+      display: block;
+      width: 100%;
+    }
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss
index a5e6e43..c37e23f 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss
@@ -1,3 +1,6 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
 .mdx-hero-description {
   z-index: -2;
 }
@@ -7,6 +10,16 @@
 }
 
 .mdx-hero-description--large {
-  font-size: 5.0625rem !important;
-  line-height: 5.5rem !important;
+  // font-size: 5.0625rem !important;
+  // line-height: 5.5rem !important;
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-hero-description {
+    @include lsd.typography('h3');
+  }
+
+  .mdx-hero-description--large {
+    font-size: 1.875rem !important;
+  }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss
index d38a9df..0e7e830 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss
@@ -1,3 +1,6 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
 .mdx-hero-title {
   font-weight: 300 !important;
   z-index: -2;
@@ -11,3 +14,13 @@
 .mdx-hero-title--uppercase {
   text-transform: uppercase;
 }
+
+@include utils.responsive('lg', 'down') {
+  .mdx-hero-title {
+    @include lsd.typography('h3');
+  }
+
+  .mdx-hero-title--large {
+    font-size: 1.875rem !important;
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss
index 49197e3..681d4de 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss
@@ -1,7 +1,11 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
 .mdx-showcase {
-  padding-top: 8.25rem;
+  width: 100%;
+  overflow: hidden;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
 }
 
@@ -25,3 +29,23 @@
   margin-top: 24px;
   padding-top: 16px;
 }
+
+@include utils.responsive('lg', 'down') {
+  .mdx-showcase {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem 1rem;
+  }
+
+  .mdx-showcase__item-name {
+    @include lsd.typography('h6');
+  }
+
+  .mdx-showcase__item-description {
+    margin-top: 1rem;
+  }
+
+  .mdx-showcase__item-logo {
+    width: 34px;
+    height: auto;
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx
index e01708f..00ff5a3 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx
@@ -34,7 +34,7 @@ export const Showcase: React.FC<ShowcaseProps> = ({
             />
             <Typography
               variant="h3"
-              component="div"
+              component="h2"
               className="mdx-showcase__item-name"
             >
               {item.name}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
index 44f7474..7d0f06c 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
@@ -1,10 +1,12 @@
+export * from './Box'
+export * from './CallToActionButton'
 export * from './CallToActionSection'
 export * from './FeatureList'
 export * from './Hero'
 export * from './HeroAction'
 export * from './HeroActions'
 export * from './HeroDescription'
+export * from './HeroInfo'
 export * from './HeroModel'
 export * from './HeroTitle'
 export * from './Showcase'
-export * from './HeroInfo'
diff --git a/packages/logos-docusaurus-theme/src/client/css/_lsd.scss b/packages/logos-docusaurus-theme/src/client/css/_lsd.scss
index 2e95d5b..bca8e23 100644
--- a/packages/logos-docusaurus-theme/src/client/css/_lsd.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/_lsd.scss
@@ -1,5 +1,5 @@
 @mixin typography($variant) {
-  font-size: var(--lsd-#{$variant}-fontSize);
-  line-height: var(--lsd-#{$variant}-lineHeight);
-  font-family: var(--lsd-typography-generic-font-family);
+  font-size: var(--lsd-#{$variant}-fontSize) !important;
+  line-height: var(--lsd-#{$variant}-lineHeight) !important;
+  font-family: var(--lsd-typography-generic-font-family) !important;
 }
diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index 9c95ab4..51145f4 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -667,17 +667,17 @@ small {
     margin-top: 0 !important;
     margin-bottom: 80px !important;
   }
-
   & > main {
     padding: 0;
 
     &,
     > .row,
     & > .row > .col {
+      --ifm-spacing-horizontal: var(--content-padding);
+
       width: 100% !important;
       flex-basis: 100% !important;
       max-width: unset;
-      padding: 0;
       margin: 0;
       flex: unset;
     }
diff --git a/packages/logos-docusaurus-theme/src/client/lib/makeStyle.ts b/packages/logos-docusaurus-theme/src/client/lib/makeStyle.ts
new file mode 100644
index 0000000..2b6d53e
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/lib/makeStyle.ts
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const makeStyle = (
+  style: React.CSSProperties,
+  vars: Record<string, any> = {},
+) =>
+  ({
+    ...style,
+    ...Object.entries(vars).reduce(
+      (value, [name, val]) => ({ ...value, [`--${name}`]: val }),
+      {},
+    ),
+  } as React.CSSProperties)
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
index 071f7c3..ae303e6 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
@@ -11,6 +11,7 @@ import NavbarItem from '@theme/NavbarItem'
 import SearchBar from '@theme/SearchBar'
 import clsx from 'clsx'
 import React from 'react'
+import { useHydrated } from '../../../lib/useHydrated'
 import styles from './styles.module.scss'
 
 function useNavbarItems() {
@@ -42,6 +43,7 @@ ${JSON.stringify(item, null, 2)}`,
 }
 
 export default function NavbarContent() {
+  const hydrated = useHydrated()
   const mobileSidebar = useNavbarMobileSidebar()
   const allItems = useNavbarItems()
   const [leftItems, rightItems] = splitNavbarItems(
@@ -62,13 +64,20 @@ export default function NavbarContent() {
 
         <IconButtonGroup className={styles.iconButtonGroup} size="medium">
           <NavbarColorModeToggle
+            key="color-toggle"
             className={clsx(
               styles.colorModeToggle,
               'navbar__color-mode-toggle',
             )}
           />
-          {searchBarItem && <SearchBar />}
-          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+          {hydrated && (
+            <React.Fragment key="search">
+              {searchBarItem && <SearchBar />}
+            </React.Fragment>
+          )}
+          <React.Fragment key="mobile-sidebar-toggle">
+            {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+          </React.Fragment>
         </IconButtonGroup>
       </div>
     </div>
diff --git a/yarn.lock b/yarn.lock
index 022201d..b9ccea1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,64 @@
 # yarn lockfile v1
 
 
+"@acid-info/logos-docusaurus-preset@^1.0.0-alpha.4":
+  version "1.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-preset/-/logos-docusaurus-preset-1.0.0-alpha.4.tgz#ec958cc49d0420bc361541002138dc0bd8595889"
+  integrity sha512-kVOaa0bCPy5tBJxEZS51N3+UgtO6M4TciRA7x/4JQ+uwy1s5cSldkecmjmb1Ch5/tGB6QCllU2tjuZrsY1aiRg==
+  dependencies:
+    "@acid-info/logos-docusaurus-search-local" "^1.0.0-alpha.0"
+    "@acid-info/logos-docusaurus-theme" "^1.0.0-alpha.4"
+    "@docusaurus/core" "^2.4.1"
+    "@docusaurus/module-type-aliases" "^2.4.1"
+    "@docusaurus/preset-classic" "^2.4.1"
+    "@docusaurus/types" "^2.4.1"
+    "@docusaurus/utils" "^2.4.1"
+    "@docusaurus/utils-common" "^2.4.1"
+    "@docusaurus/utils-validation" "^2.4.1"
+    docusaurus-plugin-sass "^0.2.3"
+    fs-extra "^10.1.0"
+    lodash "^4.17.21"
+
+"@acid-info/logos-docusaurus-theme@^1.0.0-alpha.4":
+  version "1.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-theme/-/logos-docusaurus-theme-1.0.0-alpha.4.tgz#63ef02dc4f9acc816bc9bdb7fb5a4664c0a5a3ee"
+  integrity sha512-mQBaIUVVe2LWnKHFfeCnMtLkbCbJxe306DrO+Q2v4f4VXkDiTygXDCd8Rs/DFCPhlyIDRkZRfgH4Fzmb1S+lwA==
+  dependencies:
+    "@acid-info/logos-docusaurus-preset" "^1.0.0-alpha.4"
+    "@acid-info/lsd-react" "^0.1.0-alpha.8"
+    "@docusaurus/core" "^2.4.1"
+    "@docusaurus/mdx-loader" "^2.4.1"
+    "@docusaurus/module-type-aliases" "^2.4.1"
+    "@docusaurus/plugin-content-blog" "^2.4.1"
+    "@docusaurus/plugin-content-docs" "^2.4.1"
+    "@docusaurus/plugin-content-pages" "^2.4.1"
+    "@docusaurus/theme-classic" "^2.4.1"
+    "@docusaurus/theme-common" "^2.4.1"
+    "@docusaurus/theme-translations" "^2.4.1"
+    "@docusaurus/types" "^2.4.1"
+    "@docusaurus/utils" "^2.4.1"
+    "@docusaurus/utils-common" "^2.4.1"
+    "@docusaurus/utils-validation" "^2.4.1"
+    "@emotion/react" "^11.11.0"
+    "@emotion/styled" "^11.11.0"
+    "@mdx-js/react" "^1.6.22"
+    "@react-three/drei" "8.20.2"
+    "@react-three/fiber" "6.2.3"
+    "@tryghost/content-api" "^1.11.4"
+    clsx "^1.2.1"
+    copy-text-to-clipboard "^3.0.1"
+    copy-to-clipboard "^3.3.2"
+    docusaurus-plugin-sass "^0.2.3"
+    dotenv "^16.0.3"
+    lodash "^4.17.21"
+    prism-react-renderer "^1.3.5"
+    react "^17.0.2"
+    react-dom "^17.0.2"
+    react-use "^17.4.0"
+    three "^0.152.2"
+    three-stdlib "^2.23.4"
+    utility-types "^3.10.0"
+
 "@acid-info/lsd-react@^0.1.0-alpha.8":
   version "0.1.0-alpha.8"
   resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-alpha.8.tgz#f34392cd928c5bf08f325f923e88853bc809c4be"