diff --git a/src/components/ArticleSidebar/index.tsx b/src/components/ArticleSidebar/index.tsx
new file mode 100644
index 00000000..e897afbb
--- /dev/null
+++ b/src/components/ArticleSidebar/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import ShareArticle from '../../templates/blog-post/ShareArticle';
+import { RenderToc } from '../BlogPostToc';
+import SidebarCta from '../SidebarCta';
+import {
+    container,
+    shareArticleDesktop,
+    tableOfContentsWrapper,
+} from './styles.module.less';
+
+interface ArticleSidebarProps {
+    article: {
+        title: string;
+        slug: string;
+    };
+    tableOfContents: any;
+}
+
+const ArticleSidebar = ({ article, tableOfContents }: ArticleSidebarProps) => {
+    return (
+        <div className={container}>
+            <div className={shareArticleDesktop}>
+                <ShareArticle article={article} />
+            </div>
+            {tableOfContents.length > 0 ? (
+                <div className={tableOfContentsWrapper}>
+                    <RenderToc items={tableOfContents} />
+                </div>
+            ) : null}
+            <SidebarCta />
+        </div>
+    );
+};
+
+export default ArticleSidebar;
diff --git a/src/components/ArticleSidebar/styles.module.less b/src/components/ArticleSidebar/styles.module.less
new file mode 100644
index 00000000..421636ed
--- /dev/null
+++ b/src/components/ArticleSidebar/styles.module.less
@@ -0,0 +1,58 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: 256px;
+  width: 100%;
+  gap: 24px;
+  height: fit-content;
+
+  @media (max-width: 1150px) {
+    max-width: 100%;
+  }
+
+  @media (min-width: 1151px) {
+    position: sticky;
+    top: 140px;
+  }
+
+  @media (max-width: 767px) {
+    padding-right: 0;
+    position: relative !important;
+  }
+}
+
+.shareArticleDesktop {
+  display: flex;
+
+  @media (max-width: 1150px) {
+    display: none;
+  }
+}
+
+.tableOfContentsWrapper {
+  overflow: auto;
+
+  @media (max-width: 1150px) {
+    margin-bottom: 32px;
+  }
+
+  @media (min-width: 769px) {
+    max-height: 45vh;
+
+    @media (max-height: 1160px) {
+      max-height: 36vh;
+    }
+
+    @media (max-height: 1000px) {
+      max-height: 25vh;
+    }
+
+    @media (max-height: 900px) {
+      max-height: 20vh;
+    }
+
+    @media (max-height: 790px) {
+      max-height: 50vh;
+    }
+  }
+}
diff --git a/src/components/BlogPostToc/index.tsx b/src/components/BlogPostToc/index.tsx
index c2b87453..7fb3ad5f 100644
--- a/src/components/BlogPostToc/index.tsx
+++ b/src/components/BlogPostToc/index.tsx
@@ -117,7 +117,7 @@ export const RenderToc = ({ items }: { items: TocItem[] }) => {
         null
     );
     const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
-    const isMobile = useMediaQuery('(max-width:768px)');
+    const isMobile = useMediaQuery('(max-width: 768px) or (max-height: 790px)');
 
     React.useEffect(() => {
         intersectionObserver.current = new IntersectionObserver(
diff --git a/src/components/BlogPostToc/styles.module.less b/src/components/BlogPostToc/styles.module.less
index c7fb67c7..62522d3b 100644
--- a/src/components/BlogPostToc/styles.module.less
+++ b/src/components/BlogPostToc/styles.module.less
@@ -1,7 +1,6 @@
 .tableOfContents {
   background: #fff;
   counter-reset: toc-counter;
-  margin-top: 18px;
   padding: 0 8px;
 
   h3 {
diff --git a/src/components/CopyToClipboardButton/index.tsx b/src/components/CopyToClipboardButton/index.tsx
new file mode 100644
index 00000000..0e0070ab
--- /dev/null
+++ b/src/components/CopyToClipboardButton/index.tsx
@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import CheckIcon from '@mui/icons-material/Check';
+import Tooltip from '@mui/material/Tooltip';
+import clsx from 'clsx';
+import { TextField } from '@mui/material';
+import CopyIcon from '../../svgs/share-social-icons/copy.svg';
+import {
+    buttonStyling,
+    isCopiedStyling,
+    copyFailed,
+    container,
+} from './styles.module.less';
+
+interface CopyToClipboardButtonProps {
+    contentToCopy: string;
+}
+
+const CopyToClipboardButton = ({
+    contentToCopy,
+}: CopyToClipboardButtonProps) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const [isCopyFailed, setIsCopyFailed] = useState(false);
+
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(contentToCopy).then(
+            () => {
+                setIsCopied(true);
+                setIsCopyFailed(false);
+                setTimeout(() => setIsCopied(false), 2000);
+            },
+            () => {
+                setIsCopied(false);
+                setIsCopyFailed(false);
+            }
+        );
+    };
+    return (
+        <div className={container}>
+            <Tooltip
+                title="Copied"
+                arrow
+                open={isCopied}
+                slotProps={{
+                    popper: {
+                        modifiers: [
+                            {
+                                name: 'offset',
+                                options: {
+                                    offset: [0, -4],
+                                },
+                            },
+                        ],
+                    },
+                }}
+            >
+                <button
+                    onClick={copyToClipboard}
+                    className={clsx(
+                        buttonStyling,
+                        isCopied ? isCopiedStyling : null
+                    )}
+                >
+                    {isCopied ? (
+                        <CheckIcon fontSize="small" htmlColor="#00A99D" />
+                    ) : (
+                        <CopyIcon />
+                    )}
+                </button>
+            </Tooltip>
+            {isCopyFailed ? (
+                <TextField
+                    value={contentToCopy}
+                    variant="filled"
+                    className={copyFailed}
+                />
+            ) : null}
+        </div>
+    );
+};
+
+export default CopyToClipboardButton;
diff --git a/src/components/CopyToClipboardButton/styles.module.less b/src/components/CopyToClipboardButton/styles.module.less
new file mode 100644
index 00000000..c682f6dd
--- /dev/null
+++ b/src/components/CopyToClipboardButton/styles.module.less
@@ -0,0 +1,40 @@
+@import '../styles.module.less';
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.buttonStyling {
+  .socialShareButton;
+
+  transition: background-color,
+    border 300ms ease-in-out;
+
+  background-color: #FFFFFF;
+  border-color: #D7DCE5;
+
+  &:hover {
+    background-color: #f9fafc;
+    border-color: #D7DCE5;
+  }
+}
+
+.isCopiedStyling {
+  background-color: #00A99D30;
+  border-color: #00A99D;
+
+  &:hover {
+    background-color: #00A99D30;
+    border-color: #00A99D;
+  }
+}
+
+.copyFailed {
+  width: 100%;
+
+  .MuiInputBase-input {
+    padding: 12px;
+  }
+}
diff --git a/src/components/EtlToolsPage/SectionOne/styles.module.less b/src/components/EtlToolsPage/SectionOne/styles.module.less
index 8d645774..3e45cc67 100644
--- a/src/components/EtlToolsPage/SectionOne/styles.module.less
+++ b/src/components/EtlToolsPage/SectionOne/styles.module.less
@@ -34,6 +34,7 @@
 .rightColumn {
   max-width: 496px;
   width: 100%;
+  aspect-ratio: 1 / 1;
   position: relative;
 
   div:not(:first-of-type) {
diff --git a/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less b/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less
index ca40e986..cd51eddc 100644
--- a/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less
+++ b/src/components/EtlToolsXvsYPage/SectionOne/styles.module.less
@@ -42,6 +42,7 @@
 
 .rightColumn {
   max-width: 536px;
+  aspect-ratio: 15 / 9;
   width: 100%;
   position: relative;
 }
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less b/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less
index 82432d1d..bc11f93a 100644
--- a/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less
+++ b/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/styles.module.less
@@ -4,10 +4,13 @@
   justify-content: center;
   gap: 10px;
   flex-direction: column;
-  padding: 24px;
   width: 100%;
   text-align: center;
   transition: background-color 200ms ease-in;
+
+  span {
+    white-space: nowrap;
+  }
 }
 
 .tableLogoWrapper {
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/index.tsx b/src/components/EtlToolsXvsYPage/SectionTwo/index.tsx
index cdad69be..4aa7e8d6 100644
--- a/src/components/EtlToolsXvsYPage/SectionTwo/index.tsx
+++ b/src/components/EtlToolsXvsYPage/SectionTwo/index.tsx
@@ -5,16 +5,9 @@ import {
     Vendor,
 } from '../../../../shared';
 import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
-import ShareArticle from '../../../templates/blog-post/ShareArticle';
 import BlogBanner from '../../BlogBanner';
-import { RenderToc } from '../../BlogPostToc';
-import {
-    container,
-    leftColumn,
-    rightColumn,
-    bold,
-    tableOfContentsWrapper,
-} from './styles.module.less';
+import ArticleSidebar from '../../ArticleSidebar';
+import { container, rightColumn, bold } from './styles.module.less';
 import UseCases from './UseCases';
 import Connectors from './Connectors';
 import CoreFeatures from './CoreFeatures';
@@ -135,20 +128,16 @@ const SectionTwo = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
     return (
         <section className={defaultWrapperGrey}>
             <div className={container}>
-                <div className={leftColumn}>
-                    <ShareArticle
-                        article={{
-                            title: `${xVendor.name} vs ${yVendor.name}`,
-                            slug: getComparisonSlug(
-                                xVendor.slugKey,
-                                yVendor.slugKey
-                            ),
-                        }}
-                    />
-                    <div className={tableOfContentsWrapper}>
-                        <RenderToc items={tableOfContents} />
-                    </div>
-                </div>
+                <ArticleSidebar
+                    article={{
+                        title: `${xVendor.name} vs ${yVendor.name}`,
+                        slug: getComparisonSlug(
+                            xVendor.slugKey,
+                            yVendor.slugKey
+                        ),
+                    }}
+                    tableOfContents={tableOfContents}
+                />
                 <div className={rightColumn}>
                     <h2 id={intro.id}>{intro.heading}</h2>
                     <p className={bold}>
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less b/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less
index d42a6249..b30809be 100644
--- a/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less
+++ b/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less
@@ -6,7 +6,7 @@
   display: flex;
   gap: 48px;
 
-  @media (max-width: 1240px) {
+  @media (max-width: 1150px) {
     flex-direction: column;
   }
 
@@ -180,47 +180,6 @@
   }
 }
 
-.leftColumn {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  height: 100%;
-
-  @media (min-width: 426px) {
-    min-width: 256px;
-  }
-
-  @media (min-width: 1241px) {
-    position: sticky;
-    top: 140px;
-  }
-}
-
-.tableOfContentsWrapper {
-  overflow: auto;
-  max-height: 70vh;
-
-  @media (max-height: 880px) {
-    max-height: 65vh;
-  }
-
-  @media (max-height: 740px) {
-    max-height: 60vh;
-  }
-
-  @media (max-height: 740px) {
-    max-height: 50vh;
-  }
-
-  @media (max-height: 540px) {
-    max-height: 40vh;
-  }
-
-  @media (max-height: 440px) {
-    display: none;
-  }
-}
-
 .bold {
   font-weight: 600;
 }
diff --git a/src/components/PricingPage/SectionThree/index.tsx b/src/components/PricingPage/SectionThree/index.tsx
index bc76a411..2d18a925 100644
--- a/src/components/PricingPage/SectionThree/index.tsx
+++ b/src/components/PricingPage/SectionThree/index.tsx
@@ -1,20 +1,36 @@
 import React from 'react';
+import clsx from 'clsx';
 import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less';
 import { PricingCalculator } from '../../PricingCalculator';
+import CopyToClipboardButton from '../../CopyToClipboardButton';
+import useWindowExistence from '../../../hooks/useWindowExistence';
 import {
     container,
     title,
     description,
     textWrapper,
     pricingCalculatorWrapper,
+    jumpLinkOffset,
 } from './styles.module.less';
 
 const SectionThree = () => {
+    const hasWindow = useWindowExistence();
+
     return (
-        <section className={defaultWrapperDark}>
+        <section
+            className={clsx(defaultWrapperDark, jumpLinkOffset)}
+            id="pricing-calculator"
+        >
             <div className={container}>
                 <div className={textWrapper}>
-                    <h2 className={title}>PRICING CALCULATOR</h2>
+                    <div>
+                        <h2 className={title}>PRICING CALCULATOR</h2>
+                        {hasWindow ? (
+                            <CopyToClipboardButton
+                                contentToCopy={`${window.location.origin}/pricing/#pricing-calculator`}
+                            />
+                        ) : null}
+                    </div>
                     <p className={description}>
                         Use our intuitive pricing calculator to easily estimate
                         your monthly costs. Simply input your requirements, and
diff --git a/src/components/PricingPage/SectionThree/styles.module.less b/src/components/PricingPage/SectionThree/styles.module.less
index 13a861e0..0d6deb70 100644
--- a/src/components/PricingPage/SectionThree/styles.module.less
+++ b/src/components/PricingPage/SectionThree/styles.module.less
@@ -1,5 +1,9 @@
 @import '../../../globalStyles/sections.module.less';
 
+.jumpLinkOffset {
+  scroll-margin-top: 32px;
+}
+
 .container {
   .globalMaxWidth;
   display: flex;
@@ -25,6 +29,12 @@
   @media (max-width: 1024px) {
     text-align: center;
   }
+
+  div:first-child {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+  }
 }
 
 .title {
@@ -58,4 +68,4 @@
 .pricingCalculatorWrapper {
   display: flex;
   flex-direction: column;
-}
+}
\ No newline at end of file
diff --git a/src/components/SidebarCta/index.tsx b/src/components/SidebarCta/index.tsx
new file mode 100644
index 00000000..7b933bb9
--- /dev/null
+++ b/src/components/SidebarCta/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { OutboundLinkFilled } from '../OutboundLink';
+import { dashboardRegisterUrl } from '../../../shared';
+import { container, image } from './styles.module.less';
+
+const SidebarCta = () => {
+    return (
+        <div className={container}>
+            <div className={image}>
+                <span>
+                    Build a <span>Pipeline</span>
+                </span>
+            </div>
+            <h3>
+                Start streaming your data <span>for free</span>
+            </h3>
+            <OutboundLinkFilled href={dashboardRegisterUrl}>
+                Build a Pipeline
+            </OutboundLinkFilled>
+        </div>
+    );
+};
+
+export default SidebarCta;
diff --git a/src/components/SidebarCta/styles.module.less b/src/components/SidebarCta/styles.module.less
new file mode 100644
index 00000000..c08c40a4
--- /dev/null
+++ b/src/components/SidebarCta/styles.module.less
@@ -0,0 +1,59 @@
+.container {
+  padding: 16px;
+  border-radius: 24px;
+  border: 1px solid #5072eb33;
+  background: #f9fafc;
+  text-align: center;
+
+  @media (max-width: 1150px) {
+    display: none;
+  }
+
+  &.mobile-only {
+    @media (max-width: 767px) {
+      display: block;
+    }
+  }
+
+  h3 {
+    color: #04192b;
+    text-align: center;
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24.2px;
+    margin: 20px 0;
+    padding: 0 8px;
+
+    span {
+      color: #5072eb;
+    }
+  }
+}
+
+.image {
+  background: #04192b url('../../images/pattern-sidebar-cta.svg') no-repeat bottom left / contain;
+  text-align: center;
+  border-radius: 16px;
+  padding-top: 16px;
+
+  span {
+    text-transform: uppercase;
+    color: #ffffff;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 36px;
+
+    span {
+      color: #5072eb;
+    }
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    width: 224px;
+    height: 128px;
+    background: url('../../images/build-pipeline.svg') no-repeat bottom / contain;
+  }
+}
diff --git a/src/components/styles.module.less b/src/components/styles.module.less
index 58b06add..2e4e0894 100644
--- a/src/components/styles.module.less
+++ b/src/components/styles.module.less
@@ -55,3 +55,24 @@
       font-size: 2rem;
   }
 }
+
+.socialShareButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #D7DCE5;
+  border-radius: 100%;
+  min-width: 40px;
+  height: 40px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f9fafc;
+  }
+
+  @media (max-width: 1150px) {
+    width: 48px;
+    height: 48px;
+  }
+}
diff --git a/src/templates/blog-post/ShareArticle/index.tsx b/src/templates/blog-post/ShareArticle/index.tsx
index 696b4ccc..222806b8 100644
--- a/src/templates/blog-post/ShareArticle/index.tsx
+++ b/src/templates/blog-post/ShareArticle/index.tsx
@@ -1,18 +1,13 @@
-import CheckIcon from '@mui/icons-material/Check';
-import Tooltip from '@mui/material/Tooltip';
 import * as React from 'react';
-import CopyIcon from '../../../svgs/share-social-icons/copy.svg';
 import EmailOutlinedIcon from '../../../svgs/share-social-icons/email-outlined.svg';
 import FacebookOutlinedIcon from '../../../svgs/share-social-icons/facebook-outlined.svg';
 import LinkedinOutlinedIcon from '../../../svgs/share-social-icons/linkedin-outlined.svg';
 import TwitterXOutlinedIcon from '../../../svgs/share-social-icons/twitter-x-outlined.svg';
-import {
-    Container,
-    CopyButton,
-    FailedCopyInput,
-    SocialButtonsWrapper,
-    SocialLink,
-} from './styles';
+import CopyToClipboardButton from '../../../components/CopyToClipboardButton';
+import { socialShareButton } from '../../../components/styles.module.less';
+import { OutboundLink } from '../../../components/OutboundLink';
+import useWindowExistence from '../../../hooks/useWindowExistence';
+import { Container, SocialButtonsWrapper } from './styles';
 
 type ShareArticleProps = {
     article: {
@@ -22,90 +17,52 @@ type ShareArticleProps = {
 };
 
 const ShareArticle = ({ article: { title, slug } }: ShareArticleProps) => {
-    const [isCopied, setIsCopied] = React.useState(false);
-    const [isCopyFailed, setIsCopyFailed] = React.useState(false);
+    const hasWindow = useWindowExistence();
 
     const shareMessage = `Check out the article "${title}"`;
 
-    const articleUrl = `https://estuary.dev/${slug}`;
+    const articleUrl = hasWindow ? `${window.location.origin}/${slug}` : '';
 
     const getSocialLinkAriaLabel = (platform: string) =>
         `Click to share article on ${platform}`;
 
-    const copyToClipboard = () => {
-        navigator.clipboard.writeText(articleUrl).then(
-            () => {
-                setIsCopied(true);
-                setIsCopyFailed(false);
-                setTimeout(() => setIsCopied(false), 2000);
-            },
-            () => {
-                setIsCopied(false);
-                setIsCopyFailed(false);
-            }
-        );
-    };
-
     return (
         <Container>
             <span>Share this article</span>
             <SocialButtonsWrapper>
-                <Tooltip
-                    title="Copied"
-                    arrow
-                    open={isCopied}
-                    slotProps={{
-                        popper: {
-                            modifiers: [
-                                {
-                                    name: 'offset',
-                                    options: {
-                                        offset: [0, -4],
-                                    },
-                                },
-                            ],
-                        },
-                    }}
-                >
-                    <CopyButton onClick={copyToClipboard} $isCopied={isCopied}>
-                        {isCopied ? (
-                            <CheckIcon fontSize="small" htmlColor="#00A99D" />
-                        ) : (
-                            <CopyIcon />
-                        )}
-                    </CopyButton>
-                </Tooltip>
-                <SocialLink
+                <CopyToClipboardButton contentToCopy={articleUrl} />
+                <OutboundLink
                     target="_blank"
                     aria-label={getSocialLinkAriaLabel('Linkedin')}
                     href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI(articleUrl)}`}
+                    className={socialShareButton}
                 >
                     <LinkedinOutlinedIcon />
-                </SocialLink>
-                <SocialLink
+                </OutboundLink>
+                <OutboundLink
                     target="_blank"
                     aria-label={getSocialLinkAriaLabel('X (Twitter)')}
                     href={`https://twitter.com/intent/tweet?url=${encodeURI(articleUrl)}&text=${encodeURI(`${shareMessage}:`)}`}
+                    className={socialShareButton}
                 >
                     <TwitterXOutlinedIcon />
-                </SocialLink>
-                <SocialLink
+                </OutboundLink>
+                <OutboundLink
                     target="_blank"
                     aria-label={getSocialLinkAriaLabel('Facebook')}
                     href={`https://facebook.com/sharer/sharer.php?u=${encodeURI(articleUrl)}`}
+                    className={socialShareButton}
                 >
                     <FacebookOutlinedIcon />
-                </SocialLink>
-                <SocialLink
+                </OutboundLink>
+                <OutboundLink
                     target="_blank"
                     aria-label={getSocialLinkAriaLabel('email')}
                     href={`mailto:?subject=${encodeURI('Checkout this amazing article!')}&body=${encodeURI(`${`${shareMessage}:`} ${articleUrl}`)}`}
+                    className={socialShareButton}
                 >
                     <EmailOutlinedIcon />
-                </SocialLink>
-                {isCopyFailed ? (
-                    <FailedCopyInput value={articleUrl} variant="filled" />
-                ) : null}
+                </OutboundLink>
             </SocialButtonsWrapper>
         </Container>
     );
diff --git a/src/templates/blog-post/ShareArticle/styles.ts b/src/templates/blog-post/ShareArticle/styles.ts
index 8c94326f..8a6145fc 100644
--- a/src/templates/blog-post/ShareArticle/styles.ts
+++ b/src/templates/blog-post/ShareArticle/styles.ts
@@ -1,6 +1,4 @@
-import { TextField } from '@mui/material';
 import styled from 'styled-components';
-import { OutboundLink } from '../../../components/OutboundLink';
 
 export const Container = styled.div`
     display: flex;
@@ -28,51 +26,3 @@ export const SocialButtonsWrapper = styled.div`
         gap: 20px;
     }
 `;
-
-const baseSocialButtonStyling = `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #D7DCE5;
-  border-radius: 100%;
-  width: 40px;
-  height: 40px;
-  background-color: #FFFFFF;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #f9fafc;
-  }
-
-  @media (max-width: 1150px) {
-    width: 48px;
-    height: 48px;
-  }
-`;
-
-export const CopyButton = styled.button<{ $isCopied: boolean }>`
-    ${baseSocialButtonStyling}
-
-    transition: background-color, border 300ms ease-in-out;
-
-    background-color: ${(props) => (props.$isCopied ? '#00A99D30' : '#FFFFFF')};
-    border-color: ${(props) => (props.$isCopied ? '#00A99D' : '#D7DCE5')};
-
-    &:hover {
-        background-color: ${(props) =>
-            props.$isCopied ? '#00A99D30' : '#f9fafc'};
-        border-color: ${(props) => (props.$isCopied ? '#00A99D' : '#D7DCE5')};
-    }
-`;
-
-export const SocialLink = styled(OutboundLink)`
-    ${baseSocialButtonStyling}
-`;
-
-export const FailedCopyInput = styled(TextField)`
-    width: 100%;
-
-    .MuiInputBase-input {
-        padding: 12px;
-    }
-`;
diff --git a/src/templates/blog-post/index.tsx b/src/templates/blog-post/index.tsx
index cf49bd7d..07b2df00 100644
--- a/src/templates/blog-post/index.tsx
+++ b/src/templates/blog-post/index.tsx
@@ -13,7 +13,6 @@ import StraightLinesBackground from '../../components/BackgroundImages/StraightL
 import { PopularArticles } from '../../components/BlogPopularArticles';
 import BlogPostPopupModal from '../../components/BlogPostPopupModal';
 import { ProcessedPost } from '../../components/BlogPostProcessor';
-import { RenderToc } from '../../components/BlogPostToc';
 import Breadcrumbs from '../../components/Breadcrumbs';
 import {
     OutboundLinkFilled,
@@ -29,6 +28,7 @@ import { dashboardRegisterUrl, getAuthorPathBySlug } from '../../../shared';
 import Avatar from '../../components/Avatar';
 import SocialLinks from '../../components/SocialLinks';
 import BlogBanner from '../../components/BlogBanner';
+import ArticleSidebar from '../../components/ArticleSidebar';
 import ShareArticle from './ShareArticle';
 import {
     blogPost,
@@ -47,10 +47,6 @@ import {
     mainContent,
     background,
     bigBuildPipelineBannerContainer,
-    postSidebar,
-    shareArticleDesktop,
-    sidebarRight,
-    banner,
     popularArticlesWrapper,
     bigBuildPipelineBannerSection,
     bigBuildPipelineBannerContainerLayout,
@@ -67,7 +63,6 @@ import {
     authorNameAndRole,
     authorName,
     authorRole,
-    tableOfContentsWrapper,
 } from './styles.module.less';
 
 dayjs.extend(reltime);
@@ -198,38 +193,13 @@ const BlogPostTemplate = ({ data: { post } }) => {
                                     }}
                                 />
                             </div>
-
-                            <div className={postSidebar}>
-                                <div className={shareArticleDesktop}>
-                                    <ShareArticle
-                                        article={{
-                                            title: post.title,
-                                            slug: post.slug,
-                                        }}
-                                    />
-                                </div>
-                                {tableOfContents.length > 0 ? (
-                                    <div className={tableOfContentsWrapper}>
-                                        <RenderToc items={tableOfContents} />
-                                    </div>
-                                ) : null}
-                                <div className={sidebarRight}>
-                                    <div className={banner}>
-                                        <span>
-                                            Build a <span>Pipeline</span>
-                                        </span>
-                                    </div>
-                                    <h3>
-                                        Start streaming your data{' '}
-                                        <span>for free</span>
-                                    </h3>
-                                    <OutboundLinkFilled
-                                        href={dashboardRegisterUrl}
-                                    >
-                                        Build a Pipeline
-                                    </OutboundLinkFilled>
-                                </div>
-                            </div>
+                            <ArticleSidebar
+                                article={{
+                                    title: post.title,
+                                    slug: post.slug,
+                                }}
+                                tableOfContents={tableOfContents}
+                            />
                         </div>
                     </section>
                 ) : null}
diff --git a/src/templates/blog-post/styles.module.less b/src/templates/blog-post/styles.module.less
index b828d86f..709c57d9 100644
--- a/src/templates/blog-post/styles.module.less
+++ b/src/templates/blog-post/styles.module.less
@@ -366,122 +366,6 @@
   }
 }
 
-.postSidebar {
-  display: flex;
-  flex-direction: column;
-  max-width: 256px;
-  width: 100%;
-
-  @media (max-width: 1150px) {
-    max-width: 100%;
-  }
-
-  @media (min-width: 1150px) {
-    position: sticky;
-    top: 140px;
-  }
-
-  @media (max-width: 767px) {
-    padding-right: 0;
-    position: relative !important;
-  }
-}
-
-.shareArticleDesktop {
-  display: flex;
-
-  @media (max-width: 1150px) {
-    display: none;
-  }
-}
-
-.tableOfContentsWrapper {
-  overflow: auto;
-  max-height: 45vh;
-  margin-top: 24px;
-
-  @media (max-height: 1128px) {
-    max-height: 36vh;
-  }
-
-  @media (max-height: 1000px) {
-    max-height: 30vh;
-  }
-
-  @media (max-height: 900px) {
-    max-height: 25vh;
-  }
-
-  @media (max-height: 815px) {
-    max-height: 20vh;
-  }
-
-  @media (max-height: 770px) {
-    display: none;
-  }
-}
-
-.sidebarRight {
-  padding: 16px;
-  border-radius: 24px;
-  border: 1px solid #5072eb33;
-  background: #f9fafc;
-  text-align: center;
-  margin-top: 18px;
-
-  @media (max-width: 1150px) {
-    display: none;
-  }
-
-  &.mobile-only {
-    @media (max-width: 767px) {
-      display: block;
-    }
-  }
-
-  h3 {
-    color: #04192b;
-    text-align: center;
-    font-size: 1.25rem;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24.2px;
-    margin: 20px 0;
-    padding: 0 8px;
-
-    span {
-      color: #5072eb;
-    }
-  }
-}
-
-.banner {
-  background: #04192b url('../../images/pattern-sidebar-cta.svg') no-repeat bottom left / contain;
-  text-align: center;
-  border-radius: 16px;
-  padding-top: 16px;
-
-  span {
-    text-transform: uppercase;
-    color: #ffffff;
-    font-size: 1.5rem;
-    font-weight: 700;
-    line-height: 36px;
-
-    span {
-      color: #5072eb;
-    }
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    width: 224px;
-    height: 128px;
-    background: url('../../images/build-pipeline.svg') no-repeat bottom / contain;
-  }
-}
-
 .popularArticlesWrapper {
   .sectionTopBottomPadding;
   .globalMaxWidth;
@@ -614,4 +498,4 @@
   @media (max-width: 768px) {
     display: none;
   }
-}
+}
\ No newline at end of file
diff --git a/src/templates/etl-tools/index.tsx b/src/templates/etl-tools/index.tsx
index ccf63918..98542a2e 100644
--- a/src/templates/etl-tools/index.tsx
+++ b/src/templates/etl-tools/index.tsx
@@ -44,7 +44,7 @@ const EtlTools = ({
 export const Head = ({ data: { xVendor, yVendor } }) => {
     return (
         <Seo
-            title="Data Integration Tools Compared"
+            title={`${xVendor.name} vs ${yVendor.name}: Data Integration Tools Compared`}
             description={`Compare ${xVendor.name} vs ${yVendor.name}. Discover their key differences, ETL/ELT features, and pricing to choose the right data integration platform.`}
         />
     );