diff --git a/gatsby-config.js b/gatsby-config.js
index 99074982..c8e235c4 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -34,7 +34,8 @@ const plugins = [
   {
     resolve: '@dvcorg/gatsby-theme-iterative',
     options: {
-      simpleLinkerTerms: require('./content/linked-terms')
+      simpleLinkerTerms: require('./content/linked-terms'),
+      glossaryInstanceName: false
     }
   },
   {
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
deleted file mode 100644
index 01d83255..00000000
--- a/gatsby-ssr.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.com/docs/ssr-apis/
- */
-
-// You can delete this file if you're not using it
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.module.css b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.module.css
deleted file mode 100644
index 4e6be2d8..00000000
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.module.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.alert {
-  height: var(--layout-alert-height);
-  line-height: var(--layout-alert-height);
-  font-size: 18px;
-  text-align: center;
-  background-color: #dee;
-  width: 100%;
-  transition: 0.5s all, 0s width;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding: 0 16px;
-  flex: 0 0 var(--layout-alert-height);
-
-  .text {
-    display: flex;
-    align-items: center;
-    padding: 0 16px;
-    overflow: hidden;
-    justify-content: center;
-  }
-
-  .icon {
-    margin-right: 4px;
-  }
-
-  p {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .textSvg {
-    width: 22px;
-    height: 22px;
-    margin-right: 8px;
-  }
-
-  &.collapsed {
-    height: 0;
-    flex-basis: 0;
-  }
-
-  a {
-    text-decoration: underline;
-    @apply hover:opacity-75;
-  }
-}
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.tsx
deleted file mode 100644
index 6d7244c4..00000000
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import cn from 'classnames'
-import React from 'react'
-import SmartLink from '../../../../../components/SmartLink'
-
-import * as styles from './index.module.css'
-
-const Alert: React.FC<{ collapsed: boolean }> = ({ collapsed }) => (
-  <div className={cn(styles.alert, collapsed && styles.collapsed)}>
-    <div className={styles.text}>
-      <span className={styles.icon} role="img" aria-label="rocket">
-        🚀
-      </span>{' '}
-      <p>
-        MLEM now offers{' '}
-        <SmartLink href="https://iterative.ai/blog/mlem-k8s-sagemaker">
-          deployment to Kubernetes and Sagemaker
-        </SmartLink>{' '}
-        with a single command.
-      </p>
-    </div>
-  </div>
-)
-
-export default Alert
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/OtherToolsPopup/index.module.css b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/OtherToolsPopup/index.module.css
deleted file mode 100644
index 58050315..00000000
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/OtherToolsPopup/index.module.css
+++ /dev/null
@@ -1,94 +0,0 @@
-.popupContainer {
-  position: relative;
-  display: none;
-
-  @media screen(sm) {
-    display: initial;
-  }
-}
-
-.popup {
-  display: grid;
-  padding: 8px;
-  opacity: 0;
-  position: absolute;
-  right: -16px;
-  top: calc(100% + 4px);
-  visibility: hidden;
-  z-index: 2;
-  background-color: #fff;
-  box-shadow: 2px 3px 12px 0 rgba(0 0 0 / 15%);
-  border-radius: 12px;
-  box-sizing: border-box;
-  row-gap: 8px;
-  width: 296px;
-  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
-
-  &_visible {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-.link {
-  display: grid;
-  border-radius: 8px;
-  grid-template-areas: 'icon title' 'icon description';
-  grid-template-columns: 32px 216px;
-  column-gap: 16px;
-  text-decoration: none;
-  transition: background-color 0.2s ease-in;
-  padding: 8px;
-
-  &:hover,
-  &:focus {
-    background-color: rgb(15 22 36 / 5%);
-  }
-
-  &:hover &__title svg {
-    opacity: 1;
-  }
-
-  &__icon {
-    height: 32px;
-    width: 32px;
-    grid-area: icon;
-    display: flex;
-    align-items: center;
-  }
-
-  &__title {
-    grid-area: title;
-    display: flex;
-    align-items: center;
-    @apply text-gray-900 text-lg leading-8 font-medium;
-
-    svg {
-      margin-left: 4px;
-      margin-bottom: 2px;
-      width: 14px;
-      height: 14px;
-    }
-
-    &LinkIcon {
-      opacity: 0;
-      width: 16px;
-      height: 16px;
-      margin-left: 8px;
-      margin-bottom: 0;
-
-      path {
-        fill: currentColor;
-      }
-    }
-  }
-
-  &__description {
-    grid-area: description;
-    @apply text-gray-600 text-base leading-6;
-  }
-}
-
-.flip {
-  transform: rotate(180deg);
-}
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/OtherToolsPopup/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/OtherToolsPopup/index.tsx
deleted file mode 100644
index 75db4e8f..00000000
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/OtherToolsPopup/index.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react'
-import cn from 'classnames'
-import { ReactComponent as StudioSVG } from '../../../../../images/icons/studio.svg'
-import { ReactComponent as DvcSVG } from '../../../../../images/icons/dvc.svg'
-import { ReactComponent as CmlSVG } from '../../../../../images/icons/cml.svg'
-import { ReactComponent as MlemSVG } from '../../../../../images/icons/mlem.svg'
-import { ReactComponent as ExternalLinkSVG } from '../../../../../images/icons/external-link.svg'
-import { ReactComponent as DownSVG } from '../../../../../images/icons/down.svg'
-import { ReactComponent as VsCodeSVG } from '../../../../../images/icons/vscode.svg'
-
-import SmartLink from '../../../../../components/SmartLink'
-import * as styles from './index.module.css'
-import usePopup from '../../../../../utils/hooks/usePopup'
-import onSelectKey from '../../../../../utils/onSelectKey'
-
-interface IOtherToolsPopupProps {
-  navItemClassName: string
-}
-
-const otherToolsPopupData: Array<{
-  title: string
-  titleImg?: React.FC<React.SVGProps<SVGSVGElement>>
-  icon: React.FC<React.SVGProps<SVGSVGElement>> | React.FC
-  description: string
-  href: string
-}> = [
-  {
-    title: 'Studio',
-    icon: StudioSVG,
-    description: 'Track experiments and share insights from ML projects',
-    href: 'https://studio.iterative.ai/'
-  },
-  {
-    title: 'DVC',
-    icon: DvcSVG,
-    description: 'Open-source version control system for ML projects',
-    href: 'https://dvc.org/'
-  },
-  {
-    title: 'VS Code Extension',
-    titleImg: VsCodeSVG,
-    icon: () => <div></div>,
-    description: 'Local ML model development and experiment tracking',
-    href: 'https://marketplace.visualstudio.com/items?itemName=Iterative.dvc'
-  },
-  {
-    title: 'CML',
-    icon: CmlSVG,
-    description: 'Open-source CI/CD for ML projects',
-    href: 'https://cml.dev/'
-  },
-  {
-    title: 'MLEM',
-    icon: MlemSVG,
-    description: 'Open-source tool to simplify ML model deployment',
-    href: '/'
-  }
-]
-
-const OtherToolsPopup: React.FC<IOtherToolsPopupProps> = ({
-  navItemClassName
-}) => {
-  const otherToolsPopup = usePopup()
-
-  return (
-    <div
-      ref={otherToolsPopup.containerEl}
-      className={styles.popupContainer}
-      onMouseEnter={otherToolsPopup.open}
-      onMouseLeave={otherToolsPopup.close}
-    >
-      <button
-        onPointerUp={otherToolsPopup.toggle}
-        onKeyUp={onSelectKey(otherToolsPopup.toggle)}
-        className={navItemClassName}
-      >
-        Other Tools{' '}
-        <DownSVG
-          className={cn(otherToolsPopup.isOpen && styles.flip)}
-          width={8}
-          height={8}
-        />
-      </button>
-      <div
-        className={cn(
-          styles.popup,
-          otherToolsPopup.isOpen && styles.popup_visible
-        )}
-      >
-        {otherToolsPopupData.map(
-          ({ title, icon: Icon, description, href, titleImg: TitleImg }, i) => (
-            <SmartLink
-              key={i}
-              href={href}
-              className={styles.link}
-              onClick={otherToolsPopup.close}
-            >
-              {<Icon width={16} height={16} className={styles.link__icon} />}
-              <h2 className={styles.link__title}>
-                {title}
-                {TitleImg && <TitleImg />}
-                {/^https?:\/\//.test(href) && (
-                  <ExternalLinkSVG className={styles.link__titleLinkIcon} />
-                )}
-              </h2>
-              <p className={styles.link__description}>{description}</p>
-            </SmartLink>
-          )
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default OtherToolsPopup
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/SocialIcon/index.module.css b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/SocialIcon/index.module.css
deleted file mode 100644
index 125ad779..00000000
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/SocialIcon/index.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.socialIcon {
-  @apply text-gray-800;
-  padding: 8px;
-  display: block;
-
-  @media screen(md) {
-    padding: 12px;
-  }
-
-  &:hover {
-    opacity: 0.75;
-  }
-
-  svg {
-    fill: currentColor;
-
-    path {
-      fill: currentColor;
-    }
-  }
-}
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/SocialIcon/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/SocialIcon/index.tsx
deleted file mode 100644
index 88790515..00000000
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/SocialIcon/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react'
-import cn from 'classnames'
-import SmartLink from '../../../../../components/SmartLink'
-import { ReactComponent as DiscordIconSvg } from '../../../../../images/icons/discord.svg'
-import { ReactComponent as YoutubeIconSvg } from '../../../../../images/icons/youtube.svg'
-import { ReactComponent as TwitterIconSvg } from '../../../../../images/icons/twitter.svg'
-import { ReactComponent as LinkedInIconSvg } from '../../../../../images/icons/linkedin.svg'
-import { ReactComponent as GithubIconSvg } from '../../../../../images/icons/github.svg'
-import * as styles from './index.module.css'
-
-export interface ISocialIconProps {
-  icon: 'github' | 'linkedin' | 'youtube' | 'discord' | 'twitter'
-  href: string
-  label: string
-  className?: string
-  target?: '_blank'
-}
-
-const icons = {
-  discord: <DiscordIconSvg width={16} height={16} />,
-  twitter: <TwitterIconSvg width={16} height={16} />,
-  youtube: <YoutubeIconSvg width={16} height={16} />,
-  linkedin: <LinkedInIconSvg width={16} height={16} />,
-  github: <GithubIconSvg width={16} height={16} />
-}
-
-const SocialIcon: React.FC<ISocialIconProps> = ({
-  className,
-  icon,
-  href,
-  label,
-  target
-}) => {
-  return (
-    <SmartLink
-      target={target}
-      className={cn(className, styles.socialIcon)}
-      href={href}
-    >
-      {icons[icon]}
-      <span className="sr-only">{label}</span>
-    </SmartLink>
-  )
-}
-
-export default SocialIcon
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/index.module.css b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/index.module.css
deleted file mode 100644
index 8c735099..00000000
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/index.module.css
+++ /dev/null
@@ -1,153 +0,0 @@
-.header {
-  width: 100%;
-  background-color: white;
-  position: fixed;
-  top: 0;
-  height: var(--layout-header-height);
-  z-index: 2;
-  box-shadow: 0 2px 3px 0 rgb(0 0 0 / 15%);
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  transition: 0.5s all, 0s width;
-  &.hasAlert {
-    height: calc(var(--layout-header-height)+var(--layout-alert-height));
-  }
-}
-
-.placeholder {
-  transition: height 0.2s linear;
-  height: var(--layout-header-height);
-
-  &.withAlert {
-    height: calc(var(--layout-header-height) + var(--layout-alert-height));
-  }
-
-  &.collapsed {
-    height: var(--layout-header-height);
-  }
-}
-
-.nav {
-  background-color: white;
-  width: 100%;
-  margin: auto;
-  max-width: 1152px;
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  justify-content: center;
-
-  @media screen(md) {
-    padding: 8px 32px;
-  }
-
-  @media screen(lg) {
-    padding: 8px 80px;
-  }
-
-  &__brandLogo {
-    width: 90px;
-
-    @media screen(md) {
-      width: 108px;
-    }
-
-    @media screen(lg) {
-      width: 115px;
-    }
-  }
-
-  &__logoLink {
-    flex: 0 0 auto;
-  }
-
-  &__brandCompany {
-    margin-right: auto;
-    padding: 8px;
-    white-space: nowrap;
-    letter-spacing: 0.02em;
-    background-clip: text;
-    background-color: #fff 18.77%;
-    background-size: 100%;
-    font-style: normal;
-    text-align: left;
-    width: fit-content;
-    -webkit-background-clip: text;
-    -moz-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    -moz-text-fill-color: transparent;
-    @apply bg-orange-purple-gradient text-tiny md:text-base leading-6;
-
-    @media screen(md) {
-      padding: 12px;
-    }
-
-    @media screen(lg) {
-      padding: 16px;
-    }
-
-    span {
-      @apply font-bold;
-    }
-  }
-
-  &__links {
-    display: flex;
-
-    > * {
-      margin-right: 8px;
-
-      @media screen(md) {
-        margin-right: 24px;
-      }
-
-      &:last-child {
-        margin-right: 0;
-
-        @media screen(md) {
-          margin-right: 12px;
-        }
-      }
-    }
-  }
-
-  &__link {
-    display: none;
-    align-items: center;
-    @apply text-tiny md:text-lg leading-6 text-gray-900;
-
-    @media screen(sm) {
-      display: flex;
-    }
-
-    svg {
-      margin-left: 5px;
-
-      @media screen(lg) {
-        margin-left: 7px;
-        width: 18px;
-        height: 18px;
-      }
-    }
-  }
-
-  &__button {
-    display: none;
-
-    @media screen(md) {
-      display: flex;
-    }
-  }
-
-  &__icons {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-    @media screen(md) {
-      margin-right: 12px;
-    }
-  }
-}
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/index.tsx
deleted file mode 100644
index a81be673..00000000
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/index.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react'
-import cn from 'classnames'
-import SmartLink from '../../../../components/SmartLink'
-import Button from '../../../../components/Button'
-import SocialIcon, { ISocialIconProps } from './SocialIcon'
-import mlemLogo from '../../../../images/mlem-logo.png'
-import OtherToolsPopup from './OtherToolsPopup'
-import Alert from './Alert'
-import * as styles from './index.module.css'
-import { useInView } from 'react-intersection-observer'
-
-const socialLinks: Array<ISocialIconProps> = [
-  {
-    icon: 'github',
-    href: 'https://github.com/iterative/mlem/',
-    label: 'Go to MLEM github repo'
-  },
-  {
-    icon: 'youtube',
-    href: 'https://www.youtube.com/channel/UC37rp97Go-xIX3aNFVHhXfQ',
-    label: 'Go to DVCorg Youtube'
-  },
-  {
-    icon: 'discord',
-    href: '/chat',
-    label: 'Go to DVC Discord',
-    target: '_blank'
-  }
-]
-
-const NavBar: React.FC = () => {
-  const { ref, inView } = useInView({ rootMargin: '20px 0px 0px 0px' })
-  const scrolled = !inView
-
-  return (
-    <>
-      <div ref={ref} />
-
-      <header>
-        <div
-          className={cn(
-            styles.placeholder,
-            scrolled && styles.collapsed,
-            styles.withAlert
-          )}
-        />
-        <div className={cn(styles.header, scrolled || styles.hasAlert)}>
-          <Alert collapsed={scrolled} />
-          <nav className={styles.nav}>
-            <SmartLink href="/" className={styles.nav__logoLink}>
-              <img
-                alt="Go to home page"
-                src={mlemLogo}
-                className={styles.nav__brandLogo}
-                width={108}
-                height={24}
-              />
-            </SmartLink>
-            <SmartLink
-              className={styles.nav__brandCompany}
-              href="https://iterative.ai/"
-            >
-              by <span>iterative.ai</span>
-            </SmartLink>
-            <div className={styles.nav__links}>
-              <SmartLink
-                href="/doc"
-                className={styles.nav__link}
-                style={{
-                  display: 'flex'
-                }}
-              >
-                Docs
-              </SmartLink>
-              <SmartLink
-                href="https://iterative.ai/blog"
-                className={styles.nav__link}
-              >
-                Blog
-              </SmartLink>
-              <SmartLink
-                href="https://learn.iterative.ai/"
-                className={styles.nav__link}
-              >
-                Course
-              </SmartLink>
-              <OtherToolsPopup navItemClassName={styles.nav__link} />
-            </div>
-            <ul className={styles.nav__icons}>
-              {socialLinks.map(({ icon, href, label, target }, i) => (
-                <li key={i}>
-                  <SocialIcon
-                    target={target}
-                    icon={icon}
-                    href={href}
-                    label={label}
-                  />
-                </li>
-              ))}
-            </ul>
-            <Button href="/doc/get-started" className={styles.nav__button}>
-              Get Started
-            </Button>
-          </nav>
-        </div>
-      </header>
-    </>
-  )
-}
-
-export default NavBar
diff --git a/src/components/Home/Header/index.module.css b/src/components/Home/Header/index.module.css
index f7e5cae8..8b827e3a 100644
--- a/src/components/Home/Header/index.module.css
+++ b/src/components/Home/Header/index.module.css
@@ -1,4 +1,5 @@
 .header {
+  @apply my-10;
   text-align: left;
 
   &__title {
@@ -27,7 +28,6 @@
   }
 
   &__logos {
-    grid-area: logos;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -63,31 +63,16 @@
 
 .main {
   @media screen(md) {
-    display: grid;
-    grid-template-areas: 'captions slides' 'buttons slides';
-    grid-template-columns: 1fr 336px;
-    grid-template-rows: min-content 1fr;
-    margin: 0 -32px 0 -14px;
+    padding: 0 -32px 0 -14px;
     column-gap: 16px;
   }
 
   @media screen(lg) {
-    grid-template-columns: calc((100% - 64px) / 2) 1fr;
     column-gap: 24px;
-    margin: 48px -80px 0 -18px;
-  }
-
-  .cli__slidesWrapper {
-    grid-area: slides;
-  }
-
-  .cli__captions {
-    grid-area: captions;
+    padding: 48px -80px 0 -18px;
   }
 
   &__buttons {
-    grid-area: buttons;
-
     @media screen(md) {
       display: flex;
       align-items: flex-start;
@@ -128,14 +113,10 @@
       width: 320px;
       height: 234px;
       padding: 34px 20px 34px 16px;
-      box-sizing: content-box;
       @apply rounded-4;
     }
 
     @media screen(lg) {
-      box-sizing: border-box;
-      width: calc(100% + 18px);
-      height: calc(244px + 32px);
       padding: 16px 64px 16px 24px;
       margin: 0 0 0 -24px;
       align-self: center;
@@ -143,6 +124,7 @@
   }
 
   &__slides {
+    width: 100%;
     list-style: none;
     display: flex;
     position: relative;
diff --git a/src/components/Home/Header/index.tsx b/src/components/Home/Header/index.tsx
index 655d5332..2b4326f4 100644
--- a/src/components/Home/Header/index.tsx
+++ b/src/components/Home/Header/index.tsx
@@ -168,90 +168,107 @@ const Header: React.FC = () => {
         <span className={styles.header__titleUnderscore}>_</span>
       </h1>
       <div className={styles.main}>
-        <div className={styles.cli__slidesWrapper}>
-          <ul
-            style={
-              {
-                '--selected-i': selectedCli,
-                '--length': cliSlideData.length
-              } as React.CSSProperties
-            }
-            className={styles.cli__slides}
-            onTouchMove={handleTouchMove}
-            onTouchStart={handleTouchStart}
-            onTouchEnd={handleTouchEnd}
-          >
-            {cliSlideData.map((data, i) => (
-              <li key={i} className={cn(i === selectedCli && styles.selected)}>
-                <Terminal
-                  lines={data.lines}
-                  setTypedRef={(el: {
-                    destroy: () => void
-                    reset: () => void
-                  }) => {
-                    typedRefs.current[i] = el
-                  }}
-                />
-              </li>
-            ))}
-          </ul>
-        </div>
-        <ul className={styles.cli__dots}>
-          {cliSlideData.map((_, i) => (
-            <li key={i}>
-              <button
-                className={cn(i === selectedCli && styles.selected)}
-                onFocus={() => {
-                  setCli(i)
-                }}
-              />
-            </li>
-          ))}
-        </ul>
-        <ul
-          className={cn(styles.cli__captions, 'flex md:hidden')}
-          style={
-            {
-              '--selected-i': selectedCli,
-              '--length': cliSlideData.length
-            } as React.CSSProperties
-          }
-          onTouchMove={handleTouchMove}
-          onTouchStart={handleTouchStart}
-          onTouchEnd={handleTouchEnd}
-        >
-          {cliCaptionData.map(({ bold, text }, i) => (
-            <li key={i}>
-              <p className={styles.cli__boldText}>{bold}</p>
-              <p className={styles.cli__text}>{text}</p>
-            </li>
-          ))}
-        </ul>
-        <ul
-          className={cn(styles.cli__captions, 'hidden md:flex')}
-          style={
-            {
-              '--selected-i': selectedCli,
-              '--length': cliSlideData.length
-            } as React.CSSProperties
-          }
+        <div
+          className={cn(
+            'md:flex',
+            'md:flex-row-reverse',
+            'md:flex-nowrap',
+            'items-center',
+            'justify-center'
+          )}
         >
-          {cliCaptionData.map(({ bold, text }, i) => (
-            <li
-              key={i}
-              className={cn(i === selectedCli && styles.cli__caption_selected)}
+          <div className={cn(styles.cli__slidesWrapper, 'shrink-0', 'grow-0')}>
+            <ul
+              style={
+                {
+                  '--selected-i': selectedCli,
+                  '--length': cliSlideData.length
+                } as React.CSSProperties
+              }
+              className={styles.cli__slides}
+              onTouchMove={handleTouchMove}
+              onTouchStart={handleTouchStart}
+              onTouchEnd={handleTouchEnd}
             >
-              <button
-                onClick={() => {
-                  setCli(i)
-                }}
-              >
-                <p className={styles.cli__boldText}>{bold}</p>
-                <p className={styles.cli__text}>{text}</p>
-              </button>
-            </li>
-          ))}
-        </ul>
+              {cliSlideData.map((data, i) => (
+                <li
+                  key={i}
+                  className={cn(i === selectedCli && styles.selected)}
+                >
+                  <Terminal
+                    lines={data.lines}
+                    setTypedRef={(el: {
+                      destroy: () => void
+                      reset: () => void
+                    }) => {
+                      typedRefs.current[i] = el
+                    }}
+                  />
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className={cn('shrink-1 grow-1')}>
+            <ul className={styles.cli__dots}>
+              {cliSlideData.map((_, i) => (
+                <li key={i}>
+                  <button
+                    className={cn(i === selectedCli && styles.selected)}
+                    onFocus={() => {
+                      setCli(i)
+                    }}
+                  />
+                </li>
+              ))}
+            </ul>
+            <ul
+              className={cn(styles.cli__captions, 'flex md:hidden')}
+              style={
+                {
+                  '--selected-i': selectedCli,
+                  '--length': cliSlideData.length
+                } as React.CSSProperties
+              }
+              onTouchMove={handleTouchMove}
+              onTouchStart={handleTouchStart}
+              onTouchEnd={handleTouchEnd}
+            >
+              {cliCaptionData.map(({ bold, text }, i) => (
+                <li key={i}>
+                  <p className={styles.cli__boldText}>{bold}</p>
+                  <p className={styles.cli__text}>{text}</p>
+                </li>
+              ))}
+            </ul>
+            <ul
+              className={cn(styles.cli__captions, 'hidden md:flex')}
+              style={
+                {
+                  '--selected-i': selectedCli,
+                  '--length': cliSlideData.length
+                } as React.CSSProperties
+              }
+            >
+              {cliCaptionData.map(({ bold, text }, i) => (
+                <li
+                  key={i}
+                  className={cn(
+                    i === selectedCli && styles.cli__caption_selected
+                  )}
+                >
+                  <button
+                    onClick={() => {
+                      setCli(i)
+                    }}
+                  >
+                    <p className={styles.cli__boldText}>{bold}</p>
+                    <p className={styles.cli__text}>{text}</p>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
         <div className={styles.main__buttons}>
           <Button className={styles.button} href="/doc/get-started">
             Get Started
diff --git a/src/components/Home/Terminal/index.module.css b/src/components/Home/Terminal/index.module.css
index 21d53eeb..cb25165f 100644
--- a/src/components/Home/Terminal/index.module.css
+++ b/src/components/Home/Terminal/index.module.css
@@ -5,7 +5,7 @@
   width: 100%;
   height: 100%;
   overflow-y: hidden;
-  @apply bg-white text-gray-800 rounded-4 text-xxxs leading-3 lg:text-xs lg:leading-4;
+  @apply bg-white text-gray-800 rounded-4 text-xxxs leading-3 lg:text-xs lg:leading-4 lg:w-96;
 
   &__btns {
     display: flex;
diff --git a/src/components/Home/index.module.css b/src/components/Home/index.module.css
deleted file mode 100644
index 1aae2c64..00000000
--- a/src/components/Home/index.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.homeMain {
-  padding: 24px 0;
-}
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index 93e994e6..dfc472e8 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -1,11 +1,20 @@
 import React from 'react'
 import Header from './Header'
 import Features from './Features'
-import * as styles from './index.module.css'
+import cn from 'classnames'
 
-const Home: React.FC = () => {
+const Home = () => {
   return (
-    <div className={styles.homeMain}>
+    <div
+      className={cn(
+        'flex',
+        'flex-col',
+        'flex-nowrap',
+        'w-full',
+        'max-w-5xl',
+        'mx-auto'
+      )}
+    >
       <Header />
       <Features />
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 0ebbd824..b5a8f311 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ const plugin = require('tailwindcss/plugin')
 
 module.exports = {
   content: [
+    ...themeConfig.content,
     './src/**/*.js',
     './src/**/*.jsx',
     './src/**/*.ts',