diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index bb8d793a0f..7698896e7b 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -5,6 +5,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # [3.0.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.0.0-rc.0...@vibe/core@3.0.0) (2024-11-24)
 
+We're excited to announce the release of Vibe v3! 🎉
+
+See the complete changelog of v3 [here](https://github.com/mondaycom/vibe/blob/master/packages/core/docs/vibe-3-changelog.md). To migrate, follow the [migration guide](https://vibe.monday.com/?path=/docs/migration-guide--docs).
 
 ### Bug Fixes
 
diff --git a/packages/storybook-blocks/src/components/anchor/anchor-icon.tsx b/packages/storybook-blocks/src/components/anchor/anchor-icon.tsx
new file mode 100644
index 0000000000..1b8b47776d
--- /dev/null
+++ b/packages/storybook-blocks/src/components/anchor/anchor-icon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function AnchorIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.8501 4.59961C6.26431 4.59961 6.6001 4.9354 6.6001 5.34961C6.6001 5.76382 6.26431 6.09961 5.8501 6.09961H5.4501C4.08319 6.09961 2.9751 7.20771 2.9751 8.57461C2.9751 9.94151 4.08319 11.0496 5.4501 11.0496H5.8501C6.26431 11.0496 6.6001 11.3854 6.6001 11.7996C6.6001 12.2138 6.26431 12.5496 5.8501 12.5496H5.4501C3.25477 12.5496 1.4751 10.7699 1.4751 8.57461C1.4751 6.37928 3.25477 4.59961 5.4501 4.59961H5.8501ZM9.4251 5.34961C9.4251 4.9354 9.76088 4.59961 10.1751 4.59961H10.5501C12.7454 4.59961 14.5251 6.37928 14.5251 8.57461C14.5251 10.7699 12.7454 12.5496 10.5501 12.5496H10.1751C9.76088 12.5496 9.4251 12.2138 9.4251 11.7996C9.4251 11.3854 9.76088 11.0496 10.1751 11.0496H10.5501C11.917 11.0496 13.0251 9.94151 13.0251 8.57461C13.0251 7.20771 11.917 6.09961 10.5501 6.09961H10.1751C9.76088 6.09961 9.4251 5.76382 9.4251 5.34961ZM4.5376 8.56289C4.5376 8.14868 4.87338 7.81289 5.2876 7.81289H10.6893C11.1035 7.81289 11.4393 8.14868 11.4393 8.56289C11.4393 8.9771 11.1035 9.31289 10.6893 9.31289H5.2876C4.87338 9.31289 4.5376 8.9771 4.5376 8.56289Z"
+        fill="#BFBFBF"
+      />
+    </svg>
+  );
+}
diff --git a/packages/storybook-blocks/src/components/anchor/anchor.module.scss b/packages/storybook-blocks/src/components/anchor/anchor.module.scss
new file mode 100644
index 0000000000..2fb2c4a84b
--- /dev/null
+++ b/packages/storybook-blocks/src/components/anchor/anchor.module.scss
@@ -0,0 +1,3 @@
+.anchor {
+  transition: opacity 0.1s ease-in-out;
+}
diff --git a/packages/storybook-blocks/src/components/anchor/anchor.tsx b/packages/storybook-blocks/src/components/anchor/anchor.tsx
new file mode 100644
index 0000000000..7c684ca0d9
--- /dev/null
+++ b/packages/storybook-blocks/src/components/anchor/anchor.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './anchor.module.scss';
+import AnchorIcon from './anchor-icon';
+import cx from 'classnames';
+
+interface AnchorProps {
+  id: string;
+  className?: string;
+}
+
+export default function Anchor({ id, className }: AnchorProps) {
+  const handleClick = () => {
+    if (window.parent) {
+      // Update the parent window hash to match the clicked anchor
+      window.parent.location.hash = `#${id}`;
+    }
+  };
+
+  return (
+    <a onClick={handleClick} href={`#${id}`} className={cx(styles.anchor, className)} target="_self">
+      <AnchorIcon />
+    </a>
+  );
+}
diff --git a/packages/storybook-blocks/src/components/section-name/section-name.module.scss b/packages/storybook-blocks/src/components/section-name/section-name.module.scss
index 772b3df253..caa92cc285 100644
--- a/packages/storybook-blocks/src/components/section-name/section-name.module.scss
+++ b/packages/storybook-blocks/src/components/section-name/section-name.module.scss
@@ -1,4 +1,4 @@
-@import "../../styles/mixins/typography";
+@import '../../styles/mixins/typography';
 
 .sectionName {
   margin-top: var(--sb-spacing-between-sections);
@@ -10,10 +10,19 @@
   line-height: 33px;
   letter-spacing: -1px;
   text-align: left;
-  display: grid;
+
+  .anchor {
+    margin-left: var(--sb-spacing-small);
+    opacity: 0;
+  }
+
+  &:hover .anchor {
+    opacity: 1;
+  }
 
   &:after {
-    content: "";
+    content: '';
+    display: block;
     margin-top: var(--sb-spacing-small);
     background: var(--sb-primary-text-color);
     height: 2px;
diff --git a/packages/storybook-blocks/src/components/section-name/section-name.tsx b/packages/storybook-blocks/src/components/section-name/section-name.tsx
index 44972d96d9..c1c25d94e7 100644
--- a/packages/storybook-blocks/src/components/section-name/section-name.tsx
+++ b/packages/storybook-blocks/src/components/section-name/section-name.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import cx from 'classnames';
 import styles from './section-name.module.scss';
+import Anchor from '../anchor/anchor';
 
 interface SectionNameProps extends React.HTMLAttributes<HTMLHeadingElement> {
   className?: string;
@@ -16,6 +17,7 @@ const SectionName: React.FC<SectionNameProps> = ({ className, children, ...props
   return (
     <h2 id={id} className={cx(styles.sectionName, className)} {...props}>
       {children}
+      <Anchor id={id} className={styles.anchor} />
     </h2>
   );
 };
diff --git a/packages/storybook-blocks/src/components/title/title.module.scss b/packages/storybook-blocks/src/components/title/title.module.scss
index e02b0562a5..65858c7aca 100644
--- a/packages/storybook-blocks/src/components/title/title.module.scss
+++ b/packages/storybook-blocks/src/components/title/title.module.scss
@@ -1,5 +1,14 @@
-@import "../../styles/mixins/typography";
+@import '../../styles/mixins/typography';
 
 .title {
   @include sb-title-appearance;
+
+  .anchor {
+    margin-left: var(--sb-spacing-small);
+    opacity: 0;
+  }
+
+  &:hover .anchor {
+    opacity: 1;
+  }
 }
diff --git a/packages/storybook-blocks/src/components/title/title.tsx b/packages/storybook-blocks/src/components/title/title.tsx
index 589d73ecba..c562e2ae85 100644
--- a/packages/storybook-blocks/src/components/title/title.tsx
+++ b/packages/storybook-blocks/src/components/title/title.tsx
@@ -1,13 +1,25 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import cx from 'classnames';
 import styles from './title.module.scss';
+import Anchor from '../anchor/anchor';
 
 interface TitleProps extends React.HTMLProps<HTMLHeadingElement> {
+  children: string;
   className?: string;
 }
 
-const Title: React.FC<TitleProps> = ({ className, ...props }) => {
-  return <h3 className={cx(styles.title, className)} {...props} />;
+const Title: React.FC<TitleProps> = ({ className, children, ...props }) => {
+  const id = useMemo(
+    () => children.toLowerCase().replaceAll('’', '').replaceAll("'", '').split(' ').join('-'),
+    [children],
+  );
+
+  return (
+    <h3 className={cx(styles.title, className)} {...props}>
+      {children}
+      <Anchor id={id} className={styles.anchor} />
+    </h3>
+  );
 };
 
 export default Title;