diff --git a/src/components/sections/compensation-calculator/CompensationCalculator.tsx b/src/components/sections/compensation-calculator/CompensationCalculator.tsx
index d8e89ea8f..7bcb8a635 100644
--- a/src/components/sections/compensation-calculator/CompensationCalculator.tsx
+++ b/src/components/sections/compensation-calculator/CompensationCalculator.tsx
@@ -5,7 +5,9 @@ import LinkButton from "src/components/linkButton/LinkButton";
 import Text from "src/components/text/Text";
 import { cnIf } from "src/utils/css";
 import { getHref } from "src/utils/link";
+import { ILink } from "studio/lib/interfaces/navigation";
 import { CompensationCalculatorSection } from "studio/lib/interfaces/pages";
+import { CompensationCalculatorBackground } from "studio/schemas/objects/sections/compensation-calculator";
 
 import {
   getHandbookLinksFromCompensationPage,
@@ -27,16 +29,10 @@ export default async function CompensationCalculator({
   const salariesRes = getLatestSalaries();
   const localeRes = getLocale();
 
-  const handbookLinksRes = await getHandbookLinksFromCompensationPage(language);
-
   const calculatorBgClassname = cnIf({
     [styles.calculator]: true,
     [styles["calculator--violet"]]: section.background === "violet",
   });
-  const handbookBgClassname = cnIf({
-    [styles.handbook]: true,
-    [styles["handbook--violet"]]: section.background === "violet",
-  });
 
   const radioBackground = section.background === "violet" ? "light" : "dark";
 
@@ -72,37 +68,66 @@ export default async function CompensationCalculator({
             </div>
           )}
         </div>
-        <div className={handbookBgClassname}>
-          <Text type="h3">{section.handbookBlock.handbookTitle}</Text>
-          <Text type="bodyBig" className={styles.lightFont}>
-            {section.handbookBlock.handbookDescription}
-          </Text>
+        <Handbook
+          title={section.handbookBlock.handbookTitle}
+          description={section.handbookBlock.handbookDescription}
+          language={language}
+          link={section.handbookBlock.handbookLink}
+          sectionBackground={section.background}
+        />
+      </div>
+    </div>
+  );
+}
 
-          {handbookLinksRes.ok && (
-            <ul className={styles.handbookLinks}>
-              {handbookLinksRes.value.map((link) => (
-                <li key={link._key}>
-                  <Link className={styles.handbookLink} href={getHref(link)}>
-                    {link.linkTitle}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          )}
+export async function Handbook({
+  title,
+  description,
+  language,
+  link,
+  sectionBackground,
+}: {
+  title: string;
+  description: string;
+  language: string;
+  link: ILink;
+  sectionBackground: CompensationCalculatorBackground;
+}) {
+  const handbookLinksRes = await getHandbookLinksFromCompensationPage(language);
 
-          {section.handbookBlock.handbookLink?.linkTitle && (
-            <div className={styles.handbookBottomLink}>
-              <LinkButton
-                type="secondary"
-                background={
-                  section.background === "violet" ? "dark" : undefined
-                }
-                link={section.handbookBlock.handbookLink}
-              />
-            </div>
-          )}
+  const handbookBgClassname = cnIf({
+    [styles.handbook]: true,
+    [styles["handbook--violet"]]: sectionBackground === "violet",
+  });
+
+  return (
+    <div className={handbookBgClassname}>
+      <Text type="h3">{title}</Text>
+      <Text type="bodyBig" className={styles.lightFont}>
+        {description}
+      </Text>
+
+      {handbookLinksRes.ok && (
+        <ul className={styles.handbookLinks}>
+          {handbookLinksRes.value.map((link) => (
+            <li key={link._key}>
+              <Link className={styles.handbookLink} href={getHref(link)}>
+                {link.linkTitle}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {link?.linkTitle && (
+        <div className={styles.handbookBottomLink}>
+          <LinkButton
+            type="secondary"
+            background={sectionBackground === "violet" ? "dark" : undefined}
+            link={link}
+          />
         </div>
-      </div>
+      )}
     </div>
   );
 }