diff --git a/config.json b/config.json
index 269c2992..0188631f 100644
--- a/config.json
+++ b/config.json
@@ -80,7 +80,8 @@
     },
     {
       "name": "18.x",
-      "branch": "branch/v18",
+      "branch": "aatuvai/guided-steps",
+      "repo_path": "aatuvai/teleport",
       "isDefault": true
     },
     {
diff --git a/src/components/GuidedSteps/CodeBlock.tsx b/src/components/GuidedSteps/CodeBlock.tsx
new file mode 100644
index 00000000..140289b8
--- /dev/null
+++ b/src/components/GuidedSteps/CodeBlock.tsx
@@ -0,0 +1,55 @@
+import {
+  useImperativeHandle,
+  useRef,
+  forwardRef,
+  useContext,
+  useState,
+} from "react";
+import cn from "classnames";
+import styles from "./File.module.css";
+import { CodeBlockProps, CodeBlockHandle } from "./types";
+import { GuidedStepsContext } from "./context";
+
+const CodeBlock = forwardRef<
+  CodeBlockHandle,
+  Pick<CodeBlockProps, "children" | "fileName" | "copyButtonActive">
+>(({ fileName, copyButtonActive, children }, ref) => {
+  const { activeFileName, setActiveFileName } = useContext(GuidedStepsContext);
+  const stepRef = useRef<HTMLSpanElement | null>(null);
+
+  const [activeLines, setActiveLines] = useState<boolean>(false);
+
+  useImperativeHandle(
+    ref,
+    (): CodeBlockHandle => ({
+      activate: (): void => {
+        if (activeFileName !== fileName) setActiveFileName(fileName);
+        setActiveLines(true);
+        stepRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "start",
+          container: "nearest",
+        });
+      },
+      deactivate: (): void => setActiveLines(false),
+      innerText: stepRef.current?.innerText || "",
+    })
+  );
+
+  return (
+    <span
+      className={cn(styles.codeBlock, {
+        [styles.activeLines]: activeLines,
+        [styles.copyButtonActive]: copyButtonActive,
+      })}
+      ref={stepRef}
+    >
+      {children}
+    </span>
+  );
+});
+
+CodeBlock.displayName = "CodeBlock";
+
+export default CodeBlock;
diff --git a/src/components/GuidedSteps/File.module.css b/src/components/GuidedSteps/File.module.css
new file mode 100644
index 00000000..36ceb519
--- /dev/null
+++ b/src/components/GuidedSteps/File.module.css
@@ -0,0 +1,172 @@
+.files {
+  position: relative;
+  height: 110%;
+  border-bottom-left-radius: var(--m-1);
+  border-bottom-right-radius: var(--m-1);
+
+  &.copyButtonActive {
+    background-color: var(--color-code);
+  }
+}
+
+.file {
+  position: absolute;
+  height: 0;
+  opacity: 0;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+
+  &.active {
+    opacity: 1;
+    height: auto;
+    position: relative;
+    pointer-events: auto;
+  }
+
+  :global(pre) {
+    border-radius: 0;
+    transition: all 0.2s ease-in;
+  }
+  & > div {
+    box-shadow: unset;
+  }
+}
+
+.fileTabs {
+  position: sticky;
+  top: 0;
+  display: flex;
+  padding: var(--m-2);
+  border-bottom: 1.5px solid var(--color-tonal-neutral-1-white);
+  background-color: #0e1435;
+  border-top-left-radius: var(--m-1);
+  border-top-right-radius: var(--m-1);
+  z-index: 1;
+  gap: var(--m-0-5);
+  margin-bottom: 0;
+  min-height: 65px;
+}
+
+.fileTab {
+  display: flex;
+  align-items: center;
+  padding: var(--m-0-5) var(--m-2);
+  gap: 2px;
+  border-radius: 36px;
+  color: var(--color-white);
+  font-size: var(--fs-text-md);
+  line-height: 1.42857;
+  margin-top: 0 !important;
+  transition: all 0.2s ease-in-out;
+
+  &.active {
+    background-color: var(--color-interactive-primary);
+    color: var(--color-black);
+    svg {
+      filter: brightness(0);
+    }
+    &:hover {
+      background-color: var(--color-interactive-primary);
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color-tonal-primary-2);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    filter: brightness(0) invert(1);
+  }
+
+  span {
+    line-height: 1;
+  }
+}
+
+.downloadButton {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--m-0-5);
+  background-color: var(--color-tonal-neutral-0-white);
+  border: none;
+  color: var(--color-foreground-slightly-muted-white);
+  font-size: var(--fs-text-sm);
+  cursor: pointer;
+  font-weight: var(--fw-medium);
+  line-height: 1rem;
+  padding: var(--m-1) var(--m-2);
+  border-radius: var(--m-0-5);
+  transition: all 0.2s ease-in-out;
+
+  svg {
+    filter: brightness(0) invert(1);
+    opacity: 0.72;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &:hover {
+    background-color: var(--color-tonal-neutral-1-white);
+    color: var(--color-white);
+
+    svg {
+      opacity: 1;
+    }
+  }
+}
+
+.codeBlock {
+  position: relative;
+  pointer-events: none;
+  scroll-margin-top: 72px;
+  :global(pre) {
+    padding: 0 0 0 var(--m-2);
+    opacity: 0.52;
+    background-color: transparent !important;
+    transition: opacity 0.2s ease-in;
+
+    code {
+      color: var(--color-data-purple-tertiary);
+      :global(.hljs-attr) {
+        color: var(--color-data-purple-tertiary);
+      }
+      :global(.hljs-string),
+      :global(.hljs-built_in) {
+        color: var(--color-data-caribbean-tertiary);
+      }
+    }
+  }
+
+  &:first-of-type {
+    & > div {
+      padding-top: var(--m-2);
+    }
+  }
+
+  &:last-of-type {
+    & > div {
+      padding-bottom: var(--m-2);
+    }
+  }
+
+  & > div {
+    background-color: transparent !important;
+    box-shadow: unset !important;
+  }
+
+  &.activeLines,
+  &.copyButtonActive {
+    :global(pre) {
+      background-color: var(--color-code) !important;
+      opacity: 1;
+    }
+
+    & > div {
+      background-color: var(--color-code) !important;
+    }
+  }
+}
diff --git a/src/components/GuidedSteps/File.tsx b/src/components/GuidedSteps/File.tsx
new file mode 100644
index 00000000..d264757c
--- /dev/null
+++ b/src/components/GuidedSteps/File.tsx
@@ -0,0 +1,109 @@
+import { useContext } from "react";
+import cn from "classnames";
+import { GuidedStepsContext } from "./context";
+import styles from "./File.module.css";
+import { extractCodeBlocksFromFile } from "./utils";
+import CodeBlock from "./CodeBlock";
+import Icon from "../Icon";
+
+export const FileTabs: React.FC = () => {
+  const {
+    files,
+    fileRefs,
+    activeFileName,
+    fileNameHasType,
+    setActiveFileName,
+  } = useContext(GuidedStepsContext);
+
+  return (
+    <ul className={styles.fileTabs}>
+      {files.map(({ name, icon }) => (
+        <li
+          key={name}
+          className={cn(styles.fileTab, {
+            [styles.active]: name === activeFileName,
+          })}
+          role="button"
+          onClick={() => {
+            setActiveFileName(name);
+          }}
+        >
+          {icon && <Icon name={icon} className={styles.fileTabIcon} />}
+          <span>{name}</span>
+        </li>
+      ))}
+      {fileNameHasType && (
+        <button
+          className={styles.downloadButton}
+          onClick={(e) => {
+            e.stopPropagation();
+            const activeFileContent = fileRefs.current.get(activeFileName);
+            if (activeFileContent) {
+              // Create a blob with the file content
+              const blob = new Blob([activeFileContent.innerText], {
+                type:
+                  activeFileName?.split(".").pop() === "yaml"
+                    ? "application/yaml"
+                    : "text/plain",
+              });
+
+              // Create a download link and trigger it
+              const downloadLink = document.createElement("a");
+              downloadLink.href = URL.createObjectURL(blob);
+              downloadLink.download = activeFileName;
+              document.body.appendChild(downloadLink);
+              downloadLink.click();
+              document.body.removeChild(downloadLink);
+
+              // Clean up the URL object
+              URL.revokeObjectURL(downloadLink.href);
+            }
+          }}
+        >
+          <Icon name="download2" size="sm" />
+          Download
+        </button>
+      )}
+    </ul>
+  );
+};
+
+const FileComponent: React.FC = () => {
+  const {
+    files,
+    activeFileName,
+    showCopyButton,
+    fileNameHasType,
+    setCodeBlockRef,
+    setFileRef,
+  } = useContext(GuidedStepsContext);
+
+  return (
+    <div className={styles.files}>
+      {files.map((file) => (
+        <div
+          key={file.name}
+          className={cn(styles.file, {
+            [styles.active]: activeFileName === file.name,
+          })}
+          ref={(el) => setFileRef(file.name, el)}
+        >
+          {extractCodeBlocksFromFile(file).map(({ stepId, children }, i) => (
+            <CodeBlock
+              key={i}
+              ref={(el) => setCodeBlockRef(stepId, el)}
+              copyButtonActive={showCopyButton && fileNameHasType}
+              fileName={file.name}
+            >
+              {children}
+            </CodeBlock>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+FileComponent.displayName = "File";
+
+export default FileComponent;
diff --git a/src/components/GuidedSteps/GuidedSteps.module.css b/src/components/GuidedSteps/GuidedSteps.module.css
new file mode 100644
index 00000000..8ac17c80
--- /dev/null
+++ b/src/components/GuidedSteps/GuidedSteps.module.css
@@ -0,0 +1,62 @@
+.guidedSteps {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--m-4);
+  margin-bottom: var(--ifm-leading);
+}
+
+.instructions {
+  position: relative;
+  height: max-content;
+  padding-bottom: 150%;
+  display: grid;
+  gap: var(--m-1);
+}
+
+.codePanel {
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + var(--m-4));
+  background-color: #060918;
+  max-height: calc(100dvh - var(--ifm-navbar-height) - var(--m-8));
+  overflow-y: scroll;
+  height: 100%;
+  @media (--md-scr) {
+    border-radius: var(--r-default);
+  }
+
+  &.copyButtonActive {
+    background-color: var(--color-code);
+  }
+}
+
+.copyButton {
+  position: absolute;
+  bottom: 53px;
+  left: 50%;
+  max-width: 136px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--m-0-5);
+  white-space: nowrap;
+  transform: translateX(-50%);
+  padding: var(--m-1) var(--m-2);
+  background-color: var(--color-white);
+  border: 1.5px solid transparent;
+  border-radius: 36px;
+  cursor: pointer;
+  font-size: var(--fs-text-lg);
+  transition:
+    box-shadow 0.1s ease-in-out,
+    border-color 0.1s ease-in-out;
+  span {
+    line-height: 1.5;
+    font-weight: 300;
+  }
+
+  &:hover {
+    box-shadow: 0 0 25px 0 rgba(81, 47, 201, 0.5);
+    border-color: var(--color-interactive-primary);
+  }
+}
diff --git a/src/components/GuidedSteps/GuidedSteps.tsx b/src/components/GuidedSteps/GuidedSteps.tsx
new file mode 100644
index 00000000..1286f273
--- /dev/null
+++ b/src/components/GuidedSteps/GuidedSteps.tsx
@@ -0,0 +1,71 @@
+import { useContext, useState } from "react";
+import cn from "classnames";
+import { sanitizeLeftColumnChildren } from "./utils";
+import styles from "./GuidedSteps.module.css";
+import GuidedStepsContextProvider, { GuidedStepsContext } from "./context";
+import { GuidedStepsProps } from "./types";
+import File, { FileTabs } from "./File";
+import Icon from "../Icon";
+import { useGuidedSteps } from "./hooks";
+
+const GuidedStepsComponent: React.FC<GuidedStepsProps> = (props) => {
+  const {
+    activeStepId,
+    activeFileName,
+    codeBlockRefs,
+    fileRefs,
+    showCopyButton,
+    fileNameHasType,
+    setShowCopyButton,
+  } = useContext(GuidedStepsContext);
+  const [copiedIndicator, setCopiedIndicator] = useState<boolean>(false);
+
+  useGuidedSteps();
+
+  const handleCopyCode = () => {
+    const noFileType = activeFileName?.split(".").length === 1;
+    const codeText = noFileType
+      ? codeBlockRefs.current.get(activeStepId).innerText
+      : fileRefs.current.get(activeFileName)?.innerText;
+    navigator.clipboard.writeText(codeText);
+    setCopiedIndicator(true);
+    setTimeout(() => {
+      setCopiedIndicator(false);
+    }, 1500);
+  };
+
+  return (
+    <div className={styles.guidedSteps}>
+      <div className={styles.instructions}>
+        {sanitizeLeftColumnChildren(props.children)}
+      </div>
+
+      <div
+        className={cn(styles.codePanel, {
+          [styles.copyButtonActive]: showCopyButton && fileNameHasType,
+        })}
+        onMouseEnter={() => setShowCopyButton(true)}
+        onMouseLeave={() => setShowCopyButton(false)}
+      >
+        <FileTabs />
+        <File />
+        {showCopyButton && (
+          <button className={styles.copyButton} onClick={handleCopyCode}>
+            <Icon name={copiedIndicator ? "check2" : "copy2"} size="sm" />
+            <span>{copiedIndicator ? "Copied!" : "Copy Code"}</span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const GuidedSteps: React.FC<GuidedStepsProps> = (props) => {
+  return (
+    <GuidedStepsContextProvider>
+      <GuidedStepsComponent {...props} />
+    </GuidedStepsContextProvider>
+  );
+};
+
+export default GuidedSteps;
diff --git a/src/components/GuidedSteps/Step.module.css b/src/components/GuidedSteps/Step.module.css
new file mode 100644
index 00000000..8b6e7180
--- /dev/null
+++ b/src/components/GuidedSteps/Step.module.css
@@ -0,0 +1,84 @@
+.step {
+  padding: var(--m-1-5) var(--m-7) var(--m-1-5) var(--m-2);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #f1f2f4;
+  border-radius: var(--m-1);
+  scroll-margin-top: calc(var(--ifm-navbar-height) + var(--m-1));
+
+  &::after {
+    content: "";
+    opacity: 0;
+    display: block;
+    position: absolute;
+    right: var(--m-3);
+    height: var(--m-2);
+    width: var(--m-2);
+    margin-top: var(--m-3);
+    margin-bottom: var(--m-3);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='11' viewBox='0 0 12 11' fill='none'%3E%3Cpath d='M7.35355 0.646447C7.15829 0.451184 6.84171 0.451184 6.64645 0.646447C6.45118 0.841709 6.45118 1.15829 6.64645 1.35355L10.2929 5H0.5C0.223858 5 0 5.22386 0 5.5C0 5.77614 0.223858 6 0.5 6H10.2929L6.64645 9.64645C6.45118 9.84171 6.45118 10.1583 6.64645 10.3536C6.84171 10.5488 7.15829 10.5488 7.35355 10.3536L11.8536 5.85355C11.9512 5.75592 12 5.62796 12 5.5C12 5.43221 11.9865 5.36756 11.9621 5.30861C11.9377 5.24964 11.9015 5.19439 11.8536 5.14645L7.35355 0.646447Z' fill='%23512FC9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &.active {
+    background-color: var(--color-tonal-primary-0);
+    &::after {
+      opacity: 1;
+    }
+
+    &:hover {
+      background-color: var(--color-tonal-primary-0);
+    }
+  }
+
+  &:hover {
+    background-color: var(--color-tonal-neutral-0);
+    cursor: pointer;
+  }
+}
+
+.stepSection {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-weight: var(--fw-bold);
+  font-size: var(--fs-text-lg);
+  margin-block: var(--m-2);
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+
+  .index {
+    padding: 4px 10px;
+    background-color: var(--color-tonal-neutral-0);
+    border-radius: 50%;
+    width: var(--m-4);
+    line-height: 1.625;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--m-4);
+  }
+}
+
+.fileLabel {
+  font-size: var(--fs-text-sm);
+  color: var(--color-foreground-slightly-muted);
+  display: flex;
+  align-items: center;
+  gap: var(--m-0-5);
+  svg {
+    width: 16px;
+    height: 16px;
+    filter: brightness(0);
+    opacity: 0.72;
+  }
+  span {
+    line-height: 1;
+  }
+}
diff --git a/src/components/GuidedSteps/Step.tsx b/src/components/GuidedSteps/Step.tsx
new file mode 100644
index 00000000..d64fed8d
--- /dev/null
+++ b/src/components/GuidedSteps/Step.tsx
@@ -0,0 +1,64 @@
+import { useCallback, useContext, useEffect, useState } from "react";
+import { GuidedStepsContext } from "./context";
+import { CodeBlockHandle, FileProps, StepProps } from "./types";
+import styles from "./Step.module.css";
+import cn from "classnames";
+import Icon from "../Icon";
+
+const Step: React.FC<StepProps> = ({ id, index, children }) => {
+  const { files, codeBlockRefs, stepRefs, activeStepId, setActiveStepId } =
+    useContext(GuidedStepsContext);
+
+  const [relatedCodeBlock, setRelatedCodeBlock] =
+    useState<CodeBlockHandle | null>(null);
+
+  const relatedFile: FileProps =
+    files.find((file) => file.stepIds?.includes(id)) || ({} as FileProps);
+
+  useEffect(() => {
+    if (codeBlockRefs.current?.has(id)) {
+      const relatedCodeBlock = codeBlockRefs.current.get(id);
+      setRelatedCodeBlock(relatedCodeBlock);
+    }
+  }, [codeBlockRefs]);
+
+  const activateStep = useCallback(() => {
+    setActiveStepId?.(id);
+    const stepRef = stepRefs.current[index];
+    const stepRefRect = stepRef?.getBoundingClientRect();
+    const navbarHeight =
+      parseInt(
+        getComputedStyle(document.documentElement).getPropertyValue(
+          "--ifm-navbar-height"
+        )
+      ) || 0;
+    if (
+      stepRefRect &&
+      (stepRefRect.top < navbarHeight ||
+        stepRefRect.bottom > window.innerHeight - navbarHeight)
+    )
+      stepRef?.scrollIntoView({ behavior: "smooth", block: "start" });
+    codeBlockRefs.current.forEach((step) => step.deactivate());
+    if (activeStepId !== id) relatedCodeBlock?.activate();
+  }, [codeBlockRefs, relatedCodeBlock]);
+
+  return (
+    <div
+      className={cn(styles.step, { [styles.active]: activeStepId === id })}
+      role="button"
+      ref={(el) => (stepRefs.current[index] = el)}
+      onClick={activateStep}
+      id={id}
+    >
+      <div>{children}</div>
+      <div className={styles.fileLabel}>
+        <Icon name={relatedFile.icon || "file"} className={styles.fileIcon} />
+        <span>{relatedFile.name}</span>
+      </div>
+    </div>
+  );
+};
+
+Step.displayName = "Step";
+
+export default Step;
diff --git a/src/components/GuidedSteps/StepSection.tsx b/src/components/GuidedSteps/StepSection.tsx
new file mode 100644
index 00000000..6aa4d6a9
--- /dev/null
+++ b/src/components/GuidedSteps/StepSection.tsx
@@ -0,0 +1,15 @@
+import styles from "./Step.module.css";
+
+const StepSection: React.FC<{ index?: number; children: React.ReactNode }> = ({
+  index,
+  children,
+}) => (
+  <div className={styles.stepSection}>
+    <div className={styles.index}>{index}</div>
+    {children}
+  </div>
+);
+
+StepSection.displayName = "StepSection";
+
+export default StepSection;
diff --git a/src/components/GuidedSteps/context.tsx b/src/components/GuidedSteps/context.tsx
new file mode 100644
index 00000000..190a68f6
--- /dev/null
+++ b/src/components/GuidedSteps/context.tsx
@@ -0,0 +1,110 @@
+import {
+  createContext,
+  useState,
+  useMemo,
+  useCallback,
+  ReactElement,
+  useEffect,
+  useRef,
+  MutableRefObject,
+} from "react";
+import { useGuidedStepsData } from "./hooks";
+import { StepProps as Step, FileProps as File, CodeBlockHandle } from "./types";
+
+interface GuidedStepsContextValue {
+  steps: Step[];
+  files: File[];
+  activeStepId: string | null;
+  activeFileName?: string;
+  codeBlockRefs: MutableRefObject<Map<string, CodeBlockHandle>>;
+  stepRefs: MutableRefObject<HTMLElement[]>;
+  fileRefs: MutableRefObject<Map<string, HTMLDivElement | null>>;
+  showCopyButton: boolean;
+  fileNameHasType: boolean;
+  setShowCopyButton: (show: boolean) => void;
+  setActiveStepId: (id: string | null) => void;
+  setActiveFileName: (name: string | null) => void;
+  setCodeBlockRef: (stepId: string, ref: any) => void;
+  setFileRef: (fileName: string, ref: HTMLDivElement | null) => void;
+}
+
+const GuidedStepsContext = createContext<GuidedStepsContextValue>(null);
+
+const GuidedStepsProvider: React.FC<{ children: ReactElement }> = ({
+  children,
+}) => {
+  const { steps, files } = useGuidedStepsData({
+    children: children.props.children,
+  });
+  const [activeStepId, setActiveStepId] = useState<string | null>(null);
+  const [activeFileName, setActiveFileName] = useState<string | null>(null);
+  const [showCopyButton, setShowCopyButton] = useState<boolean>(false);
+  const [fileNameHasType, setFileNameHasType] = useState<boolean>(false);
+
+  const codeBlockRefs = useRef<Map<string, CodeBlockHandle>>(new Map());
+  const stepRefs = useRef<HTMLElement[]>([]);
+  const fileRefs = useRef<Map<string, HTMLDivElement | null>>(new Map());
+
+  const setCodeBlockRef = useCallback((stepId: string, ref: any) => {
+    codeBlockRefs.current.set(stepId, ref);
+  }, []);
+
+  const setFileRef = useCallback(
+    (fileName: string, ref: HTMLDivElement | null) => {
+      fileRefs.current.set(fileName, ref);
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (files.length > 0 && !activeFileName) {
+      setActiveFileName(files[0].name);
+    }
+  }, [files]);
+
+  useEffect(() => {
+    if (activeFileName?.split(".").length > 1) {
+      setFileNameHasType(true);
+    } else {
+      setFileNameHasType(false);
+    }
+  }, [activeFileName]);
+
+  const value = useMemo<GuidedStepsContextValue>(
+    () => ({
+      steps,
+      files,
+      activeStepId,
+      activeFileName,
+      codeBlockRefs,
+      stepRefs,
+      fileRefs,
+      showCopyButton,
+      fileNameHasType,
+      setFileNameHasType,
+      setShowCopyButton,
+      setActiveStepId,
+      setActiveFileName,
+      setCodeBlockRef,
+      setFileRef,
+    }),
+    [
+      steps,
+      files,
+      activeStepId,
+      activeFileName,
+      showCopyButton,
+      codeBlockRefs,
+      fileNameHasType,
+    ]
+  );
+
+  return (
+    <GuidedStepsContext.Provider value={value}>
+      {children}
+    </GuidedStepsContext.Provider>
+  );
+};
+
+export default GuidedStepsProvider;
+export { GuidedStepsContext };
diff --git a/src/components/GuidedSteps/hooks.tsx b/src/components/GuidedSteps/hooks.tsx
new file mode 100644
index 00000000..8a144ae2
--- /dev/null
+++ b/src/components/GuidedSteps/hooks.tsx
@@ -0,0 +1,137 @@
+import {
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { GuidedStepsProps } from "./types";
+import { extractCodeBlocksFromFile, extractFiles, extractSteps } from "./utils";
+import { GuidedStepsContext } from "./context";
+
+// Custom hook to extract steps and files from GuidedSteps children.
+export const useGuidedStepsData = (props: GuidedStepsProps) => {
+  const { children } = props;
+  return useMemo(() => {
+    const steps = extractSteps(children);
+    const files = extractFiles(children);
+
+    const codeBlocks = files.flatMap(extractCodeBlocksFromFile);
+    // Ensure that each step has a corresponding code block.
+    steps.forEach((step) => {
+      const matchingCodeBlock = codeBlocks.find(
+        (codeBlock) => codeBlock.stepId === step.id
+      );
+      if (!matchingCodeBlock) {
+        throw new Error(
+          `GuidedSteps: No code block found for step with id "${step.id}". Please ensure that each step has a corresponding code block with a matching stepId.`
+        );
+      }
+    });
+    return { steps, files };
+  }, [children]);
+};
+
+export const useGuidedSteps = () => {
+  const { activeStepId, codeBlockRefs, stepRefs, setActiveStepId } =
+    useContext(GuidedStepsContext);
+
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const lastHighlightTime = useRef<number>(0);
+  const pendingHighlight = useRef<string | undefined>(undefined);
+  const ignoreIntersection = useRef<boolean>(false);
+
+  useLayoutEffect(() => {
+    const initializeObserver = () => {
+      const debounceDelay = 10;
+
+      const debounceHighlightedStep = (stepId: string) => {
+        if (ignoreIntersection.current) return;
+
+        const now = Date.now();
+        pendingHighlight.current = stepId;
+
+        if (now - lastHighlightTime.current > debounceDelay) {
+          highlightStep(stepId, true);
+          lastHighlightTime.current = now;
+          pendingHighlight.current = undefined;
+        } else {
+          setTimeout(() => {
+            if (pendingHighlight.current === stepId) {
+              highlightStep(stepId, true);
+              lastHighlightTime.current = Date.now();
+              pendingHighlight.current = undefined;
+            }
+          }, debounceDelay);
+        }
+      };
+
+      const navHeight =
+        parseInt(
+          document.documentElement.style.getPropertyValue("--ifm-navbar-height")
+        ) || 117;
+
+      const rootBottomMargin =
+        document.body.getBoundingClientRect().height - navHeight * 2;
+
+      const options = {
+        rootMargin: `-${navHeight + 16}px 0px -${rootBottomMargin}px 0px`,
+        threshold: Array.from({ length: 1000 }, (_, i) => i / 1000),
+      };
+
+      observerRef.current = new IntersectionObserver((entries) => {
+        if (ignoreIntersection.current) return;
+
+        const visibleEntries = entries.filter(
+          (entry) => entry.isIntersecting && entry.intersectionRatio > 0.3
+        );
+
+        if (visibleEntries.length > 0) {
+          const mostVisibleEntry = visibleEntries.reduce((max, entry) =>
+            entry.intersectionRatio > max.intersectionRatio ? entry : max
+          );
+
+          debounceHighlightedStep(mostVisibleEntry.target.id);
+        }
+      }, options);
+
+      stepRefs.current.forEach((step) => {
+        if (observerRef.current) {
+          observerRef.current.observe(step);
+        }
+      });
+    };
+
+    initializeObserver();
+
+    window.removeEventListener("resize", initializeObserver);
+    window.addEventListener("resize", initializeObserver);
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      window.removeEventListener("resize", initializeObserver);
+    };
+  }, []);
+
+  const highlightStep = useCallback(
+    (stepId: string, fromObserver = false) => {
+      if (stepId === activeStepId) return;
+      setActiveStepId(stepId);
+      codeBlockRefs.current.forEach((step) => step.deactivate());
+      codeBlockRefs.current.get(stepId)?.activate();
+
+      // Only set the ignore flag if this was triggered with a click
+      if (!fromObserver) {
+        ignoreIntersection.current = true;
+
+        setTimeout(() => {
+          ignoreIntersection.current = false;
+        }, 1000);
+      }
+    },
+    [activeStepId]
+  );
+};
diff --git a/src/components/GuidedSteps/index.ts b/src/components/GuidedSteps/index.ts
new file mode 100644
index 00000000..722cd272
--- /dev/null
+++ b/src/components/GuidedSteps/index.ts
@@ -0,0 +1 @@
+export { default } from "./GuidedSteps";
diff --git a/src/components/GuidedSteps/types.ts b/src/components/GuidedSteps/types.ts
new file mode 100644
index 00000000..561bf535
--- /dev/null
+++ b/src/components/GuidedSteps/types.ts
@@ -0,0 +1,49 @@
+import { ReactElement } from "react";
+import { IconName } from "../Icon";
+
+type Step = ReactElement<StepProps> | null | false | undefined;
+
+type File = ReactElement<FileProps> | null | false | undefined;
+
+interface GuidedStepsProps {
+  children?: React.ReactNode | Step | Step[] | File | File[];
+}
+
+interface CodeBlockProps {
+  stepId: string;
+  fileName?: string;
+  copyButtonActive?: boolean;
+  children: React.ReactNode;
+}
+
+interface StepProps {
+  id: string;
+  index: number;
+  children: React.ReactNode;
+}
+
+interface FileProps {
+  name: string;
+  icon?: IconName;
+  stepIds?: Array<string>;
+  children:
+    | React.ReactNode
+    | React.ReactElement<CodeBlockProps>
+    | React.ReactElement<CodeBlockProps>[];
+}
+
+interface CodeBlockHandle {
+  activate: () => void;
+  deactivate: () => void;
+  innerText: string;
+}
+
+export {
+  Step,
+  File,
+  GuidedStepsProps,
+  CodeBlockProps,
+  StepProps,
+  FileProps,
+  CodeBlockHandle,
+};
diff --git a/src/components/GuidedSteps/utils.tsx b/src/components/GuidedSteps/utils.tsx
new file mode 100644
index 00000000..4f7daee3
--- /dev/null
+++ b/src/components/GuidedSteps/utils.tsx
@@ -0,0 +1,174 @@
+import React, { Children, isValidElement, type ReactElement } from "react";
+import {
+  CodeBlockProps,
+  FileProps as File,
+  GuidedStepsProps,
+  StepProps,
+} from "./types";
+
+// Extract the instruction steps which are displayed on the left column.
+export const extractSteps = (children: GuidedStepsProps["children"]) => {
+  return (
+    (Children.toArray(children)
+      .filter((child) => child !== "/n")
+      .map((child) => {
+        if (!child || (isValidElement(child) && isStep(child))) {
+          return child;
+        }
+        return null;
+      })
+      ?.filter(Boolean) ?? []) as ReactElement<StepProps>[]
+  ).map(({ props: { id, index, children } }) => {
+    return {
+      id,
+      index,
+      children,
+    };
+  });
+};
+
+// Extract the code files which are displayed on the right column.
+export const extractFiles = (children: GuidedStepsProps["children"]) => {
+  return sanitizeRightColumnChildren(children).map(
+    ({ props: { name, icon, stepIds, children } }) => {
+      return {
+        name,
+        icon,
+        stepIds,
+        children,
+      };
+    }
+  );
+};
+
+// Extract the code blocks from a File component in order to map them to the instruction steps.
+export const extractCodeBlocksFromFile = (child: File) => {
+  return (
+    (Children.toArray(child.children)
+      .filter((child) => child !== "/n")
+      .map((child) => {
+        if (!child || (isValidElement(child) && isCodeBlock(child))) {
+          return child;
+        }
+        return null;
+      })
+      ?.filter(Boolean) ?? []) as ReactElement<CodeBlockProps>[]
+  ).map(({ props: { stepId, children } }) => {
+    return {
+      stepId,
+      children,
+    };
+  });
+};
+
+// Sanitize the children of the left column: File components are filtered out.
+export const sanitizeLeftColumnChildren = (
+  children: GuidedStepsProps["children"]
+) => {
+  let stepSectionIndex = 0;
+  let stepIndex = 0;
+  return (Children.toArray(children)
+    .map((child) => {
+      if (!child || (isValidElement(child) && !isFile(child))) {
+        // If it's a StepSection, add the index prop in order to number the sections
+        if (child && isValidElement(child) && isStepSection(child)) {
+          stepSectionIndex++;
+          return React.cloneElement(
+            child as ReactElement<{
+              index?: number;
+              children: React.ReactNode;
+            }>,
+            { index: stepSectionIndex }
+          );
+        }
+
+        // if it's a Step, add the index prop in order to keep track of the step refs
+        if (child && isValidElement(child) && isStep(child)) {
+          const indexedStep = React.cloneElement(
+            child as ReactElement<StepProps>,
+            {
+              index: stepIndex,
+            }
+          );
+          stepIndex++;
+          return indexedStep;
+        }
+        return child;
+      }
+    })
+    ?.filter(Boolean) ?? []) as ReactElement[];
+};
+
+// Sanitize the children of the right column: Only File components are kept.
+export const sanitizeRightColumnChildren = (
+  children: GuidedStepsProps["children"]
+) => {
+  return (Children.toArray(children)
+    .map((child) => {
+      if (child && isValidElement(child) && isFile(child)) {
+        const stepIds: Array<string> = [];
+        const codeBlocks = extractCodeBlocksFromFile(child.props);
+        codeBlocks.forEach(({ stepId }) => {
+          stepIds.push(stepId);
+        });
+        return React.cloneElement(
+          child as ReactElement<{
+            name: string;
+            icon?: string;
+            stepIds?: Array<string>;
+            children: React.ReactNode;
+          }>,
+          { stepIds }
+        );
+      }
+    })
+    ?.filter(Boolean) ?? []) as ReactElement[];
+};
+
+// Type guards to identify the different child components.
+
+const isStep = (
+  component: ReactElement<unknown>
+): component is ReactElement<StepProps> => {
+  const { props, type } = component;
+  return (
+    !!props &&
+    typeof props === "object" &&
+    "children" in props &&
+    "id" in props &&
+    (type as React.ComponentType<any>).displayName === "Step"
+  );
+};
+
+const isFile = (
+  component: ReactElement<unknown>
+): component is ReactElement<File> => {
+  const { props, type } = component;
+  return (
+    !!props &&
+    typeof props === "object" &&
+    "children" in props &&
+    "name" in props &&
+    (type as React.ComponentType<any>).displayName === "File"
+  );
+};
+
+const isStepSection = (
+  component: ReactElement<unknown>
+): component is ReactElement<{ index?: number; children: React.ReactNode }> => {
+  const { type } = component;
+  return (type as React.ComponentType<any>).displayName === "StepSection";
+};
+
+const isCodeBlock = (
+  component: ReactElement<unknown>
+): component is ReactElement<{ stepId: string; children: React.ReactNode }> => {
+  const { props, type } = component;
+  return (
+    !!props &&
+    typeof props === "object" &&
+    "children" in props &&
+    "stepId" in props &&
+    (type as React.ComponentType<any>).displayName === "CodeBlock"
+  );
+};
diff --git a/src/components/Icon/icons.ts b/src/components/Icon/icons.ts
index 2f17e2e9..cf271bee 100644
--- a/src/components/Icon/icons.ts
+++ b/src/components/Icon/icons.ts
@@ -72,6 +72,9 @@ export { default as bitbucket } from "./svg/bitbucket.svg";
 export { default as jenkins } from "./svg/jenkins.svg";
 export { default as githubActions } from "./svg/githubActions.svg";
 export { default as spacelift } from "./svg/spacelift.svg";
+export { default as link } from "./svg/link.svg";
+export { default as file } from "./svg/file.svg";
+export { default as terminal } from "./svg/terminal.svg";
 export { default as awsIdentity } from "./svg/awsIdentity.svg";
 export { default as googleCloud } from "./svg/googleCloud.svg";
 export { default as azure } from "./svg/azure.svg";
@@ -85,6 +88,9 @@ export { default as panther } from "./svg/panther.svg";
 export { default as youtube } from "./svg/youtube.svg";
 export { default as aws } from "./svg/aws.svg";
 export { default as terraform } from "./svg/terraform.svg";
+export { default as copy2 } from "./svg/copy2.svg";
+export { default as download2 } from "./svg/download2.svg";
+export { default as check2 } from "./svg/check2.svg";
 
 // Teleport svgs
 export { default as cluster } from "./teleport-svg/cluster.svg";
diff --git a/src/components/Icon/svg/check2.svg b/src/components/Icon/svg/check2.svg
new file mode 100644
index 00000000..986ca4ed
--- /dev/null
+++ b/src/components/Icon/svg/check2.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4571 5.29289C21.8476 5.68342 21.8476 6.31658 21.4571 6.70711L9.45711 18.7071C9.06658 19.0976 8.43342 19.0976 8.04289 18.7071L2.79289 13.4571C2.40237 13.0666 2.40237 12.4334 2.79289 12.0429C3.18342 11.6524 3.81658 11.6524 4.20711 12.0429L8.75 16.5858L20.0429 5.29289C20.4334 4.90237 21.0666 4.90237 21.4571 5.29289Z" fill="black"/>
+</svg>
diff --git a/src/components/Icon/svg/copy2.svg b/src/components/Icon/svg/copy2.svg
new file mode 100644
index 00000000..5fa87b6f
--- /dev/null
+++ b/src/components/Icon/svg/copy2.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2.5C4.72386 2.5 4.5 2.72386 4.5 3C4.5 3.27614 4.72386 3.5 5 3.5H13.5V12C13.5 12.2761 13.7239 12.5 14 12.5C14.2761 12.5 14.5 12.2761 14.5 12V3C14.5 2.72386 14.2761 2.5 14 2.5H5Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.5C2.72386 4.5 2.5 4.72386 2.5 5V14C2.5 14.2761 2.72386 14.5 3 14.5H12C12.2761 14.5 12.5 14.2761 12.5 14V5C12.5 4.72386 12.2761 4.5 12 4.5H3ZM3.5 13.5V5.5H11.5V13.5H3.5Z" fill="black"/>
+</svg>
diff --git a/src/components/Icon/svg/download2.svg b/src/components/Icon/svg/download2.svg
new file mode 100644
index 00000000..3c396697
--- /dev/null
+++ b/src/components/Icon/svg/download2.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3C12.4142 3 12.75 3.33579 12.75 3.75V12.4393L15.2197 9.96967C15.5126 9.67678 15.9874 9.67678 16.2803 9.96967C16.5732 10.2626 16.5732 10.7374 16.2803 11.0303L12.5303 14.7803C12.4584 14.8522 12.3755 14.9065 12.2871 14.9431C12.1987 14.9798 12.1017 15 12 15C11.8983 15 11.8013 14.9798 11.7129 14.9431C11.6245 14.9065 11.5416 14.8522 11.4697 14.7803L7.71967 11.0303C7.42678 10.7374 7.42678 10.2626 7.71967 9.96967C8.01256 9.67678 8.48744 9.67678 8.78033 9.96967L11.25 12.4393V3.75C11.25 3.33579 11.5858 3 12 3Z" fill="black"/>
+<path d="M3.75 13.5C4.16421 13.5 4.5 13.8358 4.5 14.25V19.5H19.5V14.25C19.5 13.8358 19.8358 13.5 20.25 13.5C20.6642 13.5 21 13.8358 21 14.25V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H4.5C4.10218 21 3.72065 20.842 3.43934 20.5607C3.15804 20.2794 3 19.8978 3 19.5V14.25C3 13.8358 3.33579 13.5 3.75 13.5Z" fill="black"/>
+</svg>
diff --git a/src/components/Icon/svg/file.svg b/src/components/Icon/svg/file.svg
new file mode 100644
index 00000000..ad653b24
--- /dev/null
+++ b/src/components/Icon/svg/file.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 10C8.27614 10 8.5 10.2239 8.5 10.5C8.5 10.7761 8.27614 11 8 11H6C5.72386 11 5.5 10.7761 5.5 10.5C5.5 10.2239 5.72386 10 6 10H8Z" fill="black"/>
+<path d="M10 8C10.2761 8 10.5 8.22386 10.5 8.5C10.5 8.77614 10.2761 9 10 9H6C5.72386 9 5.5 8.77614 5.5 8.5C5.5 8.22386 5.72386 8 6 8H10Z" fill="black"/>
+<path d="M10 6C10.2761 6 10.5 6.22386 10.5 6.5C10.5 6.77614 10.2761 7 10 7H6C5.72386 7 5.5 6.77614 5.5 6.5C5.5 6.22386 5.72386 6 6 6H10Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2.5C13.2652 2.5 13.5195 2.60543 13.707 2.79297C13.8946 2.98051 14 3.23478 14 3.5V10.2936C13.9999 10.431 13.9707 10.5651 13.9173 10.6888C13.915 10.6944 13.912 10.6996 13.9095 10.7051C13.8604 10.8133 13.7933 10.9136 13.7077 10.9993L10.4993 14.2077C10.4126 14.2943 10.311 14.3623 10.2012 14.4115C10.1979 14.4129 10.1947 14.4146 10.1914 14.416C10.0669 14.4702 9.93198 14.4999 9.79362 14.5H3C2.73478 14.5 2.48051 14.3946 2.29297 14.207C2.10543 14.0195 2 13.7652 2 13.5V3.5C2 3.23478 2.10543 2.9805 2.29297 2.79297C2.4805 2.60543 2.73478 2.5 3 2.5H13ZM3 13.5H9.5V10.4993C9.5 10.2232 9.72386 9.99935 10 9.99935H13V3.5H3V13.5ZM10.5 10.9993V12.793L12.2936 10.9993H10.5Z" fill="black"/>
+</svg>
diff --git a/src/components/Icon/svg/link.svg b/src/components/Icon/svg/link.svg
new file mode 100644
index 00000000..69690228
--- /dev/null
+++ b/src/components/Icon/svg/link.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1666 6.53078L13.0962 5.60116C13.8012 4.90865 14.7511 4.52237 15.7394 4.5264C16.7286 4.53043 17.6762 4.9252 18.3757 5.62472C19.0753 6.32424 19.47 7.27183 19.4741 8.2611C19.4781 9.24938 19.0918 10.1992 18.3993 10.9042L16.1411 13.1624C15.465 13.8389 14.5559 14.2314 13.5999 14.2598C12.6439 14.2881 11.7132 13.95 10.9981 13.3148C10.6885 13.0397 10.2144 13.0677 9.93933 13.3773C9.66422 13.687 9.69222 14.161 10.0019 14.4361C11.0029 15.3255 12.3059 15.7987 13.6443 15.7591C14.9827 15.7195 16.2554 15.1698 17.202 14.2228L19.4622 11.9627L19.4665 11.9583C20.4378 10.9711 20.9797 9.63996 20.974 8.25499C20.9684 6.87002 20.4157 5.54339 19.4364 4.56406C18.4571 3.58473 17.1304 3.03205 15.7455 3.02641C14.3605 3.02077 13.0294 3.56261 12.0421 4.53393L11.1059 5.47012C10.813 5.76302 10.813 6.23789 11.1059 6.53079C11.3988 6.82368 11.8737 6.82368 12.1666 6.53078Z" fill="black"/>
+<path d="M10.3997 9.74294C11.3558 9.7139 12.2867 10.0513 13.0022 10.686C13.3121 10.9609 13.7861 10.9325 14.061 10.6227C14.3359 10.3128 14.3075 9.8388 13.9977 9.56392C12.996 8.67527 11.6926 8.20297 10.3542 8.24363C9.01602 8.28429 7.74337 8.83521 6.79754 9.78267L4.53829 12.0372L4.53346 12.0421C3.56214 13.0294 3.02028 14.3605 3.02592 15.7454C3.03156 17.1304 3.58424 18.457 4.56357 19.4364C5.5429 20.4157 6.86953 20.9684 8.2545 20.974C9.63947 20.9796 10.9706 20.4378 11.9579 19.4665L12.894 18.5303C13.1869 18.2374 13.1869 17.7625 12.894 17.4696C12.6012 17.1767 12.1263 17.1767 11.8334 17.4696L10.9038 18.3993C10.1988 19.0918 9.2489 19.478 8.26061 19.474C7.27135 19.47 6.32375 19.0752 5.62423 18.3757C4.92471 17.6762 4.52994 16.7286 4.52591 15.7393C4.52189 14.7512 4.90806 13.8014 5.60041 13.0964L7.85927 10.8423C8.53491 10.1652 9.4437 9.77199 10.3997 9.74294Z" fill="black"/>
+</svg>
diff --git a/src/components/Icon/svg/terminal.svg b/src/components/Icon/svg/terminal.svg
new file mode 100644
index 00000000..c723832b
--- /dev/null
+++ b/src/components/Icon/svg/terminal.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 3C14.0523 3 14.5 3.44772 14.5 4V13C14.5 13.5523 14.0523 14 13.5 14H2.5C1.94772 14 1.5 13.5523 1.5 13V4C1.5 3.44772 1.94772 3 2.5 3H13.5ZM2.5 13H13.5V4H2.5V13ZM11 10C11.2761 10 11.5 10.2239 11.5 10.5C11.5 10.7761 11.2761 11 11 11H8.5C8.22386 11 8 10.7761 8 10.5C8 10.2239 8.22386 10 8.5 10H11ZM4.60938 6.1875C4.78187 5.97188 5.09687 5.93689 5.3125 6.10938L7.8125 8.10938C7.9311 8.20426 7.99999 8.34811 8 8.5C8 8.65189 7.93111 8.79574 7.8125 8.89062L5.3125 10.8906C5.09687 11.0631 4.78188 11.0281 4.60938 10.8125C4.43689 10.5969 4.47188 10.2819 4.6875 10.1094L6.69922 8.5L4.6875 6.89062C4.47189 6.71812 4.43688 6.40312 4.60938 6.1875Z" fill="white"/>
+</svg>
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 59f9185f..4bc839cf 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -21,15 +21,27 @@
   --color-tonal-neutral-0: rgba(0, 0, 0, 0.06);
   --color-tonal-neutral-1: rgba(0, 0, 0, 0.13);
   --color-tonal-neutral-2: rgba(0, 0, 0, 0.18);
+  --color-foreground-slightly-muted-white: rgba(255, 255, 255, 0.72);
+  --color-foreground-muted-white: rgba(255, 255, 255, 0.54);
+  --color-foreground-disabled-white: rgba(255, 255, 255, 0.36);
+  --color-foreground-tooltip-white: rgba(255, 255, 255, 0.8);
+  --color-tonal-neutral-0-white: rgba(255, 255, 255, 0.06);
+  --color-tonal-neutral-1-white: rgba(255, 255, 255, 0.13);
+  --color-tonal-neutral-2-white: rgba(255, 255, 255, 0.18);
   --color-tonal-primary-0: rgba(81, 47, 201, 0.1);
   --color-tonal-primary-1: rgba(81, 47, 201, 0.18);
   --color-tonal-primary-2: rgba(81, 47, 201, 0.25);
+  --color-interactive-tonal-neutral-dark-0: rgba(255, 255, 255, 0.07);
+
+  --color-interactive-primary: #9f85ff;
   --color-background-depth-2: #fbfbfc;
+  --color-data-purple-tertiary: #B9A6FF;
+  --color-data-caribbean-tertiary: #2effd5;
 
   --color-warning: #ffb400;
   --color-danger: #f80061;
   --color-text: #263238;
-  --color-code: #01172c;
+  --color-code: #0e1435;
   --color-tip: #00c7ae;
   --color-note: #009cf1;
 
@@ -54,6 +66,7 @@
 
   /* font weights */
   --fw-regular: 400;
+  --fw-medium: 500;
   --fw-bold: 700;
   --fw-black: 900;
 
diff --git a/src/theme/MDXComponents/index.tsx b/src/theme/MDXComponents/index.tsx
index 71c74de8..f8583a16 100644
--- a/src/theme/MDXComponents/index.tsx
+++ b/src/theme/MDXComponents/index.tsx
@@ -22,6 +22,11 @@ import Icon from "/src/components/Icon";
 import Tile from "/src/components/Tile";
 import TileGrid from "/src/components/TileGrid";
 import ThumbsFeedback from "/src/components/ThumbsFeedback";
+import GuidedSteps from "/src/components/GuidedSteps";
+import Step from "/src/components/GuidedSteps/Step";
+import StepSection from "/src/components/GuidedSteps/StepSection";
+import File from "/src/components/GuidedSteps/File";
+import CodeBlock from "/src/components/GuidedSteps/CodeBlock";
 
 const MDXComponents: MDXComponentsObject = {
   ...OriginalMDXComponents,
@@ -55,6 +60,11 @@ const MDXComponents: MDXComponentsObject = {
   ul: MDXUl,
   Var: (props) => <Var {...props} />, // needed to circumvent props mismatch in types
   ThumbsFeedback,
+  GuidedSteps,
+  Step,
+  File,
+  StepSection,
+  CodeBlock,
 };
 
 export default MDXComponents;