diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutFooter/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/LayoutFooter/index.tsx
index 86fbd7497f..0de31d3bd2 100644
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutFooter/index.tsx
+++ b/src/@dvcorg/gatsby-theme-iterative/components/LayoutFooter/index.tsx
@@ -126,6 +126,12 @@ const footerListsData: Array<IFooterListData> = [
         text: 'MLEM',
         icon: <MlemSVG className={styles.productIcon} />,
         target: '_blank'
+      },
+      {
+        href: 'https://marketplace.visualstudio.com/items?itemName=Iterative.dvc',
+        text: 'VS Code Extension',
+        icon: <LogoSVG className={styles.productIcon} />,
+        target: '_blank'
       }
     ]
   }
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/index.tsx
index 86a1d26aec..1ed666317f 100644
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/index.tsx
+++ b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/index.tsx
@@ -73,7 +73,7 @@ export const OtherToolsPopup: React.FC<IPopupProps> = ({
 }) => (
   <BasePopup className={styles.otherToolsPopup} isVisible={isVisible}>
     {menuData.products.map(
-      ({ title, iconClass, description, href, target }, i) => (
+      ({ title, iconClass, description, href, target, titleImgClass }, i) => (
         <Link
           className={styles.link}
           href={href}
@@ -84,8 +84,11 @@ export const OtherToolsPopup: React.FC<IPopupProps> = ({
           <div className={cn(styles.linkIcon, iconClass)} />
           <p className={styles.title}>
             {title}
+            {titleImgClass && (
+              <span className={cn(styles.titleIcon, titleImgClass)}></span>
+            )}
             {/^https?:\/\//.test(href) && (
-              <ExternalLinkIcon className={styles.titleIcon} />
+              <ExternalLinkIcon className={styles.titleExternalIcon} />
             )}
           </p>
           <p className={styles.description}>{description}</p>
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/styles.module.css b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/styles.module.css
index 1f27318395..93ce9b8c39 100644
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/styles.module.css
+++ b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/Popup/styles.module.css
@@ -49,6 +49,10 @@
   background-image: url("../../../../../../../static/img/mlem-icon.svg");
 }
 
+.vscodeIcon {
+  background-image: url("../../../../../../../static/img/vscode-icon.svg");
+}
+
 .communityPopup {
   row-gap: 4px;
   width: 260px;
@@ -69,7 +73,7 @@
     grid-template-columns: 32px 216px;
     column-gap: 16px;
 
-    &:hover .titleIcon {
+    &:hover .titleExternalIcon {
       opacity: 1;
     }
 
@@ -90,9 +94,18 @@
       line-height: 24px;
       display: flex;
       align-items: center;
+
+      &Icon {
+        margin-left: 4px;
+        margin-bottom: 2px;
+        width: 14px;
+        height: 14px;
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
     }
 
-    .titleIcon {
+    .titleExternalIcon {
       opacity: 0;
       width: 16px;
       height: 16px;
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/alert.tsx b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/alert.tsx
index 1ec4467f8d..2c5a5de7d1 100644
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/alert.tsx
+++ b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/alert.tsx
@@ -1,6 +1,7 @@
 import cn from 'classnames'
 import React from 'react'
 
+import { ReactComponent as VscodeIcon } from '../../../../../static/img/vscode-icon.svg'
 import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
 
 import * as styles from './styles.module.css'
@@ -9,14 +10,18 @@ const LayoutAlert: React.FC<{ collapsed: boolean }> | false = ({
   collapsed
 }) => (
   <div className={cn(styles.alert, collapsed && styles.collapsed)}>
-    <span role="img" aria-label="rocket">
-      🚀
-    </span>{' '}
-    Our new tool for deployment,{' '}
-    <Link href="https://mlem.ai" tabIndex={collapsed ? -1 : undefined}>
-      MLEM
-    </Link>
-    , has been released!
+    <div className={styles.text}>
+      <span role="img" aria-label="VS Code Logo">
+        <VscodeIcon width="22px" height="22px" />
+      </span>
+      <p>
+        Check out our{' '}
+        <Link href="https://marketplace.visualstudio.com/items?itemName=Iterative.dvc">
+          new VS Code extension
+        </Link>{' '}
+        for experiment tracking and model development
+      </p>
+    </div>
   </div>
 )
 
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/styles.module.css b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/styles.module.css
index 8ba77f2294..4f13ca3035 100644
--- a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/styles.module.css
+++ b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/styles.module.css
@@ -115,6 +115,25 @@
     height: 0;
     transform: translateY(-100%);
   }
+
+  .text {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    padding: 0 16px;
+  }
+
+  p {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  span {
+    height: 22px;
+    margin-right: 8px;
+  }
 }
 
 .gitHubAlertLink {
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/data/menu.ts b/src/@dvcorg/gatsby-theme-iterative/components/data/menu.ts
index 52bafda7f0..99cf39d014 100644
--- a/src/@dvcorg/gatsby-theme-iterative/components/data/menu.ts
+++ b/src/@dvcorg/gatsby-theme-iterative/components/data/menu.ts
@@ -19,8 +19,9 @@ interface ICommunityData {
 
 interface IProductsData {
   title: string
+  titleImgClass?: string
   description: string
-  iconClass: string
+  iconClass: string | null
   href: string
   img: string
   imgAlt: string
@@ -136,6 +137,15 @@ const menuData: IMenuData = {
       img: '/img/dvc_icon-color--square_vector.svg',
       imgAlt: 'DVC logo'
     },
+    {
+      title: 'VS Code Extension',
+      titleImgClass: styles.vscodeIcon,
+      description: 'Local ML model development and experiment tracking',
+      iconClass: null,
+      href: 'https://marketplace.visualstudio.com/items?itemName=Iterative.dvc',
+      img: '/img/dvc_icon-color--square_vector.svg',
+      imgAlt: 'DVC logo'
+    },
     {
       title: 'CML',
       description: 'Open-source CI/CD for ML projects',
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/data/styles.module.css b/src/@dvcorg/gatsby-theme-iterative/components/data/styles.module.css
index 58fe00dd4d..c1b4c42e2c 100644
--- a/src/@dvcorg/gatsby-theme-iterative/components/data/styles.module.css
+++ b/src/@dvcorg/gatsby-theme-iterative/components/data/styles.module.css
@@ -14,6 +14,10 @@
   background-image: url("../../../../../static/img/mlem-icon.svg");
 }
 
+.vscodeIcon {
+  background-image: url("../../../../../static/img/vscode-icon.svg");
+}
+
 .other {
   font-weight: 600;
   letter-spacing: 2px;
diff --git a/src/components/Features/index.tsx b/src/components/Features/index.tsx
index e9eca06cc1..3341eaca55 100644
--- a/src/components/Features/index.tsx
+++ b/src/components/Features/index.tsx
@@ -19,6 +19,22 @@ const FeaturesPage: React.FC = () => (
       </HeroSection>
       <LayoutWidthContainer>
         <div className={styles.features}>
+          <div className={styles.feature}>
+            <img
+              className={styles.featureIcon}
+              src="/img/features/icons/cluster.svg"
+              alt="cluster"
+            />
+            <h3 className={styles.featureName}>VS Code Extension</h3>
+            <div className={styles.featureDescription}>
+              Manage your data, run experiments, compare metrics, and visualize
+              plots, all in VS Code. Extend DVC capabilities and your ML
+              experimentation workflows directly into your IDE.{' '}
+              <Link href="https://marketplace.visualstudio.com/items?itemName=Iterative.dvc">
+                Start using it now
+              </Link>
+            </div>
+          </div>
           <div className={styles.feature}>
             <img
               className={styles.featureIcon}
diff --git a/src/components/Features/styles.module.css b/src/components/Features/styles.module.css
index f09631337c..ce3d2f6f02 100644
--- a/src/components/Features/styles.module.css
+++ b/src/components/Features/styles.module.css
@@ -34,6 +34,21 @@
   flex-basis: 311px;
   padding: 0 10px;
   margin-bottom: 63px;
+
+  &:first-child {
+    flex-basis: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 110px;
+
+    @media (--xs-scr) {
+      align-items: flex-start;
+      padding: 0 10px;
+      text-align: left;
+    }
+  }
 }
 
 .featureIcon {
diff --git a/static/img/vscode-icon.svg b/static/img/vscode-icon.svg
new file mode 100644
index 0000000000..c453e633f3
--- /dev/null
+++ b/static/img/vscode-icon.svg
@@ -0,0 +1,41 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z" fill="#0065A9"/>
+<g filter="url(#filter0_d)">
+<path d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z" fill="#007ACC"/>
+</g>
+<g filter="url(#filter1_d)">
+<path d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z" fill="#1F9CF0"/>
+</g>
+<g style="mix-blend-mode:overlay" opacity="0.25">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z" fill="url(#paint0_linear)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="-8.39411" y="15.8291" width="116.727" height="92.2456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4.16667"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="60.4167" y="-8.07558" width="47.9167" height="116.151" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4.16667"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="49.9392" y1="0.257812" x2="49.9392" y2="99.7423" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>